Month: September 2020

Project – Dynamic Drawing

My process was starting with a sketch and then systematically testing and working out the individual controls for each circle.

sketchDownload

//4 parameters: shade of circles/text, size of circles, position of circles, which message appears
function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(255,0,0); 
	var grayscale = max(min(mouseX,255),0); //as mouse moves right circles become lighter
	var size1 = max(min(mouseY,227),70); //increases size as mouse moves down. Min diameter is 70, max diameter is 227
	var size2 = 297 - size1; //opposite of size 1, makes the middle circle have the opposite diameter of the other two
	var yShift = constrain(mouseY,0,height/3); //as mouse moves down circles move down
	var yShift1 = -yShift; //two circles move opposite direction of center circle
	//mouse makes different messages appear
	if(yShift == height/3){  //when the middle circle is at its lowest position the message "Et hoco modo nihil" appears
		textSize(45);
		fill(abs(255-grayscale));
		textAlign(LEFT);
		text('Et hoc',50,400);
		textAlign(CENTER);
		text('modo',width/2,50);
		textAlign(RIGHT);
		text('nihil',550,400);
	}
	if(yShift == 0){  //when the middle circle is at its highest position the message "In Quarta Parametri" appears
		textSize(45);
		fill(abs(255-grayscale));
		textAlign(LEFT);
		text('In',50,50);
		textAlign(CENTER);
		text('Quarta', width/2, 400);
		textAlign(RIGHT);
		text('Parametri',550,50);
	}
	if(height/3 + yShift + 30 == height/2){ //When all three circles are aligned the message "Quid est amor? Infantem et non cocuerunt mihi" appears
		textSize(45);
		textAlign(LEFT);
		fill(grayscale);
		text('Quid est amor?',50,50);
		textSize(30);
		textAlign(RIGHT);
		fill(abs(255-grayscale));
		text('Infantem et non nocuerunt mihi.',550,400);

	}
	noStroke();
	fill(grayscale); 
    circle(width/5,(height*2)/3 + yShift1 + 10,size1);
    circle((width*4)/5,(height*2)/3 + yShift1 + 10,size1);
    fill(abs(255-grayscale)); //this circle experiences the opposite color of the other two
    circle(width/2,height/3 + yShift + 30,size2);

	
}

PROJECT 03 – DYNAMIC DRAWING

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


}

