Month: September 2016

Grace Cha- 03- Dynamic Drawing

 *Move Mouse Horizontally*

sketch

//Grace Cha
//Section C
//heajinc@andrew.cmu.edu
//Project-03-Dynamic Drawing

var modifier = 50;
var miniCircle = 80;

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

function draw() {

  //BACKGROUND CHANGING 
	var colorR = map(mouseX, 0, width, 145, 0);
    var colorG = map(mouseX, 0, width, 211, 0);
    var colorB = map(mouseX, 0, width, 246, 0);
    background(colorR, colorG, colorB); 
    noStroke();


// MINI UNMOVING CIRCLES
    stroke("#14BC98");
    strokeWeight(5);
    ellipse(miniCircle, height/2, 10,10); // FARTHEST LEFT CIRCLE
    ellipse(7 * miniCircle, height/2, 10,10); // FARTHEST RIGHT CIRCLE
    ellipse(width/2,3 * height/4, 10,10);  //BOTTOM CIRCLE
    ellipse(width/2, height/4, 10,10); 


    fill(60, 120, 140);


//CIRCLE GROWTHS
// BOTTOM RIGHT CIRCLE GROWTH
    ellipse(3 * width/4, 3 * height/4, modifier, modifier);
    
    // BOTTOM LEFT CIRCLE GROWTH
    ellipse(width/4, 3 * height/4, modifier, modifier);

    // TOP RIGHT CIRCLE GROWTH
    ellipse(3 * width/4, height/4, modifier, modifier);

    // TOP LEFT CIRCLE GROWTH
    ellipse(width/4, height/4, modifier, modifier);

    // BOTTOM RIGHT CIRCLE GROWTH
    ellipse(3 * width/4, 3 * height/4, modifier, modifier);

    // CENTER CIRCLE GROWTH
    ellipse(width/2, height/2, modifier, modifier);

    if (mouseX >= width/2) {
    modifier = modifier + .5; //GROWTH
    } else{
    modifier = modifier - .5; //DECREASING
    }
    if (modifier <0){
      modifier = (-1) * modifier; // RESTRICT FROM GOING NEGATIVE
    }
    if (modifier > 100){
    modifier = modifier - .5;
    }

// CENTER CHUNK
	push();
	translate(width/2, height/2);
	rotate(-mouseX,10);
	fill(0,196,172);
	noStroke();
	quad(30, 300, 86, 20, 69, 63, 30, 90)
    noFill();
    stroke("#FDFEFD");
    stroke("#74E19F");
    strokeWeight(10);
    arc(50, 55, 50, 50, PI+QUARTER_PI, TWO_PI); 
	  pop();

// CENTER "X" SHAPED POLYGON
   push();
   translate(width/2, height/2);
   rotate(mouseX/70,10); //MAKES IT MOVE A LITTLE SLOWER
   fill("#358290");
   stroke("#FDFEFD");
   strokeWeight(5);
   quad(30, 100, 86, 20, 80, 63, 30, 90)
   pop();

//  CENTER ARCS 
    push();
    translate(width/2, height/2);
    rotate(mouseX/20,60); //ROTATION IS SLOWER
    stroke("#FDFEFD");
    strokeWeight(5);
    noFill();
    ellipse(0,0,10,10); //CENTER CIRCLE
    noFill();
    //ellipse(0,0, 120,120); //BIG CIRCLE
    arc(50, 55, 50, 50, PI+QUARTER_PI, TWO_PI);
    pop();

// TOP LEFT CHUNK
    push();
    var fillR = map(mouseX, 0, width,205, 185); // SHAPE COLOR CHANGES
    var fillG = map(mouseX, 0, width, 255, 245);
    var fillB = map(mouseX, 0, width, 246, 0);
    fill(fillR, fillG, fillB);
	translate(width/4, height/4);
	rotate(-mouseX/30,10);
    stroke("#14BC98");
    strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10); //CENTER CIRCLE
    noFill();
    ellipse(0,0, 120,120); //BIG CIRCLE
    pop();

