Category: Project-03-Dynamic-Drawing

Mimi Jiao Project 3 Dynamic Drawing

sketch.js

var defaultBG = 0;
//to inverse line/background colors when key is pressed
var whiteLines = 255;
var blackLines = 0;

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

function draw() {
    background(defaultBG);
    //changes background color when mouse hovers over top/bottom of page
    if (mouseY >= 3 * height / 4) {
        background(255, 0, 0);
    }else if (mouseY <= height / 4) {
        background(0, 0, 255);
    };
    noFill();
    stroke(0, 255, 0);
    strokeWeight(1);
    ellipse( width / 2, height / 2, 50, 50);
    //green rectangle going across page
    fill(0, 255, 0);
    noStroke();
    rect(mouseX - width * .75, 50, 250, 10);
    noFill();
    strokeWeight(1);
    stroke(whiteLines);
    //three swinging lines
    line(width - mouseX, 130, 30, 50);
    line(width - mouseX + 30, 140, 30, 50);
    line(width - mouseX + 60, 150, 30, 50);
    //change color of rectangle outline and make text appear
    //if mouse is pressed
    if (mouseIsPressed) {
        strokeWeight(2);
        stroke(255, 54, 258);
        stroke(whiteLines);
        strokeWeight(.5);
        textFont('Courier New');
        text("ok ok ok ok ok ok ok", 50, 100);
        stroke(255, 54, 258);
    };
    //vertical lines on top
    strokeWeight(1);
    rect(width / 4, 100, 50, 70);
    stroke(whiteLines);
    strokeWeight(1);
    line(500, mouseY, 500, mouseY + 200);
    line(505, mouseY, 505, mouseY + 200);
    line(510, mouseY, 510, mouseY + 200);
    line(515, mouseY, 515, mouseY + 200);
    line(520, mouseY, 520, mouseY + 200);
    line(525, mouseY, 525, mouseY + 200);
    line(530, mouseY, 530, mouseY + 200);
    line(535, mouseY, 535, mouseY + 200);
    line(540, mouseY, 540, mouseY + 200);
    //vertical lines on bottom
    stroke(0,255,0);
    line(502, mouseY * 1.5 + 150, 502, mouseY * 1.5 + 410);
    line(507, mouseY * 1.5 + 160, 507, mouseY * 1.5 + 480);
    line(512, mouseY * 1.5 + 170, 512, mouseY * 1.5 + 480);
    line(517, mouseY * 1.5 + 180, 517, mouseY * 1.5 + 480);
    line(522, mouseY * 1.5 + 190, 522, mouseY * 1.5 + 480);
    line(527, mouseY * 1.5 + 200, 527, mouseY * 1.5 + 510);
    line(532, mouseY * 1.3 + 50, 532, mouseY * 1.3 + 510);
    line(537, mouseY * 1.3 + 50, 537, mouseY * 1.3 + 510);
    //thin rectangle blocks moving across page on bottom
    noStroke();
    fill(whiteLines);
    rect(width - mouseX, 400, 100, 5);
    rect(width - mouseX * 1.5, 400, 60, 5);
    rect(width - mouseX * 2.5, 400, 40, 5);

    rect(width - mouseX + 70, 425, 100, 3);
    rect(width - mouseX * 1.5 + 70, 425, 60, 3);
    rect(width - mouseX * 2.5 + 70, 425, 40, 3);
    //makes text follow mouse
    text("stop following me! :((", mouseX, mouseY);
    translate(mouseX, mouseY);
    noStroke();
    //if mouse isn't clicked, text and circles will show
    if (mouseIsPressed === false) {
        fill(0, 0, 255);
        ellipse(20, 20, 20, 20);
        ellipse(40, 40, 20, 20);
        textFont('Courier New');
        fill(255, 0, 0);
        text("no no no no no", 50, 100);
        stroke(255, 54, 258);
        fill(0, 0, 255);
    }
}
//inverses black and white colors when key pressed
function keyTyped() {
    if (defaultBG > 0) {
        defaultBG = 0;
        whiteLines = 255;
    }else {
        defaultBG += 255;
        whiteLines -= 255;
        fill(defaultBG);
    }
}

Like many other people, I initially had no idea what to do since it was so open ended. I started off by making random shapes and lines, and since I naturally prefer certain colors, what I made began to resemble this (shown below!) I made for fun last week. This project ended up being a continuation and exploration of that. Since I am interested in bringing narrative elements to everything I made, I created a mini dialogue that results from mouse interaction.

Project 03 Liz Maday

liz maday project 3 sketch

//Elizabeth Maday
//emaday@andrew.cmu.edu
//Section A
//emaday

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

