Category: Uncategorized

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.

Jenna Kim (Jeeyoon Kim)- Looking Outwards-2


Artist using 3D pen tool to duplicate the Nissan Car.[/caption]

The project that involves algorithms and made into 3D form through fabrication machinery is Nissan’s project to create World’s largest 3D pen sculpture. Nissan gathered many skilled artists to use 3Doodler 3D pen technology to create this sculpture, which took about 800 hours and required 13.8km of plastic strands. I admire this project because it demonstrates how advanced 3D printing is now, and as a design student taking a products design class, I am mesmerized the extent of different 3D tools to create new projects like this. The algorithm that was generated, the 3Doodler, allows the artist to freely produce 3D shapes, forms, and patterns. The artists’ artistic sensibilities definitely manifest in the final form because the artists delicately expressed every details in order to duplicate Nissan Qashqai exactly.

Link:https://courses.ideate.cmu.edu/15-104/f2018/wp-admin/post-new.ph

Lingfan Jiang-Project-03-Dynamic-Drawing

lingfanj-project03

var position = -30; // set a standard position for the rectangles
var ssize = 10; // set a standard size for the rectangles
var rectcolor; //call a variable for the color of rectangles

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

}

function draw(){
    background(0);
    
    var m = max(min(mouseX, 640),0); //create a new variable "m" that give mouseX a range between 0 to 640
    var angle = m * 360 / 640; //remap the domain from 0-640 to 0-360 for angle
    var rectcolor = m * 255 / 640; // remap the domain from 0-640 
    var p = position * (1 + m / 500); //make the positions bigger over time
    var rectsize = ssize * (1 + m / 1000); //make the sizes of the rectangles bigger 

    stroke(255, rectcolor, rectcolor); //set stroke color for all the squares
    strokeWeight(0.5);
    translate(width/2, height/2); //translate the origin to the center of the canvas
    rotate(radians(angle));
    fill(255, rectcolor, rectcolor); //fill the special square 
    rect(p * 0.5,p,rectsize,rectsize); 

    //create other white squares to form a bigger square ring
    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);


    //use the scale and rotate syntax to offset a smaller ring and rotate in a different direction
    push();
    scale(0.5);
    rotate(radians(-2 * angle));
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();

    //use the scale and rotate syntax to offset a bigger ring and rotate in different direction
    push();
    scale(2.2);
    rotate(radians(-2 * angle));
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();

    //use the scale and rotate syntax to offset a bigger ring
    push();
    scale(5);
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();

    //use the scale and rotate syntax to offset the biggest ring rotate in different direction
    push();
    rotate(radians(-2 * angle));
    scale(12);
    fill(255, rectcolor, rectcolor);
    rect(p * 0.5,p,rectsize,rectsize);

    fill("white");
    rect(p,p,rectsize,rectsize);
    rect(0,p,rectsize,rectsize);
    rect(-p * 0.5,p,rectsize,rectsize);
    rect(-p,p,rectsize,rectsize);

    rect(p,p * 0.5,rectsize,rectsize);
    rect(p,0,rectsize,rectsize);
    rect(p,-p * 0.5,rectsize,rectsize);
    rect(p,-p,rectsize,rectsize);

    rect(p * 0.5,-p,rectsize,rectsize);
    rect(0,-p,rectsize,rectsize);
    rect(-p * 0.5,-p,rectsize,rectsize);
    rect(-p,-p,rectsize,rectsize);

    rect(-p,p * 0.5,rectsize,rectsize);
    rect(-p,0,rectsize,rectsize);
    rect(-p,-p * 0.5,rectsize,rectsize);
    pop();


}

I got the composition idea from another elective I am taking called communication design. The assignment was to just use squares and to create different kinds of compositions. Since the composition has a strong motion in it, I thought it would be a good idea to do it in this project as well.

Catherine Coyle – Project 03 – Dynamic Drawing

catherine drawing

// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-03 Dynamic Drawing


var skyColor = 80;
var sunColor = 0;
var cloudPosition = 1;
var oldX = 0;
var currX = 1;
var dir = 'right';
var angle = 0;
var targetX = 0;
var targetY = 0;
var diffX = 1;
var diffY = 1;


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