//BOTTOM RIGHT CHUNK
    push();
    var fillR = map(mouseX, 0, width,205, 185); // SHAPE COLOR CHANGES
    var fillG = map(mouseX, 0, width, 255, 245);
    var fillB = map(mouseX, 0, width, 246, 0);
    fill(fillR, fillG, fillB);
    translate( 3 *width/4, 3* height/4);
    rotate(mouseX/30,10);
    stroke("#14BC98");
    strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10); //CENTER CIRCLE
    noFill();
    ellipse(0,0, 120,120); //BIG CIRCLE
    pop();

// Top RIGHT CHUNK
    push();
	translate(3 * width/4, height/4);
	rotate(-mouseX/1,10);
	stroke("#FDFEFD");
	strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10);//CENTER CIRCLE
    pop(); 

//  BOTTOM LEFT CHUNK
    push();
    translate( width/4, 3 * height/4);
	rotate(mouseX/1,10);
	stroke("#FDFEFD");
	strokeWeight(5);
    quad(38, 31, 86, 20, 69, 63, 30, 76)
    quad(20, 31, 10, 10, 20, 40, 20, 76)
    ellipse(0,0,10,10);//CENTER CIRCLE
    pop();
  
}

This project was inspired by hurricane movements.  Back at home (Texas), it is hurricane season so I thought I would like to replicate the spinning movements that are shown on the news. This project consisted of mostly trial and error and switching small aspects across the board.  I played around with different speeds, colors, size, and direction of movements.

Diana Connolly – Project 3

I wanted my piece to have some sort of story. When I came up with the idea of having eyes opening and closing, I then wanted my piece to be about day vs. night, and sun vs. moon. The 4 elements that change with mouse movement are: 1) the position of the sun vs. the moon, 2) the color of the background, 3) the dilation/size of the pupils, and 4) the shape of the eyes/how open they are, and for a bonus: the eyes blink when you click your mouse!

sketch

var eyeHeight = 90;

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

function draw() {
	// Background color changes from orange to purple as moving mouse vertical
	  colR = map(mouseY, 0, height, 243, 44);
    colG = map(mouseY, 0, height, 135, 17);
    colB = map(mouseY, 0, height, 107, 106);
    background(colR, colG, colB);

    //Eye Shapes
    eyeHeight = map(mouseY, 0, height, 90, 0); // Maps mouse placement to eye height
    noStroke();
    fill(255);
    ellipse(width/4, height/2, 160, eyeHeight); // Left eye will close (height decrease) as mouse moves down
    ellipse(3*width/4, height/2, 160, eyeHeight); // Right eye will close (height decrease) as mouse moves down
    
    //Left Iris
    fill("LightBlue");
    ellipse(width/4, height/2, 90, eyeHeight);
    
    //Left Pupil
    noStroke();
    fill(0);
    ellipse(width/4, height/2, eyeHeight/2, eyeHeight/2); //Pupil dilates (ellipse size increases) with mouse moving up

    //Right Iris
    fill("LightBlue");
    ellipse(3*width/4, height/2, 90, eyeHeight);
    
    //Right Pupil
    noStroke();
    fill(0);
    ellipse(3*width/4, height/2, eyeHeight/2, eyeHeight/2); //Pupil dilates (ellipse size increases) with mouse moving up

    //Sun - using mouseY will make sun go up as mouse goes up
    fill("yellow");
    ellipse(width/2, mouseY, 42, 42); //Center circle
    //Spikes
    triangle(width/2 + 10, mouseY, width/2, mouseY-35, width/2 - 10, mouseY);//Top spike
    triangle(width/2 + 10, mouseY, width/2, mouseY+35, width/2 - 10, mouseY);//Bottom spike
    triangle(width/2, mouseY + 10, width/2 - 35, mouseY, width/2, mouseY - 10);//Left spike
    triangle(width/2, mouseY + 10, width/2 + 35, mouseY, width/2, mouseY - 10);//Right spike
    triangle(width/2 + 5, mouseY + 15, width/2 + 25, mouseY + 28, width/2 +5, mouseY - 15);//Bottom right spike
    triangle(width/2 + 5, mouseY - 15, width/2 + 25, mouseY - 28, width/2 +5, mouseY + 15);//Top right spike
    triangle(width/2 - 5, mouseY + 15, width/2 - 25, mouseY + 28, width/2 -5, mouseY - 15);//Bottom left spike
    triangle(width/2 - 5, mouseY - 15, width/2 - 25, mouseY - 28, width/2 -5, mouseY + 15);//Top right spike

    //Moon - using height-mouseY will make moon go down as mouse goes up
    fill(112, 120, 195);
    ellipse(width/2, height-mouseY, 50, 50);//Moon circle
    //Craters
    fill(120, 70, 225, 99);
    ellipse(width/2 - 7, height-mouseY + 7, 11, 12);
    ellipse(width/2 + 3, height-mouseY - 2, 6, 7);
    ellipse(width/2 + 11, height-mouseY - 14, 8, 8);
    ellipse(width/2 -13, height-mouseY - 9, 5, 6);
    ellipse(width/2 +2, height-mouseY + 16, 5, 6);
    
    if (mouseIsPressed) {
    fill(colR, colG, colB);
    ellipse(width/4, height/2, 160, 90);//Ellipse covers left eye  
    ellipse(3*width/4, height/2, 160, 90);//Ellipse covers right eye
    stroke(0);
    noFill();
    strokeWeight(3);
    arc(width/4, height/2, 155, eyeHeight, TWO_PI, PI); // Left closed eye
    arc(3*width/4, height/2, 155, eyeHeight, TWO_PI, PI); // Right closed eye
    }
}

