Author: m13nica

Monica Chang- Project-07-Curves

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project-07-Curves

var nPoints = 100;
var radiusX;
var radiusY;
var separation = 125;

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

function draw() {
    background("darkcyan");
    fill(255, 255, 255, 64);
    
    radiusX = mouseX;
    radiusY = mouseY;

    drawCircles();
    drawEpitrochoidCurve();
    drawDeltoid();
}

//circle elements

function drawCircles() {
  
  // a sequence of little, circle elements
    push();
    translate(width / 2, height / 2);
    for (var i = 0; i < nPoints + 10; i++) {
        var theta = map(i, 0, nPoints, 0, TWO_PI);
        var px = radiusX / 2 * cos(theta);
        var py = radiusY / 2 * sin(theta);
      
        stroke("lightcyan");
        strokeWeight(1);
        circle(px - 5, py - 5, 8, 8);
    }
    pop();
  
}


function drawDeltoid() {
    //Deltoid:
    //http://mathworld.wolfram.com/Deltoid.html
    beginShape();
    nPoints = 40;
    for (var i = 0; i < nPoints; i++) {   
    	var angle = map(i, 0, 180, 0, 360);
        var radius = 70;
        var a = map(mouseX, 0, height, 5, 80)
        var b = map(mouseY, 0, height, 5, 90)
        
        //x-coordinate for deltoid
        var x = (a - b) * cos(angle) + radius * cos((a - b * angle));
        //y-coordinate for deltoid
        var y = (a - b) * sin(angle) - radius * sin((a - b * angle));
        rotate(radians(angle));
        noFill();
        strokeWeight(3);
        stroke("red");
        vertex(x, y);
      }
    endShape();
    

}

function drawEpitrochoidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    
    var x2;
    var y2;
    
    var a = 80.0;
    var b = a / 2.0;
    var h = constrain(mouseY / 8.0, 0, b);
    var ph = mouseX / 30.0;
    
    noFill();
    stroke("tan");
    strokeWeight(1);
    beginShape();
    translate(width / 2, height / 2);
    for (var i = 0; i < nPoints + 10; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x2 = (a + b) * cos(t) - h * cos(ph + t * (a + b) / b);
        y2 = (a + b) * sin(t) - h * sin(ph + t * (a + b) / b);
      
        //switching x and y-coordinates to create a band of waves/
        vertex(x2, y2);
        vertex(y2, x2);
    }
    endShape(CLOSE);
    
}

Bottom Left
Bottom Right
Top Left
Top Right

This project definitely had me studying the formulas 75% of the time for me to really start putting anything together. However, once I got the gist of the formulas, it was really entertaining for me. I began with studying the deltoid curve and I realized this particular curve created so many different shapes. Thus, I wanted to provide a more constant curve which became the sequence of circles which are relatively more static to create a sense of balance.

Monica Chang – Looking Outwards – 07

LAUNCH IT by Shane Mielke

The beginning screen and visual options
Movement of the globe: Book locations

http://launchit.shanemielke.com/ (the website)

https://shop.shanemielke.com/ (the shop)

Shane Mielke is an award-winning creative director and designer who wrote this book called, LAUNCH IT- 300+ things I learned as a Designer, Developer and Creative Director. Along with publication, he created this website which illustrates all of the book locations that Mielke is aware of from sales data that was gathered from Amazon as well as his online shop(link provided above). Currently the website visualization shows book locations in 54 countries and 38 states in the USA.

Within this website, he provided different visual options for the viewers to interact with by incorporating different designs. For colors, he incorporated three different color options: base( dark blue and red), invert(red as the main color while a fluorescent blue indicates the location), and random(which utilizes different colors every time the user clicks the ‘random’ button). For visuals, he provided three options: bloom(constant lines), rocket(moving lines), and snake(moving lines with receding lines).

