cmhoward-project-03

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

KadeStewart-Project03-DynamicDrawing

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.

Xindi Lyu-Project 03-Dinamic Drawing-Section A

sketch


/*Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-03-Dinamic Drawing */
function setup() {
    createCanvas(640, 480);
    background(255);
    rectMode(CENTER);
    
}
function draw() {
    noStroke();
    background(49,76+mouseY,87+mouseX/2);
 var a = max(min(mouseX,640),0);
 var b = a*24/64;
 fill(255);
//red


fill(254-a/5,228,196-b)
triangle(160,240+a*120/640,320,240+a*120/640,240,120+b);
triangle(160,480+a*120/640,320,480+a*120/640,240,360+b);
triangle(160,0+a*120/640,320,0+a*120/640,240,0+b);
triangle(160,240+a*120/640,320,240+a*120/640,240,240+b);
triangle(480,240+a*120/640,640,240+a*120/640,560,120+b);
triangle(480,480+a*120/640,640,480+a*120/640,560,360+b);
triangle(480,0+a*120/640,640,0+a*120/640,560,0+b);
triangle(480,240+a*120/640,640,240+a*120/640,560,240+b);




fill(232-a/20,173+a/20,159+a/20);
triangle(0,120+a*120/640,160,120+a*120/640,80,0+b);
triangle(320,120+a*120/640,480,120+a*120/640,400,0+b);
triangle(0,0,160,0,80,0+b/2);
triangle(0,360+a*120/640,160,360+a*120/640,80,240+b);
triangle(320,360+a*120/640,480,360+a*120/640,400,240+b);
triangle(0,120+a*120/640,160,120+a*120/640,80,120+b);
triangle(320,0,480,0,400,0+b/2);
triangle(320,120+a*120/640,480,120+a*120/640,400,120+b);


fill(251-a/10,149+b,13+a/5);
triangle(160,120+a*120/640,320,120+a*120/640,240,0+b);
triangle(160,360+a*120/640,320,360+a*120/640,240,240+b);
triangle(160,0,320,0,240,0+b/2);
triangle(160,120+a*120/640,320,120+a*120/640,240,120+b);
triangle(480,120+a*120/640,640,120+a*120/640,560,0+b);
triangle(480,360+a*120/640,640,360+a*120/640,560,240+b);
triangle(480,0,640,0,560,0+b/2);
triangle(480,120+a*120/640,640,120+a*120/640,560,120+b);
 
fill(93+a/5,212-b,206);
triangle(0,240+a*120/640,160,240+a*120/640,80,120+b);
triangle(0,480+a*120/640,160,480+a*120/640,80,360+b);
triangle(0,0+a*120/640,160,0+a*120/640,80,0+b);
triangle(0,240+a*120/640,160,240+a*120/640,80,240+b);
triangle(320,240+a*120/640,480,240+a*120/640,400,120+b);
triangle(320,480+a*120/640,480,480+a*120/640,400,360+b);
triangle(320,0+a*120/640,480,0+a*120/640,400,0+b);
triangle(320,240+a*120/640,480,240+a*120/640,400,240+b);

}

For this project I experimented the pattern image and how it would interact with a user. The triangular patters varies as long as their color schemes, while some sort of their orientations remained the same.

Sarah Yae – Project 3

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!

Katherine Hua – Project-03 – Dynamic Drawing

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-03-Drawing Variables*/

var x = 0;
var y = 0;


var width1 = 50;
var height1 = 50;
var width2 = 150;
var height2 = 150;
var width3 = 400;
var height3 = 400;

var xRGB = 255/600
var yRGB = 255/600

function setup() {
    createCanvas(600, 600);
    background(0);
}

function draw() {
	background(0);
	rectMode(CENTER); //making it so that the x,y indicates the center of the rectangle instead of the top left corner
	angleMode(DEGREES); //changing mode from radians to angles
	translate(300, 300); // the elements will rotate with this point acting as the center

	var squarerotatemap = map(mouseX, 0, width, 0, 360); //mouseX will control the movement of the spinning elements

//inner
	noFill(); 
	strokeWeight(1);

    stroke(abs(mouseX-mouseY) * yRGB, mouseY * yRGB, mouseX * xRGB); //color will change based on mouse position on canvas

    // the following are drawing squares rotates at different angles that are spinning depending on the mouse position
	push();
	rotate(0 + squarerotatemap);
	rect(x, y, mouseX/12, mouseY/12); //mouseX controls the size of the square

	push();
	rotate(30);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(90);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX/12, mouseY/12);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX/12, mouseY/12);
	pop();