Sofia Syjuco – Looking Outwards 3

Incidental Space
Christian Kerez
Swiss Bienale 2016
http://www.kerez.ch/
(No link to the artwork itself exists on the artist’s website, but there are pictures of it and his process)

The outside of Incidental Space

Incidental Space was a work of architecture created by Christian Kerez as the Swiss entry to the Venice Architecture Binenale. It originated from a small model made of sugar and dust, and the larger model is sprayed fibre cement. I admire this work because it is a work of architecture that is not just a model, drawing, or smaller scaled-down representation of something that “could” possibly be built. It is a space in which the viewer can exist in, can experience first-hand, and is not forced to dedicate some of their imagination to simply try and provide a topic for their mind – the structure is right there for them to think about.

Not much information is given on the specifics of the algorithms that generated the work, but Kerez states that his work is, “a combination of a physical model and also a very refined technology, and if you look at the result it is both very sophisticated but it’s also very primitive.” He combines hand craftsmanship with digital processes, and creates something new, unexpected, and beautiful. His sensibilities are manifest in the way the piece makes the viewer question what it means for something to be architecture, and gently leads you to a new perspective by offering you space to explore new possibilities.

JiyoungAhn-03-Looking outwards

This artpieces just blew my mind when I first saw it. They are sculptures that are created by Anthony Howe. I was really surprised that these sculptures are moving by kinetic wind, and the movement is so lively that I could not believe that these are made by stainless steel. They weigh up to 1,600lbs, and because they are too heavy and huge, he had to test them if they actually work by computer program.(CAD) He tried to express the vivid movement as lively as possible, and for some of his works, he wanted to express natural movements without any electronic features.

Howe tested his sculptures by driving down the freeway. He wanted his sculptures to be strong enough to tolerate wind.

He did not explain how each pieces of sculpture is designed and built, however each pieces have their own curved shape in order to show vivid movement when it is attached all together.

howe-2howe-1

Di-Octo. All stainless steel kinetic wind sculpture. Silent operation. 25’6″h x 10’w x 4’6″”d (7.8m h x 3m w x 1.4m d) 1,600lbs (725kg)

In Cloud III. 7.6 meter tall all stainless kinetic wind powered sculpture. Engineered for extreme high winds yet spins in 2mph. (25′ h x 10’w x 5’d, 1,500lbs), shown here not on pedestal.

This is a video that shows an actual movement of a sculpture.

Vtavarez Project-03: Dynamic Drawing

