Category: Uncategorized

jinheel1_project-03

var sqCenterX = 240; //dimensions of yellowing square
var sqCenterY = 240;
var sqW = 0;
var sqH = 0;
var sqMin = 0; //sets min and max size of square
var sqMax = 200;

var ellCenterX = 240; //dimensions of doorknob within square
var ellCenterY = 240;
var ellPlace = 0; //placeholder variable for placing doorknob after translate()
var ellW = 0;
var ellH = 0;
var ellMin = 0; //min size of doorknob set at 0
var ellXMax = 80; //max horizontal size of doorknob
var ellYMax = 150; //max vertical size of doorknob
var ellAngle = 0; //initiates doorknob angle
var ellAngleMin = 0;
var ellAngleMax = 360;

var lnTopX = 440; //dimensions of purple borderlines
var lnTopY = 40;
var lnTopX2 = 440;

var lnLeftX = 40;
var lnLeftY = 40;
var lnLeftY2 = 40;

var lnBottomX = 40;
var lnBottomY = 440;
var lnBottomX2 = 40;

var lnRightX = 440;
var lnRightY = 440;
var lnRightY2 = 440;

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

function draw() {
    background(0);
    rectMode(CENTER);
    
    var masterHand = map(mouseX, 0, width, 0, 1); //used in lerp functions to change picture
    var fromCol = color(255); //white when square is smallest
    var toCol = color(255,255,0); //yellow when square is largest
    var col = lerpColor(fromCol, toCol, masterHand); //changes color with mouseX position

    strokeWeight(0);
    fill(col); //color for square
    rect(sqCenterX, sqCenterY, sqW, sqH); //square gets yellower with size

    fill("red"); //color for rotating "doorknob"
    push();
    translate(ellCenterX,ellCenterY); //"translates" origin, doorknob rotates on center
    rotate(radians(ellAngle)); //rotates the doorknob
    ellipse(ellPlace, ellPlace, ellW, ellH); //changes size and angle with mouseX position
    pop();

    stroke(255,0,255); //purple color for lines
    strokeWeight(5); //below are the purple lines that grow
    line(lnTopX, lnTopY, lnTopX2, lnTopY);
    line(lnLeftX, lnLeftY, lnLeftX, lnLeftY2);
    line(lnBottomX, lnBottomY, lnBottomX2, lnBottomY);
    line(lnRightX, lnRightY, lnRightX, lnRightY2);

    if (mouseX <= width & mouseY <= height) { //changes only when mouse is in canvas
        sqW = lerp(sqMin, sqMax, masterHand); //changes square width
        sqH = lerp(sqMin, sqMax, masterHand); //changes square height

        ellW = lerp(ellMin, ellXMax, masterHand); //changes doorknob width
        ellH = lerp(ellMin, ellYMax, masterHand); //changes doorknob height
        ellAngle = lerp(ellAngleMin, ellAngleMax, masterHand); //changes doorknob angle

        lnTopX2 = lerp(lnTopX, height - lnTopX, masterHand); //changes the purple line length
        lnLeftY2 = lerp(lnLeftY, height - lnLeftY, masterHand);
        lnBottomX2 = lerp(lnBottomX, height - lnBottomX, masterHand);
        lnRightY2 = lerp(lnRightY, height - lnRightY, masterHand);
    }
}

For this project, it seemed more important than ever to build a rough template (the shapes, colors, lines, etc.) and expand upon it later (making global/local variables to avoid magic numbers, creating several of the same type of object with slight differences, etc.).

I was afraid I wouldn’t be able to get the rotate() functions to do what I wanted; thank goodness I attended lecture when they mentioned push(), pop(), and translate().

P.S., regarding the visual not “completing” when the mouse is put all the way to the right, I believe it’s simply a limitation of the site. Even when I put data-width=1000 during embedding, the actual amount of canvas shown doesn’t change. Also, when opened using the html file, the visual does complete when the mouse is dragged all the way to the right.

sketch

//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-03

var x1 = 140;
var y1 = 160;
var r1 = 30;

var x2 = 550;
var y2 = 300;
var r2 = 100;

var R = 150;
var G = 35;
var B = 75;

var num = 5;


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

