Category: Project-03-Dynamic-Drawing

/// 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.

sketch

var angle = 0;
var dia = 40; 
var r = 0;
var g = 0;
var b = 0;

function setup() {
    createCanvas(480, 640);
    background(220);

}

function draw() {

//base face of person   
    noStroke();
    fill(255,229,200);
    ellipse (240,560,150,150);

//mouth of person
    noStroke();
    fill('red');
    triangle(210,580,270,580,240,610);

//draws rotating yellow rectangles, 
//as it interacts with the mouse
	fill (250,318,94);
	noStroke();
	push();
	translate(mouseX, mouseY);
	rotate(radians(angle));
	rect(0,0,20,20);
	pop();
	angle = angle + 2

//hair (right)
    fill (87,45,9);
    noStroke();
    ellipse(300,500,dia,dia);
//hair (middle)
    fill(87,45,9);
    noStroke();
    ellipse(240,480,dia,dia);
//hair (left)
    fill(87,45,9);
    noStroke();
    ellipse(180,500,dia,dia);
//hair grows as the mouse moves to the left side of canvas
if (mouseX <= 230) {dia = dia + 0.03}
//hair stops growing as the mouse moves to the right side of canvas
if (mouseX > 230) {dia = dia}

//eyes (right) 
    fill(r,g,b);
    noStroke();
    ellipse(270,550,20,20);
//eyes (left)
    fill(r,g,b);
    noStroke();
    ellipse(210,550,20,20);
//eyes change color as the mouse to the left side of canvas
if (mouseX <= 230) {r = r + 0.1}
if (mouseX <= 230) {g = g + 0.07}
if (mouseX <= 230) {b = b + 0.2}

}

As you move your mouse towards the left of the canvas, you can see hair growth, and eye color change; however, if your mouse is on the right side of the canvas, all changes to facial features stop. Your mouse’s location is tracked down by a yellow rectangle that spins around; you can even attempt to color the background yellow!

sketch

/*Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-03
*/

// establishes global variables
// states amount of increase for angular rotation
var increment = 5;
// states angle of rotation
var angle = 0;
// states sizes of rectangles
var sizeA = 25;
var sizeB = 75;
// states center points of rectangles
var rect1X;
var rect2X;
var rect3X;
// states colors
var colorA = 255;
var colorB = 0;
var colorYellow = 'rgb(255, 251, 155)';
var colorBlue = 'rgb(181, 243, 255)';
var colorGreen = 'rgb(201, 255, 165)';

function setup() {
    // creates canvas dimensions
    createCanvas(640, 480);
    // defines positions of central points
    // for the drawing of rectangles
    rect1X = width / 6;
    rect2X = width / 2;
    rect3X = (5 * width) / 6;
}

function draw() {
    // sets background color to be pink
    // and a little opaque
    background('rgba(255,187,203,0.05)');
    // left most rectangle rotation
    push();
    translate(rect1X, height - mouseY);
    rotate(radians(angle));
    // draws rectangle from center point
    rectMode(CENTER);
    // sets visual aspects of rectangle
    strokeWeight(4);
    stroke(colorA);
    fill(colorB);
    rect(0, 0, sizeA, sizeA);
    pop();
    angle = angle + increment;
    // center rect rotation
    push();
    translate(rect2X, mouseY);
    rotate(radians(angle));
    // draws center rect
    rectMode(CENTER);
    strokeWeight(10);
    stroke(colorB);
    fill(colorA);
    rect(0, 0, sizeB, sizeB);
    pop();
    angle = angle - increment;
    // rightmost rect rotation
    push();
    translate(rect3X, height - mouseY);
    rotate(radians(angle));
    // draws right most rect
    rectMode(CENTER);
    strokeWeight(4);
    stroke(colorA);
    fill(colorB);
    rect(0, 0, sizeA, sizeA);
    pop();
    angle = angle + increment;

    // if mouse is located on bottom half of canvas
    // then rectangles change size and direction of rotation
    if (mouseY > height / 2) {
        sizeA = 75;
        sizeB = 25;
        increment = 5;
    }
    // if mouse is located on top half of canvas
    // then rectangles change size and direction of rotation
    if (mouseY < height / 2) {
        sizeA = 25;
        sizeB = 75;
        increment = -5;
    }
    // defines visual characteristics for when mouse is
    // in upper left section of canvas
    if ((mouseX < width / 3) & (mouseY < height / 2)) {
        colorA = colorYellow;
        colorB = 0;
    }
    // defines visual characteristics for when mouse is
    // in bottom left section of canvas
    if ((mouseX < width / 3) & (mouseY > height / 2)) {
        colorA = 0;
        colorB = colorYellow;
    }
    // defines visual characteristics for when mouse is
    // in upper middle section of canvas
    if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY < height / 2)) {
        colorA = 0;
        colorB = colorBlue;
    }
    // defines visual characteristics for when mouse is
    // in bottom middle section of canvas
    if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY > height / 2)) {
        colorA = colorBlue;
        colorB = 0;
    }
    // defines visual characteristics for when mouse is
    // in upper right section of canvas
    if ((mouseX > (2 * width) / 3) & (mouseY < height / 2)) {
        colorA = colorGreen;
        colorB = 0;
    }
    // defines visual characteristics for when mouse is
    // in bottom right section of canvas
    if ((mouseX > (2 * width) / 3) & (mouseY > height / 2)) {
        colorA = 0;
        colorB = colorGreen;
    }
    // defines visual characteristics for when mouse is
    // on the left section of the canvas
    if (mouseX < width / 3) {
        fill('rgb(187, 4, 131)');
        textAlign(CENTER);
        textSize(25);
        textFont('Georgia');
        textStyle(BOLD);
        text("YOU", rect1X, mouseY);
    }   else {
        noStroke();
        }
    // defines visual characteristics for when mouse is
    // on the middle section of the canvas
    if ((mouseX > width / 3) & (mouseX < (5 * width) / 6)) {
        fill('rgb(187, 4, 131)');
        textAlign(CENTER);
        textSize(25);
        textFont('Georgia');
        textStyle(BOLD);
        text("ARE", rect2X, height - mouseY);
    }   else {
        noStroke();
        }
    // defines visual characteristics for when mouse is
    // on the right section of the canvas
    if (mouseX > (5 * width) / 6) {
        fill('rgb(187, 4, 131)');
        textAlign(CENTER);
        textSize(25);
        textFont('Georgia');
        textStyle(BOLD);
        text("BEAUTIFUL", rect3X, mouseY);
    }   else {
        noStroke();
        }
}

Here is the design I made! As the mouse moves from left to right, the colors of the rectangles, as well as their outline, changes, and different words appear depending on where the mouse is located. Two squares move in opposite direction of the y-value of the mouse, and one moves along with the mouse’s y-value, and opposite for the words. As the mouse moves from top to bottom of the screen, the squares also change size and direction of rotation. Also, the background is not completely opaque, allowing you to see the outlines of the shapes as they move, which I think creates a kind of soothing echo-effect that adds to the aesthetics of the graphic.

Ultimately, the factors that change are: position, size, color, and angle.

I think it is a pretty little interactive image with a good message that can cheer you up if you’re ever feeling gloomy. :’)