This website makes me feel like I traveled time into the future. There are very intricate details like the tiny, dust-like specs floating around the screen hidden within this beginning screen that just has me captivated with the whole concept although it is so simple: book locations. The idea could have easily ended up as a globe with marks on it, but Mielke was very clever with the idea of allowing the viewers to interact with the globe and even have a little fun with it by altering the visuals.

Monica Chang – Project 06 – Abstract Clock

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 06 - Abstract Clock

var prevSec;
var millisRolloverTime;

var rVal = 50;
var bVal = 50;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
    frameRate(5);
    r = random(255);
    g = random(255);
    b = random(255);
}

//--------------------------


function draw() {
    background(0);
  
    //millis is represented in drawGrid
    drawGrid();
    
    // Fetch the current time
    var H = hour(); 
    var M = minute();
    var S = second();
    var a = H*3600 + M*60 + S;
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        frameRate(25);
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    fill(128,100,100);
    stroke(128,100,100);
    text("Hour: "   + H, 10, 22);
    text("Minute: " + M, 10, 42);
    text("Second: " + S, 10, 62);
    text("Millis: " + mils, 10, 82);
    
    var hourCircSize = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    
    var blueChange = map(S, 0, 60, 0, 255); //blue changing color
    var radiusChange = map(S, 0, 60, 0, 400); //increasing circle size
  
  // hours
    fill(3);
    noStroke();
    ellipse(width / 2, height / 2, hourCircSize / 2);
    

  //minutes
  
    rectMode(CORNER);
    noStroke();
    fill(20);
    rect(50, height / 2, 380, 20);//darker background
    noStroke();
    fill(r, g, b);
    rect(50, height / 2, minuteBarWidth, 20); //minutes passed
    strokeWeight(1);
  
  
  //seconds: empty, blue circles getting bigger and bigger.
    noFill();
    stroke(66, blueChange, 244);
    ellipse(width / 2, height / 2, radiusChange);
    a = a + 1;
    
 
  
  //analog clock
    fill(128,100,100);
    noStroke();
    textAlign(LEFT);
    text(H % 12, width / 2 - 20, 460);

    textAlign(CENTER);
    text(M, width / 2 , 460);
  
    textAlign(LEFT);
    text(S, width / 2 + 7, 460);
    
}

//millis
function drawGrid() {
  // noprotect
    for (var y = 0; y < 490; y += 10) {
        for (var x = 0; x < 650; x += 10) {
            frameRate(millis());
            rVal = (rVal - 1) % 200;
            bVal = (bVal + 3) % 200;
            //color gradient
            fill(rVal, 0, bVal);
            noStroke();
            ellipse(x, y, 10, 10);
            
        }
  }
}

It was really interesting how much I had to think about the readability of this concept. To make something that we look at daily, making it abstract can arguably take more time for it to function regularly like it does now for it. With this idea, I concentrated on abstracting the form of the clock while also allowing it to still require not that much cognitive processing to understand.

my sketch

Monica Chang – Looking Outwards – 06

There’s always a fear that the use of random data can imply that the creator has no sense of intentionality or ability to make a decision. However, designers have been able to develop a way that randomness becomes more of a generative tool that helps overcome the limits of the artists’ imaginations than an arbitrary statement.

Aaron Tobey, the creator of the project below, agrees with this idea as he specifically states that integrating randomness in design does not “eliminate” the artist, but rather “displaces” the artist in the process of the creation. With this project, Tobey was required to create a pseudo random number generator using the “register and tap” method to also create a design. He was also required to consider the idea of “working” as a set of logical operations rather than watching what the generator comes up with. Furthermore, he creates a frame-by-frame animation with this collection of randomized, data-driven imagery.

Coding Architecture Project: Randomness by Aaron Tobey
A closer look into a single frame of Tobey’s Randomness project.

The amount of thought and registration that was required for this project is what intrigued and satisfied me the most. Integrating randomness within art or a design was something that was always tricky in the notion of producing an elaborate creation. Many believe that when a creator utilizes randomness in their artwork, they either lack in depth or purpose and is nothing but made of surface. However, with this project, it helps build a visual piece of evidence that even randomness can open the creator’s option of forming a design that can be composed within the artist’s visual field.