function draw() {
 background("MistyRose");

fill("MediumSpringGreen");
 ellipse(110,210,90,90);      //background pokadots

 ellipse(310,110,70,70);

 ellipse(600,40,10,10);

 ellipse(350,390,20,20);

 ellipse(50,50,60,60);

 ellipse(210,420,50,50);

 ellipse(250,240,80,80);

 ellipse(620,460,25,25);

 ellipse(500,190,45,45);

 ellipse(30,460,8,8);

 ellipse(450,100,35,35);

 ellipse(90,350,55,55);

 ellipse(640,380,100,100);

 ellipse(400,290,25,25);

  fill(R,G,B);

  ellipse(x1,y1,r1,r1);         //draws left side ellipse

  for (var i = 0; i<num;i++) {      //makes the motion effect

  ellipse(x2-(10*i),y2,r2,r2);       //draws right side ellipse
  

  }


  if ((mouseX >= x1-r1) & (mouseX<=x1+r1) && (mouseY<=y1+r1) && (mouseY>=y1-r1) && (num>1)){

   x1 = x1+1;
   y1 = y1+1;
   r1 = r1+1;
                             //right side ellipse
   x2 = x2-1;
   y2 = y2-1;
   r2 = r2-1;

   num = num-1;


  }

   if ((mouseX >= x2-r2) & (mouseX<=x2+r2)){
   

   x2 = x2+0.5;
   y2 = y2+0.75;
   r2 = r2+0.1;
                         //left side ellipse
   x1 = x1-0.8;
   y1 = y1-0.4;
   r1 = r1-0.2;
   
   num =num+1;

  }

}

 

This was a challenge for me because I had a lot of trouble getting my if statements to work.  Luckily after many hours of perseverance it came together!

sketch

//Yugyeong Lee
//section A (9:30AM)
//yugyeonl@andrew.cmu.edu
//project 3

var x = 320;
var y = 240;
var dir = 1;

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

function draw() {

	//background color change based on position of mouseX
	colorR = map(mouseX, 0, width, 255, 255);
	colorB = map(mouseX, 0, width, 179, 255);
	colorG = map(mouseX, 0, width, 179, 204);
	background(colorR, colorG, colorB);
	noStroke();
	noCursor();

	//random circles with changing sizes
	noStroke();
	fill(0);
	var diam = map(mouseX, 0, width, 0, 100);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 75);
	ellipse(width/6, 5 * height/6, diam, diam);
	var diam = map(mouseX, 0, width, 0, 25);
	ellipse(width/2, 4 * height/7, diam, diam);
	ellipse(8 * width/9, 8 * height/9, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(width/4, height/4, diam, diam);
	var diam = map(mouseX, 0, width, 0, 50);
	ellipse(4 * width/5, height/2, diam, diam);

	//motionless circles
	ellipse(5 * width/7, 9 * height/12, 20, 20);
	ellipse(6 * width/8, height/9, 15, 15);
	ellipse(3 * width/7, 11 * height/12, 15, 15);
	ellipse(width/3, 3 * height/7, 15, 15);

	//mouse guide (mouseX)
	if (mouseX > x) {
		x += 0.75;
	}
	if (mouseX < x) {
		x -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(x, 0, x, height);
	line(x + 20, 0, x + 20, height);

	//mouse guide (mouseX)
	if (mouseY > y) {
		y += 0.75;
	}
	if (mouseY < y) {
		y -= 0.75;
	}
	strokeWeight(10);
	stroke(255);
	line(0, y, width, y);
	line(0, y + 20, width, y + 20);

	//change the direction of rotation of the cursor
	if (mouseX > width/2) {
		dir = -dir;
	}

	//rotating shape for cursor
	noStroke();
	fill(0);
	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -6, 24, 0, 48, 6, 24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, -24, -6, -48, 0, -24, 6);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 6, -24, 0, -48, -6, -24);
	pop();	

	push();
	translate(mouseX, mouseY);
	rotate(dir * millis()/500);
	quad(0, 0, 24, 6, 48, 0, 24, -6);
	pop();

	//blackout when any key is pressed
	if (keyIsPressed) {
		fill(0);
		rect(0, 0, width, height);
	}

}

The most challenging part of this project was planning to create a design for the dynamic drawing rather than figuring out the codes.

I call this drawing the “Rainbow Eraser.” As you move the cursor from left to right, a black rectangle covers the rainbow. As you move back from right to left, the black rectangle is erased.

 

sketchindex

//Arula Ratnakar
//aratnaka
//Section C 
//Dynamic Drawing: Rainbow Eraser

var redX = 0;
var orangeX = 100; //beginning of the orange rectangle
var yellowX = 200;
var greenX = 300;
var blueX = 400;
var purpleX = 500;
var purpleY = 600;
var colorMain = 0; //variable used to create the main white rectangle at the end


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

