Month: September 2018

Senyai: Lighting and Acoustics

EPIPHYTE Lab, led by Dana Cupkova and Gretchen Craig, recently completed this architectural installation from new Shadyside Thai restaurant, Senyai (2017.)

Final installation in Senyai

This project, inspired by a body of water, utilizes 275 unique slats, to control acoustic levels and lighting in this small restaurant. Utilizing Architectural design software, Rhinoceros and Grasshopper, EPIPHYTE Lab was able to produce a script that creates the specific geometries for each panel based on where the highest noise levels were located and where those sound levels were dissipating.

Drawing of sound vectors affect on geometry

After creating the geometries, the software then produces the form of each panel and that panel can thus be digitally fabricated using a laser cutter, or most likely a CNC Router.

Each panel being completely unique is what led to the success of the installation. Each vault rises and falls, almost perfectly, so that the eye moves slowly over the geometry and follows the wave-like sensitivity of the form. The production of completely unique panels is greatly eased by the computational and digital software utilized. It would not be the same project with human constraints.

What led my love for this project is the intimacy of the product. This is truly a space making installation that is both functional and beautiful.

Read more about this project here: http://www.epiphyte-lab.com/senyai

Dani Delgado Project-03 – Dynamic Drawing

sketch

/*Dani Delgado 
Section E
ddelgad1@andrew.cmu.edu
Project-03
*/

//background color variables
var bgB = (20, 100);
var bgG = (20, 100);

//line weight variables
var rectW = 40;
var rectX = rectW * 2;

//angles for rotation
var a1 = 0;

//moon growing variable
var moong = 100;
var speed = 3;
var direc = 1; 

//eye glow variables
var eyeLW = 0;
var eyeLH = 0;
var eyeRW = 0;
var eyeRH = 0;

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

function draw() {
	//color changing background; constrain the colors to make it appear darker
	bgR = mouseX;
	bgB = constrain(mouseX, 10, 100);
	bgG = constrain(mouseY, 20, 100);

	background (10, bgG, bgB);

	//draw the moon
	//the moon rotates based on the mouseY coordinate 
	fill(215, 211, 190);
	push();
	a1 = (mouseY / height) * 180;
	rotate(radians(a1));
	ellipse(20, 10, 225, 225);
	pop();
	a1 = a1 - 3;

	//draw the "trees" that are behind the primary animal
	fill (60, 34, 10);
	rect(rectX - 80, 0, rectW, height);
	rect(rectX * 2, 0 , rectW, height);
	rect(rectX * 4, 0, rectW, height);
	rect(rectX * 6, 0, rectW - 6, height);
	rect(rectX, 0, rectW - 14, height);

	//draw the yellow moving bird which moves on the -mouseX and -mouseY coordinates 
	//start with the bird body
	fill(255, 221, 51);
	ellipse(-mouseX + 640, -mouseY + 480, 40, 40);
	//make bird tail
	triangle(-mouseX + 655, -mouseY + 510, -mouseX + 700, -mouseY + 515, -mouseX + 705, -mouseY + 525);
	//make bird eye and beak
	fill(20);
	ellipse(-mouseX + 649, -mouseY + 488, 10, 10);
	fill(255, 140, 25);
	triangle(-mouseX + 635, -mouseY + 500, -mouseX + 640, -mouseY + 505, -mouseX + 640, -mouseY + 495);

	//draw the red moving bird which moves on the mouseX and mouseY coordinates
	//start with the bird body
	fill(255, 120, 51);
	ellipse(mouseX, mouseY, 40, 40);
	//make bird tail
	triangle(mouseX + 15, mouseY + 30, mouseX + 60, mouseY + 35, mouseX + 65, mouseY + 45);
	//make bird eye and beak
	fill(20);
	ellipse(mouseX + 9, mouseY + 8, 10, 10);
	fill(255, 140, 25);
	triangle(mouseX - 5, mouseY + 20, mouseX, mouseY + 25, mouseX , mouseY + 15);


	// draw the "trees" that are in front of the moving birds 
	noStroke();
	fill(60, 34, 10);
	rect(rectX * 3, 0, rectW, height);
	rect(rectX * 5, 0, rectW, height);
	rect(rectX * 7, 0, rectW - 2, height);
	rect(rectX, 0, rectW - 10, height);

	//draw the primary animal
	//draw the body of the primary animal
	fill(82, 48, 0);
	rect(width / 3.20, height / 1.5, 300, 200, 90, 90, 0, 0);
	//draw the belly fur highlight
	fill(130, 90, 10);
	rect(width / 2.28, height / 1.10, 150, 60, 90, 90, 0, 0);
	//draw primary animal's head
	//draw the basic head shape (circle)
    fill(102, 68, 0);
    ellipse(width / 2.5, height / 2.5, 200, 200);
    //draw the facial features (ears, snout, nose)
    arc(width / 2 - 70, height / 2.5 + 10, 60, 65, 2, 5.6, PI, OPEN);
	arc(width / 1.5 - 20, height / 2.5 + 10, 60, 65, 3.75, 8, PI + QUARTER_PI, OPEN);
	fill(150, 100, 10);
	arc(width / 2 - 60, height / 2.5 + 25, 28, 32, 2, 5.6, PI, OPEN);
	arc(width / 1.5 - 5, height / 2.5 + 25, 28, 32, 3.75, 7.5, PI, OPEN);

	ellipse(width / 2.5 + 50, height / 1.6, 100, 70);
	fill(60, 8, 0);
	ellipse(width / 2 + 16, height / 1.43, 40, 30);

	//draw the eyes
	//eyes will glow when you mouse over them 
	eyeLW = width / 2 - 25;
    eyeLH = height / 2 + 15;
    eyeRW = width / 2 + 60;
    eyeRH = height / 2 + 15;

    var eyedim = 35 
	if ((mouseX > eyeLW) & (mouseX < eyeLW + eyedim) &&
		(mouseY > eyeLH) && (mouseY < eyeLH + eyedim) ||
		(mouseX > eyeRW) & (mouseX < eyeRW + eyedim) &&
		(mouseY > eyeRH) && (mouseY < eyeRH + eyedim)) {
		fill(255, 238, 153);
	} else {
		fill(60, 8, 0);
	}
	ellipse(eyeLW, eyeLH, eyedim, eyedim);
	ellipse(eyeRW, eyeRH, eyedim, eyedim);
}