function draw() {
    var distance = int(dist(width/2, height/2, mouseX, mouseY));
    var vineTipX = 0;
    var vineTipY = 0;
    var x = width/2;
    var y = height/2;
    var r = 0;
    var g = 170;
    var b = 245;
    var eyeSize = 5;

    //make color get darker as mouse moves up
    if (mouseY < y) { 
    	r -= 0; 
    	g -= distance/2; 
    	b -= distance/2; 

    //make color lighter as mouse moves down
    } else if (mouseY > y) {
    	r += distance/2; 
    	g += distance/2; 
    	b += 0; 
    }
    background(r, g, b);

    //make vines move left and right
    if (mouseX > x) {
    	vineTipX += distance;
    } 
    if (mouseX < x) {
    	vineTipX -= distance;	
    }

    //make vines move up and down
    if (mouseY > y) {
    	vineTipY += distance;
    }
    if (mouseY < y) {
    	vineTipY -= distance;
    }

    //change eyeSize
    if (mouseY < y) {
    	eyeSize = 4;
    }
    if (mouseY > y) {
    	eyeSize = 10;
    }

    //draw triangles left
    noStroke();
    fill(0, 97, 85);
    triangle(0, 50, 0, 85, 200 + vineTipX, 65 + vineTipY);
    triangle(0, 100, 0, 135, 240 + vineTipX, 115 + vineTipY);
    triangle(0, 150, 0, 185, 280 + vineTipX, 165 + vineTipY);
    triangle(0, 200, 0, 235, 320 + vineTipX, 215 + vineTipY);
    triangle(0, 250, 0, 285, 360 + vineTipX, 265 + vineTipY);
    triangle(0, 300, 0, 335, 320 + vineTipX, 315 + vineTipY);
    triangle(0, 350, 0, 385, 280 + vineTipX, 365 + vineTipY);
    triangle(0, 400, 0, 435, 240 + vineTipX, 415 + vineTipY);

    //draw triangles right
    fill(0, 192, 58);
    triangle(550 + vineTipX, 40 + vineTipY, 640, 15, 640, 50);
    triangle(510 + vineTipX, 90 + vineTipY, 640, 65, 640, 100);
    triangle(460 + vineTipX, 140 + vineTipY, 640, 115, 640, 150);
    triangle(410 + vineTipX, 190 + vineTipY, 640, 165, 640, 200);
    triangle(460 + vineTipX, 240 + vineTipY, 640, 215, 640, 250);
    triangle(510 + vineTipX, 290 + vineTipY, 640, 265, 640, 300);
    triangle(550 + vineTipX, 340 + vineTipY, 640, 315, 640, 350);
    triangle(600 + vineTipX, 390 + vineTipY, 640, 365, 640, 400);

    //draw sun around mouse
    fill(255, 188, 0);
    stroke(255, 188, 0);
    strokeWeight(7);
    line(mouseX, mouseY, mouseX + 30, mouseY + 30);
    line(mouseX, mouseY, mouseX - 30, mouseY - 30);
    line(mouseX, mouseY, mouseX + 30, mouseY - 30);
    line(mouseX, mouseY, mouseX - 30, mouseY + 30);
    line(mouseX, mouseY, mouseX + 42.5, mouseY);
    line(mouseX, mouseY, mouseX - 42.5, mouseY);
    line(mouseX, mouseY, mouseX, mouseY + 42.5);
    line(mouseX, mouseY, mouseX, mouseY - 42.5);
    strokeWeight(2);
    ellipse(mouseX, mouseY, 40, 40);

    //draw sun face
    stroke(0);
    line(mouseX - 10, mouseY + 3, mouseX + 10, mouseY + 3);
    fill(0);
    ellipse(mouseX - 8, mouseY - 5, eyeSize, eyeSize);
    ellipse(mouseX + 8, mouseY - 5, eyeSize, eyeSize);

    //draw fish
    var dist2 = (0, 100, mouseX, mouseY);
    noStroke();
    ellipseMode(CENTER);
    fill(0);
    triangle(dist2 + 13, 400, dist2 + 25, 385, dist2 + 25, 415); //bottom fish tail
    fill(255, 73, 177);
    ellipse(dist2, 400, 30, 30);  //bottom fish body
    fill(0);
    ellipse(dist2 - 5, 400, 5, 5); //bottom fish eye
    fill(0);
    ellipse(dist2 + width/2 + 13, 80, 17, 12); //top fish tail
    fill(255, 121, 0);
    ellipse(dist2 + width/2, 80, 30, 30); //top fish body
    fill(0);
    ellipse(dist2 - 5 + width/2, 80, 5, 5); //top fish eye
}

 

With this project, I liked how I was able to play around with a concept. The sun image represents sunlight entering an underwater scene, and all the other elements react to its position.

Yoo Jin Shin-Project-03-Dynamic-Drawing

Project-03

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-03

var eyeSize = 50;

// top pupil
var pupilSizeL = 5;
var pupilSizeR = 6;

// bottom pupil
var pupilSize2L = 10;
var pupilSize2R = 10;
var pupilLeftX2 = 128;
var pupilLeftY2 = 164;
var pupilRightX2 = 210;
var pupilRightY2 = 166;