function draw() {
	// sky darkens
	background(skyColor, skyColor * 2, skyColor * 4);
	noStroke();
	// sun/moon
	fill(255, 212 + (sunColor / 5), sunColor);
	ellipse(width / 2, height, 250, 250);
	fill(255, 212 + (sunColor / 5), sunColor, 50);
	ellipse(width / 2, height, 300, 300);
	fill(255, 212 + (sunColor / 5), sunColor, 25);
	ellipse(width / 2, height, 400, 400);
	// rays will rotate based on mouseY value
	push();
	translate(width / 2, height);
	rotate(angle);
	fill(255, 212 + (sunColor / 5), sunColor, 70);
	rect(145, 0, 25, 40);
	rect(-145, 0, 25, 40);
	rect(0, 145, 40, 25);
	rect(0, -145, 40, 25);
	pop();
	// bird will change the way its facing based on the mouse
	currX = mouseX
	if (currX > oldX) {
		dir = 'right';
	} else if (currX < oldX) {
		dir = 'left';
	}
	// drawing it based on direction
	if (dir == 'right') {
		// beak
		fill(252, 194, 118);
		triangle(mouseX, mouseY, mouseX - 20, mouseY + 10, mouseX - 20, mouseY - 10,)
		// bird body
		fill(232, 95, 117);
		ellipse(mouseX - 20, mouseY, 20, 20);
		triangle(mouseX - 30, mouseY, mouseX - 40, mouseY + 10, mouseX - 40, mouseY - 10)
		fill(0);
		ellipse(mouseX - 20, mouseY, 10, 10);
	} else {
		// beak
		fill(252, 194, 118);
		triangle(mouseX, mouseY, mouseX + 20, mouseY + 10, mouseX + 20, mouseY - 10,)
		// bird body
		fill(232, 95, 117);
		ellipse(mouseX + 20, mouseY, 20, 20);
		triangle(mouseX + 30, mouseY, mouseX + 40, mouseY + 10, mouseX + 40, mouseY - 10)
		fill(0);
		ellipse(mouseX + 20, mouseY, 10, 10);
	}
	// flock of birds trails the main one
	// i got the basic format for this 'easing' from the class website
	diffX = mouseX - targetX;
    diffY = mouseY - targetY;
    targetX = targetX + 0.1 * diffX;
    targetY = targetY + 0.1 * diffY;
    fill(155, 29, 44);
    if (dir == 'right') {
    ellipse(targetX - 75, targetY - 30, 15, 15);
    ellipse(targetX - 75, targetY + 30, 15, 15);
    ellipse(targetX - 150, targetY - 60, 15, 15);
    ellipse(targetX - 150, targetY + 60, 15, 15);
	} else {
		ellipse(targetX + 75, targetY - 30, 15, 15);
    	ellipse(targetX + 75, targetY + 30, 15, 15);
   		ellipse(targetX + 150, targetY - 60, 15, 15);
    	ellipse(targetX + 150, targetY + 60, 15, 15);
	}
	// clouds move opposite to the bird
	fill(227, 235, 239);
	rectMode(CENTER);
	cloudPosition = width - mouseX
	rect(cloudPosition + 50, 350, 100, 40);
	rect(cloudPosition + 30, 370, 100, 40);
	rect(cloudPosition - 150, 200, 100, 40);
	rect(cloudPosition - 180, 180, 100, 40);
	rect(cloudPosition - 350, 275, 120, 30);
	rect(cloudPosition - 380, 290, 80, 20);
	// sky darkens as bird moves
	skyColor = 80 - (mouseX / 10);
	sunColor = mouseX / 2.5;
	// adjusting various variables for the next frame (movement)
	oldX = currX
	angle = mouseY / 50;
}

I was not really sure what to do when starting this project. I started doodling a little bit and just came up with the idea of a migrating flock of birds. I wanted it to be cute and simple, but also incorporate some of the things we learned this week. I’m still not the biggest fan of rotation, but I think this project helped me get the hang of it a little better.

 

