Over my Christmas break, I wanted to learn to make generative sound pieces and use the visual – not as a replacement for the audio piece but to communicate audio to audiences in a more accessible way. I looked a few different coding languages and eventually stumbled upon P5js. I began with the code:
“function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}“
which was used to create a blank grey canvas as shown below:
I learned that the functions are what define the initial setup, flow, and order of operations. After learning how to make a canvas and the use of functions, I tried to draw a circle.
“function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(50,50,80,80);
}“
the added lines draw an ellipse, with its center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels.
I then began experimenting with the values in the brackets to see what happens.
“function setup() {
createCanvas(400, 400);
}
function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}”
This program creates a canvas that is 400 pixels wide and 400 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black – as can be seen with the if “mouseispressed” and “fill”. The mouse x and mouse y allow the circle to track the location of the mouse.