function draw() {

    if (mouseX < width / 2) {
        background(133, 199, 222);
    } else if (mouseX >= width / 2) {
        background(69, 123, 157);
    }
    noStroke();

    fill(230, 250, 252);
    circle (300, 225, -max(min(mouseX, 800), 0));

 //balloon string
    strokeWeight(3);
    fill(101, 101, 94);
    beginShape();
    curveVertex(20 + (mouseX - 50), 200);
    curveVertex(20 + (mouseX - 50), 200);
    curveVertex(15 + (mouseX - 50), 250);
    curveVertex(5 + (mouseX - 50), 280);
    curveVertex(5 + (mouseX - 50), 280);
    endShape();

//balloon
    fill(249, 112, 104);
    ellipse(20 + (mouseX - 50), 160, 65, 80);
    triangle(5 + (mouseX - 50), 210, 20 + (mouseX - 50), 200, 35 + (mouseX - 50), 210);

//bike

/*wheel*/
    strokeWeight(1);
    fill(255);
    ellipse(15 + (mouseX - 200), 400, 50, 50);
    ellipse(-55 + (mouseX - 200), 400, 50, 50);
/*skeleton*/
    stroke(0);
    line(-55 + (mouseX - 200), 400, -43 + (mouseX - 200), 370);
    line(-43 + (mouseX - 200), 370, 15 + (mouseX - 200), 350);
    line(15 + (mouseX - 200), 330, 20 + (mouseX - 200), 400);
    line(15 + (mouseX - 200), 350, -20 + (mouseX - 200), 400);
    line(-20 + (mouseX - 200), 400, -55 + (mouseX - 200), 400);
    line(-43 + (mouseX - 200), 370, -47 + (mouseX -  200), 350);
    line(-43 + (mouseX  - 200), 370, -15 + (mouseX - 200), 407);
/*seat&handle*/
    fill(0);
    rect(-55 + (mouseX - 200), 350, 20, 10, 20);
    rect(-20 + (mouseX - 200), 407, 7, 5, 5);
    rect(10 + (mouseX - 200), 330, 10, 7, 2);

//path
    noStroke();
    fill(187, 181, 189);
    rect(0, 425, 600, 200);

//bob on bike

/*body*/
    fill(153, 178, 221);
    noStroke();
    beginShape();
    curveVertex(-20 + (mouseX - 200), 275);
    curveVertex(-20 + (mouseX - 200), 275);
    curveVertex(-24 + (mouseX - 200), 280);
    curveVertex(-26 + (mouseX - 200), 280);
    curveVertex(-28 + (mouseX - 200), 300);
    curveVertex(-20 + (mouseX - 200), 320);
    curveVertex(-20 + (mouseX - 200), 340);
    curveVertex(-25 + (mouseX - 200), 350);
    curveVertex(-28 + (mouseX - 200), 350);
    curveVertex(-30 + (mouseX - 200), 350);
    curveVertex(-31 + (mouseX - 200), 350);
    curveVertex(-32 + (mouseX - 200), 350);
    curveVertex(-32 + (mouseX - 200), 350);
    curveVertex(-33 + (mouseX - 200), 350);
    curveVertex(-34 + (mouseX - 200), 350);
    curveVertex(-35 + (mouseX - 200), 350);
    curveVertex(-40 + (mouseX - 200), 350);
    curveVertex(-43 + (mouseX - 200), 350);
    curveVertex(-45 + (mouseX - 200), 350);
    curveVertex(-50 + (mouseX - 200), 350);
    curveVertex(-53 + (mouseX - 200), 350);
    curveVertex(-65 + (mouseX - 200), 340);
    curveVertex(-60 + (mouseX - 200), 300);
    curveVertex(-50 + (mouseX - 200), 280);
    curveVertex(-45 + (mouseX - 200), 277);
    curveVertex(-40 + (mouseX - 200), 277);
    curveVertex(-36 + (mouseX - 200), 278);
    curveVertex(-33 + (mouseX - 200), 276);
    curveVertex(-30 + (mouseX - 200), 274);
    curveVertex(-28 + (mouseX - 200), 272);
    curveVertex(-28 + (mouseX - 200), 272);
    endShape();

/*legs*/
    strokeWeight(1);
    stroke(153, 178, 221);
    line(-26 + (mouseX - 200), 350, -20 + (mouseX - 200), 380);
    line(-52 + (mouseX - 200), 350, -47 + (mouseX - 200), 380);
    line(-80 + (mouseX - 200), 320, -50 + (mouseX - 200), 300);
    line(-50 + (mouseX - 200), 310, -12 + (mouseX - 200), 290);

/*eyes*/
    noStroke();
    fill(0);
    ellipse(-47 + (mouseX - 200), 300, 5, 10);
    ellipse(-37 + (mouseX - 200), 298, 5, 10);
    

/*background shapes*/
    if (mouseX < 200) {
        fill(251, 216, 127);
    } else if (mouseX < 300) {
        fill(230, 170, 206);
    } else if (mouseX < 400) {
        fill(216, 241, 160);
    } else if (mouseX < 500) {
        fill(164, 145, 211);
    } else if (mouseX >= 500) {
        fill(224, 96, 126);
    }

    translate(width / 2, height / 2);
    rotate(PI / 3.0);
    rect(-26, -26, 12, 12);
    rect(-80, 80, 22, 22);
    rect(-36, 180, 32, 32);
    rect(10, 35, 18, 18);
    rect(100, -160, 20, 20);



}

I was inspired by a game I used to play all the time called Dumb Ways to Die. I found it challenging making sure different components weren’t overlapping each other in places I didn’t want them to be.

LO – 03 : COMPUTATIONAL FABRICATION

