Author: Heysu Oh

Final Project

sketch
// WARNING: FOR SOME REASON THE PROGRAM IS VERY LAGGY ON CHROME. HOWEVER, WORKS VERY SMOOTHLY WITH SAFARI.

var trash=["https://i.imgur.com/4OExNH5.png", "https://i.imgur.com/mNxZdnx.png", "https://i.imgur.com/2utBIl1.png", "https://i.imgur.com/onA6aUl.png"];
var recyclebin=["https://i.imgur.com/p6HfTlh.png"];
var canfact=['https://i.imgur.com/PUJEJM4.png'];
var milkfact=['https://i.imgur.com/C5jKZj9.png'];
var waterfact =['https://i.imgur.com/VcUrBbs.png'];
var winefact =['https://i.imgur.com/pWmodnq.png'];
var background =['https://i.imgur.com/Mz0ml4E.png'];

var trash1;
var trash2; 
var trash3;
var trash4;
var speed= 7;

var place=[];
var ntrash=200;
var x=0;
var speed=7;

function preload() {
    trash1=loadImage(trash[0]); // wine
    trash2=loadImage(trash[1]); // water
    trash3=loadImage(trash[2]); // milk 
    trash4=loadImage(trash[3]); // can
    recyclebin = loadImage('https://i.imgur.com/p6HfTlh.png');
    background = loadImage('https://i.imgur.com/Mz0ml4E.png')

    winefact = loadImage('https://i.imgur.com/pWmodnq.png');
    waterfact = loadImage('https://i.imgur.com/VcUrBbs.png');
    milkfact = loadImage('https://i.imgur.com/C5jKZj9.png');
    canfact = loadImage('https://i.imgur.com/PUJEJM4.png');
}

function setup() {
    createCanvas(800, 500);
    var n = 0;
    for (var i = 0; i < 1000; i++){ //
        place[i] = makePlace(n);
        n -= 200;
    }
    frameRate(30);
}

function draw() {
    image(background,0,0);
    placeShow(); 
    image(recyclebin, mouseX, mouseY);

    if (mouseIsPressed & mouseX<400 && mouseY<250) {
        image(winefact, 0, 0);
    } 

    if (mouseIsPressed & mouseX>400 && mouseY<250) {
        image(waterfact,0,0);
    }

    if (mouseIsPressed & mouseX<400 && mouseY>240) {
        image(milkfact,0,0);
    }

    if (mouseIsPressed & mouseX>400 && mouseY>250) {
        image(canfact,0,0);
    }
}

function placeGo(){
    this.x+=this.dx;
}
function placeShow(){
    for(var i = 0; i < place.length; i++){
        place[i].go();
        place[i].show();
        // plate[i].mP();
    }
}

function makePlace(px){
    var place={x: px, y:1, w:1, h:1,
    dx: 7, go:placeGo, show:drawPlace,
    trash: random([trash1, trash2, trash3, trash4]),
    }
    return place;
}

function drawPlace(){
    push();
    fill(0);
    noStroke();
    ellipse(this.x, this.y, this.w, this.h);
    stroke(185);
    noFill();
    ellipse(this.x, this.y, 0.75*this.w, 0.75*this.h);
    if (this.trash==trash1){
            image(trash1, this.x-50, 0);
        }
    if (this.trash==trash2){
        image(trash2, this.x-50, 0);
         }
    if (this.trash==trash3){
        image(trash3, this.x-50, 0);
         }
    if (this.trash==trash4){
        image(trash4, this.x-50, 0);
         } 

function keyPressed() {
  clear();
    }
}

