Category: Section D

rkondrup-project-03-Dynamic-Drawing

sketch

//Ryu Kondrup
//rkondrup@andrew.cmu.edu
//Section D
//project-03

    var cloudShiftX = 200;
    var cloudShiftY = 100;
    var cloudShift0X = -150;
    var cloudShift0Y = 70;
    var adjustShift = 100;
    //greyWhite
    var greyWhiteR = 245;
    var greyWhiteG = 241;
    var greyWhiteB = 230;
    //windows colors
    var windowsR = 160;
    var windowsG = 160;
    var windowsB = 150;

    //lights colors
    var lightsR = 255;
    var lightsG = 197;
    var lightsB = 107;

    //grey sky colors
    var greySkyR = 226;
    var greySkyG = 226;
    var greySkyB = 214;

    //sky colors
    var skyR = 182;
    var skyG = 222;
    var skyB = 228;

    //water color
    var waterR = 162;
    var waterG = 222;
    var waterB = 208;

    //grey water
    var greyWaterR = 160;
    var greyWaterG = 160;
    var greyWaterB = 150;


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

function draw() {
    //colors!!!!!!!!!
    background(greySkyR, greySkyG, greySkyB);
    noStroke();


//to change background color
    if ((mouseX >= 640) & (mouseX <= 640)){
      mouseX = 640;
  }
    if ((mouseX > 0) & (mouseX < 640)){
        greySkyR = mouseX*((182-226)/640) + 226;
        greySkyG = mouseX*((222-226)/640) + 226;
        greySkyB = mouseX*((228-214)/640) + 214;
    }


//to change water color
    if ((mouseX >= 640) & (mouseX <= 640)){
      mouseX = 640;
  }



  /*  if ((mouseX >= 640) & (mouseX <= 640)){
        mouseX = 640;
    }
    if ((mouseX > 0) & (mouseX , 640)){

    }
*/




//to turn on the lights


if ((mouseIsPressed) && (windowsR = 160)) {
   windowsR = lightsR;
   windowsG = lightsG;
   windowsB = lightsB;
}
else if ((mouseIsPressed) & (windowsR = 225)) {
  windowsR = 160;
  windowsG = 160;
  windowsB = 150;
  //NEEDS SOME WORK
}


//CLOUD
//cloud1
fill(greyWhiteR, greyWhiteG, greyWhiteB);
ellipse(mouseX + 0, 125, 20);
ellipse(mouseX + 20, 120, 35);
ellipse(mouseX + 40, 120, 55);
ellipse(mouseX + 65, 125, 40);
ellipse(mouseX + 90, 120, 45);
ellipse(mouseX + 115, 125, 20);
ellipse(mouseX + 125, 120, 30);
ellipse(mouseX + 145, 125, 20);

//cloud2
ellipse(mouseX + 0 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
ellipse(mouseX + 20 + cloudShiftX + adjustShift, 100 + cloudShiftY, 35);
ellipse(mouseX + 40 + cloudShiftX + adjustShift, 100 + cloudShiftY, 55);
ellipse(mouseX + 65 + cloudShiftX + adjustShift, 105 + cloudShiftY, 40);
ellipse(mouseX + 90 + cloudShiftX + adjustShift, 100 + cloudShiftY, 45);
ellipse(mouseX + 115 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);
ellipse(mouseX + 125 + cloudShiftX + adjustShift, 100 + cloudShiftY, 30);
ellipse(mouseX + 145 + cloudShiftX + adjustShift, 105 + cloudShiftY, 20);

//cloud0
ellipse(mouseX + 0 + cloudShift0X, 105 + cloudShift0Y, 20);
ellipse(mouseX + 20 + cloudShift0X, 100 + cloudShift0Y, 35);
ellipse(mouseX + 40 + cloudShift0X, 100 + cloudShift0Y, 55);
ellipse(mouseX + 65 + cloudShift0X, 105 + cloudShift0Y, 40);
ellipse(mouseX + 90 + cloudShift0X, 100 + cloudShift0Y, 45);
ellipse(mouseX + 115 + cloudShift0X, 105 + cloudShift0Y, 20);
ellipse(mouseX + 125 + cloudShift0X, 100 + cloudShift0Y, 30);
ellipse(mouseX + 145 + cloudShift0X, 105 + cloudShift0Y, 20);

//cloud-1
ellipse(mouseX + 0 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 20 + 3*cloudShift0X, 100 + .5*cloudShiftY, 35);
ellipse(mouseX + 40 + 3*cloudShift0X, 100 + .5*cloudShiftY, 55);
ellipse(mouseX + 65 + 3*cloudShift0X, 105 + .5*cloudShiftY, 40);
ellipse(mouseX + 90 + 3*cloudShift0X, 100 + .5*cloudShiftY, 45);
ellipse(mouseX + 115 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 125 + 3*cloudShift0X, 100 + .5*cloudShiftY, 30);
ellipse(mouseX + 145 + 3*cloudShift0X, 105 + .5*cloudShiftY, 20);

//cloud3
ellipse(mouseX + 0 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 20 + 5*cloudShift0X, 100 + .5*cloudShiftY, 35);
ellipse(mouseX + 40 + 5*cloudShift0X, 100 + .5*cloudShiftY, 55);
ellipse(mouseX + 65 + 5*cloudShift0X, 105 + .5*cloudShiftY, 40);
ellipse(mouseX + 90 + 5*cloudShift0X, 100 + .5*cloudShiftY, 45);
ellipse(mouseX + 115 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);
ellipse(mouseX + 125 + 5*cloudShift0X, 100 + .5*cloudShiftY, 30);
ellipse(mouseX + 145 + 5*cloudShift0X, 105 + .5*cloudShiftY, 20);




/*
    greyWhite = color(245, 241, 230);
    greySky = color(200, 200, 185);
    greyWater = color(160, 160, 150);
    //windows = color(160, 160, 150);
    windows = color(window1R, window1G, window1B);
    sky = color(124, 35, 60);
    //lights = color(225, 193, 96);
    lights = color(lightsR, window2G, window2B);
    water = color(81, 18, 35);
*/

    fill(greyWhiteR, greyWhiteG, greyWhiteB);


    //BASE PIECES
    //base plate
    rect(40, 322, 562, 10);
    //2nd base plate
    rect(104, 310, 433, 15);
    //2nd base plate right triangle
    triangle(537, 310, 537, 325, 572, 325);
    //3rd base plate
    rect(109, 299, 320, 15);
    //3rd base plate right triangle
    triangle(429, 299, 429, 310, 469, 310);
    //4th base plate
    rect(115, 283, 75, 18);
    //4th base plate triangle
    triangle(190, 283, 190, 301, 223, 301);

    //opera house FILL HOLES
    //left rectangle
    rect(169, 234, 120, 80);
    //middle rectangle
    rect(290, 255, 100, 60);
    //right rectangle
    rect(390, 276, 130, 40);


    //CURVES
    //curve 1
    bezier(104, 220, 123, 223, 173, 227, 200, 234);
    triangle(95, 219, 200, 234, 190, 283);
    //curve 1 small
    triangle(95, 219, 121, 237, 121, 258);
    //curve 2
    triangle(147, 190, 255, 228, 223, 299);
    bezier(147, 190, 185, 201, 227, 217, 255, 228);
    //litle triangle addition
    triangle(147, 190, 162, 229, 185, 232);
    //curve 3 the big one

    //subcurve 3 big
    triangle(335, 255, 229, 146, 287, 299);
    bezier(229, 146, 277, 178, 315, 217, 335, 255);
    //subcurve 3 small
    triangle(237, 222, 229, 146, 287, 299);

    //curve 4
    triangle(335, 255, 460, 240, 407, 299);
    bezier(335, 255, 375, 243, 425, 239, 460, 240);
    //curve 5
    triangle(395, 253, 472, 276, 429, 299);
    bezier(395, 253, 424, 258, 451, 267, 472, 276);
    //curve 6
    triangle(472, 276, 550, 269, 512, 310);
    bezier(472, 276, 498, 270, 525, 268, 550, 269);



    //WINDOWS
    fill(windowsR, windowsG, windowsB);
    //window 1
    triangle(121, 237, 190, 283, 121, 283);
    //window 2
    bezier(190, 283, 192, 270, 208, 270, 223, 299);
    //window 3
    bezier(223, 299, 246, 279, 269, 281, 287, 299);
    //window 4
    bezier(287, 299, 307, 281, 335, 281, 347, 299);
    //winodw 5
    bezier(347, 299, 362, 279, 384, 282, 407, 299);
    //window 6
    triangle(408, 271, 408, 299, 429, 299);
    //window 7
    bezier(429, 299, 447, 291, 461, 291, 469, 310);
    //window 8
    bezier(469, 310, 480, 294, 496, 294, 512, 310);
    //winodw 9 (end)
    triangle(512, 310, 537, 310, 537, 283);

    fill(greyWaterR, greyWaterG, greyWaterB);
    //WATER BELOW
    rect(0, 332, 640, 480);

    if ((mouseX > 0) & (mouseX < 640)){
        greyWaterR = mouseX*((142-160)/640) + 160;
        greyWaterG = mouseX*((222-160)/640) + 160;
        greyWaterB = mouseX*((208-150)/640) + 150;
    }


var offsetX1 = 100
var offsetY1 = 15
    //waterlines
    fill(greyWhiteR, greyWhiteG, greyWhiteB);
    //row1
    rect(640-mouseX, 345, 220, 3);
    rect(640-mouseX + 280, 345, 160, 3);
    rect(640-mouseX + 500, 345, 240, 3);
    rect(640-mouseX - 300, 345, 200, 3);
    rect(640-mouseX - 600, 345, 220, 3);
    //row2
    rect(640-mouseX + offsetX1, 345 + offsetY1, 220, 3);
    rect(640-mouseX + 280 + offsetX1, 345 + offsetY1, 160, 3);
    rect(640-mouseX + 500 + offsetX1, 345 + offsetY1, 240, 3);
    rect(640-mouseX - 300 + offsetX1, 345 + offsetY1, 200, 3);
    rect(640-mouseX - 600 + offsetX1, 345 + offsetY1, 220, 3);
    //row3
    rect(640-mouseX + 2*offsetX1, 345 + 2.5*offsetY1, 220, 3);
    rect(640-mouseX + 280 + 2*offsetX1, 345 + 2.5*offsetY1, 160, 3);
    rect(640-mouseX + 500 + 2*offsetX1, 345 + 2.5*offsetY1, 240, 3);
    rect(640-mouseX - 300 + 2*offsetX1, 345 + 2.5*offsetY1, 200, 3);
    rect(640-mouseX - 600 + 2*offsetX1, 345 + 2.5*offsetY1, 220, 3);
    //row4
    rect(640-mouseX + 3*offsetX1, 345 + 5*offsetY1, 220, 3);
    rect(640-mouseX + 280 + 3*offsetX1, 345 + 5*offsetY1, 160, 3);
    rect(640-mouseX + 500 + 3*offsetX1, 345 + 5*offsetY1, 240, 3);
    rect(640-mouseX - 300 + 3*offsetX1, 345 + 5*offsetY1, 200, 3);
    rect(640-mouseX - 600 + 3*offsetX1, 345 + 5*offsetY1, 220, 3);






/*var windows1R = 160;
var window1G = 160;
var window1B = 150;
var lightsR = 225;
var window2G = 193;
var window2B = 96; */
    //colors!!!!!!!!!
/*  greyWhite = color(245, 241, 230);
    greySky = color(200, 200, 185);
    greyWater = color(160, 160, 150);
    windows = color(160, 160, 150);
    sky = color(124, 35, 60);
    lights = color(225, 193, 96);
    water = color(81, 18, 35);
    */
}


/*    //windows colors
    var windowsR = 160;
    var windowsG = 160;
    var windowsB = 150;

    //lights colors
    var lightsR = 255;
    var lightsG = 197;
    var lightsB = 107;


function mouseIsPressed (){
  if ((windowsR = 160)){
    windowsR = 255;
    windowsG = 197;
    windowsB = 107;
  }
  else if (true) {
    windowsR = 160;
    windowsG = 160;
    windowsB = 150;
  }

}*/

I was feeling very ambitious at the start of this project, but after two days of coding simple shapes without yet having added any interactivity, i realized i needed to simplify the design if i was to finish before the deadline. I wanted to originally make the drawing change from soft day-colored gradients to vivid night-colored gradients but time was running short and i settled on a grey-to-saturated fill instead, which i am relatively happy with. Unfortunately, WordPress was not kind to my aspect ratio which i so meticulously planned out in a 640 x 480 arrangement but which was unceremoniously snipped by the WordPress formatting gods. In the future i will try to orient my canvases vertically to avoid cropping. 

yunzhous- Looking Outwards 01


Flower Forest1

Flower Forest2


Flower Forest3

I went to this immersive and interactive art exhibition by TeamLab this summer. The exhibition was installed in eight rooms, each room featuring one theme. The theme that interested the most is the Flower Forest. The exhibition uses digital technology to blur the boundaries between the physical world and the digital world. People can interact with the flowers, grow them, move them around, etc. The flower also “grow” on people’s clothing. I suppose the artists used commercial software because this installation only requires a sensor to detect people’s motion. A custom software wouldn’t be necessary.
I really admire the concept of the exhibition. In comparison with the traditional art exhibition where the audience should stay away from the artwork, the artists intend to have the audience to touch, feel, and even interact with the artwork. The audience can understand the artwork from their own perspective and I think it’s pretty amazing.

You can view more images here

Project-03-Dynamic-Drawing

As I was creating this, I didn’t really know what my end goal was going to be. I mostly let creative freedom have its way while I tried out different shapes and movements to see what I liked best. Altogether, this project was pretty tough for me, as a couple of things I wanted to do were a little too complicated (and it was all getting too jumbled and confusing), so I tried to keep it simpler, but with interesting-enough shapes. I tried to experiment more with triangles and mouseX/mouseY, which is why I focused so much on it.

sketch

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Section D
//Project-03

function setup() {
    createCanvas(480, 600);
    rectMode(CENTER);
}

function draw() {
    background(248, 207, 233);
//background lines
    var x = 0
    fill(0, 255, 0);
    strokeWeight(.3);
//these lines will shake back and forth - it
//   will change the position of each line with a value
//   between 1 and 5 as well as move with the mouse
//half of them will move up with the mouse,
//half will move down with the mouse
    x = x + random(1, 3);
    line(x + 5, 0, x + 5, mouseY);
    line(x + 25, 600, x + 25, mouseY);
    line(x + 45, 0, x + 45, mouseY);
    line(x + 65, 600, x + 65, mouseY);
    line(x + 85, 0, x + 85, mouseY);
    line(x + 105, 600, x + 105, mouseY);
    line(x + 125, 0, x + 125, mouseY);
    line(x + 145, 600, x + 145, mouseY);
    line(x + 165, 0, x + 165, mouseY);
    line(x + 185, 600, x + 185, mouseY);
    line(x + 205, 0, x + 205, mouseY);
    line(x + 225, 600, x + 225, mouseY);
    line(x + 245, 0, x + 245, mouseY);
    line(x + 265, 600, x + 265, mouseY);
    line(x + 285, 0, x + 285, mouseY);
    line(x + 305, 600, x + 305, mouseY);
    line(x + 325, 0, x + 325, mouseY);
    line(x + 345, 600, x + 345, mouseY);
    line(x + 365, 0, x + 365, mouseY);
    line(x + 385, 600, x + 385, mouseY);
    line(x + 405, 0, x + 405, mouseY);
    line(x + 425, 600, x + 425, mouseY);
    line(x + 445, 0, x + 445, mouseY);
    line(x + 465, 600, x + 465, mouseY);
//triangles
//the top points of each triangle will follow mouse
    fill(155, 44, 75);
    push();
    noStroke();
//top triangles
//constrain mouseX within the canvas
    var mouse1 = max(min(mouseX, 480), 0);
    var mouse2 = max(min(mouseY, 640), 0);
    triangle(mouse1, 50, 50, 150, 125, 150);
    triangle(mouse1, 50, 200, 150, 275, 150);
    triangle(mouse1, 50, 350, 150, 425, 150);
//center triangles - these will go in opposite direction
    triangle(-mouse1 + 480, 225, 50, 325, 125, 325);
    triangle(-mouse1 + 480, 225, 200, 325, 275, 325);
    triangle(-mouse1 + 480, 225, 350, 325, 425, 325);
//bottom triangles
    triangle(mouse1, 400, 50, 500, 125, 500);
    triangle(mouse1, 400, 200, 500, 275, 500);
    triangle(mouse1, 400, 350, 500, 425, 500);
    pop();
//these circles wil move vertically with the mouse
//larger circles
    push();
    noStroke();
    fill(201, 50, 93);
    ellipse(75, 10 + mouse2 * 225 / 600,
        40, 40);
    ellipse(75, 200 + mouse2 * 225 / 600,
        40, 40);
    ellipse(240, 10 + mouse2 * 225 / 600,
          40, 40);
    ellipse(240, 200 + mouse2 * 225 / 600,
          40, 40);
    ellipse(400, 10 + mouse2 * 225 / 600,
         40, 40)
    ellipse(400, 200 + mouse2 * 225 / 600,
          40, 40);
//smaller circles
    ellipse(165, 10 + (-mouse2+1000) * 225 / 600,
          20, 20);
    ellipse(165, 200 + (-mouse2+1000) * 225 / 600,
          20, 20);
    ellipse(320, 10 + (-mouse2+1000) * 225 / 600,
           20, 20);
    ellipse(320, 200 + (-mouse2+1000) * 225 / 600,
           20, 20);
    pop();
}

enwandu-Project-03-Dynamic-Drawing

AvengersTower

/*  Emmanuel Nwandu
    enwandu@andrew.cmu.edu
    Section D
    Project-03-Dynamic-Drawing
*/

// Lower Window Lights Color
var WindowR = 49
var WindowG = 92
var WindowB = 98
//Controls background color and Building color
var bRed = 77;
var bGreen = 125;
var bBlue = 135;
// Controls the color of the Avengers Symbol
var AvengersR = 124;
var AvengersG = 198;
var AvengersB = 218;

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

function draw() {
    background (bRed, bGreen, bBlue);
    stroke(255);
    strokeWeight(3);

//Changes Sky and building color as mouseY moves the length of the canvas
    if (mouseY > 0 || mouseY < 640){
        bRed = mouseY * ((77 -75)/640) + 40;
        bGreen = mouseY * ((125 -75)/640) + 40;
        bBlue = mouseY * ((135 -75)/640) + 40;
    }

//Changes "A" symbol color as mouseY moves the length of the canvas
    if(mouseY > 0 || mouseY < 640){
        AvengersR = mouseY * ((124 -75)/640) + 40;
        AvengersG = mouseY * (198/ 640);
        AvengersB = mouseY * (218/640);
        // WindowR = mouseY * ((124 -75)/640) + 40;
        // WindowG = mouseY * (198/ 640);
        // WindowB = mouseY * (218/640);

    }

//Changes "A" symbol as mouse X moves across canvas if mouseY less than 270
    if(mouseX > 0 & mouseY < 270 || mouseX < 480 && mouseY <270){
        AvengersR = mouseX * ((212-50)/640) + 4;
        AvengersG = mouseX * ((30 -10)/640) + 4;
        AvengersB = mouseX * ((16-5)/640) + 4;
        // WindowR = mouseX * ((212-50)/640) + 4;
        // WindowG = mouseX * ((30 -10)/640) + 4;
        // WindowB = mouseX * ((16-5)/640) + 4;

    }

// Window Detailing
    strokeWeight(0.5);
// Verticals
    line(105, 271, 105, 640);
    line(143, 143, 143, 521);
    line(181, 271, 181, 405);
    line(219, 271, 219, 345);
    line(257, 271, 257, 305);
// Horizontals
    line(67, 21, 98, 21);
    line(67, 49, 104, 49);
    line(67, 78, 111, 78);
    line(67, 102, 117, 102);
    line(67, 127, 127, 127);
    line(67, 154, 157, 154);
    line(67, 181, 342, 181);
    line(67, 215, 108, 215);

// Lower Window Color
    fill(WindowR, WindowG, WindowB);
    noStroke();
    strokeJoin(ROUND);
    beginShape();
    vertex(195, 407);
    vertex(278, 640);
    vertex(132, 640);
    vertex(144, 575);
    vertex(150, 540);
    vertex(161, 500);
    vertex(164, 487);
    vertex(166, 480);
    endShape();
// Lower Window Detailing
    stroke(200);
    strokeWeight(7);
    line(185, 432, 202, 432);
    line(174, 462, 211, 462);
    line(164, 492, 223, 492);
    line(156, 522, 234, 522);
    line(150, 552, 244, 552);
    line(144, 582, 254, 582);
    line(138, 612, 265, 612);
    stroke(255);
    strokeWeight(2);
    line(138, 600, 138, 640);
    line(147, 554, 147, 640);
    line(156, 518, 156, 640);
    line(165, 484, 164, 640);
    line(174, 459, 174, 640);
    line(183, 434, 183, 640);
    line(192, 410, 192, 640);
    line(201, 425, 201, 640);
    line(210, 434, 210, 640);
    line(219, 459, 219, 640);
    line(228, 484, 228, 640);
    line(237, 518, 237, 640);
    line(246, 530, 246, 640);
    line(255, 554, 255, 640);
    line(264, 582, 264, 640);

// General Building form
    stroke(255);
    strokeWeight(2);
    line(67, 0, 67, 640);
    fill(200);
    quad(234, 347, 227, 355, 325, 640, 337, 640);
    quad(212, 377, 195, 404, 278, 640, 300, 640);

    noFill();
    bezier(93, 0, 123, 195, 154, 155, 334, 175);
    bezier(121, 640, 158, 408, 203, 325, 319, 269);
    bezier(127, 640, 164, 408, 209, 325, 338, 269);
    bezier(131, 640, 166, 408, 221, 325, 335, 271);

//Dark Glazing behind "A" symbol
    fill(31, 51, 70);
    stroke(255);
    strokeWeight(2);
    ellipse(138, 220, 80, 80);
    noStroke();
    quad(328, 182, 319, 224, 153, 224, 153, 182);
    quad(279, 231, 265, 257, 153, 257, 153, 231);
    fill(200);
    stroke(255);
    ellipse(138, 220, 68, 68);
    fill(31, 51, 70);
    ellipse(138, 220, 60, 60);

    fill(200);
    noStroke();
    strokeJoin(ROUND);
    beginShape();
    vertex(275, 266);
    vertex(154, 266);
    vertex(154, 257);
    vertex(265, 257);
    vertex(279, 231);
    vertex(177, 231);
    vertex(179, 224);
    vertex(354, 224);
    vertex(354, 231);
    vertex(295, 231);
    endShape();
    ellipse(354, 227.5, 7, 7);

// Extends landing pad using mouseX within the range of 365 to 448
// and 335 to 418
    var LeftWall = 365;
    var RightWall = 448;
    var LeftWallb = 335;
    var RightWallb = 418;

    var xc = constrain(mouseX + 30, LeftWall, RightWall);
    var xcb = constrain(mouseX, LeftWallb, RightWallb);

    fill(31, 51, 70); // Controls color of landing pad explicitly
    stroke(255);
    strokeWeight(2);
    quad(59, 266, xc, 266, xcb, 271, 65, 271);// Draws landing pad

//Lighter Glazing
    fill(89, 116, 135);
    stroke(255);
    strokeWeight(1);
    quad(93, 0, 105, 0, 111, 19, 97, 19);
    quad(97, 20, 111, 20, 117, 39, 101, 39);
    quad(101, 40, 117, 40, 123, 59, 105, 59);
    quad(105, 60, 123, 60, 129, 79, 109, 79);
    quad(110, 80, 129, 80, 137, 99, 115, 99);
    quad(115, 100, 137, 100, 147, 119, 124, 119);
    quad(124, 120, 147, 120, 162, 139, 138, 139);
    triangle(139, 140, 162, 140, 175, 159);

//Avengers symbol
    fill(AvengersR, AvengersG, AvengersB);
    strokeWeight(2);
    strokeJoin(MITER);
    beginShape();
    vertex(108, 263);
    vertex(97, 263);
    vertex(144, 180);
    vertex(155, 180);
    vertex(155, 226);
    vertex(146, 218);
    vertex(146, 198);
    vertex(132, 223);
    vertex(146, 223);
    vertex(146, 220);
    vertex(157, 228);
    vertex(146, 236);
    vertex(146, 233);
    vertex(127, 233);
    vertex(108, 263);
    endShape();

    beginShape();
    vertex(155, 234);
    vertex(155, 249);
    vertex(147, 249);
    vertex(147, 240);
    vertex(155, 234);
    endShape();

}

function mousePressed(){
    if(mouseX > 0 & mouseY < 270 || mouseX < 480 && mouseY <270){
    WindowR = 194;
    WindowG = 209;
    WindowB = 15;
} else if (true) {
    WindowR = 42;
    WindowG = 92;
    WindowB = 98;
}
}

This project took a while. I started by simply drawing the form/design I wanted, defining a few variables along the way. When the initial form was near completion I started to explore the change of color and size, of a few elements in the drawing. I struggled with getting a smooth gradient of color change when the mouse moves, but eventually I found something that worked for me.

I based my drawing and design on this image. It was also my intention to have some avengers flying through the sky, but I broke my code when I tried.

I was inspired by my love of Marvel to code the Avengers Tower, in dedication of the fearless Avengers. Thank you for all you have done, and keep on avenging.

hyt-03-Looking Outwards: Generative Cloud

 

Caption: Cumulus In Progression – by SOFTLab.

When I was browsing on the websites given by the professor, I came across project Cumulus on Behance created by SOFTLab. This is an interactive installation that enables the light, as well as geometric shapes to change in response to the sounds in its environment. However, the changes are not constant, but rather irregular based on a series of algorithms coded through Processing, which sets up “tubes” of lightning connecting from one end to another, hence creating a mysterious cloud-shaped sculpture. The “tube” materials consist of acrylic along with 3D printed joints, as well as over 70 meters of LED lights installed within the structure.

This project intrigued me as I enjoyed its interactivity engaging with the audience. Its futuristic shape in combination with a very nature-centered concept with lightning, cloud, and sounds can be confusing but eyeopening at the same time. On the other hand, its analytic aspect of breaking down the system of sounds also adds a technological meaning to the piece. I am curious to learn about how Processing helped to generate an art piece like this, and I am excited to try out the process as well! 

 

hyt-Project-03: Dynamic Drawing

Dynamic Drawing 

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing

var x1 = 100; // top left coordinate of the quad
var x2 = 150; 
var x3 = 200;
var x4 = 250;
var y = 230; // top left coordinate of the quad
var v = 150; // random variable, refer to attached pic in post 
var TH = 120; // triangle height, refer to attached pic in post
var TW = 170;
var radius = 20; // radius
var lightOn = false;
var curveOn = false; 
var arrived1 = false;
var arrived2 = false;
var arrived3 = false;
var arrived4 = false;


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


function draw() {
    background(0); // black

// lights turn on the screen
    fill(255, 255, mouseX / 3); // yellow
    text("~press me~", 80, 100);
    noStroke();
    ellipse(200, 200, radius, radius); // light source

// mouse approach the light source and light fills the screen
    var distance = dist(mouseX, mouseY, 200, 200);
    if (distance < 10) {
        lightOn = true;
    }
    if (lightOn == true){
        radius += 5;
    }

// a sequential order from quad1+3 to quad2+4
    if (radius > 500) {
        if (x1 < 150) {
            x1 += 1
        } else {
            arrived1 = true; 
        }
        if (x2 < 200 & arrived1 == true) {
            x2 += 1;
        } else {
            arrived2 = true;
        }
        if (x3 < 250 & arrived2 == true) {
            x3 += 1;
        } else {
            arrived3 = true;
        }
        if (x4 < 300 & arrived3 == true) {
            x4 += 1;
        } else {
            arrived4 == true;
        }
    }

// original quad lines
    b = mouseX; // color gradient for background
    stroke(0);
    strokeWeight(3);
    v = random(120, 125);
    // quad 1
        line(x1, y, x1 + TW, y - TH); 
        line(x1 + TW, y - TH, x1 + TW, y - TH + v); 
        line(x1 + TW, y - TH + v, x1, y + v);
        line(x1, y + v, x1, y);
    // quad 2
    if (arrived1 == true) {
        line(x2, y, x2 + TW, y - TH); 
        line(x2 + TW, y - TH, x2 + TW, y - TH + v); 
        line(x2 + TW, y - TH + v, x2, y + v);
        line(x2, y + v, x2, y);
    }
    // quad 3
    if (arrived2 == true) {
        line(x3, y, x3 + TW, y - TH); 
        line(x3 + TW, y - TH, x3 + TW, y - TH + v); 
        line(x3 + TW, y - TH + v, x3, y + v);
        line(x3, y + v, x3, y);
    }    
    // quad 4
    if (arrived3 == true) {
        line(x4, y, x4 + TW, y - TH); 
        line(x4 + TW, y - TH, x4 + TW, y - TH + v); 
        line(x4 + TW, y - TH + v, x4, y + v);
        line(x4, y + v, x4, y);
    }

}

This project has been extremely challenging to me. I was struggling a lot with which idea to focus on, and eventually chose an abstract geometric, animation-like shape. I wanted to create a scenery of light litting up the screen in darkness, and surprisingly you would find moving, animated geometry sequence. The end product was not really what I expected, but in general I was glad that I learned ways to use better logic with if statements.

ssontag-fireworks-Project-03-DynamicDrawing

For this project I let my knowledge of certain functions built into p5.js. I researched Perlin Noise and became pretty comfortable with the way it worked in conjunction with the rotate function to create a firework effect.

sketch


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

function draw() {
    background(220);
//these rectangles following are lined up one after the other 
//they follow the x value of the mouse, but are offset by the rectangles next to them
    fill(219, 112, 147);
    rect(mouseX + 525, 0, 300, 480);

    fill(176, 224, 230);
    rect(mouseX + 500, 0, 25, 480);

    fill(255, 218, 185);
    rect(mouseX + 350, 0, 150, 480);

    fill(135, 206, 250);
    rect(mouseX + 300, 0, 50, 480);

    fill(30, 144, 255);
    rect(mouseX, 0, 300, 480);

    fill(143, 188, 143);
    rect(mouseX - 100, 0, 100, 480);

    fill(255, 140, 0);
    rect(mouseX - 300, 0, 200, 480);

    fill(173, 216, 230);
    rect(mouseX - 350, 0, 50, 480);

    fill(224, 255, 255);
    rect(mouseX - 450, 0, 100, 480);

    fill(240, 128, 128);
    rect(mouseX - 750, 0, 300, 480);
 
//my goal was to modulate the position of the cirlces rotated around the translated orgin 
//in order to create a firework effect
//by using push, pop, and rotate i can make a circular array of ellipses
//by using the perlin noise i can make the circles ungulate based on the perlin noise number sequence
    translate(width/2, height/2);
        for (var i = 0; i < 16; i++) {
            push();
            rotate(TWO_PI * i / 16);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(255, 239, 213);
            ellipse(mouseX - 400, 0, 20, 20);
            translate();
            pop();
        }

        for (var i = 0; i < 8; i++) {
            push();
            rotate(TWO_PI * i / 8);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(102, 51, 153)
            ellipse(mouseX - 200, 0, 50, 50);
            translate();
            pop();
        }

//this translation puts a firework in the bottom right corner
    translate(width/2, height/2);
        for (var i = 0; i < 32; i++) {
            push();
            rotate(TWO_PI * i / 32);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(0, 128, 128);
            ellipse(mouseX - 200, 0, 10, 10);
            translate();
            pop();
        }
//this translation places a firework in the top left corner
    translate(-640, -480);
        for (var i = 0; i < 32; i++) {
            push();
            rotate(TWO_PI * i / 32);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(0, 128, 128);
            ellipse(mouseX - 200, 0, 10, 10);
            translate();
            pop();
        }


}

yunzhous-Project-01-Face

yunzhous-project-01-face

function setup() {
    createCanvas(500, 500);
    background(241, 163, 111);

}

function draw() {
    

    translate(0, 65);

    //hair
    fill(0);
    ellipse(width/2, 130, 160, 160);
    rectMode(CENTER);
    rect(width/2, 250, 160, 240);

    //hat
    fill(251, 197, 197);
    noStroke();
    triangle(325, 0, 250, 50, 325, 100);
    ellipse(325, -5, 25, 25);

    //face
    noStroke();
    fill(240, 206, 183);
    ellipse(width/2, 150, 130, 140);

    //ears
    fill(240, 206, 183);
    ellipse(183, 155, 20, 25);
    ellipse(317, 155, 20, 25);

    //dark circles
    fill(125, 60);
    arc(220, 158, 25, 20, 0, PI);
    arc(280, 158, 25, 20, 0, PI);
    fill(240, 206, 183);
    ellipse(220, 152, 25, 20);
    ellipse(280, 152, 25, 20);

    //eyes
    fill(255);
    ellipse(220, 150, 25, 20);
    ellipse(280, 150, 25, 20);
    fill(0);
    ellipse(224, 152, 14, 14);
    ellipse(284, 152, 14, 14);

    //eyebrows
    stroke(0);
    strokeWeight(4);
    line(205, 135, 235, 125);
    line(265, 125, 295, 135);

    //nose
    stroke(0);
    strokeWeight(2);
    line(width/2, 160, width/2, 165);

    //smile
    noFill();
    strokeWeight(2);
    arc(250, 180, 30, 15, 0, PI);

    //dimple
    noStroke();
    rotate(radians(20));
    translate(46, -102);
    fill(245, 169, 157, 97);
    ellipse(275, 180, 8, 5);

    //bang
    fill(0);
    rotate(PI/4);
    translate(50, -140);
    ellipse(176, 79, 45, 100);

}

I sketched this out on my sketchbook first, and then draw them using Sublime. The most time consuming part is testing and moving the xy coordinates.

aboyle-Looking Outwards-03

For this post, I have chosen to discuss a project known as “Digital Grotesque”, specifically Grotto II, which is the second and (in my opinion) more impressive creation. The architects behind this project are Michael Hansmeyer and Benjamin Dillenburger, who worked with a fabrication team of 6 people. Their website can be found at https://digital-grotesque.com/.

Grotto II premiered in March 2017. It is 3.45 meters high, is made out of 7 tons of printed sandstone, and contains a space where people can enter and marvel at the 1.35 billion surfaces. What I most admire about this project is the sheer scale. While I’ve become somewhat accustomed to small 3D printed trinkets, the idea of a complexly decorated room created through 3D printing is still novel to me. It’s also exciting to know that people are willing to devote years of their lives to in order to fully explore the field of 3D printing.

Above: Inside the Digital Grotesque grotto. Link: https://digital-grotesque.com/architecture/

Grotto II was designed entirely by algorithms. According to the website, “a subdivision algorithm exploits the 3D printer’s full potential by creating porous, multi-layered structures with spatial depth. A single volume spawns millions of branches, growing and folding into a complex topological structure.” The algorithms do not incorporate randomness, but the creators say that the results were not necessarily foreseeable. Although the artists say that they tried to avoid referencing any existing architectural styles, their interest in architecture as a whole is clearly evident in the work.

dnoh-sectionD-lookingoutwards-03

title: ICD + ITKE Research Pavilion 2011
location: Germany
date: 2011
architects (teams): Institute for Computational Design and Institute of Building Structures and Structural Design

I believe that this pavilion was created with a main framework and overlaid with hexagonal shapes. The algorithm found constantly optimizes data to set the geometries into an ideal form.

I find this structure so fascinating because of the beauty in the joinery and details of the hexagons. It’s interesting how the algorithm created such a biological overall form out of geometric shapes that were created with programs.

The initial design was based around the notion of a sand dollar. This notion is clearly seen through the interior holes popped out of the wooden hexagons. The shape is clearly a manifestation of the biological motif.