3D WOOD PANEL by WOOD-SKIN
Chalgrin by Quadri Fiore Architecture, Paris, France, 2019

Chalgrin by Quadri Fiore Architecture is an exploration on mesh sheets and wood-skin. The elegantly tessellated design creates a unique experience as an entrance and almost seems to warp the space.

The tessellation seamlessly flows with the space, so much so that the design takes even windows, arches, spotlights, and doors into consideration. This project was executed using Quadri Fiore’s custom MESH-SHEETS, which allow for the structure to wrap around the space the way that it does. The firm utilised their own program where they were able to abstract and manipulate the fabrication as needed.

This form of “wood-skin” is very commonly seen, especially in architecture. Creating forms which appear free flowing and random are often products of complex and intricate iterations, based solely on a system which allows for forms to be organic.

CHALGRIN – Paris, France

03 Generative Art

sketchDownload
//Julia Steinweh-Adler
//Section D


var value = 0;
var bg = 0;

function setup(){
    createCanvas(600, 450);
    rectMode(CENTER);

}

function draw() {
    background(value/2, value/4, value*2);
    noStroke();
    fill(value * 1.3, value * 0.7, value * 0.5); // fill color uses mouse position
    let size = dist(mouseX, mouseY, width/2, height);
    let sizeI = dist(mouseY, mouseX, width/2, height);
    strokeWeight(10);
    stroke(value-80, 0, 0);    //stroke color uses mouse position in red value
  
  //CAMERA BODY
  rect(width/2, height/2, sizeI, sizeI, 20);    //rounded cornered square
  rect(width/2, height/2, sizeI, value);    //widest rectangle
  fill(200, 100, 100);    //color red
  rect(width/2, height/2, size, value);   //inner rectangle
  fill(value * 1.3, value * 0.7, value * 0.5);    //mouse position influenced orange
  ellipse(width/2, height/2, size, size);  //outer circle
  fill(200, 100, 100);   //red
  ellipse(width/2, height/2, size*0.7, size*0.7);  //inner circle
  fill(value/2, value/4, value*2) 
  ellipse(width/2, height/2, size/2.5, size/2.5); //cut center hole

  //FLASH - mouse pressed "flash" green square that rotates with mouse coordinates
  if (mouseIsPressed) {
    fill(100, 200, 150);  //green
    push();
    translate(width/2, height/2);    //change origin to center
    rotate(radians(mouseY));    //mouse Y coordinates value for degrees of rotation
    rect(0, 0, size/6, size/6);     //rectangle that is size responsive
    pop();  
    
  } else {    //when mouse not clicked, use constant ellipse
    ellipse(width/2, height/2, 50, 50);
  }
  
}
  // Fade in and Out Background
    function mouseMoved() {
      if (bg == 0) {    
       value += 0.5;   //value increase
      } if (value == 255) {    //value can only increase to 255 before decreasing 
        bg = 1
      } if (bg == 1) { 
        value -= 0.5;    // value decrease
      } if (value == 140) {    //value can only decrease to 140 before increasing
        bg =0
     }
}

LO 03: Computational Fabrication

Interestingly, I already selected a piece of generative art producing a physical counterpart in last weeks Looking Outward assignment. As I mentioned before, generative art seems to be most interesting to me when it can be applied in a practical function. To widen my appreciation for such creations, I chose this week to look at another of Joris Laarman’s works, this one with that is may be be even further from practical application, but it looks cool – the Strange Attractor Lamp (2016). This lamp used randomly generated three dimensional curves using attractors. As Joris Laarman says it, the chaotic lines developed in a digital three dimensional space are “transformed into functional volumes”. The digital information is 3-D printed in aluminum, finished by hand, and fitted with LED lights. This lighting fixture demonstrates Joris Laarman’s sensibilities because he seems to be drawn towards digitally developed organic looking shapes and has used several different algorithmic approaches to reach this end. I happen to also really enjoy the blend of digital and organic, so I greatly appreciate these explorations of his.

Looking Outwards-03

