Author: iris

Project 5 – Wallpaper

for this project, I wanted to create something that was a little more abstract and randomized (almost like a texture or textile generator) rather than a single image or motif tiled repeatedly.

(refreshing should change the pattern)

iyip_wallpaper
//Iris Yip
//15104 Section D

var density, shapes, c, cindex, newc,
    colors = ["#1aa6b7", "#ff414d", "#f56a79", "#ff9a76", "#d9ecf2"]; 

var setvariations = [],
    setsize = [],
    setquad = [],
    setxoffset = [],
    setyoffset = [],
    setcolor1 = [],
    setcolor2 = [];


function setup() {
    createCanvas(600,600);
    angleMode(DEGREES);

};

function draw() {

    setvariations = [],
        setsize = [],
        setquad = [],
        setxoffset = [],
        setyoffset = [],
        setcolor1 = [],
        setcolor2 = [];

    background(255, 100);
    // set pattern repeat density
    density = int(random(2, 8));
    shapes = int(random(5, 10));


    for (let i = 0; i < shapes; i++) {

        setvariations.push(int(random(1, 6)));
        setxoffset.push(random(0, width / density));
        setyoffset.push(random(0, width / density));
        setsize.push(i * 0.2 + 1);
        setquad.push(int(random(1, 8)));

        colors = ["#1aa6b7", "#ff414d", "#f56a79", "#ff9a76", "#d9ecf2"];
        c = random(colors);
        setcolor1.push(color(c));
        cindex = colors.indexOf(c);
        colors.splice(cindex, 1);
        setcolor2.push(color(random(colors)));
    }

    for (let i = -1; i <= density * 2 + 1; i++) {
        for (let j = -1; j <= density * (width/height) * 2 + 1; j++) {
            let factor = width / density,
                x = i * factor,
                y = j * factor;

            for (let n = 0; n < shapes; n++) {
                shape(factor, x + setxoffset[n], y + setyoffset[n], setvariations[n], setsize[n], setquad[n], setcolor1[n], setcolor2[n]);
            }
        }
    }

    frameRate(0);
}

function shape(factor, x, y, variation, size, quad, color1, color2) {

    for (var i = factor; i > 0; i--) {

        let fillcolor = lerpColor(color(color1), color(color2), i / factor);
        noStroke();
        fill(fillcolor);

        push();
        translate(x, y)
        rotate(quad * 45);

        if (variation == 1) {
            arc(0, 0, i / size, i / size, 0, size * 45);
        };

        if (variation == 2) {
            triangle(0, 0, i / size, 0, 0, i / size);
        };

        if (variation == 3) {
            square(0, 0, i / size, i / (size * 5), i / (size * 5), i / (size * 5), i / (size * 5));
        }

        if (variation == 4) {
            ellipse(0, 0, i / size, i / size);
        }

        if (variation == 5) {
            rect(0, 0, i / size, i / size / 2);
        }


        pop();

    };
}

Project 04 – String Art

string art string art string art string art string art string art s-

stringartstringart
//Iris Yip
//15104 Section D

var numLines = 300;

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

function draw(){
    background(0);
    var x1 = -9;
    var y1 = -9;
    var x2 = width;
    var y2 = height;

    for(var i = 0; i <= numLines; i += 1) {     
        stroke(i,mouseX,300);
        line(mouseX-50, y1*i, x2*i, y2*i);
        line(x1*i,mouseY,x2*i,y2*i);     
        
        stroke(200,i,300);
        line(x2,0,mouseX,mouseY)
        line(0,0,mouseX,mouseY)
        
        stroke(255,mouseX,mouseY) //conglomerate of lines to the left
        line(x1*i,x2/2+100,mouseX,mouseY)
        line(x1*i,x1/2-100,mouseX,mouseY)
        
        stroke(mouseX,100,mouseY) //height/2 thing
        line(i*100,y2/2-300,mouseX,mouseY)
        line(i*3,y2/2,mouseX,mouseY)
    }
}