var faceHeight = 300;
var faceR = 244;
var faceG = 240;
var faceB = 132;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    // gradient background that changes with mouse position
    var backgroundR = mouseX * 0.39;
    var backgroundG = mouseY * 0.53;
    var backgroundB = 255;
    background(backgroundR, backgroundG, backgroundB);
    noStroke();

    // face width that enlarges from 10 to width as mouseX moves right
    fill(faceR, faceG, faceB);
    ellipse(180, 180, constrain(mouseX, 10, width), faceHeight);

    // left eye
    fill(0);
    ellipse(140, 160, eyeSize, eyeSize);

    // left pupil that follow mouse within left eye boundary
    fill(255);
    ellipse(constrain(mouseX, 125, 153), constrain(mouseY, 150, 168), pupilSizeL, pupilSizeL);
    ellipse(pupilLeftX2, pupilLeftY2, pupilSize2L, pupilSize2L);

    // left eyebrow
    fill(backgroundR, backgroundG, backgroundB);
    rect(125, 123, 25, 7, 3);

    // right eye
    fill(0);
    ellipse(220, 160, eyeSize, eyeSize);

    // right pupil that follow mouse within right eye boundary
    fill(255);
    ellipse(constrain(mouseX, 207, 230), constrain(mouseY, 150, 168), pupilSizeR, pupilSizeR);
    ellipse(pupilRightX2, pupilRightY2, pupilSize2R, pupilSize2R);

    // right eyebrow
    fill(backgroundR, backgroundG, backgroundB);
    rect(210, 123, 25, 7, 3);

    // mouth
    fill(backgroundR, backgroundG, backgroundB);
    arc(180, 180, 20, 40, TWO_PI, PI);

    // "SNOW" text that enlarges from 20 to mouseX as mouse moves right
    fill(255);
    noStroke();
    textSize(20 + mouseX / 4);
    textFont('Helvetica');
    text('SNOW', constrain(mouseX, 0, width), 390);

    // background snow that follows mouse position
    push();
    translate(mouseX + 1, mouseY + 1);
    rotate(radians(20));
    fill(255);
    noStroke(255);
    ellipse(mouseX + 5, mouseY + 5, 8, 8);
    ellipse(mouseX + 10, mouseY + 50, 3, 3);
    ellipse(mouseX + 80, mouseY + 50, 10, 10);
    ellipse(mouseX + 50, mouseY + 200, 20, 20);
    ellipse(mouseX + 20, mouseY + 100, 8, 8);
    ellipse(mouseX + 100, mouseY + 90, 14, 14);
    ellipse(mouseX + 52, mouseY + 100, 8, 8);
    ellipse(mouseX + 102, mouseY + 200, 3, 3);
    ellipse(mouseX + 88, mouseY + 300, 10, 10);
    ellipse(mouseX + 502, mouseY + 400, 20, 20);
    ellipse(mouseX + 202, mouseY + 430, 8, 8);
    ellipse(mouseX + 102, mouseY + 240, 14, 14);
    ellipse(mouseX - 5, mouseY - 5, 8, 8);
    ellipse(mouseX - 10, mouseY - 50, 3, 3);
    ellipse(mouseX - 80, mouseY - 50, 10, 10);
    ellipse(mouseX - 50, mouseY - 200, 20, 20);
    ellipse(mouseX - 20, mouseY - 100, 8, 8);
    ellipse(mouseX - 100, mouseY - 90, 14, 14);
    pop();
}

I modified my variable face to make it more interactive by adding features like face shape, color, text, and snow that change as the mouse position changes. I think it’s interesting how depending on the face width, the face can range from looking like a fish to a pancake.

Nina Yoo Project-03- Dynamic Drawing Section E

sketch

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Dynamic Drawing*/

var colorBack = 120;
var colorDia = 183;
var colorEye = 240;
var colorPupil = 0;
var pupilWidth = 19;
var pupilHeight = 19;
var tongueH =  50;
var sizeDia = 300; //rotate this and leave a afterimage
var angle = 0;
var tonguesizecha =1;

function setup() {
    createCanvas(600, 600);
    noStroke();
    //everything in relation to mouseY


}


function draw() {
 	 background(colorBack);


 	 
 	// For dia movemet and color
 	var DiaSizeCha = map(mouseY, 0, height, sizeDia, 600);

 	 //dia

 	 var anglemap = map (mouseY, 0, height, angle, 5);

 	 rotate(anglemap, 300 );
 	  


 	 var colorDiamap = map(mouseY, 0, height, 0, 256);

 	 fill(colorDiamap, 153, 153);
 	 noStroke();
 	 rectMode(CENTER);
 	 rect(300,300, DiaSizeCha, DiaSizeCha);
 	 pop(); // pop allows thhe face to separate from dia


 	 	
 	 //face
 	fill(233,194,144);
 	ellipse(300,300, 265, 265);

 	//mouth
 	fill(0);
 	arc(300, 365, 37, 30,0, PI);


 	//tongue map
 	var tongueMove = map(mouseY, 0, height, tonguesizecha, 5);

 	//tounge 
 	fill(240, 100, 100);
 	arc(300, 372, 37, tongueH*tongueMove,0, PI);

 	//outereye
 	push();
 	var colorEyemap = map(mouseY, 0, height, 0, 256);
 	fill(colorEyemap, 100,100);
 	arc (230, 288, 54,54,0 , PI);
 	pop();

 	push()
 	 var colorEyemap = map(mouseY, 0, height, 0, 256);

 	fill(colorEyemap, 100, 100);
 	arc (375, 288, 54,54, 0, PI);

 	//pupil move/map
 	var pupilMove = map( mouseY, 0, height, pupilHeight, 2);

 	//pupil  

 	fill(colorPupil, 20, 30);
 	arc(230, 288, pupilWidth +pupilMove, pupilHeight+pupilMove, 0, PI);


 	fill(colorPupil, 20, 30);
 	arc(375,288, pupilWidth + pupilMove, pupilHeight + pupilMove, 0, PI);







}