I started out this project in a very abstract way, only drawing moving ellipses and rectangles that followed the mouse at varying degrees of offset. However, when I woke up one day this week and my first thought was about an animal in the woods, I decided that exploring that concept would be a cute direction. And so, I drew this little scene.

Christine Chen-LookingOutwards-03

Above is Iris Van Herpen’s piece Decrypt Kymono, which is part of her Data Dust series, created in 2018
Source: https://futur404.com/wp-content/uploads/2018/01/iris-van-herpen-ss18-futur404-decrypt-kimono-gown.jpg

Iris Van Herpen is famous designer for 3D fashion. One of my favorite pieces from her is the Decrypt Kymonoshown above. Herpen utilized an inverted parametrically-drawn pattern as the algorithm to generate the design for the dress. The pattern of the dress was created with microscopic pieces that is foamed-lifted, laser-cut, and then heated-bonded onto the half-transparent, lightweight silk. The end result of the design is a stunning delicate piece that flows and synthesizes along with the body’s movement, reflecting the aesthetic beauty of the human body form.  Herpen manifested her organic style of artistic sensibilities in the piece through personifying the aspects of nature with the piece’s movements and patterns, which are all designed through careful calculations and considerations.

What I admire most about Herpen is how she can create such natural, organic patterns with such an artificial method. Her designs represent the fusion of the artificial and natural. One quote from her that left a deep impression on me is “Don’t forget how engineered nature is, itself. I think we as humans don’t even come close to the intelligence within nature.” It is interesting how a lot of times people tend to think that the artificial world is complex and that nature represents simplicity. However, if we think about it, it is really the opposite. The nature world is so complex and uncontrollable that we humans have long sought to discover ways to manage parts and bits of it, only to realize that nature is still far more powerful than us.

Project 3 – Sara Frankel Dynamic Drawing

sketch