//middle1
	stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

	rotate(0+ squarerotatemap);
	rect(x, y, mouseX/4, mouseY/4);

	push();
	rotate(15);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(30);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(45);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(75);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(90);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(105);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(135);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

	push();
	rotate(165);
	rect(x, y, mouseX/4, mouseY/4);
	pop();

//outer
	stroke(mouseX * yRGB, mouseY * xRGB, abs(mouseX-mouseY)* xRGB);


	rotate(0 + squarerotatemap);
	rect(x, y, mouseX/2, mouseY/2);

	push();
	rotate(15);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(30);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(45);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

	push();
	rotate(75);
	rect(x, y, mouseX/2, mouseY/2);
	pop();

//outerouter

	stroke(abs(mouseX-mouseY) * yRGB, mouseX * yRGB, mouseX * xRGB);

	rotate(0 + squarerotatemap);
	rect(x, y, mouseX, mouseY);

	push();
	rotate(105);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(135);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX, mouseY);
	pop();

	push();
	rotate(165);
	rect(x, y, mouseX, mouseY);
	pop();



//inner
	noFill();
	strokeWeight(1);
	stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

	push();
	rotate(0 + squarerotatemap);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);

	push();
	rotate(30);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(60);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(90);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(120);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();

	push();
	rotate(150);
	rect(x, y, 300-mouseX/10, 300-mouseY/10);
	pop();


//middle
	stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

	rotate(0+ squarerotatemap);
	rect(x, y, mouseX/3, mouseY/3);

	push();
	rotate(15);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(30);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(45);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(60);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(75);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(90);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(105);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(120);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(135);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(150);
	rect(x, y, mouseX/3, mouseY/3);
	pop();

	push();
	rotate(165);
	rect(x, y, mouseX/3, mouseY/3);
	pop();
}

My design is meant to look like as if you’re looking into a kaleidoscope. This project really helped me get more familiar with understanding how variables work and how the mouse position can work in relation to other elements of the design.

Rachel Lee-Project 03-Dynamic Drawing-Section E

Rachel Lee Dynamic Drawing Sketch

/* Rachel Lee
rwlee
Section E
Project-03: Dynamic Drawing */

var outerD = 350;
var innerD = 300;
var hours = 10;
var r = 0;
var g = 0;
var b = 0; 
var planetR = 60;
var sunY = 0;
var moonY = 480; 
var angle = 0;
var increment = 0.1;
var angle = 0;
var position1 = 0;
var position2 = 105;
var position3 = 65;
var position4 = 215;
var position5 = 25;
var position6 = 345;

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