Here is my doodle from when I came up with the idea:

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.

Xindi Lyu-Looking Outwards-03

The front elevation of the Maohaus

The MaoHaus is an experimental facade built in Hutongs of Beijing, China. It explores digital fabrication with masonry based on their performative qualities and the historical context of the area. It was built based on an existing structure and the facade ventured into the to the more like a floating fabric. Besides from the form, the installation also filters light and most important of all, at night time it reveals a series of chairman Mao’s portrait, heavily suggesting the historical background of the site, for being located adjacent to The People’s Art House Print shop, which was the workshop for Chairmanmao’s iconic image.


I find this project highly inspirational because not only does it has a very interesting form generated by digital modeling but also the fusion of historical background and the design aesthetic was so well done due to the aid of computation, the right material was used also in the best way possible. This truly showed me the potential of computational fabrication playing parts in any physical design and how future design aesthetic would develop with this merged into the design process.

link: https://www.archdaily.com/886282/the-maohaus-antistatics-architecture

P03: Dynamic Drawing – Erin Fuller

I based my initial design off of the idea of the rotational translation we learned in our lab session. Using the mouse position you can change: the background color, sizes of the level one and level two circles, the distance of circles from the center, and the rotation of the level two circles around the level one circles.

//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 03

function setup() {
    createCanvas(640, 460);
    rectMode(CENTER);
}

function draw(){
    colorMode(HSB);
	backH = mouseX/width*360; // background hue change depending on mouseX
	backS = mouseY/width*360; // background saturation change depending on mouseY
    var c = color(backH, backS, 70); 
    background(c);

	var eS = mouseX/10 // inner circle size change depending on mouseX
	var eO = mouseX/45 // outer circle size change depending on mouseX

	translate(width/2, height/2);
	for (var num = 0; num < 8; num++) {
		push();
		rotate(TWO_PI * num / 6);
		translate(mouseX/2, 0); // pushes larger circles out based on X postion
		ellipse(0, 0, eS, eS); // inner circles
		for (var j = 0; j < 15; j++) {
			push();
			var spin = mouseX/width * TWO_PI // causes smaller circles to go around the big circle
			rotate(spin * j / 9); 
			ellipse(40, 0, eO, eO); // outer circles
			pop();
		}		
		translate()
		pop();
	}
}

Jonathan Liang – Looking Outwards – 03

flowers of computation?

 

This is a work by Benjamin Dillenburger called Rocailles. Professor Dillenburger is a professor of architecture at the University of Toronto. What I find amazing about this work (and other Dillenburger works as well) is how it uses parametricism to generate beautiful sculptures. What I also admire about many of Dillenburger’s works is that they look that they are incredibly random, but have a computational formula behind how the forms are constructed. As an architecture student, I am pretty familiar with parametricism because it is now part of our core curriculum in school. Architecture now is turning to parametricism and computational design for housing units and designing buildings that can be integrated and be built by robotics. I have never been a big fan of computational design in architecture, but I love computational design when it comes to sculptures, installations, pavilions, and smaller scale works in general.

http://benjamin-dillenburger.com/projects/

 

Carley Johnson Project 3

sketch

/*Carley Johnson
cbjohnso@andrew.cmu.edu
Section E
Project 3
*/



var x = 80;
var y = 30;
var w = 12;
var h = 12;
var starR = 252
var starG = 234
var starB = 109
var moonR = 236
var moonG = 236
var moonB = 236
var moonR2 = 109
var moonG2 = 110
var moonB2 = 106
var bckgrndR = 37
var bckgrndG = 21
var bckgrndB = 66

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