This assignment helped me think about multiple applications being used all at once. In order to accomplish this I made mouseY be depended on a lot. The idea was to make the user think that the mouse controlled the tongue and therefore control everything else. Having there be a common factor in all moving objects helped organize the code. This code also helped me better understand variables and the “map” function.

Romi Jin – Project-03-Dynamic-Drawing-Section B

romi-project03

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-03
*/


var r = 252;
var g = 236;
var b = 235;

var faceWidth = 40;
var earWidth = 15;
var earHeight = 40;
var bodyWidth = 40;
var bodyHeight = 60;
var tailWidth = 20;
var body2w = 50;
var body2h = 40;
var eyew = 3;
var eyeh = 5.5;
var nosew = 6;
var noseh = 5;

var carrot = -150;

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(r,g,b);
    /*if (mouseX>width/2) {
        r=255;
        g=213;
        b=210;
        */
   if (mouseX > 0 & mouseX < width){
        r = 252 - mouseX/30;
        g = 236 - mouseX/30;
        b = 235 + mouseX/10;
    }

     //carrots
    if (mouseX > width/4) {
        carrot ++;
        if (carrot > height-175) {
        carrot = height-175;
        }

    } else {
        carrot =- 150;
    }
    
    stroke(252,194,149);
    strokeWeight(3);
    line(width/2,carrot+10,width/2,carrot+40);
    line(360,carrot-50,360,carrot-20);
    line(360,carrot+10,360,carrot+40);
    line(360,carrot+60,360,carrot+90);
    line(380,carrot-40,380,carrot-10);
    line(380,carrot+20,380,carrot+50);
    line(400,carrot+5,400,carrot+35);
    line(400,carrot+70,400,carrot+100);
    line(420,carrot+50,420,carrot+80);
    line(420,carrot-50,420,carrot-20);
    line(440,carrot+40,440,carrot+70);
    line(440,carrot-20,440,carrot+10);
    line(460,carrot+70,460,carrot+100);
    line(460,carrot+20,460,carrot+50);
    line(480,carrot+30,480,carrot+70);
    line(480,carrot+90,480,carrot+120);
    line(500,carrot+10,500,carrot+40);
    line(500,carrot-40,500,carrot-10);
    line(520,carrot+20,520,carrot+50);
    line(520,carrot+90,520,carrot+120);
    line(540,carrot-50,540,carrot-20);
    line(540,carrot+60,540,carrot+90);
    line(560,carrot-70,560,carrot-40);
    line(560,carrot+80,560,carrot+110);
    line(580,carrot+30,580,carrot+60);
    line(580,carrot-40,580,carrot-10);
    line(600,carrot+70,600,carrot+100);
    line(600,carrot+10,600,carrot+40);
    line(620,carrot+60,620,carrot+90);
    line(620,carrot-20,620,carrot+10);


    //bunny

    //bigger
    if (mouseX > width/2) {
        faceWidth ++ & 
        earWidth ++ && 
        earHeight ++ && 
        bodyWidth ++ && 
        bodyHeight ++ && 
        tailWidth ++ && 
        body2w ++ && 
        body2h ++ &&
        eyew ++ &&
        eyeh ++ &&
        nosew ++ &&
        noseh ++;

    }

    if (faceWidth > 45) {
        faceWidth = 45;
    }
    if (earWidth > 20) {
        earWidth = 20;
    }
    if (earHeight > 45) {
        earHeight = 45;
    }
    if (bodyWidth > 45) {
        bodyWidth = 45;
    }
    if (bodyHeight > 65) {
        bodyHeight = 65;
    }
    if (tailWidth > 25) {
        tailWidth = 25;
    }
    if (body2w > 55) {
        body2w = 55;
    }
    if (body2h > 45) {
        body2h = 45;
    }
    if (body2h > 45) {
        body2h = 45;
    }
    if (eyew > 3.5) {
        eyew = 3.5;
    }
    if (eyeh > 5.5) {
        eyeh = 5.5;
    }
    if (nosew > 6) {
        nosew = 6;
    }
    if (noseh > 5) {
        noseh = 5;
    }

    //smaller
    if (mouseX < width/2) {
        faceWidth-- & 
        earWidth-- && 
        earHeight-- && 
        bodyWidth-- && 
        bodyHeight-- && 
        tailWidth-- && 
        body2w-- && 
        body2h-- &&
        eyew-- &&
        eyeh-- &&
        nosew-- &&
        noseh--;
    }

    if (faceWidth<35) {
        faceWidth=35;
    }
    if (earWidth<10) {
        earWidth=10;
    }
    if (earHeight<35) {
        earHeight=35;
    }
    if (bodyWidth<35) {
        bodyWidth=35;
    }
    if (bodyHeight<55) {
        bodyHeight=55;
    }
    if (tailWidth<15) {
        tailWidth=15;
    }
    if (body2w<45) {
        body2w=45;
    }
    if (body2h<35) {
        body2h=35;
    }
    if (eyew<3) {
        eyew=3;
    }
    if (eyeh<3.5) {
        eyeh=3.5;
    }
    if (nosew<4.25) {
        nosew=4.25;
    }
    if (noseh<4) {
        noseh=4;
    }

    //left ear
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    var x = map(mouseX,0,width,body2w/2,width-body2w/2,true);
    ellipse(x,height-100,earWidth,earHeight);
 
    //right ear 
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x-10,height-95,earWidth,earHeight);

    //body
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,height-30,body2w,body2h/2);

    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x,height-40,bodyWidth,bodyHeight);

    //tail
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255);
    ellipse(x-10,height-15,tailWidth,tailWidth);

    //face
    stroke(128,128,128);
    strokeWeight(.2);
    fill(255); 
    ellipse(x,height-75,faceWidth,faceWidth);

    //eye
    noStroke();
    fill(0);
    ellipse(x-10,height-80,eyew,eyeh);

    //nose
    noStroke();
    fill(237,171,166);
    ellipse(x+14,height-75,nosew,noseh);

}