Monica Chang – Project 05 – Wallpaper

sketch

//Monica Chang
//Section D
//mjchang@andrew.cmu.edu
//Project-5-Wallpaper

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

function draw() {
  background(191, 145, 45);
  drawGrid();

  
}

function drawGrid() {
  // noprotect
  
  //base of design
  for (var y = 0; y < 450; y += 10) {
        for (var x = 0; x < 650; x += 10) { //repeating ellipses          
            fill(0, 255, 38);
            noStroke();
            ellipse(x, y, 6, 10);
        }
// repetitive quads overlapping the ellipses    

  var xr = 20;
  for (var b = -50; b < height + 50; b += 20) { //quad rows
      for (var a = -50; a < width + 50; a += 20) { // quad columns
          noStroke();
          fill(0, 255, 38);
          quad(a, b, b + xr, b - sqrt(3) * xr / 4,  a + 2 * xr, b, a + xr,  b - sqrt(3) * xr / 4); // manipulating the quads so that they for mini-waves.
        }
    }
  }
}

For this project, I was inspired by the idea of green mesh details covering a nude fitting(design for fashion.)

It’s nice to know that loops can do so much work for us. I had a lot of trouble getting the quads to create a subtle wave but I managed to calculate the values that would help create that small detail.

Monica Chang – Looking Outwards – 05

Instagram: universaleverything.

Website: Universal Everything

Universal Everything is a digital art and design collection based in Sheffield, England founded by creative director Matt Pyke. Most of their projects incorporate combine technology and humanities in hopes to also utilize the viewers’ sensations and participation. They gather a group of video artists, experience designers and future thinkers to bring a variety of artwork that allows the observers to witness immersive installations, exotic architecture and huge launch events.

Future You by Universal Everything
Inside The Sound: Voices, VR Installation, Universal Everything

I chose to talk about these two pieces created by UniversalEverything because they both pertained to the idea of immersive installations which is something that I have always been interested in trying. Not only are the visuals absolutely spectacular but the calculations and the concept put into the work is astounding.

The first piece is called “Future You” and its this video installation that computes the viewer’s movements into something so beautifully mapped and structured. The fluidity of this digital movement was what drew me towards this project as I know that for smooth movement in a digital piece like this requires an insane amount of calculations and observation to conclude with a smooth representation.

The second piece called “Inside the Sound” was a piece where the designers explored the idea of the audiovisual “synaesthetic experience”. This child-like experience becomes elevated when the designers utilized this visual to create a virtual reality; this offers so many inspiration to artists working towards a digital field of vision and audio in their future. The colors and the design were exquisitely drawn and I will absolutely have this piece in mind as I think of digital and computational works.

I admire the integration of interaction and aesthetics and both projects really displayed both ideas seamlessly.

Monica Chang – Project 04 – String Art

sketch

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

function draw() {
  // changing background color based on mouse position
  background( mouseX, mouseY, 245);
    
  // creates pattern on top right
  
  for (var i = 0; i < 300; i++) {
      strokeWeight(0.5); // for thin lines
    
      var x1 = width - i * 5; // x1 for curve 1
      var x4 = width + 50; // x1 for curve 4
    
      var y1 = height - i * 5; // y1 for curve 1
      var y2 = height + i * 50; // y1 for curve 2
      var y3 = height - i * 6; // y2 for curve 3
      var y2y4 = height - i * 15; // y2 for curve 4
      var y1y4 = height - i; // y1 for curve 4

      //curve #1
      stroke("red");
      line(x1, mouseY, mouseX, y1); 
    
      //curve #2
      stroke("blue");
      line(0, y2, x1, mouseY); 
      
      //curve #3
      stroke(255);
      line( x1, mouseY, 0, y3);
      
      // curve #4
      stroke("yellow");
      line(x4, height - i, mouseX, y2y4); 
    }
      

  
  
}