Working on this project I wanted the ability to display colors opposite of each other on the color wheel at the same time. From that I knew I wanted to add three shape series (one for each RGB value). Figuring out the concept of the piece took a little longer. Believe it or not, this is an abstract attempt to model what its like to adjust your an analogue clock. The circle represents the gears shifting with one another, the center “flashing” circle signifies the frustration of trying to get it to the right time, and the hands are pretty obvious. In working on this piece, I tried to use some of the simple tools we learned in class regarding transformations and variables.

sketch-165.js

//Victor Tavarez
//section D
//vtavarez@andrew.cmu.edu
//Project-03-Dynamic-Drawing 

// varying background RGB values
var bgR = 0;
var bgG = 0;
var bgB = 0;

var Sh1R;
var Sh1G;
var Sh1B;

var CircleSize = 20;

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

}

function draw() {
    background(bgR, bgG, bgB);
    noStroke();

    //modifying the background to "season-changing colors"
    bgR = map(mouseY, 0, height, 0, 255);
    bgG = map(mouseX, 0, width, 0, 255);
    
    // modifying my first set of shapes
    Sh1R = (abs(255-bgR));
    Sh1G = (abs(255-bgG));
    Sh1B = (abs(255-bgB));

    //creating different shapes with the same color changing scheme
    var Sh1aX = width/5;
    var Sh1aY = height/5;
    var Sh1D = 75;
    fill(Sh1R,Sh1G,Sh1B);

    // creating vertical changing in shape 1 category
    Sh1aY = map(mouseY,0,height,height/5, (height-height/5));
    ellipse(Sh1aX, Sh1aY, Sh1D, Sh1D);    
    var Sh1bX = width-Sh1aX;
    var Sh1bY = height-Sh1aY;
    ellipse(Sh1bX, Sh1bY, Sh1D, Sh1D);

    // Creating Horizontal changing for Shape 1 category
    var Sh1cX = Sh1aX;
    var Sh1cY = height - height/5;
    Sh1cX = map(mouseY,0,height,width/5, (width-width/5)); //gets x motion
    ellipse(Sh1cX, Sh1cY, Sh1D, Sh1D);

    // Creating final horizontal trasformation
    var Sh1dX = width - Sh1cX;
    var Sh1dY = height/5;
    ellipse(Sh1dX, Sh1dY, Sh1D, Sh1D);

    // Modifying the second set of Shapes 
    var Sh2R = (abs(255-bgB));
    var Sh2G = (abs(255-bgR));
    var Sh2B = (abs(255-bgG)); 
    fill(Sh2R, Sh2G, Sh2B);
    
    // creating the attibutes of new shapes
    var Sh2aX = width/2;
    var Sh2aY = height/2;
    var Sh2W = 30;
    var Sh2H = 70;
    var Sh2aDeg = 0
    
    push();
    Sh2aDeg = map(mouseX, 0, width, 0, 360);
    translate(Sh2aX,Sh2aY);
    rotate(radians(Sh2aDeg));
    rect(0, 0, Sh2W, 3*Sh2H,50);  
      
    //secondary shape in this series
    var Sh2bX = (width/2);
    var Sh2bY = (height/2);
    var Sh2bDeg = map(mouseX,0,width,0,360);
    rotate(radians(Sh2bDeg));
    rect(0,0, Sh2W,3*Sh2H, 50);
    pop();

    //final shape series 
    
    var Sh3R = (abs(255-bgG));
    var Sh3G = (abs(255-bgB));
    var Sh3B = (abs(255-bgR)); 
    fill(Sh3R,Sh3G,Sh3B);
    
    var SizeModifier = abs(mouseX-mouseY);

    if (CircleSize > 100) {
        SizeModifier *=-1
    }
    CircleSize += SizeModifier
    ellipse(width/2, height/2, CircleSize, CircleSize);
}

Kyle Lee Project 3

For this project, the hardest part was coding efficiently. Given the amount of little coding experience I drew objects individually as I knew how which ended up taking up many lines of code.

 

kdlee-project-03-a

