Author: wsu1@andrew.cmu.edu

William Su – Looking Outwards – 06 – Section E

A sample from Random Art Generator. The program accepts the name of a picture and uses it as a seed from which a picture is generated randomly. The same name always yields the same picture.
http://www.random-art.org/about/

The Random Art Generator is a free to download python program which is why I was initially interested in this project as i’ve frequently used python for a lot of my work in the past. According to the site, the picture name is the seed and is used for a “random number generator” (nothing is truly random) which constructs a mathematical formula. The formula determines the color of each pixel in the picture. The same name always determines the same sequence of random choices, and consequently the same formula and the same picture.

I appreciate the thought of using a random number generator to create completely new and cool pieces of art. Although random number generators aren’t actually “random”, it just shows the endlessness of possibilities you can make with just a bunch of pixels and changing their colors.

William Su – Project 06 – Abstract Clock

I used circles for time indicators. The circles “tick” larger as time passes and slowly fill the max size they could be. The background color also changes according to the time of day (morning, afternoon, evening).

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 06

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

//--------------------------
function draw() {
    background(255, 200, 200);
    noStroke();
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Compute the widths of the rectangles
    var mappedH = map(H, 0,23, 0,width - 50);
    var mappedM = map(M, 0,59, 0,width - 50);
    var mappedS = map(S, 0,59, 0,width - 50);

    if (H >= 6 & H <= 14) { //Change color of the background depending on time of day. (Morning, Afternoon, Evening)
      background('#87CEEB'); //morning sky blue
    } else if (H > 14 & H <= 17) {
      background('#fd5e53'); //afternoon sunset orange
    } else {
      background('black') //evening black
    }
    
    // Display the minutes and hours.
    fill('#2e2e2e');
    ellipse(width/2, height/2, mappedH, mappedH);
    fill('#ED2B33');
    ellipse(width/2, height/2, mappedM, mappedM);
    
    noFill(); //Second "hand"
    stroke(255);
    ellipse(width/2, height/2, mappedS, mappedS);
}

William Su – Looking Outwards – 05

Justin Maller – Australian Digital Artist based in LA.

Justin Maller’s body of work is something i’ve always admired since high school. He is most well known for creating intricate digital 3d pieces of art that just look stunning and sophisticated in any setting like a wallpaper or profile picture. In short, his stuff just looks cool as hell. One of his projects, “Facets”, was a yearlong body of work where he makes one of these pieces of art everyday. I’m not exactly sure how he’s able to make such intricate pieces of art but I know he goes back in and touches them up in photoshop or other photo editing tools to give it a bit more flare. His work is very diverse but also very uniform as well. Some of his pieces are for products, athletes, or companies like Microsoft, LG, Steph Curry, and Nike. Others might have a nature theme or a twisted but awesome view of reality.

William Su – Project 05 – Wallpaper

I made a grid of circles with randomly sized and colored circles sprinkled in.

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 05

function setup() { 
  createCanvas(400, 400);
  noLoop();
  count = 1;
} 

function draw() { 
  background(0);

    
  for (var M = 0; M <= width; M += 20){
    for (var N = 0; N <= height; N += 20) {

      if (count == 8) { 
        r = random(3, 12);
        fill(random(0, 255), random(0, 255), random(0, 255)); // Random color
        stroke(150);
        line(M - 10, N - 10, M + 10, N + 10);
        ellipse(M,N,r,r); // Random size
        count = 1;// Count resets after every 6 dots.

      } else { // Draw regular dots and lines
        fill(100);
        stroke(20);
        line(M + 10, N + 10, M - 10, N - 10);
        ellipse(M,N,8,8); 
        count += 1;
      }

    }
  }
}

William Su – LookingOutwards – 04

Musical Fire Table: https://www.youtube.com/watch?v=2awbKQ2DLRE

Description from the video: The pressure variations due to the sound waves affect the flow rate of flammable gas from the holes in the Pyro Board and therefore affect the height and colour of flames. This is interesting for visualizing standing wave patterns and simply awesome to watch when put to music.

While the people that made this didn’t really intend or utilize this as “art”, It is a performance that is really interesting to look at despite how simple it is to get the fire table to work. While i’m not sure if there is any computational stuff behind it (most of it involves simply physics and running standing waves through the gas pipes), I can see this being scaled up, like in a stadium or stage performance with the pyrotechnic stuff that is commonly found there.

William Su – Project 04 – String Art

I just made a rainbowy web of strings that changes colors depending on mouseX and mouseY. Credit to the person that utilized rotate and translate to move stuff around, it made things a lot simpler to think about.

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 04

function setup () {
  createCanvas(400, 300);
  background(0);
  strokeWeight(0.5);
}

