![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
//Yoon Young Kim
//Section E
//yoonyouk@andrew.cmu.edu
//Project-03
function setup() {
createCanvas(640, 480);
background(256);
}
function draw() {
angleMode(DEGREES);
var a = mouseX
var b = mouseY
//underwater background change
//This will change the color values as the mouse moves down
//Water will change into a darker blue
var Rx = map(b,0,height,116,20);
var Gx = map(b,0,height,188,21);
var Bx = map(b,0,height,252,138);
noStroke();
fill(Rx, Gx, Bx);
rect(0, 0, 640, 480);
//SCUBA DIVER
// The tiny figure will follow the mouse
//head
noStroke();
fill(13, 0, 69);
ellipseMode(CENTER);
ellipse(a, b+10, 40, 40);
//eyes
stroke(247, 209, 9);
strokeWeight(3);
fill(224, 162, 115);
rect(a-15, b+5, 30, 15);
//eyeballs
noStroke();
fill(0);
ellipse(a-5, b+15, 5, 5);
ellipse(a+5, b+15, 5, 5);
//body
noStroke();
fill(13, 0 , 69);
rect(a-20, b+25, 40, 60);
//SCUBA DIVER ARMS/LEGS
//left hand
//left hands moves from 80 below the mouse to 5 above the mouse
var lefthand = map(b, 0, height, b+80, b-5);
stroke(13, 0, 69);
strokeWeight(5);
line(a-15, b+40, a-50, lefthand);
//moving the right hand
//right hands moves from 80 below the mouse to 5 above the mous
var righthand = map(b, 0, height, b+80, b-5);
stroke(13, 0, 69);
strokeWeight(5);
line(a+15, b+40, a+50, righthand);
//left leg
//moving left foot in a rotating manner using mapping
var leftfootX = map(b, 0, height, a-15, a-70);
var leftfootY = map(b, 0, height, b+140, b+60);
stroke(13, 0, 69);
strokeWeight(5);
line(a-15, b+80, leftfootX, leftfootY);
//right leg
//moving right foot in a rotating manner using mapping
var rightfootX = map(b, 0, height, a+15, a+70);
var rightfootY = map(b, 0, height, b+140, b+60);
stroke(13, 0, 69);
strokeWeight(5);
line(a+15, b+80, rightfootX, rightfootY);
//SMILE
noFill();
if (b < 100){
stroke(247, 72, 79);
strokeWeight(2);
arc(a, b+20, 5, 5, 0, 180);
}
if (b >= 100 & b < 300){
stroke(247, 72, 79);
strokeWeight(2);
ellipse(a, b+20, 5, 5);
}
if (b >= 300 & b <= 480){
stroke(247, 72, 79);
strokeWeight(2);
arc(a, b+20, 5, 5, 180, 360);
}
//BUBBLES
//bubble1
//bubble location
var bubbleX = a+40;
var bubbleY = b-20;
//expanding the bubble sizes as the mouse moves up and down
var bubbleSize = map(b, 0, height, 2,25);
noStroke();
fill(160, 222, 255);
ellipse(bubbleX, bubbleY, bubbleSize, bubbleSize);
//bubble2
var bubbleX = a+60;
var bubbleY = b-50;
var bubbleSize = map(b,0,height,4, 40);
noStroke();
fill(160, 222, 255);
ellipse(bubbleX, bubbleY, bubbleSize, bubbleSize);
}
I wanted to create a small animated cartoon drawing for this assignment and thought a scuba diver as the subject would be appropriate. Because scuba divers swim in deep depths, I explored changing the image elements dependent on the mouse moving up or down, mouseY. This project allowed me to explore change in color, size, and position of the different components to complete a cohesive dynamic drawing.
