Move the cursor vertically

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-03
var bgr = 221;
var bgb = 212;
var bgg = 197;
var shW = 122; //shoulder width
var shH = 110; //shoulder height
var shX = 261; // x axis of shoulder
var shY = 313; // y axis of shoulder 
var lfteyeX1 = 297.91;
var lfteyeY1 = 254.05;
var lfteyeX2 = 316.61;
var lfteyeY2 = 254.05;
var rgteyeX1 = 326.4;
var rgteyeY1 = 254.05;
var rgteyeX2 = 345.1;
var rgteyeY2 = 254.05;

function setup (){
	createCanvas(640,480);
}

function draw(){
var my = 300 + mouseY*0.02 ; // shoulders' position change when cursor moves vertically 
var mthW = 4 + -mouseY * 0.05; // mouth width changes when cursor moves vertically
var haloSize = mouseY * .8; // size of the halo increases as the cursor moves down 
var transparencyL = mouseY * 0.3; // to make lines (and arcs) appear as the cursor moves down
var transparencyH = mouseY * 0.7; // to make the halo appear as the cursor moves down 
var relaxX = mouseY * 1.2; // to make text 'relax' moves horizontally
var transparencyT = mouseY * 0.5; //changes transpareny for the text 
var circleSizea = mouseY * .85; // the radius of the arcs changes as they rotate 
var circleSizeb = mouseY * .95;
var circleSizec = mouseY * 1.05;
var circleSized = mouseY * 1.15;
var circleSizee = mouseY * 1.25;
var circAngle = mouseY *1; // angle of which the circles in the background rotate

	background(bgr,bgb,bgg); // background color turns to white 
	if (mouseY > 0  & mouseY < height) {
	bgr = 221 + mouseY/10
	bgb = 212 + mouseY/8
	bgg = 197 +  mouseY/5
}
	//lines around the halo 
	stroke(242,187,161, transparencyL)
	strokeWeight(4);
	push();
	translate(320,240);
	rotate(mouseY/150);
	line(0,0,0,-180);
	line(0,0,86,-166);
	line(0,0,160,-100);
	line(0,0,180,0);
	line(0,0,160,100);
	line(0,0,86,166);
	line(0,0,0,180);
	line(0,0,-86,166);
	line(0,0,-160,100);
	line(0,0,-188,0);
	line(0,0,-160,-100);
	line(0,0,-86,-166);
	pop();

	//halo 
	noStroke();
	ellipseMode(CENTER);
	fill(242,187,161,transparencyH);
	ellipse (320,240,haloSize,haloSize);

	// arcs (or circles ) around the halo 
	push();
	noFill();
	stroke(242,187,161, transparencyL);
	translate(320,240);
	rotate(radians(circAngle));
	arc(0,0,circleSizea,circleSizea,PI,PI/2);
	arc(0,0,circleSizeb,circleSizeb,PI/2,TWO_PI);
	arc(0,0,circleSizec,circleSizec,TWO_PI,PI-QUARTER_PI);
	arc(0,0,circleSized,circleSized,PI-QUARTER_PI,PI);
	arc(0,0,circleSizee,circleSizee,PI,PI/2);
	pop();


	//text
	fill(255);
	textSize(50);
	textFont('impact');
	text('Relax',relaxX,100);


	//water on the floor
	fill(203,224,224);
	ellipse(320,440,530,70);
	noFill();

	//wave thingy 
	stroke(255); 
	strokeWeight(2);
	arc(320,435,320,20,PI,0);
	arc(312,438,445,52,PI, 0);
	arc(320,445,390,40, 0,PI);


	//bath tub legs 
	noStroke(); 
	fill(181);
	ellipse(176,420,15,58);
	ellipse(457,420,15,58);

	//neck
	fill(236,118,118);
	rect(311.481,282.847,20,34);

	//towel 
	fill(215,237,217);
	rect(275.37,212.36,90,60,50);

	//face
	fill(255,129,129);
	ellipse(321.06,261.31,65,75);

	//shoulder
	fill(255,129,129);
	rect(shX,my,shW,shH,20);

	// eyes
	stroke(90,129,129);
	strokeWeight(2) ;
	line(lfteyeX1, lfteyeY1,lfteyeX2,lfteyeY2);
	line(rgteyeX1,rgteyeY1,rgteyeX2,rgteyeY2);

	//mouth
	fill(236,76,119);
	noStroke();
	ellipse(321.06,282.92,mthW,4);

	//tub
	fill(255);
	arc(320,340,407,250,TWO_PI,PI);




}