I think I was too ambitious for this project and wanted to do a lot more than what I have, but I was aiming for this to be a cute cartoon of a bunny eating carrots falling from the sky. If you move the mouse to the right side of the screen, carrots begin to drop from the sky and as the bunny moves to the right, he gets larger as he eats the falling carrots. If you move the mouse back to the left, the bunny becomes smaller and the carrots disappear.

Project03 – Aleax

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project03

var circleSize = 0

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

function draw() {

//RECTANGLES//
	//top half
	noStroke();
	if (mouseX < width / 2) {
		fill ("red");
	}
	if (mouseX > width / 2) {
		fill ("blue");
	}
	rect (0, 0, width, height / 2)

	//top half
	noStroke();
	if (mouseX > width / 2) {
		fill ("yellow")
	}
	if (mouseX < width / 2) {
		fill ("green");
	}
	rect (0, height / 2, width, height / 2);

//MIDDLE CIRCLES//
	// middle circle (small)
	strokeWeight(5);
	if (mouseX < width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX > width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX < width / 2) {
		stroke(255);
	}
	if (mouseX > width / 2) {
		stroke(0);
	}

	noFill();
	ellipse (width / 2, height / 2, circleSize, circleSize);

	// middle circle (medium)
	strokeWeight(5);
	if (mouseX < width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX > width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX < width / 2) {
		stroke(255);
	}
	if (mouseX > width / 2) {
		stroke(0);
	}
	
	noFill();
	ellipse (width / 2, height / 2, circleSize - 30, circleSize - 30);	

	// middle circle (big)
	strokeWeight(5);
	if (mouseX < width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX > width / 2) {
		circleSize = width / 2 - mouseX
	}
	if (mouseX < width / 2) {
		stroke(255);
	}
	if (mouseX > width / 2) {
		stroke(0);
	}

	noFill();
	ellipse (width / 2, height / 2, circleSize - 60, circleSize - 60);

//SIDE TRIANGLES//
	//right triangle 1
	noStroke();
	fill("purple");
	if (mouseY < height / 2) {
		triangle(width - 30, mouseY - 20, width - 10, mouseY - 20, width - 20, mouseY)
	}
	if (mouseY > height / 2) {
		triangle(width - 20, mouseY, width - 30, mouseY + 20, width - 10, mouseY + 20)
	}

	//right triangle 2
	fill("purple");
	if (mouseY < height / 2) {
		triangle(width - 60, mouseY - 50, width - 40, mouseY - 50, width - 50, mouseY - 30)
	}
	if (mouseY > height / 2) {
		triangle(width - 50, mouseY + 30, width - 60, mouseY + 50, width - 40, mouseY + 50)
	}
	
	//right triangle 3
	fill("purple");
	if (mouseY < height / 2) {
		triangle(width - 90, mouseY - 80, width - 70, mouseY - 80, width - 80, mouseY - 60)
	}
	if (mouseY > height / 2) {
		triangle(width - 80, mouseY + 60, width - 90, mouseY + 80, width - 70, mouseY + 80)
	}

	//left triangle 1
	fill("purple");
	if (mouseY < height / 2) {
		triangle(30, mouseY - 20, 10, mouseY - 20, 20, mouseY)
	}
	if (mouseY > height / 2) {
		triangle(20, mouseY, 30, mouseY + 20, 10, mouseY + 20)
	}

	//left triangle 2
	fill("purple");
	if (mouseY < height / 2) {
		triangle(60, mouseY - 50, 40, mouseY - 50, 50, mouseY - 30)
	}
	if (mouseY > height / 2) {
		triangle(50, mouseY + 30, 60, mouseY + 50, 40, mouseY + 50)
	}
	
	//left triangle 3
	fill("purple");
	if (mouseY < height / 2) {
		triangle(90, mouseY - 80, 70, mouseY - 80, 80, mouseY - 60)
	}
	if (mouseY > height / 2) {
		triangle(80, mouseY + 60, 90, mouseY + 80, 70, mouseY + 80)
	}
}

