At First, I wanted to create something different, loaded with animations. Experimentation led to the conclusion that, too much of animation overload resulted in me not being able to express myself to the truest. I wanted to add the ‘Mark 2 ‘ Helmet from Iron Man – wrapping around my face. However, as a fanboy of Michael Phelps, and an aspiring swimmer, I decided to make a portray of myself, swimming. At least, pretending to.
The portrait made, upon mouse click changes the shade of the googles achieved using the following code :
let r ; let g ; let b; //global scope function draw () { fill(r,g,b); ellipse(200, 210, 40, 30); fill(r,g,b); ellipse(300, 210, 40, 30); } function mousePressed() { r = random (255); g = random (255); b = random (255); }
The code also includes animated air-bubbles being exhaled by me, giving the effect of exhaling underwater. The following code does so:
let bubble_pos; function setup() { createCanvas(500, 390); bubble_pos = 0; } function draw () { fill (255,255,255); circle (223,302 - bubble_pos,20); bubble_pos = bubble_pos+8; if (bubble_pos >= 290) { bubble_pos = 0; } } }
The logic statement resets the bubble’s position on Y-axis, as it is about to reach the surface.
Figuring out how to make the air_bubbles float upwards and then reset them, as demonstrated above is something I managed to accomplish after a little trial and error, which makes me proud.
However, depending on the water pressure, in the future, I would like to change the size of the Bubbles, as they reach for the surface, increasing in size.
I made use of the following code to help me out with determining the placement, and coordinate position.
print(mouseX + "," + mouseY);
Here is the complete code:
let r; let g; let b; let bubble_pos; function setup() { createCanvas(500, 390); bubble_pos = 0; } function draw() { background(102,178,256); strokeWeight(1); rect(224,366,50,20); fill(210, 180, 140); noStroke(); ellipse(250, 250, 195, 250); fill(204, 229, 255); arc(250, 175, 180, 160, PI, TWO_PI); // PI is 180 and TWO_PI makes it 360, for start and stop initially. rect(160, 174, 180, 20); line(170,168,330,168); fill(0); textSize(18); textAlign(CENTER, CENTER); text("NYUAD", 250,125 ); fill(0); ellipse(200, 210, 15, 10); ellipse(300, 210, 15, 10); stroke(0); strokeWeight(4); line(250, 230, 245, 270); line(245,270,258,265) stroke(0); strokeWeight(2); fill(220, 85, 85); arc(250, 250 + 50, 60, 20, 0, PI, CHORD); noFill(); stroke(0); strokeWeight(4); fill(r,g,b); ellipse(200, 210, 40, 30); fill(r,g,b); ellipse(300, 210, 40, 30); line(220, 210, 280, 210); line(180,209,158,199); line(320,211,342,195); fill(210, 180, 140); noStroke(); ellipse(148, 250, 10, 80); ellipse(352, 250, 10, 80); stroke(0); strokeWeight(4); line(190, 160, 250 - 20, 160); line(310, 160, 250 + 20, 160); strokeWeight(2) line(170,170,330,170); print(mouseX + "," + mouseY); fill (255,255,255); circle (223,302 - bubble_pos,20); bubble_pos = bubble_pos+8; if (bubble_pos >= 290) { bubble_pos = 0; } } function mousePressed() { r = random (255); g = random (255); b = random (255); }