This project was very fun to do but challenging at the same time since the prompt was open-ended. I wanted to give a theme to the project but also incorporate an abstract element. I ended up drawing a person resting in the bathtub whose shoulders move up and down while the cursor moves vertically. I thought I would need to use a lot of ‘if’ statements but I figured that assigning a lot of variables would be more simple. I definitely think that I could have improved the movements in the background and add more shapes to it.

Initial sketches on Adobe illustrator.

/// seizure warning ///

project-03

var dir = 1;
var colorPicker = 1;
var sizeX = 25;
var sizeY = 25;
var width = 640;
var height = 480;
var x = width/2;
var y = height/2;
var x2 = width/2;
var y2 = height/2;

function setup() {
    createCanvas(640, 480);
}

function draw() {
	//background
	switch(colorPicker) {
        case 1:
            background(252, 156, 231);
            break;
        case 2:
            background(230, 156, 252);
            break;
        case 3:
            background(156, 193, 252);
            break;
        case 4:
            background(252, 249, 156);
            break;
        default:
            background(161, 252, 156);
    }
    //rectangles
    noStroke();
    fill('white');
    rectMode(CENTER);
    translate(mouseX, mouseY);
    rotate(radians(mouseY));
    //#1
    rect(x, y, sizeX, sizeY);
    //#2
    rect(x2, y2, sizeX, sizeY);
    //#3
    rect(x, y2, sizeX, sizeY);
    //#4
    rect(x2, y, sizeX, sizeY);
}

function mouseMoved() {
	//burst from center movement
	x = mouseX/2;
	x2 = -mouseX/2;
	y = height/width*(mouseX/2);
	y2 = -height/width*(mouseX/2);
	//sizechange
	sizeX = mouseX/6;
	sizeY = mouseX/6;
	//background
	colorPicker = int(random(1, 6));
}

at the beginning of this project, i really wasn’t sure what i wanted to accomplish with my drawing mechanism, but that allowed me to explore the new topics of translation and rotation even more than i probably would have. i really enjoyed the final result of this project because i already have 10 ideas of how this could be changed in the future! it’s fun to make art + learn at the same time.

sketch

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
    rectMode(CENTER);
}

function draw() {
	background(64, 85, 147);

	arrow();

	cupid();

	love();
	
	animation();


}

function arrow() {
	noStroke();

	//this makes the arrow move as you drag your mouse to the left
	if (mouseX <= 500) {
		push();
		var pty = 480;
		var ptx = 100;
		translate(ptx, pty);
		var arrowX = mouseX - 167;
		if (mouseX < 167) {
			arrowX = 0; 	//only move the arrow when the cursor is beyond the bow
		} else if (mouseX > 500) {
			arrowX = 500 - 167; //don't move the arrow after it's landed
		}
		rotate(arrowX/5);
		fill(255); //arrow color
		rect(167 - ptx, 137 - pty, 55, 5, 2);

		//arrowhead (or a sideways heart 😉
		fill(217, 158, 196);
		push();
		translate(167 + 55/2 - ptx, 140 - pty);
		rotate(90 - 25.74);
		ellipse(0, 0, 13, 23);
		pop();

		push();
		translate(167 + 55/2 - ptx, 134 - pty);
		rotate(90 + 25.74);
		ellipse(0, 0, 13, 23);
		pop();

		pop();
	}
		
}