//flower size
var fradius1 = 30;
var fradius2 = 60;
var fradius3 = 120;
//petal size
var pradius1 = 4;
var pradius2 = 80;
var pradius3 = 160;
//number of petals on flower
var numpetals = 6;
//Boolean if mouse on flower
var onFlower1 = false;
var onFlower2 = false;
var onFlower3 = false;
//color of flower
var fcolor1 = 'yellow';
var fcolor2 = 'yellow';
var fcolor3 = 'yellow';
//color of petal
var pcolor1 = 255; 
var pcolor2 = 255;
var pcolor3 = 255;
//color of text & boolean of if mouse is on text
var textcolor = 255;
var ontext = false;

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

function draw() {
	noStroke();
	background('blue');
	//change background color according to mouseX
	if (mouseX <= width/2) {
		background('orange');
	}

	//to insert text and change the color of text according to position of mouse
	fill(textcolor);
	if (mouseX <= width/2) {
		text('Oopsie Daisy', 10,30);
		}	
	if (mouseX >= 10 & mouseY <= 30 && mouseX<=100 && mouseY >= 15) {
		if (!ontext) {
		textcolor = color(random(0,255), random(0,255), random(0,255));
		}  ontext = true;
		} else {
			ontext = false;
			textcolor = 255;
	}

	if (mouseX <= width & mouseY <= height) {
		numpetals = 2*mouseX/48 + 6; //changing the number of petals dependant on mouse
		pradius1 = mouseX/48 * 4 + 4; //modifying radius of petals based on mouse
		pradius2 = mouseX/48 * -8 + 80;
		pradius3 = mouseX/48 * -16 + 160;
	}
	
	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width/4) * (mouseX - width/4) + (mouseY - height*0.20) * (mouseY - height*0.20) < fradius1 * fradius1) {
		if(!onFlower1) {
			fcolor1 = random(0,255);
			pcolor1 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower1 = true;
	} else { 
		onFlower1 = false;
		fcolor1 = 'yellow';
		pcolor1 = 255;
	}
	fill(fcolor1);
	ellipse(width*0.25, height*0.20, fradius1, fradius1); // drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.75) * (mouseX - width*0.75) + (mouseY - height*0.30) * (mouseY - height*0.30) < fradius2 * fradius2) {
		if(!onFlower2) {
			fcolor2 = random(0,255);
			pcolor2 = color(random(0,255), random(0,255), random(0,255));
		}
		onFlower2 = true;
	} else  {
		onFlower2 = false;
		fcolor2 = 'yellow';
		pcolor2 = 255;
	}
	fill(fcolor2);
	ellipse(width*0.75, height*0.30, fradius2, fradius2);// drawing the center of flower

	//changing the color of the flowers based on the location of the mouse
	if ((mouseX - width*0.4) * (mouseX - width*0.4) + (mouseY - height*0.65) * (mouseY - height*0.65) < fradius3 * fradius3) {
			if(!onFlower3) {
				fcolor3 = random(0,255);
				pcolor3 = color(random(0,255), random(0,255), random(0,255));
			}
			onFlower3 = true;
		} else  {
			onFlower3 = false;
			fcolor3 = 'yellow';
			pcolor3 = 255;
		}
			fill(fcolor3);
	ellipse(width*0.4, height*0.65, fradius3, fradius3);// drawing the center of flower


	//flower 1 (top left)
	fill(pcolor1); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < 24-numpetals; i++) { //flower that grows proportionately in the opposite direction as the other flowers
		var angle = i * radians(360/(24-numpetals));
		ellipse(width * 0.25 + (fradius1/2 + pradius1/2) * cos(angle), height * 0.20 + (fradius1/2 + pradius1/2) * sin(angle), pradius1, pradius1);
	}
	
	//flower 2 (top right)
	fill(pcolor2); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.75 + (fradius2/2 + pradius2/2) * cos(angle), height * 0.30 + (fradius2/2 + pradius2/2) * sin(angle), pradius2, pradius2);
	}
	//flower 3 (bottom)
	fill(pcolor3); //color and number of petals based upon the location of mouse 
	for (var i = 0; i < numpetals; i++) {
		var angle = i * radians(360/numpetals);
		ellipse(width * 0.4 + (fradius3/2 + pradius3/2) * cos(angle), height * 0.65 + (fradius3/2 + pradius3/2) * sin(angle), pradius3, pradius3);
	}

}

For this project, I decided to use daisies as my inspiration. At first I was kind of confused as to how I was going to execute this image, but after planning it out and figuring out the appropriate code for each movement, I was able to successfully draw this out.

