Author: sha2@andrew.cmu.edu

Shannon Ha – Project 07 – Curves

sketch

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 07 Curves
var nPoints = 200
var angle = 0

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

function draw() {
	background(0);
	push();
	translate(width/2, height/2); // moves around center point
    if(mouseX > width/2){

        rotate(radians(angle)); //rotating curves and stop motion effect
        angle += 2 * mouseY/250;
    }
    drawCoch();
	pop();
}


function drawCoch(){
    //color change in stroke
    colorR = map(mouseX, 0, width, 0, 255);
    colorB = map(mouseY, 0, height, 0, 200);

    //stroke & fill
    strokeWeight(2);
    stroke(colorR, 100, colorB);
    noFill();

    //variable that change the size, shape, num of edges in curve
    a = map(mouseX, 0, 200, 0, width);

    beginShape();
    for (var i = 0; i < 200; i ++) {

        // set angle/t to loop in relation to mouse and positions curve
        var t = map(i, 0, 20, mouseY/20, mouseX/50);

        //paratmetric equation for cardioid
        x = (a * sin(t)*cos(t))/t ;
        y = a * sq(sin(t))/t;
        vertex(x,y);
    }
    endShape();
}

For this project, I spent a lot of time trying to find the right curve to use, and when I came across the Cochleoïd curve, I figured it would be interesting to create some sort of spiral hypnotic effect by mapping the variables and angles to the position of the mouse. As I experimented with this, I realized that I can play around with the mapping values to change the smoothness of the curve. I display this by changing smoothness of the curve according to mouseY. Overall it was a bit of a struggle trying to figure out how to change the variables in order for it to move while adding/detracting to the curve , but it was also an interesting and fun learning experience!

As you can see in these screenshots, the number of edges changes depending on mouse position!!!

Shannon Ha – Looking Outwards 07

Photo taken from jevbratt.com

‘Migration’ by Lisa Jevbratt is a data visualization image of the Internet. Each pixel represents 256 IP addresses and the different positions, size, color of the pixel blobs represents the amount of websites. This database of Websites was created by searching for Websites in the same IP addresses three times throughout 1999, 2001, 2004. The patterns in these images reveal  both the search process and information about the Internet and the Web. What I admire most about this piece of work is how it shows change over time in our ‘technology carbon footprint’ through the way the visual representations intensify which goes to show how dependent we have become on The Web. It is also very interesting how we can click into the blobs which would link and redirect you to the Website IP address, this way, the data visualized isn’t only presented on a surface level, but also lets us interact with it.

Shannon Ha- Project 06 – Abstract Clock


sketch

For this project, I wanted to explore how to use a variety of shapes to express time so I used a combination of lines, circles and squares in a rotating motion simulate the effect of a clock.

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 06

function setup() {
    createCanvas(400, 400);
    angleMode (DEGREES); //converts radians to degrees
}

function draw() {
    var H = hour();
    var M = minute();
    var S = second();

      background(H * 5,M,S); // background color changes according to time

      //small circle for hours
      for (var h = 0; h < H; h++){
        var r=150;
        var g=200;
        var b=50;

          push();
          translate (width/2, height/3 - 30);
          rotate((15*h)-0.25*360) //24 squares to count hours
          noStroke();
          fill(r-H, g-M, b-S); //color alternates as time changes
          rect(35,0,20,20);
          pop();
      }

      //bigger circle for minutes
        for(var m = 0; m < M; m++){
          var r=250;
          var g=130;
          var b=10;
            push();
            translate (width/2, height/2 + 50);
            rotate((6*m)+ 0.25 *360); //60 circles to count min
            noStroke();
            fill(r+H, g+M, b+S); //color alternates as time changes
            ellipse(72, 0, 15, 15);
            pop();
          }


      //line seconds
        for(var s = 0; s < S; s++) {
        var r=160;
        var g=105;
        var b=60; //sets b value
        push();
        translate (width/2, height/2 + 50);
        rotate((6*s)- 0.50 * 360); //60 rotating lines
        stroke(H, M, S*2); //color alternates as time changes
        strokeWeight(2);
        line(100,100,10,10);
        pop();
    }


}