//draws cupid in the top left corner
function cupid() {
	//wings
	noStroke();
	fill(254, 245, 231); //wing color
	ellipse(73, 153, 39, 39);

	push();
	translate(48, 160);
	rotate(-320.6);
	ellipse(0, 0, 16, 47);
	pop();

	push();
	translate(60, 170);
	rotate(-334.96);
	ellipse(0, 0, 16, 47);
	pop();

	push();
	translate(74, 172);
	rotate(-347.38);
	ellipse(0, 0, 16, 47);
	pop();

	//bow
	stroke(169, 124, 80);
	strokeWeight(4);
	noFill();
	curve(0, 0, 160, 106, 160, 168, 160, 168);


	//head
	noStroke();
	fill(255, 224, 189); //skin color
	ellipse(99, 101, 88, 88);

	//body
	ellipse(110, 160, 59, 59);

	//hand
	ellipse(167, 137, 19, 19);

	//cheeks
	fill(249, 191, 203); //cheek color
	ellipse(103, 124, 8, 8);
	ellipse(139, 96, 8, 8);

	//diaper
	fill(254, 245, 231); //diaper color
	arc(110, 160, 59, 59, 0, 180);
}

//draws the two love birds
function love() {
	fill(0)
	noStroke();
	ellipse(440, 440, 31, 31);
	triangle(475, 450, 507, 460, 495, 423);
	fill(255, 224, 189);
	ellipse(430, 411, 38, 38);
	ellipse(501, 411, 38, 38);


	//uncomment for a surprise!
	// noStroke();
	// fill(255, 255, 0);
	// //body
	// rect(width/2, height/2, 75, 45, 5, 20, 35, 35);
	// //neck
	// rect(width/2 + 25, height/2 - 60/2, 25, 45);
	// //head
	// rect(width/2 + 40, height/2 - 60, 55, 40, 20, 30, 5, 10);
	
	// //eyes
	// fill(0);
	// rect(width/2 + 50, height/2 - 60, 5, 5, 5)
	
	// //mouth
	// fill(255, 165, 0);
	// rect(width/2 + 75, height/2 - 47, 30, 15, 5, 10, 15, 5)
	// //legs
	// rect(width/2, height/2 + 35, 8, 25, 10);
	// rect(width/2 + 3, height/2 + 45, 15, 8, 10);



	

	//draws the hearts as you move your mouse to the right
	for (i = 540; i <= mouseX; i += 10) {
		if (mouseX < width) {
			//alternates which side the hearts are drawn on
			if ((i/10)%2 == 0) {
				x = 433;
			} else {
				x = 506;
			}

			fill(217, 158, 196);
			noStroke();
			push();
			translate(x - 4, 370 - 2*(i - 540));
			rotate(150);
			ellipse(0, 0, 13, 23);
			pop();

			push();
			translate(x + 4, 370 - 2*(i - 540));
			rotate(30);
			ellipse(0, 0, 13, 23);
			pop();
		}
			
	}

}

//controller of the animation that happens when the arrow makes the two fall in love
function animation() {
	var lineLength = 1
	//the first part grows the burst lines, the second part shrinks the burst lines
	if (mouseX > 500 & mouseX <= 520) {
		lineLength = (mouseX - 500) * 2;
		noFill();
		stroke(253, 253, 150);
		strokeWeight(4);
		for (i = 1; i <= 16; i++) {
			line(460 + (lineLength * cos((360/16)*i)), 
				 440 + (lineLength * sin((360/16)*i)),
				 460, 440);
		}
	} else if (mouseX > 520 & mouseX < 540) {
		lineLength = (540 - mouseX) * 2;
		noFill();
		stroke(253, 253, 150);
		strokeWeight(4);
		for (i = 1; i <= 16; i++) {
			line(460 + (lineLength * cos((360/16)*i)), 
				 440 + (lineLength * sin((360/16)*i)),
				 460, 440);
		}
	}
}

Love is cute and I didn’t have great ideas for my project, so I decided to show how love REALLY works.