Connor McGaffin – Project 03 – Dynamic Drawing

sketch

/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-03
*/

var a = 0
var angle = 0

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

//opening elevator door
function mousePressed(){
        a += 20;
}

function draw() {

    //change background color changes upon horizontal movement
    var c = mouseX / 2 * 2
    background(c, c, 100);

    //floors
    rectMode(CORNER);
    fill(240,0,0);
    rect(0,100,width,10);
    rect(0,240,width,10);
    rect(0,380,width,10);
    
    //shaft
    rectMode(CENTER);
    fill(0);
        rect(width / 2, height / 2,100,height)

    //clockwise shaft gears
        fill(80);
        push();
        translate(width / 2,100);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0,0,40,40);
        pop();

        push();
        translate(width / 2,0);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0,0,50,50);
        pop();

        angle = angle + 1;


    //elevator moves on vertical inverse
    //cable
    fill(250);
        rect(width / 2, height - 340 - mouseY, 10,height);

    //elevator room
    fill(200,200,255);
    strokeWeight(0);
        //elevator shell
        rect(width / 2,height - mouseY,100, 150);
        //elevator couple
        rect(width / 2, height - 85 - mouseY, 50,30);
    
    //elevator room
    fill(230,100,0);
        rect(width / 2, height - mouseY, 90, 130)


    //elevator door gap
    rectMode(CORNER);
    fill(0);
    rect(width / 2 + 45, height - mouseY - 65, 5, a);


}

In this project, I was inspired by an old iOS game I played as a child called “Tiny Tower” where the primary interface of navigation was via a cross-section of an elevator. In this sketch, I allowed for the inverse control of the elevator through vertical movement of the mouse while it is pressed. Horizontal movement changes the wallpaper color. Clicking on screen opens the door of the elevator. Gears in the elevator shaft run constantly.

Jonathan Liang – Project 03 – Dynamic Drawing

Move the cursor left and right and also try clicking the mouse.

sketch

//Jonathan Liang
//Section A 
//jliang2@andrew.cmu.edu
//Project-03-Dynamic Drawing


var head = 350;
var mouthColor = 0;
var col = {
	r: 255,
	g: 0,
	b: 0,
};
var flag = true;

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

function draw() {
	col.r = random(0, 255);
	col.g = random(0, 255);
	col.b = random(0, 255);

//background
	if (flag == true) {
		background(col.r, col.b, col.g);
	}	else {
		background('black');
	}
	

//left ear
	noStroke();
	fill('white');
	ellipse(180, 115, 140, 140);

	noStroke();
	fill(188, 166, 222);
	ellipse(215, 125, 65, 80);
	ellipse(188, 108, 105, 80);

	noStroke();
	fill(252, 250, 92);
	ellipse(140, 95, 30, 50);
	ellipse(169, 125, 61, 65);

	noStroke();
	fill('white');
	ellipse(180, 140, 45, 45);
	ellipse(220, 90, 30, 30);

	strokeWeight(15);
	stroke('black');
	noFill();
	ellipse(185, 130, 55, 75);

//right ear
	noStroke();
	fill('white');
	ellipse(460, 115, 140, 140);

	noStroke();
	fill(156, 226, 233);
	ellipse(460, 140, 90, 33);
	ellipse(490, 126, 42, 44);

	noStroke();
	fill(237, 97, 155);
	ellipse(415, 145, 35, 125);
	ellipse(445, 96, 75, 75);

	noStroke();
	fill('white');
	ellipse(440, 120, 45, 65);
	ellipse(490, 100, 45, 40);

	strokeWeight(13);
	stroke('black');
	noFill();
	ellipse(460, 115, 42, 42);

	strokeWeight(17);
	stroke('black');
	noFill();
	ellipse(430, 150, 42, 42);




//constants for head
	noStroke();
	fill('white');
	ellipse(320, 240, head, 250);

	noStroke();
	fill(128, 255, 191);
	ellipse(180, 260, 40, 25);

	noStroke();
	fill(255, 225, 77);
	ellipse(460, 260, 40, 25);

	noStroke();
	fill('pink');
	ellipse(180, 260, 30, 15);

	noStroke();
	fill('pink');
	ellipse(460, 260, 30, 15);

//smile
	noStroke();
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	arc(320, 275, 312, 165, 0, PI, CHORD);
	


//teeth
	strokeWeight(1);
	stroke('white');
	noFill();
	line(164, 275, 184, 315);
	line(184, 315, 204, 275);
	line(204, 275, 230, 340);
	line(230, 340, 260, 275);
	line(260, 275, 290, 355);
	line(290, 355, 320, 275);
	line(320, 275, 350, 355);
	line(350, 355, 380, 275);
	line(380, 275, 410, 340);
	line(410, 340, 436, 275);
	line(436, 275, 456, 315);
	line(456, 315, 476, 275);

	

//left eye
	translate(180, 100);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(5);
	stroke(237, 97, 155);
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .9, size * .9);