function draw() {
	background(r, g, b);
// top right quadrant yellow according to mouse position
    if (mouseX >= 320 & mouseX <= 640 && mouseY >= 0 && mouseY <= 240) {
        r = 235;
        g = 200;
        b = 130; 
    } 
    
// bottom right quadrant pale blue according to mouse position
    if (mouseX >= 320 & mouseX <= 640 && mouseY >= 240 && mouseY <= 480) {
        r = 155;
        g = 195;
        b = 235;
    }
// bottom left quadrant dark blue according to mouse position
    if (mouseX >= 0 & mouseX <= 320 && mouseY >= 240 && mouseY <= 480) {
        r = 30;
        g = 115;
        b = 185;
    }
// top left quadrant navy according to mouse position
     if (mouseX >= 0 & mouseX <= 320 && mouseY >= 0 && mouseY <= 240) {
        r = 15;
        g = 65;
        b = 120;
    }

    // sun rising and setting according to mouse position
    if (mouseX >= 330 & mouseX <= 500 && mouseY >= 65 && mouseY <= 415) {
        sunY = mouseY;
        var sizeSun = map(mouseY, 0, width, 60, 10);
    } else {
        noStroke();
        fill(240, 150, 60);
        sunY = 0;
        ellipse(560, sunY, planetR, planetR);
    }

// drawing sun
    noStroke();
    fill(240, 150, 60);
    ellipse(560, sunY, sizeSun, sizeSun);

// moon rising and setting according to mouse position
    if (mouseX >= 150 & mouseX <= 310 && mouseY >= 65 && mouseY <= 415) {
        moonY = mouseY;
        var sizeMoon = map(mouseY, 0, width, 60, 10);

// drawing stars
        push();
        translate(100, 100);
        rotate(radians(angle));

// animating stars, stars appear when it is 'night time' only
        rectMode(CENTER);
        noStroke();
        fill(210, 240, 245);
        rect(position1, 0, 15, 15);
        rect(position2, 125, 20, 20);
        rect(position3, 300, 10, 10);
        rect(position4, 240, 7, 7);
        rect(position5, 160, 13, 13);
        rect(position4, 270, 9, 9);
        pop();
        angle = angle + 1;
        position1 = position1 + 0.4;
        position2 = position2 - 0.1;
        position3 = position3 + 0.7;
        position4 = position4 - 0.2;
        position5 = position5 + 0.1;
        position6 = position6 - 0.8;

    } else {
        noStroke();
        fill(230, 230, 190);
        moonY = height;
        ellipse(80, moonY, planetR, planetR);
    }

// drawing moon
    noStroke();
    fill(230, 230, 190);
    ellipse(80, moonY, sizeMoon, sizeMoon);

// clock and hour markers on clock
    noStroke();
    fill(140, 195, 200);
    ellipse(320, 240, outerD, outerD);
    fill(180, 225, 225);
    ellipse(320, 240, innerD, innerD);

    fill(220, 90, 95);
    ellipse(320, 110, hours, hours);
    ellipse(320, 365, hours, hours);
    ellipse(180, 240, hours, hours);
    ellipse(450, 240, hours, hours);

// clock hands rotate according to mouse position
    stroke(255);
    strokeWeight(10);
    line(width/2, height/2, mouseX, mouseY); // minute hand
    stroke(0);
    line(width/2, height/2, mouseX + 40, mouseY + 60); // hour hand


}



For this week’s project, I decided to play with the idea of a clock, and illustrating different times of the day. At first I found it a little tricky to catch syntax errors, but as I built more and more variables in, it became really fun to watch my dynamic drawing come to life in a controlled manner.

Victoria Reiter-Project 03-Dynamic Drawing

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. :’)

ChristineSeo-Project-03-SectionC

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-03

var leftColor; 
var rightColor;
var inBetweenColor;
var inBetweenPosition;
var angle1 = 0;
var angle2=0;


function setup() {
    createCanvas(640, 480);
    leftColor = color (200, 171, 223);
    rightColor = color (35, 42, 97);
    inBetweenColor = color (115, 171, 223);
    inBetweenPosition = 0;
    
}