This project allowed me to better understand the way loops can be used. I may have struggled but I am becoming more comfortable with the concept of loops and what I can do with them. I had lots of fun integrating color and design as I grew more familiar with the concept of for loops and “i”.

Monica Chang – Looking Outwards – 04

Meandering River by onformative and Funkhaus Berlin Sound Chamber

meandering river

Meandering River is an audiovisual art installation created by onformative and FunkHaus Berlin Sound Chamber. This collaboration decided to use algorithms to work rhythmically along with music to create this real-time generated visuals which imitate the natural fluctuation of river landscapes.

Meandering River in FunkHaus Berlin Sound Chamber
Visual representation/work of algorithm.
Meandering River : Full look into the installation

This audiovisual landscape spans across multiple screens utilizing the birds-eye view of the landscapes which shows the shape-shifting of surface more clearly. Using musical composition created by the Google Magenta Performance RNN learning model, the team was able to come up with a collection of computational strategies that would eventually translate these musical phrases into visual structures of the animation.

What really gravitated me towards this project was the idea of music/sound values conducting the way that a generated landscape forms and moves. Scientifically, we know bodies of water( in this case, rivers) normally erode the land to form these beautiful forms of land across the Earth. To see an alternative way( despite it being completely imaginary and digital ) to create land was very fascinating to me.

Some of the smaller things I also admired were the choice of colors and the use of various textures for each landscape. With this, the artists were able to create a sense of time over multiple imaginary landscapes as if we were to travel/explore through each region of this digitally-rendered planet.

Monica Chang – Looking Outwards- 03

Neri Oxman and MIT develop a collection of programmable bio-composites for Digital Fabrication called Aguahoja. They developed Aguahoja in response to the cumbersome, plastic consumption occurring globally which has been intoxicating our planet. With this, they hope to create a solution that corrupts this toxic cycle of plastic by uniting the “made” and nature to produce an organic environment that can be constructed and deconstructed without harming the earth’s soil.

This collection is digitally designed and robotically manufactured out of the most available materials on earth- materials within trees, insect exoskeletons , apples, and bones- in hopes of avoiding depleting more of Earth’s materials.

“…this work points toward a future where the grown and the made unite.”

Although the structures are all built from the same components, the structural makeup and its purpose in an environment vary.

I admire this piece because of its insightfulness towards the world and its current condition. The amount of research and intricate pieces created for this project intrigues me. It’s nice to know that there definitely is a way that we can avoid polluting our planet even further without changing anything about halting our momentum for modernizing the world.

Monica Chang – Project 03 – Dynamic Drawing

Suggestion: move cursor in circular motions around the canvas.

sketch

//Monica Chang
//Section D
//mjchang@andrew.cmu.edu
//Project-03

var angle = 0;
var x = 0;

function setup() {
  createCanvas(640, 480);
  noStroke();
  rectMode(CENTER);

  
}
function draw() {


  
// changing color of background as mouse moves around canvas.
  background(mouseX, mouseY, 245); 
  
//mouseX controls x location
  fill(255, 150);
  ellipse(mouseX, mouseY, mouseY, mouseY);
// mouseY controls y location AND size
  fill(0, 159);
  ellipse(width - mouseX, mouseY, height - mouseY, height - mouseY);

//spiraling circle meant to indicate how to move your mouse around and play with it.
  print(x);
  push();
  translate(width/2,height/2);
  rotate(radians(angle));
  fill("red");
  ellipse (x ,0,50,50);
  pop();
  angle = angle +5;
  x = x + 0.5;
  //sending spiral circle return to center and then draw again>

  if (x == 300){
    x = 0;
  }


}

I wanted to explore the use of depth perception within this piece by playing with the size and position. I also integrated what we learned in recitation where we created a spiral; however, I wanted to take it to another level by drawing it continuously while it redraws in a different position. Once it hits the edge of the canvas I wanted the spiral movement to continue again from the center. I struggled to get it to move smoothly but I am still happy with the results.