//right eye
	translate(130, 0);

	strokeWeight(3);
	stroke('cyan');
	if (flag == true) {
		fill('black');
	}	else {
		fill(col.r, col.b, col.g);
	}
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .40, size * .40);

//left pupil
	translate(-130, 0);
	var m = max(min(mouseX, 200), 0);
	var size = m * 150.0 / 200.0;
	var eyeColor = mouseX / (640 / 225);



	strokeWeight(10);
	stroke(255 - eyeColor, 51, 51);
	noFill();
	ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .19, size * .19);

//right pupil
	translate(130, 0);

	strokeWeight(7);
	stroke(170, 255 - eyeColor, 0);
	noFill();
	size = 350 - 2 * size;
    ellipse(20 + m * 90.0 / 200.0, 100.0,
         size * .04, size * .04);

    
}

function mousePressed() {
	if (flag == true) {
		flag = false;
	} else {
		flag = true;
	}




}

I am a big fan of Takeshi Murakami’s work and especially of his style Superflat. My project is taking his style and trying to bring it to life and have elements move. This project was difficult to start because of its open-ended nature. However, I did appreciate that aspect because it allowed me to experiment with many things.

Hannah Cai—Project 3—Dynamic Drawing

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

var R = 211; //sky color variables
var G = 239;
var B = 252;
angleSun = 0; //sun and moon rotation angles
angleMoon = 0;
cloudColor = 250; 
cloudX = 0;
var dimness = 0;

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

function draw() {
  scale(.9375);
  rectMode(CORNER); 
  var cmouseX = constrain(mouseX,0,600); //constrains mouseX to canvas
  // sky
  background(R,G,B);
  // stars
  fill(211,239,252);
  strokeWeight(1);
  stroke(211,239,252);
  point(386,153);
  point(360,200);
  point(266,225);
  point(395,355);
  // sun
  push();
  noStroke();
  fill(255,247,215);
  ellipseMode(CENTER);
  translate(675,500);
  angleMode(DEGREES);
  rotate(angleSun); //rotates the sun
  ellipse(-390,-300,10,10); //relative to translated origin
  pop();
  // moon
  push();
  noStroke();
  fill(250);
  ellipseMode(CENTER);
  translate(675,500);
  angleMode(DEGREES);
  rotate(angleMoon); //rotates the moon
  ellipse(-390,-300,10,10); //relative to translated origin
  fill(R,G,B); //fills with sky color
  ellipse(-389,-301,10,10); //second circle that forms the moon
  pop();
  // clouds
  noStroke();
  fill(cloudColor);
  rect(286 + cloudX,226,54,17,10);
  rect(306 + cloudX,236,55,17,10);
  rect(242 + cloudX,265,91,17,10);
  rect(215 + cloudX,275,73,17,10);
  rect(353 + cloudX,305,67,17,10);
  rect(338 + cloudX,314,58,17,10);
  rect(150 + cloudX,340,70,17,10);
  rect(150 + cloudX,350,40,17,10);
  //wall
  fill(255 - dimness,232 - dimness,204 - dimness);
  rect(440,0,200,480);
  rect(165,0,310,80);
  rect(0,0,200,480);
  rect(180,400,310,80);
  //window shadow
  noFill();
  stroke(244 - dimness,216 - dimness,216 - dimness);
  strokeWeight(30);
  rect(206,80,250,335); //big frame
  strokeWeight(10);
  line(204,134,444,134); //horizontal part of 'T'
  line(324,134,324,389); //vertical part of 'T'
  //window frame
  stroke(255 - dimness);
  strokeWeight(30);
  rect(200,60,250,335); //big frame
  strokeWeight(10);
  line(200,130,440,130); //horizontal part of 'T'
  line(320,130,320,385); //vertical part of 'T'
  //shades
  noStroke();
  fill(255 - dimness,232 - dimness,204 - dimness);
  rect(200,70,250,5); 
  rect(200,80,250,5);
  rect(200,90,250,5);
  rect(200,100,250,5);
  rect(200,110,250,5);
  stroke(255 - dimness,232 - dimness,204 - dimness)
  strokeWeight(1);
  line(266,70,266,110); //hanging lines
  line(377,70,377,110);
  strokeWeight(1);
  line(425,70,425,351); //pull line
  rectMode(CENTER);
  rect(425,350,2,8,2,2,0,0); //pull line handle
  stroke(250 - dimness);
  strokeWeight(3);
  line(230,60,230,260); //rod

  //changes based on mouseX's position on the canvas 
  R = ((527.5 - mouseX) / 2.5); 
  G = ((597.5 - mouseX) / 2.5);
  B = ((630 - mouseX) / 2.5); //lighter/darker sky color
  angleSun = ((0 - mouseX) / 10);
  angleMoon = ((cmouseX - 600) / 10);
  cloudColor = ((775 - cmouseX) / 3); //lighter/darker
  cloudX = ((640 - cmouseX) / 12); //horizontal shift
  dimness = ((25 + cmouseX) / 25);
}

