Screen shot of my interactive p5.js drawing

Homework Week 2 – ICM

This week’s homework had me spending hours and hours fiddling around in p5.js to create a drawing that contained 1) an element controlled by the mouse, 2) an element that changes over time, and 3) an element that is different every time the sketch is run. 

Failed attempt at using mouseX with alpha property.
Failed attempt at using mouseX with alpha property.

For my concept, I decided that I wanted to create a fireworks and laser light show display, with the upper part of the drawing representing the sky which would change colors and contain moving shapes to represent the glow of the fireworks and the laser designs of the show (speaking to the second criterion, an element that changes over time.) To satisfy the third component of the drawing (that changes whenever the sketch is run), I had a family of three on the lawn watching the show. Their position as a group and their color, along with the color of the lawn, change as they are basked in different lights from the show and move around to get better views. Finally, for the element controlled by the mouse and you, the pyrotechnics technician: when you click on the night sky, you help determine where the specialty fireworks detonate.

My poor attempt at coding alpha using the random function
My poor attempt at coding alpha using the random function.
My attempt at coding alpha using the random function, done correctly
My attempt at coding alpha using the random function, done correctly!

 

 

 

 

 

I had a number of areas where I got stuck. For example, I wasn’t able to get the alpha to change with the mouseY position for the fireworks. Also, I tired to put a tiny star up in the corner of the sky, but then that would deactivate my code for the fireworks. Another area where I had trouble was with trying to get the color of the spectators to match the sky, but with them being drawn in separate sections, I realized that wasn’t likely a possibility.

Elements from the draw section remain on element from the setup section
Elements from the draw section remain on element from the setup section, as evidenced in this image.

One thing I realized was that if my fireworks and laser light show (in the “draw” section) crossed over to the lawn area (from the “setup” section) the overlapping parts would remain permanent, since the lawn is only drawn once; so, I had to reconfigure the positions of those elements to not dip below the horizon where the sky meets the lawn. Also, in my attempt to keep from giving anyone a seizure from the lightning-fast changing of the background at the default of 60fps, I set the frame rate() to 5. This meant that a couple of friends I showed this to asked me if they had to double-click to see the “fireworks.” When I realized that the lower frame rate was causing other aspects of my project to suffer to experience performance issues, I adjusted the frame rate back up to 7fps. I was also stuck initially trying to figure out how to get the alpha of the night sky to change using the random function. Eventually, through tutorials and trial and error I was able to figure it out.

In the end, I’m happy with my drawing. I feel like I spent way more time than what was intended, but feel from the experience I have a better grasp of the different elements used in the sketch.

let posX=0;
let posY=0;
function setup() {
createCanvas(450, 450);

//random colors setup
let r = random(255);
let g = random(255);
let b = random(255);


//frame rate
frameRate(7);


//the lawn
fill(r*2, g*2, b*2);
noStroke();
rect(0, height/1.5,width,height/3);

//random location
let x = random(0+((width/9)+4*(width/100)),width-((2*(width/9)+3*(width/100))));
let y = random(height/1.5+(4*(height/100)),height-(height/7+(4*(height/100))));

//center "parent" spectator
fill(r, g, b);
stroke(r*0.8, g*0.8, b*0.8);
strokeWeight(height/100);
rect(x, y, width/9, height/7, width/20, width/20,width/20,width/20);

//left "child" spectator
fill(r, g, b);
stroke(r*0.8, g*0.8, b*0.8);
strokeWeight(height/100);
rect(x+(height/9 + 2*(height/100)), y, width/9, height/7, width/20, width/20,width/20,width/20);

//right "child" spectator
fill(r, g, b);
stroke(r*0.8, g*0.8, b*0.8);
strokeWeight(height/100);
rect((x-(height/9)- 2*(height/100)), y, width/9, height/7, width/20, width/20,width/20,width/20);

}

function draw() {

//for random alpha setting
let ran = random(1,255);

//night sky

let r2 = random(255);
let g2 = random(255);
let b2 = random(255);
noStroke();
fill(r2, g2, b2, ran);
rect(0, 0, width, height/1.5);

/*cool gold star <--unused as it deactivated the "fireworks"
translate(width-(width/8),0+(height/8));
noStroke();
fill('gold');
for (let i = 0; i < 10; i ++) {
ellipse(0, width/40, width/60, width/15);
rotate(PI/5);
}*/

// fireworks section
if (mouseIsPressed) {
if(mouseY<height/1.71){

fill((mouseY/2)*1.2, g2*1.2, b2*1.2);

beginShape();

vertex(mouseX-10, mouseY+10);
vertex(mouseX+0, mouseY+35);
vertex(mouseX+10, mouseY+10);
vertex(mouseX+35, mouseY);
vertex(mouseX+10, mouseY-8);
vertex(mouseX+0, mouseY-35);
vertex(mouseX-10, mouseY-8);
vertex(mouseX-35, mouseY);
endShape();

fill((mouseY/2)*0.8, g2*0.8, b2*0.8);
noStroke();

beginShape();
vertex(mouseX-5, mouseY+15);
vertex(mouseX+5, mouseY+40);
vertex(mouseX+15, mouseY+15);
vertex(mouseX+40, mouseY+5);
vertex(mouseX+15, mouseY-3);
vertex(mouseX+5, mouseY-30);
vertex(mouseX-5, mouseY-3);
vertex(mouseX-30, mouseY+5);
endShape();
}

}

//laser light show
noFill();
stroke(r2*1.2,g2*1.2,b2*1.2);
strokeWeight(sin(frameCount)*4+1.5);
rect(
width/2+sin(posX)*100,
(height/3)+sin(posY)*100-(height/30),
50,50);
posX += frameCount/100 + 0.05;
posY += frameCount/100 - 0.05;

noFill();
stroke(r2*1.2,g2*1.2,b2*1.2);
strokeWeight(sin(frameCount/2)*4+1.5);
circle(
width/2+sin(posX)*-100,
(height/3)+sin(posY)*100-(height/30),
50);
}

Related Posts