this was fun

LO-Sound Art

Iris Yip iyip
15-104 Section D
LO-04

A project with an interesting application of sound art is Prélude in ACGT – Sonification of personal (DNA) data by Pierry Jacquillard. The project uses DNA (chromosomes 1-22, XY) and converts it to artificial sound, successfully creating music. His intention was to create an intersection between nature’s “core structure” (DNA) and “artificial, man-made (CODE)”, exploring different interpretations of the idea of one’s personal “data” and deconstruct it to understand the way that these different processes translate into one another.

He created five different interfaces for the intention of simplifying and breaking down the conversion process. I was personally drawn to this project because I was fascinated with the way that it took a natural processes like the structure of our DNA and chromosomes and translated it into sound through the similarities between our biology and the way we’ve intentionally structured and built our coding languages. The way that the artist structured the conversion between our DNA and the four types of molecular bases (ACGT) with code shows a good grasp of both the biological and technological processes involved. The “rationale” (or discussion) behind the piece and how information is retrieved, understood, and maintained in different ways also produced a fascinating conversation about the nature of individuality and the creation of life itself.

Project 03 – Dynamic Drawing

Is the code more complicated than it needs to be? Yes. Did it still take me way too long to figure out? Also Yes.

sketch
//Iris Yip
//15104 Section D

var wwidth = 600,
    wheight = 600,
    ballsize, //radius
    ballx, 
    bally, 
    hvelocity, 
    vvelocity,
    clickdistance,
    rvalue,greenvalue,bluevalue;

function setup() {
  
  createCanvas(wwidth, wheight);
  
  // starting point
  ballx = wwidth/2;
  bally = wheight/2;
  
  // starting velocity
  hvelocity = random(-5,5);
  vvelocity = random(-5,5);
  
  // starting ball size
  ballsize = random(10,150);
  
  // ball color
  redvalue = random(100,255);
  greenvalue = random(100,255);
  bluevalue = random(100,255);
  
};

function draw() {
  
  
  //background
  background(0)
  let rectBlue = map(mouseY, 0, height, 0, 255);
  fill(255, rectBlue, 200);
  rect(0,0, 600, 600);
  
  
  fill(redvalue, greenvalue, bluevalue);
  ellipse(mouseX, mouseY, 100, 100);


    
  // ball bounce-back conditions
  if(ballx >= width - ballsize || ballx <= ballsize){
    hvelocity = -hvelocity;
  };
  if(bally >= height - ballsize || bally <= ballsize){
    vvelocity = -vvelocity;
  };
  
  // ball location change
  ballx += hvelocity;
  bally += vvelocity;
  
  // render ball
  noStroke();
  fill(redvalue, greenvalue, bluevalue);
  ellipse(ballx, bally, ballsize * 2, ballsize * 2);
  
  
};
  
function mouseClicked() {
  {
    
    clickdistance = dist(mouseX, mouseY, ballx, bally);
    
    if(clickdistance <= ballsize) {
      
      // change velocity if clicked on the ball
      hvelocity = random(-5,5);
      vvelocity = random(-5,5);
      
      // change ball color
      redvalue = random(100,255);
      greenvalue = random(100,255);
      bluevalue = random(100,255);
      
      //changing ball size
      ballsize = random(50,100);
      
    };
  
  };

  
};

LO-03 Generative Physical Forms

Iris Yip iyip
15-104 Section D
LO-03

[Mild Trypophobia Warning! Please do not click on any of the links if you are sensitive to the subject matter. Thank you for your understanding!]

This week, I looked at ‘Colony‘ by Nervous Systems, a project where the artists combine the use of 3D printing, data visualisation, and the use of a virtual environment to explore coral reefs in nature as a look into how generative sculpture/design is used to visually represent/mimic aspects of nature. The project is currently ongoing, but like many of their other works/series, Nervous System utilises custom software in order to algorithmically depict generative growth.

