function setup() {
createCanvas(640, 480);
noStroke();
}
function draw() {
background(random(mouseX, mouseY));
fill(random(355,300,150));
var colorR = (mouseX, mouseY);
var colorB = (mouseX, mouseY);
var colorG = (random, mouseY);
//background color changes as mouse moves right
if (mouseX < 0){
background(0);
}
if (mouseX > 0){
background(0);
}
if (mouseX > 100){
background(colorG, 270, 37);
}
if (mouseX > 300){
background(250, 150, colorB);
}
var moveX = random(0, mouseX/5);
var moveY = random(0, mouseY/5);
var shakeX = (0, mouseX/7);
//vibrates from 0 to 530 and above when mouse moves right
if (mouseX > 0){
var moveX=0;
}
if (mouseX > 0){
var moveY=0
}
if (mouseX > 0){
var shakeX = 0
}
if (mouseX > 15){
var shakeX = (0, mouseX/100);
}
if (mouseX > 70){
var moveX = random(0, mouseX/30);
}
if (mouseX > 250){
var moveX = random(0, mouseX/15);
}
if (mouseX > 400){
var moveX = random(0, mouseX/5);
}
if (mouseX > 530){
var moveX = random(0, mouseX/2);
}
//increases and shakes bubbles when mouse move right
fill(211, 242, 255);
if (mouseX > 300)
ellipse(10+ moveX, 150 + moveY, 110 + moveX, 110 + moveY); //light blue
fill(281, colorG, 255);
if (mouseX > 200)
ellipse (80 + moveX, 235 + moveY, 130 + moveX, 130 + moveY);
fill(129, 255, 104);
if (mouseX > 350)
ellipse(270 + moveX, 320 + moveY, 90 + moveX, 90 + moveY); //green
fill(57, 189, 232);
if (mouseX > 300)
ellipse(380 + moveX, 250 + moveY, 65 + moveX, 65 + moveY); //blue
fill(57, 232, 179);
if (mouseX > 350)
ellipse( 420 + moveX, 70 + moveY, 150 + moveX, 150 + moveY); //dark green
fill(255, 142, 210);
if (mouseX > 450)
ellipse( 475 + moveX, 320 + moveY, 100 + moveX, 100 + moveY); //pink
fill(81, 238, 255);
if (mouseX > 450)
ellipse(65 + moveX, 75 + moveY, 150 + moveX, 150 + moveY);
fill(255, 251, 98);
if (mouseX > 550)
ellipse( 530 + moveX, 180 + moveY, 130 + moveX, 130 + moveY);
//duck facial features shake when mouse moves right
stroke(0);
strokeWeight(2);
fill(255);
// hair
ellipse(305 + shakeX, 355 + moveY, 12 + moveX, 25 + moveY)
fill(255);
ellipse(295 + shakeX, 355 + moveY, 12 + moveX, 30 + moveY)
//face
fill(255);
ellipse(300 + shakeX, 460 + moveY, 270 + moveY, 190 + moveX);
// beak
fill(255, 184, 56);
ellipse(297 + shakeX, 460 + moveY, 90 + moveX, 30 + moveY);
// eyes
fill(0);
ellipse(350 + shakeX, 435 + moveY, 20 + moveX, 18 + moveY);
fill(0);
ellipse(240 + shakeX, 435 + moveY, 20 + moveX, 18 + moveY);
//pupils
fill(255);
ellipse(350 + shakeX, 434 + moveY, 15 + moveX, 13 + moveY)
ellipse(240 + shakeX, 434 + moveY, 15 + moveX, 13 + moveY);
//mouth line
stroke(0);
strokeWeight(2);
line(320 + shakeX, 460 + moveY, 253 + moveX, 460 + moveY);
//number of text increases and shakes when mouse moves right
fill('red');
stroke(237,206,229);
strokeWeight(2);
if (mouseX > 50) {
textFont('Helvetica');
textSize(47);
text('HUNGRY?', 100 + moveX, 150 + moveY);
if (mouseX > 100)
text('HUNGRY?', 360 + moveX, 100 + moveY); //dark green
if (mouseX > 200)
text('HUNGRY?', 190 + moveX, 325 + moveY);
if (mouseX > 300)
text('HUNGRY?', 400 + moveX, 340 + moveY);
if (mouseX > 300)
text('HUNGRY?', 20 + moveX, 250 + moveY); //light pink
if (mouseX > 400)
text('HUNGRY?', 310 + moveX, 250 + moveY);
if (mouseX > 500)
text('HUNGRY?', 10 + moveX, 80 + moveY);
}
}
This project was very interesting in ways where I was able to create more of a story by having objects change and be put into motion by moving the mouse. I wanted to express a feeling of hunger through the image. It was a difficult and challenging process to have the image move back and forth with the mouse, but also to have them vibrate to express hunger and more of an emotion.