Last week I reviewed, the art made by Jessica Rosenkrantz and Jesse Louis-Rosenberg. I said that although the patterns they made were unique, the forms they applied them onto were very generic. Daniel Widrig also makes functional art (furniture), but the forms he generates seem more abstract and natural than the ones mentioned before. There’s more depth to his designs which I like it’s not all on the surface so you can look at this thing he made from a number of angles and it will still be interesting. It says that he used software/technology used by special effects artists to make his 3D printed art. I would guess that he used Maya for some of it because in his description it says he was named “Maya Master.” My friend is a special effects major and she uses Python to code in Maya so if he does use code to generate his forms rather than make them entirely in Maya, then that’s probably what he’s using.

http://danielwidrig.com

Project 3 – Dynamic Drawing

This project was designed to produce the numbers “104” if the user puts their mouse in the right location. The red moving square grows bigger and more red the farther you get from the correct point. I was inspired by the spinning motion of many other peer projects as well as some of the examples given. The change I wanted to make was to try and make it a game in which the user has to rotate back and forth until they can find the hidden message. I was also inspired by Prof. Cortina in using “104” as the hidden Easter egg like he has in past examples/ labs.

sketch

var xvel = +7			//sets velocity for red square			//bgoeke
var x = 0
var y = 0
var r = 225
function setup() {
    createCanvas(600, 450);
    background(220);
}

function draw() {
	background(150, 150, 0);
	push();
	translate(300, 225);
	rotate(radians(mouseX));						//rotates according to position of mouse
	fill(255, 255, 0);
	rect(0, 0, mouseX, mouseY);						//rectangle that makes #1
	pop();
	push();
	translate(425, 300);
	rotate(radians(mouseX));
	fill(0, 255, 255);
	ellipse(0, 0, 50 + mouseX, 50 + mouseY);			//ellipse that makes #0
	pop();
	push();
	translate(550, 225);
	rotate(radians(mouseX + 40));
	fill(0, 255, 255);
	rect(0, 0, mouseX, 100);						//rectangle that makes top left line of #4
	rotate(radians(mouseX - 40));
	fill(0, 255, 255);
	rect(0, 0, mouseX, 300);						//rectangle that makes vertical line of #4
	pop();
	push();
	translate(490, 300);
	rotate(radians(0));
	fill(255, 255, 0);
	rect(mouseX, 0, 100 - mouseX, 225 - mouseY);		//rectangle that makes horizontal line of #4
	pop();
	fill(mouseX - 255, 0, 0);
	rect(x, y, mouseX, mouseY - 225);					//red rectangle that covers screen when mouse is in wrong direction
	x += xvel;
	if(x>600-(r/2)) {    //makes rect not go past 600
      xvel =-xvel
    };
     if(x<0){    //makes rect not go past 0
      xvel =-xvel
	};
}

This is an example of the hidden “104”. The finished project can look a little different and still form “104”.

Project-03: Dynamic Drawing

project-03-dynamicDrawing 
// Lauren Kenny (lkenny)
// Project 3 - Dynamic Drawing
// Section A

var xpos = 10;
var ypos = 10;
var xstep = 30;
var ystep = 30;
var r = 200;
var g = 10;
var b = 10;
var d = 5;

function setup() {
    createCanvas(450, 600);
    frameRate(35);
    background(220);
}

function draw() {
    //background gets lighter as you move your mouse down
    background(0+mouseY*0.1);
    //color changes with mouse position
    r = .5*mouseX;
    g = .5*mouseY;
    b = 75;
    //creates grid of circles
    //color and size change with mouse position
    noStroke();
    fill(r, g, b);
    for (let j = 0; j < width; j++) {
        for (let i = 0; i < height; i++) {
            ellipse(xpos+(xstep*j), ypos+(ystep*i), (d+mouseY*0.02), (d+mouseY*0.02));
        }
    }
    //ellipse moves with mouse
    stroke(r, g, b);
    noFill();
    ellipse(mouseX, mouseY, 150, 150);
    //changes the horizontal spacing between the circles
    if (xstep > 40) {
        xstep = 30
    }
    if (30<xstep<40) {
        xstep = xstep + 1
    }      
}

