Patatap Clone

Patatap is a portable animation and sound kit. With the touch of a finger, you can create melodies charged with moving shapes.

This project is a clone of the original Patatap Website. The project uses circles of random sizes and an assigned sound to indicate the press of each alphabet key. These circles continuously decrease in size with a changing color hue until they eventually disappear. The position of these circles is randomly generated every time a key is pressed.

Tech Stack

• Paper.js
• Howler.js

Paper.js is used to create the circles whereas Howler.js is used to play the assigned sound for each key.

Implementation

A circles array is generated in the beginning. Every time a key is pressed, a new circle is created at a random point and pushed to the array. The array is used to keep track of all the circles present on the screen at any given time, so as to decrease their size to 0.9 * original and increment the hue by a value of 1.

function onFrame(event) {
	for(var i = 0; i < circles.length; i++) {
		circles[i].fillColor.hue += 1;
		circles[i].scale(.9);
		if(circles[i].area < 1){
		    circles[i].remove(); // remove the circle from the canvas
		    circles.splice(i, 1); // remove the circle from the array
		    console.log(circles);
		}
	}
}

Once the size becomes less than 1, the circle is removed from the array.

Demo