This project definitely helped me think really creatively due to the open-ended nature of the project. My inspirations for this project was different flags of different countries as well as airplane shows. I think the challenge of this project was to think creatively with the "if" conditional sentences.

Audrey Zheng-Project03

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Project 03

var cx = 0;
var cy = 0;
var radius = 150;
var blue = 40;

var vertices = 4;
var angle = 0;

var listvertices = new Array();
listvertices[0] = new Array(cx-radius, cy);
listvertices[1] = new Array(cx, cy-radius);
listvertices[2] = new Array(cx+radius, cy);
listvertices[3] = new Array(cx, cy+radius);


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

function wheel() {

    beginShape();
    for (i= 0; i <listvertices.length; i++) {
        for (j=0; j<listvertices.length; j++) {
            stroke(50,50,blue);
            line(listvertices[j][0], listvertices[j][1], listvertices[i][0], listvertices[i][1]);

        }
    }
    endShape(CLOSE);



} 


function mousePressed() {


}

function draw() {
    scale(0.8);
	background(255);

    text("p5.js test", 25, 15);

    push();
    translate(320,240);
    rotate(frameCount / 160.0);


    wheel();
    pop();

    //restrict mouseX from 0 to 255
    var m = max(min(mouseX, 255), 0);
    blue = m;

    stroke(50,50,blue);

    if ((mouseX > 320) & (frameCount%2 == 0) && (vertices <13)) { //do not let the points get infinitely bigger
        listvertices = [];
        vertices += 1;

        var j;
        var a = angle;
        for (j=1; j < vertices + 1; j++) {
            print("hi");
            a += 2* Math.PI/vertices; //2pi is whole circle in radians


            var newpoint = new Array(cx + radius*Math.cos(a), cy + radius*Math.sin(a));

            listvertices.push(newpoint);

        }   
    //print(listvertices);
    }

    if ((mouseX < 320) & (frameCount%2 == 0) && (vertices > 2)){
        listvertices = [];
        vertices -= 1;

        var k;
        var a = angle;
        for (k=1; k < vertices + 1; k++) {

            a += 2* Math.PI/vertices; //2pi is whole circle in radians


            var newpoint = new Array(cx + radius*Math.cos(a), cy + radius*Math.sin(a));

            listvertices.push(newpoint);

        }   
    //print(listvertices);
    }

    var size_of_each_line = max(min(mouseX, 230), 60);
    radius = size_of_each_line;



   
}

Alessandra Fleck – Project 03 – Dynamic Drawing

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-03

var angle = 0;

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

    // set background to night color
    background(28, 41, 74);
    noStroke();

    //change background color
    if (mouseX < (width / 2)) {
        background (148, 236, 223); //change background to day when mouse is in left of halway
    }

    //Create the Sun and Moon
    //Moon
    fill(215, 215, 215);
    var m = max(min(mouseX, 400), 0);
    var size = m * 200 /400;
    ellipse(450 + m * 190.0 / 480, 100.0, size, size);

    //Sun
    fill(214, 212, 161);
    size = 100 - size;
    ellipse(200 + m * 190.0 / 480, 200.0, size + 10, size);


    //rolling hill-01 (left)
    push();
    translate (100,600);
    rotate(radians(angle));
    fill(115, 99,87);
    ellipse(-200,150,500,500);
    pop();

    //rolling hill-02 (right)
    push();
    translate (100,600);
    rotate(radians(-angle));
    fill(115, 99,87);
    ellipse(200,50,500,500);
    pop();

    fill(51,41,32); // dark back hill
    ellipse(0, 500, 750, 800);

    //First Tree left
    fill(95, 150, 124);
    rect(opp -50, 40, 20, 400);

    //Hill in the far back
    fill(80,66,56);
    var m = max(min(width - mouseX, 800), 400);
    var size = m * 100 / 450;
    ellipse(100 + m * 100 / 480, 400, size + 400, 300);

    //Hill on the right that moves against cursor
    fill(115, 99,87);
    var m = max(min(width - mouseX, 800), 400);
    var size = m * 100 / 450;
    ellipse(500 + m * 100 / 480, 400, size + 300, 200);
    

    //Solid to cover the hills

    fill(176, 169, 138);
    rect(0, 400, 700, 100);
    fill(176, 169, 138); // solid hill on left (brown)
    ellipse(0, 400, 700, 100);
    fill(115, 99,87); // solid hill on left (brown)
    ellipse(0, 400, 650, 80);
    
    fill(150,125,107); // solid hill on right (brown)
    ellipse(400, 450, 650, 90);

    
    //Bushes
    var opp = width - mouseX; 
 
    fill(87, 129, 59); // bush front
    ellipse(mouseX-500, 350, 800, 60);

    fill(73, 83, 65); //ground floor
    ellipse(mouseX - 300,380,600,80);

    fill(107, 147, 88); // bush behind
    ellipse(mouseX-400, 400, 800, 80);
    

    angle = angle + 3;
 
    //Tree_01
    fill(42, 22, 33); //tree trunk
    rect(opp, 200, 40, 400);
    fill(18, 70, 43); //tree top
    ellipse(opp,200,250,200);
    ellipse(opp,300,350,200);

    //Tree_02
    fill(83, 71, 65); //medium tree trunk
    rect(opp + 95, 100, 30, 400);
    

    //Tree_03
    fill(42,22,33);
    rect(opp + 50, 50, 30, 400);
    fill(100, 120, 69); //tree top-02
    ellipse(opp+100,100,150,200);

    //Tree_04
    fill(98, 66, 36);
    rect(opp -50, 40, 20, 400);
    fill(87, 129, 59); //tree top
    ellipse(opp - 80,100,100,100);
    fill(100, 120, 69); //tree top-02
    ellipse(opp,200,150,200);

    fill(107, 147, 88); //tree top-light
    ellipse(opp,150,100,100);

    fill(77, 83, 65); //tree top
    ellipse(opp+100,200,150,200);

    fill(107, 147, 88); //tree top-light
    ellipse(opp - 60,300,100,100);

    fill(107, 147, 88); //tree top-light
    ellipse(opp + 150,250,80,60);

    fill(96, 166, 104); //ground floor
    ellipse(opp - 60,480,500,100);
    

}