Dynamic Drawing

sketch


function setup() {
    createCanvas(450, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
	noCursor();
	
	fromBlue = color( 130, 255, 240);
    toBlue = color(85, 215, 255);
    backColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    background(backColor);
	
	noStroke();
	
	
	fill(255, 255, 255);
	ellipse(mouseX-100, 100, 100, 30);
	ellipse(mouseX-100, 90, 50, 30);
	
	ellipse(mouseX+300, 75, 160, 60);
	ellipse(mouseX+300, 55, 80, 50)
	
	ellipse(mouseY-200, 230, 160, 60);
	ellipse(mouseY-200, 210, 80, 50);
	
	ellipse(mouseY, 150, 100, 30);
	ellipse(mouseY, 140, 50, 30);
	
	fill(0, 255, 200);
    fromBlue = color( 90, 255, 90);
    toBlue = color(40, 255, 190);
    blueColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    fill(blueColor);
	ellipse(350, 400, 650, 350);
	
	fill(0, 255, 100);
	fromBlue = color( 40, 255, 60);
    toBlue = color(30, 255, 150);
    blueColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    fill(blueColor);
	ellipse(100, 475, 625, 350);
	
	fill(0, 255, 0);
	fromBlue = color( 35, 250, 30);
    toBlue = color(20, 245, 140);
    blueColor = lerpColor(fromBlue, toBlue, mouseX/mouseY);
    fill(blueColor);
	ellipse(300, 550, 700, 350);
	

    stroke(220,200,220);
	strokeWeight(2);
	line(mouseX, mouseY+40, 125, 315);
	
	noStroke();
	
	
    fill(255, 0, 255);
    triangle(mouseX, mouseY, mouseX, mouseY-40, mouseX-30, mouseY);
	push();
	
	fill(255, 0, 255);
    triangle(mouseX, mouseY, mouseX, mouseY+40, mouseX+30, mouseY);
	
	fill(255, 0, 200);
    triangle(mouseX, mouseY, mouseX, mouseY+40, mouseX-30, mouseY);
	
	fill(255, 0, 200);
    triangle(mouseX, mouseY, mouseX, mouseY-40, mouseX+30, mouseY);
	
    stroke(40,100,200);
	strokeWeight(20)
	line(30, 450, 30, 550);
	
	stroke(40,100,200);
	strokeWeight(20);
	line(70, 450, 70, 550);
	
	noStroke();
	fill(40, 100, 200);
	ellipse(50, 450, 60, 30);
    rect(20, 380, 60, 70);
	rect(36,365,24,30);
	ellipse(48,350,50);
		 
    stroke(40,100,200);
	strokeWeight(15);
	line(70, 390, 125, 315);
	
	stroke(40,100,200);
	strokeWeight(15);
	line(22.5, 387.5, 1, 470);
	
	
	
	
	
    
	


}

Looking Outwards-03

https://n-e-r-v-o-u-s.com/projects/albums/kinematics-dress-1/

https://n-e-r-v-o-u-s.com/projects/albums/kinematics-cloth/

Kinematic Dress

This project was created by Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg) in 2014. They created and used a parametric body modeling software along with another digital tool to digitally create the pattern for this dress and then used a complex physics algorithm to digitally “fold” the dress to print in one piece. The result is a 3D printed dress that can move and flow with you. Somehow they were able to take a material so rigid and structured and transform it into something fluid and soft. It reminded me of looking at a marble statue that was carved to show soft flowing fabric. This is not only a huge achievement for design, but also an achievement for physical objects/materials and the ways that we can use them in the future. I admire their focus on materials and passion for taking a material and transforming it into something totally different. This project inspires me to rethink materials and the possibilities for what they can do. I don’t fully understand the algorithms and computation they used to create this project, but I appreciate their user focused approach through the parametric body modeling application. They are both inspired by patterns found in nature and that shines through the patterning in the dress and the algorithm for how each of the pieces hinge on one another. Patterning in nature can teach us a lot and I admire how they utilized that in this piece.