function draw() {
  background(bckgrndR, bckgrndG, bckgrndB)
  
    fill(252, 234, 109)
    noStroke()
    ellipse(mouseX, mouseY, 10, 10) //constellation
  
    fill(moonR, moonG, moonB)
    ellipse(100, 100, 80, 80) //moon
  
    fill(moonR2, moonG2, moonB2)
    ellipse(115, 100, 50, 70) //moon dark side

    stroke(252, 234, 109)
    line(mouseX, mouseY, pmouseX, pmouseY);
    print(pmouseX + ' -> ' + mouseX); //constellation maker

    noStroke()
    fill(starR, starG, starB) //Begin stars for night sky
    ellipse(x, y, w, h);

    ellipse(x + 80, y + 310, w, h); //star 1

    ellipse(30, y + 400, w, h - 2); //star 2

    ellipse(x + 10, y + 190, w, h); //star 3

    ellipse(x + 200, y +30, w, h); //star 4

    ellipse(x + 250, y + 90, w - 2, h - 2); //star 5

    ellipse(x + 270, y + 380, w, h); //star 6

    ellipse(x + 180, y + 30, w - 2, h -2); //star 7

    ellipse(x + 400, y + 75, w - 2, h - 2); //star 8

    ellipse(x + 420, y + 300, w, h); //star 9

    ellipse(x + 370, y + 130, w - 2, h - 2); //star 10

    ellipse(x + 500, y + 30, w, h); //star 11

    ellipse(x + 20, y + 285, w, h); //star 12

    ellipse(x + 120, y + 120, w - 2, h -2); //star 13

    ellipse(x + 145, y + 200, w, h); //star 14

    ellipse(x + 500, y + 300, w, h); //star 15

    ellipse(x + 200, y + 205, w - 2, h); //star 16

}

function mouseMoved() {
  starB = starB + 3;
  if (starB > 250) {
    starB = 109;
  }
}

function mousePressed() {
  if ( moonR === 236) {
    moonR = 252;
  } else {
    moonR = 236;
  }

  if ( moonG === 236) {
    moonG = 234;
  } else {
    moonG = 236;
  }

  if ( moonB === 236) {
    moonB = 109;
  } else {
    moonB = 236;
  }

  if ( moonR2 === 109) {
    moonR2 = 252;
  } else {
    moonR2 = 109;
  }

  if ( moonG2 === 110) {
    moonG2 = 234;
  } else {
    moonG2 = 110;
  }

  if ( moonB2 === 106) {
    moonB2 = 109;
  } else {
    moonB2 = 106;
  }

  if ( bckgrndR === 37) {
    bckgrndR = 108;
  } else {
    bckgrndR = 37;
  }

   if ( bckgrndG === 21) {
    bckgrndG = 214;
  } else {
    bckgrndG = 21;
  }

   if ( bckgrndB === 66) {
    bckgrndB = 251;
  } else {
    bckgrndB = 66;
  }

  if ( starR === 252) {
    starR = bckgrndR;
  } else {
    starR = 252;
  }

  if ( starG === 234) {
    starG = bckgrndG;
  } else {
    starG = 234;
  }

  if ( starB === 109) {
    starB = bckgrndB;
  } else {
    starB = 109;
  }

}

This was fun! Move your mouse to make the stars twinkle and create a shooting star, and if the night isn’t your thing, click to turn the scene to daytime! It was tough juggling a lot of elements and variables, but I think this is quaint and I feel like I learned a lot twiddling with the different mouse functions.

Connor McGaffin – Looking Outwards – 03

“Deoptimized Chair” – Daniel Wildrig (2013)                                                                                    an  exploration of generative form in furniture (source)

Daniel Wildrig is a sculptor as well as a fashion and furniture designer whose work explores generative form at the intersection of a geometric and organic qualities. Formerly working alongside Zaha Hadid, Wildrig was heavily involved in the process of creating some of the studio’s most iconic buildings.

Wildrig’s sensibilities are relatively aligned with the work while at Hadid, however on a much smaller scale. The buildings designed at Wildrig’s former studio also shares aesthetic similarities with the natural world.

I am drawn to this particular project because of its seemingly complex solution to the relatively simple design problem of creating an object for resting. I also am engaged by the further juxtaposition of such sharp forms that work to create an artifact for comfort.

I would suppose that the algorithms that led to this final product consist of some sort of base “unit”, likely the dynamic hexagonal shape seen on the outskirts of the chair. There is likely a random generation of these units with a higher assigned density at the structural core of the chair.

(source)