For this project I wanted to use the simple movements we learned with rotation and translation of objects and use ellipses to make rolling hills and scenery. The inspiration for this project came from me working on it indoors and wanting to go outside.

Joanne Lee – Project 03

Joanne Lee – Project 03

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-03
var rainSpeed = 0

function setup() {
  createCanvas(480,640);
  textFont("Calibri");
  textAlign(CENTER,CENTER);
  textSize(40);
}

function draw() {
  var leftX = 150 - (mouseY * 0.5); // shifts left when mouse moves
  var rightX = 320 + (mouseY * 0.5); // shifts right when mouse moves

  // cloud colors, changes from gray to light blue with mouse
  var BGR = 104 + mouseY * 0.15;
  var BGG = 129 + mouseY * 0.15;
  var BGB = 141 + mouseY * 0.3;

  background(BGR,BGG,BGB);

  // sunshine, gets bigger with mouse
  var size = mouseY * 0.15;
  var sunG = 140 + mouseY * 0.15; // changes color from orange to yellow with mouse
  fill(255,sunG,0);
  ellipse(300,200,size,size);

  // sun rays, get bigger with mouse
  var ray = 0;
  var rayX1 = 30 + mouseY * 0.04;
  var rayY1 = 10 + mouseY * 0.04;
  var rayX2 = 30 + mouseY * 0.07;
  var rayY2 = 20 + mouseY * 0.07;
  var rayX3 = 40 + mouseY * 0.07;
  var rayY3 = 15 + mouseY * 0.07;
  var angle = 0;

  push();
  stroke(255,sunG,0);
  strokeWeight(3);
  translate(300,200);
  for (ray = 0; ray < 10; ray++, angle += 36) { // rotates to draw each ray
    push();
      rotate(radians(angle));
      triangle(rayX1, rayY1, rayX2, rayY2, rayX3, rayY3);
    pop();  
  }
  pop();

  // encouraging text, moves into place with mouse
  var textX1 = 850 - mouseY;
  var textY1 = 1150 - mouseY;
  var textX2 = 850 - mouseY;;
  var textY2 = 1190 - mouseY

  text("Have the day",textX1,textY1);
  text("you deserve!", textX2, textY2);


  // clouds
  strokeWeight(0);
  fill(201,221,243);
  ellipse(leftX,150,155,125); // left clouds
  ellipse(leftX+65,150,120,95);
  ellipse(leftX-65,150,120,95);
  ellipse(rightX,210,155,125); // right clouds
  ellipse(rightX+65,210,120,95);
  ellipse(rightX-65,210,120,95);

  // raindrops
  var i = 0;
  var a = 50 - (mouseY); // shift left with mouse
  var b = 100 - (mouseY); // shift left with mouse
  var c = 250 + (mouseY * 0.7); // shift right with mouse
  var d = 300 + (mouseY * 0.7); // shift right with mouse

  stroke(201,221,243);
  strokeWeight(0.75);

  for (i = 0; i < 2; a += 100, b += 100, i++) { // left raindrops
    line(a, 150 + rainSpeed, a, 170 + rainSpeed);
    line(b, 250 + rainSpeed, b, 270 + rainSpeed);
    line(a, 350 + rainSpeed, a, 370 + rainSpeed);
    line(b, 450 + rainSpeed, b, 470 + rainSpeed);
    line(a, 550 + rainSpeed, a, 570 + rainSpeed);
    if (rainSpeed > 100) {
      line(b, 50 + rainSpeed, b, 70 + rainSpeed);
    }
  }

  for (c = 250 + (mouseY * 0.7); d < 500; c += 100, d += 100) { // right raindrops
    line(c, 150 + rainSpeed, c, 170 + rainSpeed);
    line(d, 250 + rainSpeed, d, 270 + rainSpeed);
    line(c, 350 + rainSpeed, c, 370 + rainSpeed);
    line(d, 450 + rainSpeed, d, 470 + rainSpeed);
    line(c, 550 + rainSpeed, c, 570 + rainSpeed);
    if (rainSpeed > 100) {
      line(d, 50 + rainSpeed, d, 70 + rainSpeed);
    }
  }

  // rain loop
  if (rainSpeed == 200) {
    rainSpeed = 0;
  }
  rainSpeed += 5;
}

