daphnel- Looking Outwards 04

The Mesa Musical Shadows is an interactive music playing device that allows people to create music through the use of their shadows. This device was created by Montreal’s Daily Tous Les Jours studio and is located in the north plaza at Mesa Arts Center in Arizona. This singing pavement has four different tracks that changes depending on the time of day–morning, afternoon, evening, and night. Additionally, 47 light sensors are controlled through 6 control nodes and speakers are carefully placed in areas where water could not reach them.

I admire the fact that the workers in the studio wanted to implement the voice of the community members and students who live in Arizona. Through surveys and feedback from those people, the studio bought prototypes to test out what products could most accurately reflect what the public wants. They not only focused on the aspect of people playing around with their shadows to generate music, they also tried to take into consideration the people sitting on the sides, who could also feel more relaxed and happy watching others formulate a joyful tune on the musical cement.

danakim-LookingOutwards-04

Howler Monkey by Meier & Erdmann is a music video created by Spanish visual artist, Victor Doval. He used the frequencies of the sounds in the music to define a landscape’s visual parameters algorithmically. This literally visualized the idea that music is a journey through a changing landscape that is interpreted through one’s ears.

Doval used Processing and Blender to create these visuals that are in sync with the music. This project was interesting to me because of the initial idea that music is a journey. I thought that this music video was a good example of what that could mean and demonstrating how that could be visualized. However, I do feel that it may interfere with other people’s interpretations.

Victor Doval; Howler Monkey

Victor Doval; Howler Monkey

LookingOutwards-04-Chickoff

This is Ambient Synthesis, a sculpture which emits sounds of varying frequencies according to its light stimuli. It was created by Amanda Ghassaei in 2012 who graduated from Pomona College with a BA in Physics and Minor in Chemistry.

All of the sculpture’s data is interpreted by a MaxMSP application which uses the Max visual programming language to connect an object to virtual patch cords to create sound. What I find most interesting about this project is that it gives the environment and light around the sculpture a voice. This is contrary of videos of landscapes that are coupled with music that may not reflect the actual state of the animals and nature being filmed.

I’m very curious about what other factors of an environment, besides light, could be used to create sound. It would be interesting to see a sculpture respond to natural disasters, temperature, or the amount of movement around it…what if a specific sound were emitted if a creature were within a certain range of the sculpture? The sculpture would then be notifying you of something that maybe you can’t detect with your eyes, unlike light. It would then serve as a guardian, informing you of how large the animal is that’s approaching, and perhaps let you know whether it is a threat.

aranders-lookingoutwards-04

Sonic Pendulum is a soundscape created by Yuri Suzuki Design Studio and QOSMO in 2017. The artificial intelligence part of Sound Pendulum utilizes the atmosphere around it to create sounds of harmony. These sounds are created using speakers and pendulums. The pendulums allow the doppler effect to help dictate the music. Every sound it creates is a response to what is around it, so the harmonies never repeat and continuously alter. I admire this project because of its interactive element and its mellifluous element. The environment can easily soothe a stressed person (I wish I could benefit from its atmosphere at this moment). A deep learning algorithm was used in this project that was trained with compositions and could be changed given the people and noises around it. The project embodies the artist’s ideas of order coming from chaos.

link

NatalieKS-LookingOutwards-04

Created by Amanda Ghassaei, the Sugarcube is a portable MIDI controller with the capability to connect with up to 16 apps. It implements both buttons and “shake and tilt” features, allowing the user to manipulate sounds by tilting the Sugarcube one way or another. The creator used code from Arduino so that the device does all of its app processing internally, rather than with another computer. The device is also able to store sounds to correspond with different buttons. The creator, who is a grad student working at MIT Media Labs, used their knowledge of interactivity and media to create a device that is both user-friendly and fun.

I admire the simple and clear aesthetic of the Sugarcube, because it is easy to use without sacrificing beauty. The back-lit buttons create a really beautiful visual while also producing sounds and patterns, so you can visually see the music you’re making. It looks so simple, yet all of the code that went into it is fairly complicated and long.

creyes1-LookingOutwards-04


A promotional video for On Your Wavelength & Merge Festival 2015

Created by Marcus Lyall, Robert Thomas, and Alex Anpilogov, On Your Wavelength is an interactive installation that generates music and a laser-show as it analyzes the user’s brainwaves in real-time.

In the installation, the user is equipped with EEG brain scanner headseat, which is then analyzed turned into media using Processing and Pure Data for audio generation. The analysis creates a profile of the user and focuses on three possible emotions – joy, detachment, and tension – along with several possible instruments and pitches in order to generate musical compositions specific to the current user. While the generation was up to the program’s analysis, the color choices and compositions, as well as the distinctive emotions that they chose to go by show the distinct mark of the artists who worked on it.


Behind the scenes of On Your Wavelength

Large-scale, immersive experiences like this one have always been fascinating to me, and in this case it’s not just technology taking artistic control, but rather a symbiotic relationship between user and program that’s not only awe-inspiring to look at, but especially to be in the user’s place and see how the program reacts.

On Your Wavelength was first shown during Merge Festival 2015 in London and later in a modified format in Winter Lights 2017 in London.

Additional performances, such as this one, can be viewed on Youtube.


“Lime,” an On Your Wavelength performance

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 bezier curves, which appear to have disappeared from my design upon upload, nor was it 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. 

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!