It is currently an ongoing project, and their current focus is on extrapolating and replicating the “lives of colonial, sessile invertebrates”; hence the name, “Colony”. I found this project really intriguing as their ingenious use of computational fabrication to study; and to some extent even replicate, nature indicative of the possibilities generative/algorithm based design can bring to our physical world.

LO – 02 (Generative Art)

For this week’s LO, I took a closer look at Collider by Robert Hodgin, who does a lot of work in 3D terrain simulations like this one. The concept behind the project is exploring a simulated particle system interacting with a universal gravitational force that is coded in.

I really enjoyed the way that this project took a simple physics concept and was able to visualize it in such a beautiful way to show the intersection between scientific and visual methods of communicating information. Not only is it visually pleasing to look at, it also demonstrates the theories of universal gravitation in a tangibly interactive way.

Robert Hodgin’s work is primarily done in Houdini and C++, for which he is a co-creator of Cinder C++, a free open-source library designed to be a resource for endeavors of creative coding in the aforementioned language.

Project 02 – Variable Face

Made in honor of the moldy tomato I found at the back of my fridge. Rest in peace.

tomatoes
//Iris Yip
//15104 Section D

var bgColorR=0;
var bgColorG=0;
var bgColorB=0;
var faceWidth=200;
var faceHeight=300;
var eyeShape=0;
var eyeColor=0;
var smileYN=1;
var leafColor=1;
var leafLength=1;
var leafHeight=1;

//I need better names for my variables


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

function draw() {
  //background
  background(bgColorR, bgColorG, bgColorB)
  
  //faceshape
    noStroke();
  fill(225, bgColorB, 110)
    ellipse(300, 300, faceWidth, faceHeight);
  
  //nose
    fill(225, bgColorB-20, 120)
  ellipse(300, 316, faceWidth/30, faceHeight-250)
  
  //eyes
  fill(255,255.255)
    ellipse(205, 290, (faceWidth/4), (faceHeight/4));
    ellipse(390, 290, (faceWidth/4), (faceHeight/4));
  fill(bgColorR,bgColorG,bgColorB)
    ellipse(390, 290, 50, 50);
    ellipse(205, 290, 50, 50);
  
  //mouth
  noFill()
  strokeWeight(10)
  stroke(225, bgColorB+50, 110)
  arc(270, 380, 120, (smileYN), PI + QUARTER_PI, TWO_PI)
  
  
  //leaf things
  noStroke();
  fill(bgColorR, 255-(bgColorG/3), (bgColorB-100))
  triangle(leafLength, 150, 300, 130, 240, leafHeight);
  triangle(leafLength, 200, 300, 130, 220, leafHeight);
  triangle(leafLength+20, 150, 300, 130, 200, leafHeight+60);
  
  //label
    fill(255);
    textSize(20);
    textAlign(CENTER);
    text("So Many Tomatoes",width/2,560);
}

function mousePressed() {
  //background color
    bgColorR = random(120, 130);
  bgColorG = random(80, 90);
    bgColorB = random (110, 120);
  
  //faceshape change
    faceWidth= random(250,450);
    faceHeight= random (300,300);
  
  //nose
  
  
  //smile, yes/no
    smileYN= random(2,100);
  
  //leaf things
    leafHeight=random (120,150);
    leafLength=random (300,340);

  
}

The code for this project was relatively simple in terms of creating and using the different shapes, but I did initially have a lot of trouble coming up with colors that still looked different but didn’t clash. I do regret not going in with a plan or initial sketch because I think it inhibited me from trying out more ambitious commands and shapes.

Project 1 – Self Portrait

Week 1 Assignment: Self Portrait

sketch
//Iris Yip iyip
//15104 f2020 - Section D

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