Shannon Ha – Looking Outwards – 06

Entanglement I by Markos Kay
Photo taken from mrkism.com
Superposition I by Markos Kay
Photo taken from mrkism.com

Quantum Superpositions is a moving image installation create from particle simulations inspired by the physics that goes on inside the Large Hadron Collider. These simulations are superimposed to create random yet intricate digital paintings that allude to quantum properties such as wave-particle duality, superposition, entanglement etc. The image is projected onto the floor to allow viewers to experience the unstable nature of life as random microscopic patterns are blown up in proportional contrast to their own bodies.

I really appreciate how Markos Kay bases the subject of his art on such intangible matters and uses it to elicit sensorial awareness from the viewer. I also admire how he beautifully merges the physics and art to create an unfamiliar yet intriguing image as you don’t quite know what it is actually suppose to be at first glance. The randomness of the patterns reflects what we don’t see in reality, leaving viewers to reflect on our state of being as humans.

Projected art onto floor.
Photo taken from mrkism.com

Shannon Ha – Project 05 – Wallpaper

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 05

function setup() {
    createCanvas(600, 400);
    background(237, 197, 17);
}
function draw() {
  var ox = 15; // x origin
  var oy = 40; // y origin
  var sizeAX = 30 //width of green ellipse
  var sizeAY = 20 //height of green ellipse


  for (var y = 0; y < height; y++) {
    for (var x = 0; x < 12; x++) {
//green ellipse
      noStroke();
      fill(191, 227, 205);
      ellipse(ox * x * 10, oy * y - 20, sizeAX + 10, sizeAY);
//purple ellipse
      noStroke();
      fill(166, 120, 222);
      ellipse((ox - 10)* x * 20, oy * y - 20, sizeAX-15, sizeAX-10);
//blue ellipse
      noStroke();
      fill(16, 9, 92);
      ellipse((ox - 10) * x * 10, oy * y - 20, sizeAX-20, sizeAX-20);
//overlapping red circles
      noFill();
      strokeWeight(2);
      stroke(237, 57, 17);
      ellipse(ox * x * 10, oy * y + 20, sizeAX + 100, sizeAX + 100);

    }
        }

      }

For this project, I looked at how patterns and shapes could alternate through tiles and so I make a series of ellipses that were abstract by itself, but combined together in the middle column to form an eye pattern.

Shannon Ha – Looking Outwards – 05

Image taken from dombis.com

In this series of works, Pascal Dombis uses arbitrary geometrical or typographical patterns create complex and “less reasonable” environments. He would project abstract signs and patterns on to walls or canvases and computationally reproduce the same uncomplicated warped pattern in excess. And throughout the generation of patterns, there are instances where a geometric shape such as a square would emerge from this randomness. 

I think a lot of abstract art these days does not effectively communicate the artist’s intentions, but what I appreciate about Dombis is the fact that he is able to use basic data to generate random elements, yet more importantly, he is still able to create a sense of balance between chaos, structure and order through the growth of a geometric shape amidst these abstract patterns. 

Shannon Ha – Project 04 – String Art

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 04 String Art

function setup() {
    createCanvas(400, 300);
  }

function draw(){
  background(175,0,0);
  stroke('black')
  for (var i = 0; i < width; i+=20) {
    stroke(mouseX, mouseY, 210); //upper left corner arc
    line(mouseX-i,0,0,i+20);
    stroke(28,50,158);
    line(mouseX+i,0,0,i-20);
    stroke(255, 227, mouseX-10);//lower right corner arc
    line(mouseX-i,300,400,i-20);

}
  for (var i = 0; i < 500; i+=30) {
    push();
    translate(width/2, height/2);
    rotate(180);
    stroke(93,28,158);
    line(5,5, mouseX/2, i+1); //purple lines in the back
    rotate(90);
    line(5,5, mouseX/2, i+1);

    pop();
  }


    ellipseMode(CENTER); //the moving pupil of the eye
    noFill();
    ellipse(mouseX-200, height/2 ,100,100);
    strokeWeight(2);


  }