For my final project I decided to narrow in specifically of human consumption waste and recycling. The program is a conveyer belt of a recycling incinerator, the images are all hand drawn through illustrator and procreate. It is simple to run, when you click the screen different facts about the 4 different products will show up: cardboard, glass, plastic, and metal. I also included the mouse to be a recycling bin to add as context clues to what is happening. The art style I was inspired by is my color palette for my animations I do for design. If I had more time I would make buttons which correlate to the random recyclable material functions and have each fact correlate. I would also make a larger frame to show the recycling process and make it much larger than just one simple conveyer belt.
Please Note:
The program works very smoothly with safari but is very laggy on chrome. (I already checked in with a TA about this)

Project 11: Generative Landscape

sketch
var sushi=["https://i.imgur.com/77xfiZT.png", "https://i.imgur.com/LEndRAV.png", "https://i.imgur.com/d1fWjnJ.png", "https://i.imgur.com/UyTqQin.png"];

let belt;
var sushi1;
var sushi2; 
var sushi3;
var sushi4;
//var x = 80;
var speed= 7;

var plate=[];
var inChopstick=false;
var nSushi=200;
var x=0;
var speed=7;

function preload() {
    belt = loadImage("https://i.imgur.com/zBwKyLa.png")
    sushi1=loadImage(sushi[0]);
    sushi2=loadImage(sushi[1]);
    sushi3=loadImage(sushi[2]);
    sushi4=loadImage(sushi[3]);
}

function setup() {
    createCanvas(500, 400);
    var n = 0;
    for (var i = 0; i < 1000; i++){ //continually creates (1000) plates of sushi 
        plate[i] = makePlate(n);
        n -= 200;
    }
    frameRate(30);
}

function draw() {
    background(0);
    image(belt,0,0);
    plateShow();
}

function plateGo(){
    this.x+=this.dx;
}
function plateShow(){
    for(var i = 0; i < plate.length; i++){
        plate[i].go();
        plate[i].show();
        // plate[i].mP();
    }
}

function makePlate(px){
    var plate={x: px, y:180, w:150, h:100,
    dx: 7, go:plateGo, show:drawPlate,
    sushi: random([sushi1, sushi2, sushi3, sushi4]),
    }
    return plate;
}

function drawPlate(){
    push();
    fill(215);
    noStroke();
    ellipse(this.x, this.y, this.w, this.h);
    stroke(185);
    noFill();
    ellipse(this.x, this.y, 0.75*this.w, 0.75*this.h);
    if (this.sushi==sushi1){
            image(sushi1, this.x-50, 0);
        }
    if (this.sushi==sushi2){
        image(sushi2, this.x-50, 0);
         }
    if (this.sushi==sushi3){
        image(sushi3, this.x-50, 0);
         }
    if (this.sushi==sushi4){
        image(sushi4, this.x-50, 0);
         } 
     

}

Looking Outwards 11: Societal Impacts of Digital Art

https://www.arts.gov/impact/media-arts/arts-technology-scan/essays/how-artists-can-bridge-digital-divide-and-reimagine-humanity

This week’s looking out is very interesting. Reading about how NFT have a positive impact onto bridging digital divides was a new way to see them. Originally, I thought NFTs had a rather negative impact: influencing careless spending and money onto temporary “tangible” things. The article I read about speaks about how artists bridge the digital divide and reimagined humanity. New digital artists can solve digital divide: the gap between those who benefit from the digital age and those who do not. These artists would appeal to digital capacity-building:harnessing wonder, digital public goods: creating shareable resources, digital inclusion: using the STEMarts Model, etc. The model highlights creating an equitable and a sustainable digital society is essential to the process of digital cooperation. People are brought together from diverse disciplines and cultural perspectives in order to create alternative futures. In a contemporary world of complexity, most approaches are insufficient while the problem is urgent. The experimentation with technologies could foster literacies and bridge social divides.

Project 07: Composition with Curves

sketch
var nPoints = 100;
var EPITROCHOID = 0; 
var CRANIOID = 1; 

var curveMode = EPITROCHOID;


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