function draw() {
  background(245, 173, 48);
  
  //hair, back

  fill(24,20,45)
  rect(80, 316, 450, 384) 
  ellipse(300, 300, 450);
  fill(14,14,14)
  rect(120, 316, 360, 284)
  fill(246, 245, 180)
  ellipse(300, 600, 400, 200)
  
  
  //neck + shirt
  noStroke();
  fill(225, 159, 110)
    ellipse(300, 492, 68, 100);
  
  
  //ears
  fill(225, 159, 110)
    ellipse(108, 317, 90+30, 100+30);
    ellipse(492, 317, 90+30, 100+30);
  fill(198, 127, 96)
    ellipse(108, 317, 90, 100);
    ellipse(492, 317, 90, 100);

  
  //face
  noStroke();
  fill(225, 159, 110)
    ellipse(300, 300, 385);
  
  
  //nose
  fill(198, 127, 96)
  ellipse(300, 316, 68, 126)
  fill(225, 159, 110)
  ellipse(300, 290, 120, 126)
  
  
    //eyes
  fill(255,255.255)
    ellipse(205, 290, 109, 76);
    ellipse(390, 290, 109, 76);
  fill(24,20,45)
    ellipse(390, 290, 50, 50);
    ellipse(205, 290, 50, 50);
  
  
  //mouth
  fill(188, 101, 86);
    ellipse(300, 440, 70, 20);
  fill(225, 159, 110)
    ellipse(300, 450, 70, 20);
  
  
  
  //eyelids
  fill(225, 159, 110)
    rect(148, 236, 307, 57)
  stroke(24,20,45);
  strokeWeight(10);
    line(150, 290, 260, 290)
    line(447, 290, 335, 290)
  
  
  
  //hair
  fill(24,20,45)
  arc(110, 170, 360, 250, 0, HALF_PI);
  rect(143, 146, 300, 40)
  rect(193, 106, 210, 40)
  arc(440, 120, 160, 260, 1, PI);
  fill(225, 159, 110)
  noStroke();
  ellipse(373, 197, 160, 110);
  fill(24,20,45)
  triangle(465, 230, 505, 240, 474, 435)
  triangle(96,240, 141, 240, 125, 435)
  
  stroke(188, 101, 86);
  noFill();
  arc(380, 280, 130, 20, PI + QUARTER_PI, TWO_PI)
  noFill();
  stroke(24,20,45)
  arc(260, 110, 100, 320, 0, HALF_PI);


  

  


}

LO 1 – My Inspiration

Looking Outwards Text – 01
Iris Yip / 15-104 D

A project focusing on computational art that really inspires me is Angela He’s ‘A Coding Project a day for 20 days’. It is a series of small coding projects (web-based) done over the course of a few weeks ranging from simple mechanisms like sliders to loading screens to interactive mini-games.

The premise of the project was to help her develop skills that she could use for her future, larger-scale projects like developing webpages and/or games. I thought breaking down the daunting task of learning to code into smaller, more feasible tasks was a great way to get into coding and overcome its admittedly daunting nature for beginners. I was really fascinated by her easy-to-follow documentation of her journey, and was inspired to take this class and learn coding for myself because of how she broke it down into simpler steps and incorporated illustration and visual elements, which really intrigued and excited me. I found that the coding brought an additional layer of interaction to her visual works and opened up a lot of possibilities that don’t necessarily exist in traditional types of 2D art like illustration. The balance between code and art really appealed to me as a designer, and I really admire the casual nature of the project and how she let herself learn by doing and taking inspiration from others without copying.

She explored a lot of different softwares for coding, as well as different online resources including GitHub and even going into Chrome Developer to see for herself the kind of code a webpage might use.

On the project page, she goes into a lot of detail about what inspires her, including projects hosted on websites like CodePen, and Awwwards. For visuals, she also looked at websites like Behance and dribbble. She is relatively well known for her illustrations and her visual novels (completed for Ludum Dare, a game jam competition.)

REFERENCE:
Project Link
Author: Angela He, also known as ‘zephybite’