For this project I explored how the lines met to form arcs and curves through iteration and ultimately decided it would be fun to make the string art so that it looks like an eye!

Shannon Ha – Looking Outwards – 04

test pattern [N 12] at store studios.

Ikeda works with music in a variety of “raw” states, such as sine tones and noise, and explores a range of frequencies that are often close to the limit of what humans can hear. I appreciate how he is able to push the sensorial boundaries of humans through his art by using sound patterns to heighten the audiences’s awareness of what they can and cannot hear.  

The sounds that he produces may come across as random, but he actually combines a variety of discrete tones and noises, in addition to beat patterns to create a drumming effect. He matches the frequency of the sound to the visual installation of strobe lights on the floor of Store Studios to create an overwhelming environment.

Shannon Ha-Looking Outwards-03

Photo taken from MIT Media Lab Website
All Copyrights by The Media Matter Group

Aguahoja is a project that explored how natural materials that have been put to waste by humans can be digitally designed and computationally fabricated by 3D printers or other robots. A lot of focus is geared towards the creation of biopolymer composites that can be used in an industrial setting. The aim is to disrupt the vicious cycle of obsolescence and the production of synthetic waste. The shape and material of composition is informed by physical properties, environmental conditions and fabrication constraints. All these factors are calculated into the 3D printing in order to best mimic biological patterns.

Photo taken from MIT Media Lab Website
All Copyrights by The Media Matter Group

I think in the case of Aguahoja, there doesn’t seem to be a direct connection to the creator’s artistic sensibilities, but I think in a way the fact that their is a strong emphasis in a naturally formed shape, shows that they form is valued over function to some extent.

Shannon Ha – Project 03 – Dynamic Drawing

sketch

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project - 03: Interactive Drawing

var diam1 = 50; //diameter of
var diam1a = 70;//
var speedcircle = 1;//speed of circle
var dir = 1;// direction of pulsing circle
var angle = 0; // angle of rotation
var speedangle = 0.2
var lineAX = 200;
var lineAX2 = 100
var lineAY = 175;
var diam2 = 135;
var diam3 = 200

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

}

//top-right ellipse
function draw() {
  background(0);
  fill(220, mouseX/2, mouseY/2);
  ellipse(70, 70, diam1, diam1);
    diam1 += dir * speedcircle/2;
    if(diam1 > 150){
      dir = -dir;
      diam1 = 150;
    }
    else if(diam1 < 0){
      dir = -dir;
      diam1 = 0;
    }

//mouse ellipse
  fill(0);
  push();
  ellipse(mouseX, mouseY, mouseX+1, mouseX+1);
    fill(246,mouseX,mouseY);

  //middle ellipse
  ellipse(200,240,diam2,diam2);

  diam2 += dir * (speedcircle + 2);

  if(diam2 > 300){
    dir = -dir;
    diam2 = 300;
  }
  else if(diam2 < 0){
    dir = -dir;
    diam2 = 0;
  }

//left-most ellipse
  ellipse(470,190,mouseX/2,mouseY/2);
  noStroke();
  fill(200,0,mouseX/2);
  if (mouseX/2 <= diam3/2){
    mouseX = 30;
  }

  if (mouseY/2 <= diam3/2){
    mouseY = 30;
  }

//spinning lines
  stroke(0,250,mouseY);
  strokeWeight(5);
  push();

  translate(mouseX, mouseY);
  rotate(mouseX/2 || mouseY/2);
  line(lineAX,lineAY,lineAX2,lineAY);
  line(lineAX+40,lineAY+40,lineAX2+40,lineAY+40);
  line(lineAX-50,lineAY-50,lineAX2-50,lineAY-50);
  line(lineAX-20,lineAY-20,lineAX2-20,lineAY-20);

  pop();






}

For this weeks project, I wanted to create a dynamic drawing that resembled fireworks, however, I struggled a lot to make the lines move, so I decided to simplify it to just ellipses instead.