my actual window
sketches/notes
day
night

Like many other people, I struggled with starting this project because it’s so open-ended. I initially wanted to do something abstract, but after a few experiments, I decided to just stick with imagery that I was familiar with. This sketch was based on my dorm’s window. I wanted to show the passage of time by having the sun and moon rotate, as well as having the sky change color. Both of those variables ended up being challenging to manipulate in a way that would look realistic, but still keep them relative to the mouse; I ended up doing a lot more math than I liked, but I figured it out in the end. I realize now that I could’ve used map() rather than doing so much math, similar to the second project, where I did rotations and shears the longer way rather than using push() and pop(), which I hadn’t known about yet. Oh well…

I also wanted to add an interaction where you could click the canvas to turn a light on and off, but after I figured out how to make it work, I didn’t like the effect (it looked weird during the daytime). So I instead just mapped the room to change brightness with the mouse’s movement as well, which also made the passage of time more convincing.

(note: I scaled down my sketch so it wouldn’t get cropped.)

Sean Meng – Dynamic Drawing

In this drawing, there are four aspects that change when the mouse moves: color, size, angle and position of the geometry. The rectangles represent the outer-space and the “UFO” in the middle rotates by itself and changes its orbit as the mouse moves.

sketch

//Sean(Han) Meng
//Section B
//hmeng@andrew.cmu.edu
//Project-03

var interv = 50
var angle = 0
var degree = 0

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


function draw() {
    
    background(0)
    noStroke()
    
    
    //horizontal set of rectangles
    


    fill(mouseX/2, mouseY/3, mouseY)
    
    rect(640-mouseX, mouseY+interv, 640-mouseX, mouseY*0.05)
    
    rect(640-mouseX, mouseY+interv*2, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*3, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*4, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*5, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*6, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*7, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*8, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*9, 640-mouseX, mouseY*0.05)

    rect(640-mouseX, mouseY+interv*10, 640-mouseX, mouseY*0.05)

    //vertical set of rectangles

    fill(mouseX, mouseY/2, mouseX)

    rect(640-mouseX-interv*1, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*2, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*3, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*4, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*5, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*6, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*7, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*8, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*9, 640-mouseY, mouseX*0.05, 640-mouseY)

    rect(640-mouseX-interv*10, 640-mouseY, mouseX*0.05, 640-mouseY)

    //the "UFO" in the middle
    push()
    fill(640-mouseX, 640-mouseY, 200)
    translate(320, 320);
    rotate(radians(degree));
    rectMode(CENTER);
    ellipse(mouseX - 320, mouseY - 320, 50, 50);
    ellipse(mouseX - 340, mouseY - 340, 20, 20);
    ellipse(mouseX - 360, mouseY - 360, 20, 20);
    ellipse(mouseX - 380, mouseY - 380, 20, 20);
    ellipse(mouseX - 300, mouseY - 300, 20, 20);
    ellipse(mouseX - 280, mouseY - 280, 20, 20);
    ellipse(mouseX - 260, mouseY - 260, 20, 20);

    degree = degree + 6
    pop();
    
}

