For assignment three I chose to create an interactive scene. I used the loop within a loop function to create the patterned background made out of ellipses. I would like to remove this though. I plan to change it to an image that moves/scrolls across the background. This would hopefully make it look like the fish were actually in water. In addition to this, I used the mouse press function to allow the bubbles to be "popped". I would like to find a better way to achieve this effect. Lastly, I used pmouseX and pmouseY to create the drawing effect on the background. My intention in including this was to make the mouse movement look like it was creating bubbles. I would like to find a way to prevent it from drawing and rather create a trail of ellipses that fade fairly quickly. To add to the project, I would like to make the fins of the fish move slightly to make it look like they are actually swimming.
Code:
function setup() {
createCanvas(1280, 720);
background(199, 229, 237);
}
function draw() {
noStroke();
for (let y = 0; y<= height; y +=40)
{
for (let x = 0; x<= width; x +=40)
{
fill(190, 225, 250);
ellipse(x, y, 40, 40);
}
}
//*tail
fill(249, 204, 225)
triangle(200, 200, 200, 400, 400, 300)
fill(250, 190, 195)
triangle(640,500, 640, 600, 740, 550);
//*top fin
fill(250, 190, 195)
triangle (400, 60, 400, 250, 550, 300);
fill(249, 204, 225)
triangle (800, 400, 870, 550, 800, 600);
//*bottom fin
fill(250, 190, 195)
triangle (400, 420, 400, 550, 550, 300);
fill(249, 204, 225)
triangle(800, 700, 870, 550, 800, 500);
//* body
fill(250, 250, 169)
triangle(300, 100, 300, 500, 600, 300);
fill(250, 244, 190)
triangle(700, 400, 700, 700, 900, 550);
//*body shapes
fill(249, 204, 225);
triangle(350, 250, 350, 350, 400, 300);
fill(250, 190, 195);
triangle(730, 530, 730, 580, 760, 560);
fill(255);
ellipse(500, 300, 50, 50);
fill(190,203,250);
ellipse(500, 300, 25, 25);
fill(255);
ellipse(830, 550, 50, 50);
fill(190,203,250);
ellipse(830, 550, 25, 25);
//*bubbles
fill(255)
if(mouseIsPressed == true)
{
fill(190, 225, 250);
}
ellipse(600, 50, 30, 30)
ellipse(650, 120, 30, 30)
ellipse(590, 200, 30, 30)
if(mouseIsPressed == true)
{
fill(190, 225, 250);
}
ellipse(900, 300, 30, 30)
ellipse(950, 350, 30, 30)
ellipse(890, 430, 30, 30)
stroke(255, 90);
strokeWeight(10);
line(mouseX, mouseY, pmouseX, pmouseY);
}
Comentarios