function draw() {
	//background color change
	inBetweenPosition = map (mouseX,0, width, 0, 1);
	inBetweenColor = lerpColor(leftColor,rightColor,inBetweenPosition);
	background(inBetweenColor);

	//triangles bottom
	push();
	fill(mouseX+200, mouseY, 100);
	triangle(100, 360, 0, 480, 140, 480);
	fill(mouseX+200, mouseY, 300);
	triangle(210, 270, 110, 480, 290, 480);
	triangle(570, 240, 430, 480, 650, 480);
	fill(mouseX+200, mouseY, 100);
	triangle(410, 370, 270, 480, 510, 480);
	pop();

	//triangles top
	push();
	fill(mouseX+200, mouseY, 300);
	noStroke(0);
	triangle(100, 160, 0, 0, 140, 0);
	triangle(410, 170, 270, 0, 510, 0);
	fill(mouseX+200, mouseY, 100);
	triangle(210, 70, 110, 0, 290, 0);
	triangle(570, 30, 430, 0, 650, 0);
	pop();

	//triangle moves
	noStroke(0);
	if (mouseY>height/2){
		fill(mouseX+200, mouseY, 100);
		triangle(100, 270, 0, 0, 140, 0);
		fill(mouseX+200, mouseY, 300);
		triangle(100, 270, 0, 480, 140, 480);

		fill(mouseX+200, mouseY, 100);
		triangle(210, 140, 110, 480, 290, 480);
		fill(mouseX+200, mouseY, 300);
		triangle(210, 140, 110, 0, 290, 0);

		triangle(410, 240, 270, 480, 510, 480);
		fill(mouseX+200, mouseY, 100);		
		triangle(410, 240, 270, 0, 510, 0);

		triangle(570, 150, 430, 480, 650, 480);
		fill(mouseX+200, mouseY, 300);		
		triangle(570, 150, 430, 0, 650, 0);
	}

	//eyes
	fill(255);
	var x1=map(mouseX,0,width,163,173);
	ellipse (x1,270,40,40);
	var x2=map(mouseX,0,width,233,253,true);
	ellipse (x2,270,40,40);

	fill(0);
	var x3=map(mouseX,0,width,154,174);
	ellipse(x3,265,10,10);
	var x4=map(mouseX,0,width,224,254,true);
	ellipse(x4,265,10,10);

	fill(255);
	var x1=map(mouseX,0,width,360,370);
	ellipse (x1,160,40,40);
	var x2=map(mouseX,0,width,430,450,true);
	ellipse (x2,160,40,40);

	fill(0);
	var x3=map(mouseX,0,width,350,370);
	ellipse(x3,155,10,10);
	var x4=map(mouseX,0,width,420,450,true);
	ellipse(x4,155,10,10);

	//rotating rectangles
	fill(255);
	noStroke(0);
	push();
	rotate(radians(-angle1));
    ellipse(angle2, angle2, 0.1, 0.1);
	rect(140,135,10,10);
	rect(30,185,10,10);
	rect(70,245,30,30);
	rect(180,175,20,20);
	rect(120,195,10,10);
	rect(270,295,80,80);
	rect(299,355,10,10);
	rect(350,255,50,50);
	rect(490,155,70,70);
	rect(530,195,40,40);
	rect(620,285,10,10);
	pop();
    angle1 += mouseX/100;
    angle2 += 0.5;
}

I enjoyed being able to interact with my work through a mouse. I made sure to use many different elements and played with the color of the background and triangles. I also wanted to focus on using both the mouseX and mouseY. I think the eyes made the piece come together to make it more interesting as well!

Kai Zhang-Project-03-Dynamic-Drawing

project03-kaiz1

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-03

var RECX = 255 / 480; //remap color index in X
var RECY = 255 / 640; //remap color index in Y

var REAX = 720 / 480; //remap angle index in X
var REAY = 720 / 640; //remap angle index in Y

var diffx = 0;
var diffx = 0;
var diffx1 = 0;
var diffy1 = 0;
var x = 240;
var y = 320;
var x1 = 240;
var y1 = 320;

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


function draw() {
	background(x*1.2, y*1.2, abs(x - y));
	
	//set delay for the movement
    diffx = mouseX - x;
    diffy = mouseY - y;
    diffx1 = mouseX - x1;
    diffy1 = mouseY - y1;

    x = x + 0.07*diffx;
    y = y + 0.07*diffy
    x1 = x1 + 0.06*diffx1;
    y1 = y1 + 0.06*diffy1;

    //the central dot
	translate(mouseX, mouseY);

	noStroke();
	fill(y * RECY, abs(x - y) * RECY, x * RECX)
	ellipse(0, 0, 20, 20)

	//the faster arcs
	translate(-mouseX, -mouseY);
	translate(x, y);//recenter canvas by using delayed variable

	strokeWeight(x/50 + y/50);
	noFill();

	stroke(y * RECY, x * RECX, abs(x - y) * RECY);
	arc(0, 0, 50, 50, REAX * x, REAX * x + 120);
	arc(0, 0, 130, 130, REAX * x - y, REAX * x - y + 120);
	arc(0, 0, 210, 210, REAX * y - x, REAX * y - x + 120);

	stroke(x * RECX, abs(x - y) * RECY, y * RECY);
	arc(0, 0, 70, 70, REAY * y, REAY * y + 120);
	arc(0, 0, 150, 150, REAY * y - x, REAY * y - x + 120);
	arc(0, 0, 230, 230, REAY * x - y, REAY * x - y + 120);

	//the slower arcs
	translate(-x, -y);
	translate(x1, y1);//recenter canvas again

	stroke(abs(x - y) * RECY, y * RECY, x * RECX);
	arc(0, 0, 90, 90, -REAX * x, -REAX * x + 120);
	arc(0, 0, 170, 170, REAY * y + x, REAY * y + x + 120);
	arc(0, 0, 250, 250, REAY * x + y, REAY * x + y + 120);

	stroke(abs(x - y) * RECY, x * RECX, y * RECY);
	arc(0, 0, 110, 110, -REAY * y, -REAY * y + 120);
	arc(0, 0, 250, 250, REAY * x + y, REAY * x + y + 120);
	arc(0, 0, 270, 270, -REAY * x + y, -REAY * x + y + 120);

}