var redX = 0;
var redY = 0;
var redW = 32;
var redH = 480;
var redModifier = 64;
var blueX = 0;
var blueY = 16;
var blueW = 64;
var blueH = 32;
var blueModifier = 64;
var whiteX = 0;
var whiteY = 0;
var whiteW = 64;
var whiteH = 32;
var whiteModifier = 64;
var dotX = 8;
var dotY = 16;
var dotD = 32;
var dotModifier = 32;
var rectTurn = 180;
var coloryYellow ="#FAFCFC";//"#18192E";// "#CEDEE6";//"#FEEEDD"; //"#FFCC39";
var colorRed = "#6393B6";//"#D54E21";// "#2A3C4F";//"#30C9A3";//"#FC4E4D";
var colorBlue = "#DDDADC";//"#F3CB2F"; //"#F37A70";//"#FE8D7B";//"#6B7FE0";

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

function draw() {
    noStroke();
    background(coloryYellow);//YELLOW

    var redW = map(mouseX, 0, width, 0, redModifier);
    rectMode(CORNER);
    fill(colorRed);//RED
    rect(redX, redY, redW, redH);//Repeated 10 RED rectangles
    rect(redX + 1 * redModifier, redY, redW, redH);
    rect(redX + 2 * redModifier, redY, redW, redH);
    rect(redX + 3 * redModifier, redY, redW, redH);
    rect(redX + 4 * redModifier, redY, redW, redH);
    rect(redX + 5 * redModifier, redY, redW, redH);
    rect(redX + 6 * redModifier, redY, redW, redH);
    rect(redX + 7 * redModifier, redY, redW, redH);
    rect(redX + 8 * redModifier, redY, redW, redH);
    rect(redX + 9 * redModifier, redY, redW, redH);
//    if (mouseX < 0){
//      var redW = 0;
//    }
    push();//ALL Blue Rectangles
    rectMode(CENTER);
    var blueW = map(mouseY, 0, height, 0, blueModifier) * 2;
    var redW = map(mouseX, 0, width, 0, redModifier);
    fill(colorBlue);//BLUE

    push();//Repeated 4 BLUE bars 0th Column
    translate(blueX + redW / 2 - blueModifier, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2 - blueModifier, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 1st Column
    translate(blueX + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 2nd Column
    translate(blueX + blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 3rd Column
    translate(blueX + 2 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 2 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 4th Column
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 3 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 5th Column
    translate(blueX + 4 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 4 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 6th Column
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 5 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 6th Column
    translate(blueX + 6 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 6 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 7th Column
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 7 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 8th Column
    translate(blueX + 8 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 8 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 9th Column
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 1 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 3 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 5 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 9 * blueModifier + redW / 2, blueY + 7 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();

    push();//Repeated 4 BLUE bars 10th Column
    translate(blueX + 10 * blueModifier + redW / 2, blueY);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 2 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 4 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    push();
    translate(blueX + 10 * blueModifier + redW / 2, blueY + 6 * blueModifier);
    rotate(radians(map(mouseY, 0, height, 0, rectTurn)));
    rect(0, 0, blueW, blueH);
    pop();
    pop();
}

Sofia Syjuco – Project-03 – Dynamic Drawing

sketch

// Sofia Miren Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// Assignment-03-C

xPosition1 = 320;
yPosition1 = 0;
yPosition2 = 240;
rectSize = 30;
circleSize = 15;
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    noStroke();

    // have background gradiate as mouseY changes from pink to green
    colR = map(mouseY, 0, height, 255, 152);
    colB = map(mouseY, 0, height, 153, 151);
    colG = map(mouseY, 0, height, 0, 255);
    background(colR, colG, colB);

    push();
    translate(320, 240);
    fill (0);
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the black rectangle
    rect (0 - rectSize/2, yPosition1, rectSize, rectSize);
    // if mouseY is on lower half of screen, alter the yPosition variables
    // this will effect rectangle placement
    if ((mouseY > 0) & (mouseY < 200)) {
        yPosition1 = mouseY;
        yPosition2 = (0 - mouseY);
         }
    pop();

    push();
    translate (320, 240);
    fill ("white");
    // rotate the squares faster/slower depending on mouseY position
    rotate (millis ()/mouseY);
    // create the white rectangle
    rect (0 - rectSize/2, yPosition2, rectSize, rectSize);
    // if mouse Y on upper half of screen, let mouseY effect square's position
    if ((mouseY < 0) & (mouseY > -200)){
        yPosition2 = mouseY;
     }
    pop();
 
    push();
    // make the circle's color gradiate from black/white depending on mouseY
    fill (mouseY);
    // create the ellipse
    ellipse (xPosition1, height/2, circleSize, circleSize);
    // if the mouseY is within certain bounds, change ellipse position
    if ((mouseY > 40) & (mouseY < 440)){
        xPosition1 = mouseY + 100;
    // if the circle is on right half of screen, make it big (20x20)
        if (xPosition1 > 320){
            circleSize = 20;
            }
    // if the circle is on the left half of screen, make it small (10x10)
         if (xPosition1 < 320) {
            circleSize = 10;
            }
    }
    pop();
}

My process for this project was to slowly cobble together elements of what we had learned, and step-by-step create a foundation which I could later experiment on. It took a lot of testing and just moving numbers around, but in the end I think I have a better understanding of manipulating shapes, and translating things.

Janet Lee-Project 3- Dynamic Drawings

sketch

var diamOne = 150;
var diamTwo = 100;
function setup() {
    createCanvas(640,480);


}

function draw() {
    background ("#3D3355");
  fill ("#F13F5F");

  push();//small flower spinning
  translate(width/3,height/3+100);
  rotate (millis()/1000);
  translate(-width/3,-height/3+100);
  rotate(radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate(radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate(radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  noStroke();
  ellipse (0,0,10,80);
  rotate (radians(15));
  pop();
  push();
  fill("#C2AFC7");
  noStroke();
  ellipse (width/2+100,height/2-100,diamOne);
  pop();
  push();
  fill("#E790A5");
  noStroke();
  ellipse (width/2+50,height/2+150,diamTwo);
  pop();
    if (mouseY>height/2) { //changes size of diamOne
      diamOne -= (diamOne-5)>=15;
    } else {
      diamOne += (diamOne+5)>=100;
    }
    if (mouseX >width/2) {//changes sizes of diamTwo
      diamTwo += (diamTwo+10)> 30;

    } else {
      diamTwo -= (diamTwo-10)>50;
    }



}

Sarah Ransom-Looking Outwards-03

The Silk Pavilion (2013 – CNC Deposited Silk Fiber & Silkworm Construction; MIT Media Lab) is a fascinating project inspired by the natural constructive habits of actual silk worms. The basic premise of this project was to study the silk worm’s ability to create relatively large scale fiber structures starting with a single multi-property silk thread in an attempt to create a structure in which the surface varies in density based on outside stimuli such as sunlight. The algorithms used to create this structure were derived from documenting actual silk worms placed in a controlled environment where they were allowed to do what they do best. I thought the final product of this structure was especially fascinating when you considered how the algorithms accounted for what  silk worms might have wanted to accomplish by leaving gaps or creating more dense patches of silk based on exposure to sunlight and heat. The ultimate goal of this project may have been to explore “the formation of non-woven fiber structures generated by the silkworms as a computational schema for determining shape and material optimization of fiber-based surface structures” but resulting structures look like works of art in their own right.

Silk Pavilion

SILK PAVILION from Mediated Matter Group on Vimeo.

Sarita Chen – Looking Outwards – 03

(Above are examples of the Raven Kwok’s work.)

Taken from his tumblr bio: ” Raven Kwok is a visual artist / animator / programmer. His artistic and research interest mainly focuses on exploring generative visual aesthetic brought by customized algorithms and processes created through computer programming.”

One project of his that I admired was a music video called Skyline that he created. The music video was created with a coding software known as Processing. Kwok talks about how he uses a geometric model known as “Voronoi Tessellation”, used in René Descartes theory of planetary motion. What I admire about the work, personally, is how trippy yet fluid the movements of the works are. In the Skyline music video, the audio of the song influences the movements, which creates an original outcome for the work.