Singing Swan Tutorial-using p5.js Bezier curve and Sound .

Create a new project using p5.js Web Editor. Functions are piece of code which take some input, process it and return an output. A new project in the p5js Web Editor has following two functions. The setup() function runs only once and draw() function runs in a loop. In setup() function a canvas of 400 pixels width and 400 pixels height is created. Canvas is an element in the browser window where we are going to draw our shapes.We will be using both functions.

We will start by making the swan by using bezier curves.These curves have anchor and control points.The bezier function takes four sets of parameters .First and last sets of x-axis and y-axis are anchor points, while the middle two sets are control points , responsible for the shaping smooth curves .

But how to find the coordinates on the canvas?. The trick is to make them appear as text using text() .The text function takes three parameters for example : text(mouseX , x-axis , y-axis) .In this the case , mouseX value we want to trace ,while the x and y axis is the position of the text on the canvas. As we move around the mouse these values can be seen changing , identifying the position of the mouse.

Let’s start by making the first bezier curve .

The second curve will start from the same point as the end set of the first curve.

In the same way ,build the rest of the body of the swan.You can try making some more tail feathers.

Add ,the lower curve of the body of the swan.

Now, the neck part of the swan using the same method.

Finally, the head of the swan,by attaching the first curves starting anchor point.

Our swan body looks quiet good, let’s start creating the upper part of the beak first.Then the lower part of the beak using again bezier curve.

Let’s make a simple eye using ellipse function.Give different fill() to outer and inner parts of the eye. Your swan is now complete .Congratulations!!!.

Now , the fun part of adding p5.js audio detection.First , make the two variables one for microphone ‘mic’ and the other for volume ‘vol’.Then in the function setup use the variable mic to initiate AudioIn() and start the audio detection through mic.start().

Next in the function draw , use the variable vol to enable the microphone to detect the level of sound.

Finally, add the variable vol in the y-axis of the middle two control sets. Subtracting the vol from the y-axis value , make the beak move up, while adding the vol into y-axis value will make the lower part of the beak to move down.Run your code.

The p5.js sound will ask for permission for microphone use.Try out ,by talking into the microphone .There you have it , your very own talking and singing swan.

You can check the solution code here. Happy Coding!!

Resources:

1-p5.js Reference -Examples and explanation given on p5.js website.

2-Getting Started with p5.js- A book about programming for in p5.js.