In this project, I’ve created a series of arcs that rotates around the same center dot. There are four visual variables of the shapes, the arc rotation, arc colors, arc positions, and arc stroke weight. Also the canvas is changing the colors. All the variables are controlled by the mouse X and Y positions. In order to make it more visually pleasing, I’ve set delays of different parameters of the arc movings and color changings. So they would in fact spend some time to reach their desired conditions.

Emily Zhou –– Dynamic Drawing

Moving the mouse to the right side of the frame will draw a colour-changing spiral. Move the mouse to the left side of the frame will erase the spiral.

sketch

// spiral variables:
var angle = 0;
// position parameter
var circleX = 25;
// to keep track of circles
var counter = 0;
// color parameter
var R = -100;
var G = 200;
var B = 20;
// calculation: 360 degrees / 5 degree angle change
var CIRCLES_PER_ROUND = 360 / 5;

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

function draw() {

    // spiraling colored circles

    // to limit circle size of spiral
    if (counter < 25 * CIRCLES_PER_ROUND) {
        push();
        translate(320, 240);
        rotate(radians(angle));
        // stroke overlap creates smaller circles toward center
        // (size parameter)
        stroke(0);
        // RGB used in color parameter
        fill(R + ((counter - CIRCLES_PER_ROUND) / 8), 
             G - ((counter - CIRCLES_PER_ROUND) / 8),
             B + ((counter - CIRCLES_PER_ROUND) / 8));
        // circleX used in position parameter
        ellipse(circleX, 0, 5, 5);
        pop();
        if (mouseX > width / 2) {
            circleX = circleX + 0.1;
            angle = angle + 5;
            // circle is drawn on every count
            counter = counter + 1;
        }
    }
    
    // spiraling black circles 
    // (opposite direction to "erase")

    // to prevent spiral in opposite direction
    if (counter > 0) {
        push();
        translate(320, 240);
        rotate(radians(angle));
        stroke(0);
        fill(0);
        // circleX used in position parameter
        ellipse(circleX, 0, 7, 7);
        pop();
        if (mouseX < width / 2) {
            // circles drawn counterclockwise
            circleX = circleX - 0.1;
            angle = angle - 5;
            // to keep track of last colored circle
            counter = counter - 1;
        }
    }


    // smiley face

    var m = max(min(mouseX, 640), 0);
    // used in angle parameter
    var angleSmile = m * 640 / 360;

    // yellow circle
    fill(255, 230, 0);
    ellipse(width / 2, height / 2, 50, 50);
    // mouth
    strokeWeight(1.5);
    push();
    translate(320, 240);
    rotate(radians(angleSmile));
    arc(0, 0, 35, 35, 0, PI);
    pop();
    angleSmile = angleSmile + 5;
    // L eye
    fill(0);
    push();
    translate(320, 240);
    rotate(radians(angleSmile));
    ellipse(-8, -7, 3.5, 7);
    pop();
    angleSmile = angleSmile + 5;
    // R eye
    fill(0);
    push();
    translate(320, 240);
    rotate(radians(angleSmile));
    ellipse(8, -7, 3.5, 7);
    pop();
    angleSmile = angleSmile + 5;
    
}

I had some trouble with this project. I started with this idea in mind but realized pretty late into the game that the spiral drawing required background() to be under setup() but adding size parameters required it to be under draw(). I eventually found another way using stroke() but it still limited the graphics. Setting color parameters was also difficult since it was hard to predict; I ended up just experimenting with random values.