Project-03-Dynamic Drawing

 


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

}

function draw() {
    // background color change
    R = (mouseY/ width) * 200;
    G = (mouseX/ height) * 200;
    var clr = color(R, G, 150);
    background(clr);

    //line and its increase in size and color
    stroke(R,G, 200 );
    strokeWeight(20);
    line(mouseX, mouseY, mouseX+ 20, mouseX+ 20);
    //ellipse
    strokeWeight(0);
    ellipse(mouseY-10, mouseX-10,50,50);
    //rotating rectangle
    push()
    translate(mouseX+5, mouseY+5);
    rectMode(CENTER);
    rotate(radians(frameCount*1.2));
    rect(mouseX,mouseY, 40, 40, 10);
    pop()
    //change color and transparency of circles
    if (mouseX<160, mouseY>240)
    fill(255,0,0, 127);
    if (mouseX<320, mouseY<240)
    fill(255, 0,0,191);


}

In this drawing, the color of the background and the line change inversely and the circles change transparency. I like how simplistic and clean it looks.

Austin Treu – Project-03 – Dynamic Drawing

atreu – project-03

//Austin Treu
//Section C
//atreu@andrew.cmu.edu
//Project-03

var circX = 300, circY = 300, rad = 100, circStroke = 1,
    stripeC = 50, circC = 20, backC = 100, 
    strokeC = 0, sr, sg, sb;

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

function draw() {
    //draw back and stripes
    background(backC);
    noStroke();
    fill(stripeC);
    rectMode(CORNER);
    rect(width/4, 0, width/4, height);
    rect(3*width/4, 0, width/4, height);
    //change to colors on mouse pos
    if(mouseX < width/4 || mouseX > 3*width/4){
        backC = 100;
        stripeC = 50;
        circC = 20;
        strokeC = mouseX/4;
    }
    else{
        backC = 'rgb(50, 100, 255)';
        stripeC = 'rgb(100, 20, 150)';
        circC = 'rgb(0,100,50)';
        //set circle stroke color values
        sr = int(mouseX/4);
        sg = int(mouseY/2);
        sb = int((mouseX+mouseY)/4);
        if(mouseY < 0){
            sg = 0;
            sb = sr;
        }
        strokeC = 'rgb('+sr+','+sg+','+sb+')';
    }
    //set a variable stroke
    circStroke = (mouseX/10);
    strokeWeight(circStroke);
    stroke(strokeC);
    circX = width - mouseX;
    circY = height - mouseY;
    fill(circC);
    //draw circles/squares/triangles
    /*NOTE: circ vars initially intended to deal with
        only circles, later adapted to deal w/all shapes
        so they are circ due to the default shape being a circle*/
    if(mouseX+mouseY < width/3+height/4 
        || mouseX+mouseY > 2*width/3+3*height/4){
        rectMode(CENTER);
        rect(circX, circX, rad*3, rad*3);
        rect(circX, circY, rad*2, rad*2);
        rect(circY, circX, rad, rad);
        rect(circY, circY, rad/2, rad/2);
    }
    else if(mouseX+mouseY < width/3 + 3*height/4){
        triangle(circX, circX-3*rad, 
            circX+3*rad, circX+3*rad, circX-3*rad, circX+3*rad);
        triangle(circX, circY-2*rad, 
            circX+2*rad, circY+2*rad, circX-2*rad, circY+2*rad);
        triangle(circY, circX-rad, 
            circY+rad, circX+rad, circY-rad, circX+rad);
        triangle(circY, circY-rad/2, 
            circY+rad/2, circY+rad/2, circY-rad/2, circY+rad/2);
    }
    else{
        ellipse(circX, circX, rad*3, rad*3);
        ellipse(circX, circY, rad*2, rad*2);
        ellipse(circY, circX, rad, rad);
        ellipse(circY, circY, rad/2, rad/2);
    }
}

I found this project to be incredibly interesting to experiment with, especially when it comes to utilizing the mouse’s position to control everything that happens. Reversing the x and y coordinates and using them in various transformations created ways to line all the shapes up in the middle of their motion.