function draw () {
  for (var x = 0; x <= 50; x += 2) {
    var1 = x 
    var2 = x * 10
    b = constrain(var2, 0, (3 * width) / 5);

    //bottomleft
    stroke(mouseX, 0, 50);
    line(0, var2 + height / 2, var2, height);

    //topleft
    push();
    translate(300, 0);
    rotate(radians(90));
    stroke(mouseY, 0, mouseX);
    line(0, var2 + height / 2, var2, height);
    pop();

    //topright
    push();
    translate(400, 300);
    rotate(radians(180));
    stroke(mouseY, mouseX, 50);
    line(0, var2 + height / 2, var2, height);
    pop();

    //bottom right
    push();
    translate(100,300);
    rotate(radians(270));
    stroke(mouseX, mouseY, 50);
    line(0, var2 + height / 2, var2, height);
    pop();

    //2ndCurveTopRight
    stroke(50,mouseX, mouseY);
    line(width * 1.2, var2, var2 /2, 0);

    //2ndCurveBottomLeft
    push();
    translate(400, 300);
    rotate(radians(180));
    stroke(50,mouseY, mouseX);
    line(width * 1.2, var2, var2 /2, 0);
    pop();
  };
}

William Su – Looking Outwards – 03

Parametric World

This was made by vibrating a pool of water at a certain frequency. This creates a pattern of standing waves known as Faraday Waves. Higher frequencies create more complicated patterns. (Image and video credit: L. Gledhill)

I was especially intrigued by the complexity and how “lifelike” this generated pattern is. It almost looks like a microscopic cell, sea creature, or a CAT scan of body part. It is also interesting how completely different patterns are generated, even if the frequencies are off by a few Hertz. This I feel like adds to the “organic” nature of the project as there is just infinite possibilities and repeatabilities with this.

William Su – Project 03 – Dynamic Drawing

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-03

x = 100;
y = 100;
angle1 = 0;
segLength = 30;

function setup() {
  createCanvas(640, 480);
  strokeWeight(10);
  stroke(0);
}

function draw() {
  r = 640 - mouseX; // Used for color and shape length
  g = 480 - mouseY; // color
  b = (mouseX + mouseY)/4; // messing with more color

  background(0);

  //Calculating angles for rotation based on mouseX and mouseY
  dx = mouseX - x;
  dy = mouseY - y;
  angle1 = atan2(dy, dx);
  x = mouseX - cos(angle1) * segLength;
  y = mouseY - sin(angle1) * segLength;

  //Line Color and Line Weight
  stroke(r + 100, g + 100, b + 100); // Changes color based on mouse movement.
  strokeWeight(10 + (mouseX / 100)); // Gets thicker as you move mouse right.

// segLength and r changes length of line and also center of rotation.

// Top left
  push();
  translate(width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom right
  push();
  translate(3 * width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Top Right
  push();
  translate(3 * width/4, height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();

// Bottom Left
  push();
  translate(width/4, 3 * height/4);
  rotate(angle1);
  line(-segLength - r/4, r/100, segLength + r/4, r/100);
  pop();
}

In this project, I tried making a isometric, rotating prism. I wasn’t able to work out the faces but I think the gist of it is shown with the 4 segments shown. The segments change size (thickness and length), color, and orientation depending on where your mouse is in the window.

William Su-LookingOutwards-02

https://vimeo.com/320461873

Fluctus by LIA

LIA is an Australian artist whose primary working material is code.

The piece, “Fluctus” especially appeals to my aesthetic sense. I like the fluidity and vision behind it. The funny part about it for me is, is that it reminds me of the painful times where i’ve had to deal with computers crashing or some of my own coding projects not working as it should.

While it evokes some negative memories, it is absolutely cool to look at.

As far as how it works, it looks like the “artboard” is probably not redrawing at all like you would for a smooth, singular animation. Instead, the algorithm just leaves behind what it draws as it goes and keeps drawing on top. This creates a smooth, repeated pattern that gives it a 3d “noodle” look. There also seems to be some “mirroring” going on where the drawer starts splitting in certain areas. It certainly adds to the complex but simple nature of the artwork.

Another interesting thing as I was watching this is that the way the drawer moves makes it look like it was a “performance”. The movement looks like its choreographed in a way that makes it look purposefully artistic rather than the random generation of computer.

William Su – Project 02 – Variable Face

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project-02
//data-width="640" data-height="480"

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var diam = 170;
var smileDiam = 0.2;
var endAng = 0.5;
var startAng = 0.1;
var fillnum = 100;
var weightnum = 1;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
	stroke(0);
    strokeWeight(weightnum);
    background(180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    arc(width / 2, height / 2, smileDiam * diam, smileDiam * diam, startAng * PI, endAng * PI);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    startAng = random(0.05, 0.3);
    endAng = random(0.4, 0.8);
    smileDiam = random(0.2, .4);
    fillnum1 = random (50, 200);
    fillnum2 = random (100, 250);
    fillnum3 = random (10, 150);
    fill(fillnum1, fillnum2, fillnum3);
    weightnum = random(1,5);
}

In this project, I utilized the template given and added 3 extra areas of variability. The first one is different smiles, the second is the color of the face, the third is the stroke width.