Pittsburgh has been having rainy days, so I wanted to create a project where I could make the rain go away whenever I wanted. I especially had fun making the raindrops loop and making the background color and sun color fade in / out from its initial color.

Project 03 Dynamic Drawing

sketch

/* Jaclyn Saik 
Section E
jsaik@andrew.cmu.edu
Assignment-00-A
*/

//general set up 

var circleX = 50  //x position of circles
var circleY = 50 //y positions of circles
var circleOFFSET = 3
var circleSIZE = 50 //diameter of circle, set so later can be manipulated by mouse
var conOFFSET = 100 //offset value used to space out the triangles
var angle = 0
var angle2 = 0
var angleCHANGE = 6


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

function draw() {
    background(25, mouseX/5, 25, mouseY/3); 
    //modifies alpha value so it's relative to y value, determines shape trail
    //X value of mouse controls background color 

    circleSIZE = constrain(mouseX/5, 20, 300); //circle size controlled by mouse X position, but constrained within 2 and 300
    circleSIZE = circleSIZE/2 //reduced size again in half so managebale within canvas


    //changing texts set up

    fill(255);
    if (mouseX > width/2) {
        text('NICE!!!!!!!!!', 100, 300); //all text switches when the mouse's 
        //X position is in second half of canvas
    }  else { text('wow', 100, 310)
    }

    fill(255);
    if (mouseX > width/2) {
        text('cool', 150, 350);
    }  else { text('YIKES!', 150, 340)
    }

    fill(255);
    if (mouseX > width/2) {
        text('rock on!', 500, 50);
    }  else { text('super!!!', 500, 60)
    }

    fill(255);
    if (mouseX > width/2) {
        text('that is crazy dude!', 450, 200);
    }  else { text('NUTS!', 440, 190)
    }
    

    //stroke set up

    if (mouseY < height/2) {
        stroke(237, 107, 170);
        strokeWeight(mouseX/20) //stroke weight is determines by mouse's X position
    } else { noStroke(); //stroke is determined by mouse's Y position 
    }


    //Circle position and rotation set up

    //line 1

    //line 1, circle 3
    push();
    translate(width/2, height/2); //moves origin to the center of canvas
    rotate(radians(angle)); 
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE); //white circle in front 
    angle = (angle + angleCHANGE); //determines angle of rotation 
    pop();


    //line 1, circle 4
    push();
    translate(width/2+conOFFSET, height/2+conOFFSET); //moves new origin, using offset to keep it regular 
    //I use translate throughout to change the rotation center for each ellipse
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 1, circle 2
    push();
    translate(width/2-conOFFSET, height/2-conOFFSET);
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 1, circle 5
    push();
    translate(width/2+conOFFSET*2, height/2+conOFFSET*2);
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();

    // line 1, circle 1
    push();
    translate(width/2-conOFFSET*2, height/2-conOFFSET*2);
    rotate(radians(angle));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();


    //line 2

    //line 2, circle 3
    push();
    translate(width/2, height/2);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE); //white circle in front 
    angle2 = (angle2 - angleCHANGE);
    pop();


    //line 2, circle 4
    push();
    translate(width/2+conOFFSET, height/2+conOFFSET);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 2, circle 2
    push();
    translate(width/2-conOFFSET, height/2-conOFFSET);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
    
    //line 2, circle 5
    push();
    translate(width/2+conOFFSET*2, height/2+conOFFSET*2);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();

    // line 2, circle 1
    push();
    translate(width/2-conOFFSET*2, height/2-conOFFSET*2);
    rotate(radians(angle2));
    fill(44, 131, 204);
    ellipse(circleX+circleOFFSET, circleY+circleOFFSET, circleSIZE, circleSIZE); //blue circle
    fill(232, 86, 71);
    ellipse(circleX-circleOFFSET, circleY-circleOFFSET, circleSIZE, circleSIZE); //red circle
    fill(255);
    ellipse(circleX, circleY, circleSIZE, circleSIZE);
    pop();
   

}

 

Jaclyn Saik Project 03

This project was definitely the most challenging because it was so open ended. I was originally inspired by another geometric animation I saw on Colossal, where there were a bunch of very small white dots that had slight colored shadows, which made them look extremely mesmerizing and gave them an appearance of movement even in the moments they were static. With my sketch, I wanted to play with the idea of rotating and spinning elements that are changes by the mouse.  While making the circles rotate around an origin, I played with making them all revolve around the mouse, but I ended up making something that was a steadier in composition so that you could more easily interact with it with your mouse. I had the mouse position change the little text that cheers you on, as well as the stroke and color changes. I had a lot of fun making the objects create a trailed background, and I think it made the project look even crazier, which is what I was going for.