function draw() {
    background(200,200,255);
    
    // curve
    push();
    translate(width / 2, height / 2);
    switch (curveMode) {
    case EPITROCHOID:
        drawEpitrochoidCurve();
        break;
    case CRANIOID:
        drawCranioidCurve();
        break;
    }
    pop();

    //moving shape
    let x = mouseX;
     let y = mouseY;
     let ix = width - mouseX;  // Inverse X
    let iy = height - mouseY; // Inverse Y
    ellipse(x, height/2, y, y);
     fill(255);
     noStroke();
    ellipse(ix, height/2, iy, iy);
}

function drawEpitrochoidCurve() {

    var x;
    var y;
    
    var a = mouseY;
    var b = mouseX;

    noStroke();
    fill(255,200,200);

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = 4 * b * cos (t)* cos (t)* cos (t);
        y = a * sin (t) *sin (t)* sin (t);
        
      vertex(x, y);
    }
    endShape(CLOSE);
    
}

Looking Outwards 07: Information Visualization

Melting Memories

“Melting Memories” by Refik Anadol is one of my favorite digital works as a designer. The website itself which presents the work is immersive and dynamic which is so fitting to the work. Anadol is a pioneer in the aesthetics of machine intelligence and researches practice centered around the discovery and development of data narratives. His work addresses the challenges of computing which imposed on humanity and what it means to be an individual in the age of AI. The perception and experience of time and space he creates work around is enriched in environments which are so immersive and create a multi-dimension perception of space. His specific piece “Melting Memories” is a reference to Anadol’s unexpected interconnections between philosophical works and academic inquires which take memory as it’s principal theme. The work is a digital “video” format which is 2-dimensional but appears as if it is 3-dimensional, reaching out to the viewer. The work is a slow burn which mimics liquified colors to represent time and perception of humans.

Project 06 – Abstract Clock

sketch
function setup() {
    createCanvas(400, 400);
    angleMode(DEGREES);
}

function draw() {
    background(0); //black
    translate(200,200);

    let hr = hour();
    let min = minute();
    let sec = second();

    strokeWeight(10);
    stroke(244,195,195); // pink outline
    noFill();

    let end1 = map(sec, 0, 60, 0, 360); //seconds
    arc(0,0,300,300,0,end1); 

    push();
    rotate(end1); //rotate following the seconds
    stroke(255,0,0);
    line(0,0,100,0); //big clock line RED
    pop();

    stroke(137,207,240); // blue outline
    let end2 = map(min, 0, 60, 0, 360); //minutes
    arc(0,0,280,280,0,end2); 

    push();
    rotate(end2); //rotate following the minutes
    stroke(255);
    line(0,0,100,0); //big clock line WHITE
    pop();

    stroke(157,193,131); //green outline
    let end3 = map(hr,0,24,0,360); //hour
    arc(0,0,260,260,0,end3);

    push();
    rotate(end3); //rotate following the hour
    stroke(255);
    line(0,0,50,0); //small clock line WHITE
    pop();


//let end = map(mouseX, 0, width, 0, 360);
//arc(200,200,300,300,0,360); 
//strokeWeight(6);
//stroke(255); // white
//noFill();
//ellipse(200,200,300,300);

    

    //fill(255);
   // noStroke();
   // text
}

Looking Outwards 06: Randomness

This week’s topic of projects regarding randomness is probably my favorite so far. As randomness in art is open ended and up to the audience’s interpretation, it gives a much more interactive aspect to observing projects. A specific work I want to focus on is Jackson Pollock’s work. He was a major figure in the expressionist movement and widely appreciated for his contemporary art and recently has a memorial exhibition at MoMA. His methods of creating art were largely using the “drip technique” which were random pouring of paints onto the canvas. These methods create randomized artworks where no two pieces would be the same. Another influence onto his paints would be that between 1947 and 1950 was the “drip period” where these techniques were popular. My favorite specific piece from artist Pollock would be “number 1” as it is the first drip technique painting he made, using thinned paint and cans of commercial enamel. It is veru interesting to me how a random method and progress to create a piece would result in something so famous and well known.