function draw() {
	noStroke ();
	background (0);
	fill (255, colorMain, colorMain);//fills first rectangle with red (for now)
	rect (redX ,0, orangeX, 600);
	fill ('orange');
	rect (orangeX,0, orangeX, 600);
	fill ('yellow');
	rect (yellowX, 0, orangeX, 600);
	fill ('green');
	rect (greenX, 0, orangeX, 600);
	fill ('blue');
	rect (blueX, 0, orangeX, 600);
	fill ('purple');
	rect (purpleX, 0, orangeX, 600);

	
	if (mouseX < 600) {
		redX = mouseX; //attaches mouseX to the leftmost edge of the red rectangle
	}

	if (mouseX > yellowX) {
		orangeX = mouseX;
	}

	if (mouseX > greenX){
		yellowX = mouseX;
	}

	if (mouseX > blueX){
		greenX = mouseX;
	}

	if (mouseX > purpleX){
		blueX = mouseX;
	}

	if (mouseX > 600) {
		purpleX = mouseX;//as you drag the mouse from left to right, the black background shows through, "erasing" the rainbow
	}

	if (mouseX > 600){
		colorMain = 255; // when you start to drag the mouse back from right to left, the white will "erase" the black box
	}
	

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

bdarreff_project03

//Brandon Darreff

//Section A

//bdarreff@andrew.cmu.edu

//Project-03




function setup() {
    createCanvas(600, 400, WEBGL);
}

function draw() {

	var orbitMe = frameCount * 0.001;	//Mercury orbit speed
	var orbitV = frameCount * 0.0001;	//Venus orbit speed
	var orbitE = frameCount * 0.01;	//Earth orbit speed
	var orbitM= frameCount * 0.01;	//Mars orbit speed
	var orbitJ = frameCount * 0.07;	//Jupiter orbit speed
	var orbitS = frameCount * 0.01;	//Saturn orbit speed
	var orbitU = frameCount * 0.05;	//Uranus orbit speed
	var orbitN = frameCount * 0.05; //Neptune orbit speed
	var res = 100 //resolution of spheres

	background(0);

	//sunlight tracked to mouse position
	var sunlightY = (mouseY / height - 0.5) * (-2);
	var sunlightX = (mouseX) / width - 0.5;
	pointLight(250, 250, 250, sunlightX, sunlightY, 0);
	

	//Mercury
	translate(-width, -350);
	push();
	//orbit
	rotateZ (orbitMe);
	rotateX (orbitMe);
	rotateY (orbitMe);
	//surface color
	ambientMaterial(100);
	sphere(20, res);
	pop();

	//Venus
	translate(height / 4, height / 4);
	push();
	//orbit
	rotateZ (orbitV);
	rotateX (orbitV);
	rotateY (orbitV);
	//surface color
	ambientMaterial(174, 103, 58);
	sphere(30, res);
	pop();

	//Earth
	translate(height / 4, height / 4);
	push();
	//orbit
	rotateZ (orbitE);
	rotateX (orbitE);
	rotateY (orbitE);
	//surface color
	ambientMaterial(32, 67, 100);
	sphere (35, res);
	pop();

	//object orbiting earth
	push();
	ambientMaterial(255, 30);
	rotateY(orbitE);
	rotateX(orbitE)
	ellipse(-87, 90, 200, 100, 100, 0);
	pop();

	//Mars 
	translate(height / 4, 70);
	push();
	//orbit
	rotateZ (orbitM);
	rotateX (orbitM);
	rotateY (orbitM);
	//surface color
	ambientMaterial(131, 51, 44);
	sphere(25, res);
	pop();

	//object orbiting mars
	push();
	ambientMaterial(255, 30);
	rotateZ(orbitE);
	ellipse(-87, 90, 100, 80, 100, 0);
	pop();

	//Jupiter
	translate(200, 120);
	push();
	//orbit
	rotateZ (orbitJ);
	rotateX (orbitJ);
	rotateY (orbitJ);
	//surface color
	ambientMaterial(199, 142, 87);
	sphere(150, res);
	pop();
	
	//object orbiting jupiter
	push();
	ambientMaterial(255, 30);
	rotateX(orbitJ);
	ellipse(-87, 90, 200, 100, 100, 0);
	pop();

	//Saturn
	translate(260, 120);
	push();
	//orbit
	rotateZ (orbitS);
	rotateX (orbitS);
	rotateY (orbitS);
	//surface color
	ambientMaterial(210, 169, 121);
	sphere(120, res);
	pop();

	//object orbiting saturn
	push();
	ambientMaterial(255, 30);
	rotateX(orbitS);
	rotateY(orbitS);
	ellipse(-87, 90, 500, 100, 100, 0);
	pop();

	//Uranus
	translate(210, 75);
	push();
	//orbit
	rotateZ (orbitU);
	rotateX (orbitU);
	rotateY (orbitU);
	//surface color
	ambientMaterial(104, 179, 205);
	sphere(70, res);
	pop();

	//Neptune
	translate(180, 75);
	push();
	//orbit
	rotateZ (orbitN);
	rotateX (orbitN);
	rotateY (orbitN);
	//surface color
	ambientMaterial(97, 136, 202);
	sphere(70, res);
	pop();

	//object orbiting neptune
	push();
	ambientMaterial(255, 25);
	rotateX(orbitN);
	rotateY(orbitN);
	rotateZ(orbitN);
	ellipse(-87, 90, 300, 100, 100, 0);
	pop();

}

With this project I focused on creating a dynamic drawing which mimics changing sunlight on spheres meant to represent planets. Each planet rotates around its own axis at a rate derived from its respective actual rotation speed and additional objects are set into motion around various planet axises. The sunlight projected onto the spheres is tracked by the position of the mouse to add another dynamic variable to the overall image.

Move mouse to the left,the size of the circles will be smaller; move mouse to the right, the size of the circles will be bigger. Mouse X and Mouse Y also control colors of the circles.
sketch

var a=100;//square size
var b=200;//circle size
var c=100;//x,y of squares and circles

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

function draw() {
	background(220);

	fill(232,180,mouseY);
	strokeWeight(5);
	ellipse(mouseX,height/2,480,480);

	//element 1
	push()
	translate(width/2,height/2);
	rotate(millis()/500);
	strokeWeight(5);
	fill(mouseX,155,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();


	//element 2
	push()
	translate(width/2,height/2);
	rotate(millis()/-500);
	strokeWeight(5);
	fill(234,mouseX,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();

	//element 3
	push()
	translate(width/2,height/2);
	rotate(millis()/-500);
	strokeWeight(5);
	fill(120,mouseX+50,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 4
	push()
	translate(width/2,height/2);
	rotate(millis()/500);
	strokeWeight(5);
	fill(mouseX,202,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 4-2
	push()
	translate(width/2,height/2);
	rotate(millis()/2000);
	strokeWeight(5);
	fill(mouseX,202,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	pop();

	//element 2-2
	push()
	translate(width/2,height/2);
	rotate(millis()/-2000);
	strokeWeight(5);
	fill(234,mouseX,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();


	//element 3-2
	push()
	translate(width/2,height/2);
	rotate(millis()/-2000);
	strokeWeight(5);
	fill(120,mouseX+50,178);
	rect(0,0,a,a);
	ellipse(c,c,b,b);
	
	pop();

	//element 1-2
	push()
	translate(width/2,height/2);
	rotate(millis()/2000);
	strokeWeight(5);
	fill(mouseX,155,mouseY);
	rect(-c,-c,a,a);
	ellipse(-c,-c,b,b);
	pop();

	if (mouseX>width/2){
		b+=0.5;

	}

	if (mouseX<width/2){
		b=b-0.5;

	}

}

I used basic geometries(squares and circles) in this project. There are two layers of the elements rotating in different speed and directions. Mouse X controls the sizes of the circles and Mouse X, Mouse Y together change the colors.

I had a lot of issues coming up with an idea but looking at my ceiling fan for a little while helped me come to this quirky conclusion. Windmills are neat, I like them a lot, and I was inspired to create this. The mouseX position correlates to the current weather inside the canvas and the mouseY position correlates to the blade speed depending on the weather 🙂
Figuring out how to make the blades go faster took a long time. I tried to make a variable called Windspeed for the “rotate(milli()/1000);” part, and just have it as “rotate(Windspeed);” but that broke my code… and so did many other variations of that variable attempt… So I just had to manually change it with a conditional and by switching 1000 to 500 and 200 depending on the mouseY… That was fun. 
sketch

//Rhea Nayyar
// Section C
//rnayyar@andrew.cmu.edu
//Project 03-C; Dynamic Drawing

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

function draw() {
	background("SkyBlue"); //sky
   if (mouseX>=150){
     background(105); //cloudy sky
   }
   if(mouseX>=350){
     background(random(80,145)); //stormy sky
   }
  fill('YellowGreen'); //field
  rect(0,400,640,480);
  fill("OliveDrab"); //mountains
  quad(-70,400, 100,400,45,310,-30,390);
  quad(0,400,300,400,100,330,21,400);
  quad(275,400,480,400,480,310,420);
  push();
  translate(width/2,height/2);
  fill('DarkRed'); //Windmill stalk
  quad(-40,0, 30,0, 70, 200, -60,200);
  fill("DimGrey"); //disk behind windmill blades
  ellipse(0,0,50,50);
  fill(0); //door
  stroke('Yellow'); //molding
  rect(-10,150,30,50);
  fill("White"); //windmill blades
  noStroke();
   if (mouseY>=200){
     rotate(millis()/500); //mid-speed (cloudy)
   }
   if (mouseY>=420){
     rotate(millis()/100); //super-speed (stormy)
   }
  rotate(millis()/1000); //regular speed (normal)
  rotate(radians(100));
  quad(0,0,95,0,85,30,10,30);
  rotate(radians(260));
  quad(0,0,95,0,85,30,10,30);
  rotate(radians(270));
  quad(0,0,95,0,85,30,10,30);
  rotate(radians(275));
  quad(0,0,95,0,85,30,10,30);
  pop();
}

project-03

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-03
var xT;// x value for turquoise circles
var yT; // y value for turquoise circles

var diamx = 30; //x value diameter
var diamy = 30; // y value diameter

var diffx = 0;
var diffy = 0;// x and y values to get dragging effect

var drag = .05; //speed of dragging effect

var swarmX = 300;
var swarmY = 300;// original ball orientation

var swarmXA = 200;
var swarmYA = 200;//copy A ball orientation

var swarmXB = 100;
var swarmYB = 100;//copy B ball orientation

var swarmXC = 400;
var swarmYC = 400;//copy C ball orientation

function setup() {
    createCanvas(640, 480);
    xT = width/2;
    yT = height/2; // original orientation of turqoise circles
}

function draw() {

  var colR = map(mouseY, 0, height, 0, 255);
  var colG = map(mouseY, 0, height, 95, 95);
  var colB = map(mouseY, 0, height, 120, 120); //magic numbers are being used for color
    background(colR, colG, colB);

  diffx = mouseX - swarmX;
  diffy = mouseY - swarmY; // subtracting to get same position

  swarmX = swarmX + drag*diffx;
  swarmY = swarmY + drag*diffy; //specific speed of drag

  noStroke();
  fill(255);
  ellipse(swarmX, swarmY, diamx, diamy);//original circle

  diffx = mouseX - swarmXA;
  diffy = mouseY - swarmYA;
  swarmXA = swarmXA + (drag*2) *diffx;
  swarmYA = swarmYA + (drag*2) *diffy;
  noStroke();
  fill(255);
  ellipse(swarmXA, swarmYA, diamx, diamy);//altered circle A

  diffx = mouseX - swarmXB;
  diffy = mouseY - swarmYB;
  swarmXB = swarmXB + (drag/2)*diffx;
  swarmYB = swarmYB + (drag/2)*diffy;
  noStroke();
  fill(255);
  ellipse(swarmXB, swarmYB, diamx, diamy);//altered circle B

  diffx = mouseX - swarmXC;
  diffy = mouseY - swarmYC;
  swarmXC = swarmXC + (drag/4) *diffx;
  swarmYC= swarmYC + (drag/4) *diffy;
  noStroke();
  fill(255);
  ellipse(swarmXC, swarmYC, diamx, diamy);//altered circle C

  if (mouseIsPressed) //changes x diameter of ellipses
   diamx = 50;
   else {
     diamx = 30;
   }

  noStroke();
  fill("Turquoise");
  ellipse(xT, yT, diamx, diamy); //original turquoise circle
  noStroke();
  fill("Turquoise");
  ellipse(xT, yT/2, diamx, diamy); // altered position
  noStroke();
  fill("Turquoise");
  ellipse(xT/2, yT/2, diamx, diamy);//Altered position
  noStroke();
  fill("Turquoise");
  ellipse(xT/2, yT, diamx, diamy);//altered position

  if (mouseX > xT) {
    xT -= 1;
    offset = 5;//moves circles to the left if x variable of mouse is greater
  }

  if (mouseX < xT){
    xT += 1;
    offset = 5; // moves circles to the right if x variable of mouse is lesser
  }
}

I struggled a lot with many aspects of this assignment – mostly the functions and how they are able to be used without effecting other parts of the drawing. My drawing uses a few functions to vary different aspects of the piece and I am hoping to get better at being efficient at variables and hopefully more elaborate with designs. My drawing uses both the position of the mouse and the mousePressed function.