Project 5: Wallpaper

sketch


//i was inspired by beaches and shells that found there cause i am from Socal

var wValue= []; 
var e = 100;
var j = e;

function setup() {
  var canvas = createCanvas(600, 220);  
 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      var object = {};
      
      //colors
      object.r = random(0, 255);
      object.g = random(0,255);
      object.b = random(0, 255);
      //sizes
      object.s = random(40, 50);
      
            wValue.push(object);
    }
  }
}

function draw() {
  pattern();
}

function pattern() {

  background(0, 0, 0);


  var counter = 0; 
  for (let x = 0; x <= width + 990; x += e) {
    for (let y = 0; y <= height + 200; y += j) {

      //colors
      let val = wValue[counter];
      counter++; // count to next object for next loop
      
      let r = val.r;
      let g = val.g;
      let b = val.b

      //sizes
      let s = val.s;

      push();
      scale(0.4);
      translate(x, y + 80);
      stroke(r, g, b);
      strokeWeight(5);
      noFill();
      for (let i = 0; i < 10; i++) {
        fill(255);
        ellipse(9, 20, s, s); //shell
        rotate(PI / 4);
      }
      pop();
      
       
    }
  }
}

Looking Outwards 05: 3D Computer Graphics

Reading about the 3d computer graphics was very intriguing. I like how the there are connections between our last weeks project (string art) and the previous looking out blog posts where we had to talk about data in nature. Most of the computer generated graphic photos looked alike to repetitive or familiar patterns. Specific projects I am highly interested in is programs such as “DALL E”, a programmed neural network that creates images from text captions for a wide range of concepts which are expressible in natural language. When a user puts in a text, the AI will generate images which correspond to such texts. DALL E’s capabilities include drawing multiple objects simultaneously, control abilities, inferring contextual details, combining unrelated concepts, animal illustrations, etc. Text to image synthesis is still an active area of research and DALL E continues to improve contemporarily.

https://openai.com/blog/dall-e/

Project-04: String Art

sketch
//i made mine a smile lol
var dx1;
var dy1;
var dx2;
var dy2;
var dy3;
var dy4;
var numLines = 50;

var x = 0;
var y = 0;

function setup() {
    createCanvas(400, 300);
    background(244, 195, 195); //baby pink color

    line(50, 50, 150, 300); //start line
    line(300, 300, 350, 100); //end line
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;

    line(50, 50, 150, 300); //start line
    line(300, 300, 350, 100); //end line
    dx3 = (150-50)/numLines;
    dy3 = (300-50)/numLines;
    dx4 = (350-300)/numLines;
    dy4 = (100-300)/numLines;


}

function draw() {
    fill(0,0,0);
    ellipse(300, 100, 10,10);
    ellipse(220, 100, 10,10);

    //lines going across canvas-parallel look
    for (var i = 0; i <=400; i +=20) {
        stroke(53,81,95); // grey blue color
        line(width - i, y, x, y + i*4);
        line(i, height, width, height - i*4);
        line(width - i, height, x, height - i*4);
        line(i, y, width, y + i*4);

    }

     //circle on outside
    for (var i = 0; i <=400; i +=20) {
        stroke(255,255,255); //white
        line(width - i, y, width, height - i);
        line(i, height, x, y + i);
        line(width - i, height, width, y + i);
        line(i, y, x, height - i);

    }
    // function given from instructions 
    var x1 = 0;
    var y1 = 0;
    var x2 = 350;
    var y2 = 350;
    for (var i = 0; i <= numLines; i += 1) {
        stroke(255,0,0); //red
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    
    }
    noLoop();
    var x3 = 350;
    var y3 = 350;
    var x4 = 0;
    var y4 = 0;
    for (var i = 0; i <= numLines; i += 1) {
        fill (255,0,0); //red
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}