Busan Tomato – Page 2 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

LO-Randomness

The project I choose for this week LO is Karlheinz Stockhauen’s KLAVIERSTÜCK XI (Piano Piece 11, 1956). The way he constructed his whole score utilizes randomness. Basically, he had 19 musical pieces spread on the floor, and he will choose one piece at a time from the floor. However, when he picked the same piece for the third time, he completed the score and stopped. By composing in this way, the song can start and end with any piece among the 19 of them, therefore creating random variations and changes. The thing interesting about this is the unpredictability of the score.

Project-05: Wallpaper

I applied the same coding structure I used in my assignment A to this project. Then, I changed the repeated shapes from Hexagon to my designed shapes 1 and 2. Because of the assignment A, it is relatively easy to create this wallpaper pattern.

project05: wallpaper Download

var x;
var y;
var a=20;
var b=20;



function setup() {
    createCanvas(400, 300);
    background( 240,230,140);
}

//shape in the first column
function shape1(){
    push();
    translate(a,b);
    noStroke();
    x=0;
    y=0;
    var s = 10;
    if(color==1){
        fill(255);
        circle(x,y,s);
        fill(175,238,238);
        circle(x,y+5,s);
        color+=1;
    }
    else{
        fill(175,238,238);
        circle(x,y,s);
        fill(255);
        circle(x,y+5,s);
        color=1;
    }
    
    pop();
}
//shape in the second column
function shape2(){
    push();
    translate(a,b);

    x=0;
    y=0;
    var d=5;
    strokeWeight(2);
    stroke(139,69,19);
    line(x-d,y,x,y-10);
    line(x+d,y,x,y-10);
    noStroke();
    fill(255,69,0);
    circle(x-d,y,10);
    circle(x+d,y,10);
    pop();
}

function draw() {
    //two circles
    for(b=20; b<=400; b +=50){
        for(a=20; a<=500; a+=50){
            shape1();
        }
    }

    //cherry shape
    
    for(b=50; b<=250; b +=50){
        for(a=45; a<=350; a+=50){
            shape2();
        }
    }


}

LO-3D Computer Graphics

The project I choose for this week LO is a light-jet print that reflects the artist’s love-hate relationship with suburbia, called Touring Suburbia/number one, by Dolores Kaufman in 2005. It basically applies the technique of digital painting to create a 2D art that captures a 3D dreamlike scene. The artist applies two contradictory color, blue and pink, to represent his love and hate. Also, the repetitive patterns successfully showcase a scene that gives the audiences a sense of realness, instead of a dull collage. Using digital tools, the creator, Dolores Kaufman was able to re-visualize that dream, to begin to imagine Versailles from individual efforts. Touring Suburbia represents an attempt to recapture a dream once glimpsed.

Project-04: String Art

string art

// for the right up center and left down center string shapes
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
//for the left up corner and right down corner string shapes
var da1;
var da2;
var da3;
var da4;
var ds1;
var ds2;
var ds3;
var ds4;

var numLines=20;
function setup() {
    createCanvas(400,300);
    background(224,255,255);
    dy1 = 150 / numLines;
    dx2 = 200 / numLines;
    dy3 = -150 / numLines;
    dx4 = -200 / numLines;
    da1 = 200 / numLines;
    ds2 = -150 / numLines;
    ds3 = 150 / numLines;
    da4 = -200 /numLines;
}

function draw() {
    var x1 = 200;
    var y1 = 0;
    var x2 = 200;
    var y2 = 150;
    var x3 = 200;
    var y3 = 300;
    var x4 = 200;
    var y4 = 150;

    var a1 = 0;
    var s1 = 0;
    var a2 = 0;
    var s2 = 150;
    var a3 = 400;
    var s3 = 150;
    var a4 = 400;
    var s4 = 300; 

    //right up string section, section 1
    stroke(127,255,0);
    for (var i = 0; i <= numLines; i += 1 ) {
        line(x1,y1,x2,y2);
        y1 += dy1;
        x2 += dx2;
    }
    //left down string section, section 2
    stroke(75,0,130);
    for (var i = 0; i <= numLines; i += 1) {
        line(x3,y3,x4,y4);
        y3 += dy3;
        x4 += dx4;
    }

    //right up corner
    stroke(255,192,203);
    for (var a = 0; a <= numLines; a += 1) {
        line(a1,s1,a2,s2);
        a1 += da1;
        s2 += ds2; 
    }
    //left down corner
    stroke(255,99,71);
    for (var a = 0; a <= numLines; a += 1) {
        line(a3,s3,a4,s4);
        s3 += ds3;
        a4 += da4;
    }
    noLoop();
}

While writing this project, I first only used 2 sets of x and y to draw out 4 string shapes, which the computer did not conduct the action I expected it to do. Then, I added another 2 sets of a and s to draw the left up corner and right down corner string shape. Eventually, my code works.

LO-Sound Art

The project I choose for this week LO is an exploratory public engagement project called quantum parallelograph by Professor David Deutsch of Oxford University. It basically applies the notion of parallel universe into a public engaging experiment based on the Young’s double slit theory. Since the double slit experiment says that a photon of light appears to pass through the double slits, the scientists suggests that a connection is made across universes when this happen. Therefore, they made the abstract idea of parallel universe into something tangible and visible. Interestingly, this project examines a scientific notion from an aesthetic point of view, it also approaches the scientific fiction by letting people engage in the activity of “communicating” with the alternate kind of self in another parallel world.

The Double Split Machine Used in the Experiment

Project03-Dynamic Drawing

sketch Download

var R=255;
var G=153;
var B=203;
var x=380;
var y=280;

function setup(){
    createCanvas(600, 450);
    background(0);
}

function draw() {
    background(0);
    stroke(0);
    line(600,0,mouseX,mouseY);
   //change angle
    var angle=mouseX;
    push();
    //change origin
    if(mouseY>225){
        translate(200,225);
    }
    else{translate(400,225);
    }
    rotate(radians(angle));
    fill(R,G,B);
    var x=mouseX;
    var y=mouseY;
    circle(x,y,200);
    circle(x+30,y-160,50);
    circle(x-160,y+30,70);
    circle(x-140,y+50,30);
    //change color
    if(mouseY<150){
        R=0,
        G=255;
        B=255;
    }
    else if(mouseY>300){
        R=255;
        G=255;
        B=102;
    }
    else{
        R=255;
        G=153;
        B=203;
    }
    //change scale
    if(mouseX<200){
        scale(0.6);
        fill(R,G,B);
        circle(x,y,300);
        circle(x+30,y-160,50);
        circle(x-160,y+30,70);
        circle(x-140,y+50,30);
    }
    else if(mouseX>400){
        scale(0.4);
        fill(R,G,B);
        circle(x,y,300);
        circle(x+30,y-160,50);
        circle(x-160,y+30,70);
        circle(x-140,y+50,30);
    }
    else{
        scale(0.2);
        fill(R,G,B);
        circle(x,y,300);
        circle(x+30,y-160,50);
        circle(x-160,y+30,70);
        circle(x-140,y+50,30);
    }
    pop();

}

When I first started this dynamic drawing, I have no idea what to do. Therefore, I simply drew 4 circles, and then changed their color, rotating position, scaling size, and rotating angle. I encountered several difficulties on making my drawing move by my logic, because I didn’t fully understand how certain function work in computer logic. As I look at detailed instructions on these function, I made it work eventually, and I had a more comprehensive understanding of these functions.

LO-Computational Fabrication

I looked at the silk pavilion project by The Mediated Matter Group at the MIT Media Lab in 2020. The thing I find inspiring about this project is how their team organically combine the algorithm calculations of digital media and biological features of silkworm. By mimicking the way natural worms form their silk, their team efficiently brings beauty of nature into something that’s created manually. I believe that nature is not only the source of our information and our living foundation, it also provides examples for us to learn from for further development. This pavilion project reminds me of biomimicry buildings that save energies by means learned from insects, plants, and other creatures from nature. By doing the series of work like this, it brings the connection between human and nature closer, and art and technology into another level.

Project-02: Variable Faces

Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var …=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel super proud of myself when I finally get my code working.

siyunw-Generative faces

var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var hairWidth =350;
var hairHeight =350;
var neckWidth = width / 2;
var neckHeight= 4*neckWidth / 3;
var mouthSize= 40;
var mouthHeight = 30;
var backgroundR=250;
var backgroundG=150;
var backgroundB=100;

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

function draw() {
    background(backgroundR,backgroundG,backgroundB);

    fill(255,204,153);
    circle((width-hairWidth) / 2,height / 2,50);  
    circle(width-(width-hairWidth) / 2,height / 2,50);//ears

    fill(255,153,51);
    ellipse(width / 2, height / 2, hairWidth, hairHeight);
    rect((width-hairWidth) / 2,(height / 2),hairWidth,4*(hairHeight / 2) / 3);//face
    
    var eyeLX = width / 2 - faceWidth * 0.15;
    var eyeRX = width / 2 + faceWidth * 0.15;
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//eyes


    fill(0);
    ellipse(width/2,3*height / 4,mouthSize,mouthHeight);
    //mouse

}

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.
    backgroundR=random(200,300);
    backgroundG=random(100,200);
    backgroundB=random(50,150);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    hairWidth = random(300,400)
    hairHeight = random(300,400);
    neckWidth = random(150,250);
    mouthSize = random(35,80);
    mouthHeight = random(25,70);
}

LO: Generative Art

The art work that attracts my attention is a hypertext poems website called “Do You Want Love or Lust?”. This website presents decontextualized This or That questions from popular magazine. Instead of directly writing the poem, the creator let participants to focus on choosing their preferences, thus generating the poem based on the choices made earlier by the participants. This project then create a place, where people could interact with art individually, by applying algorithms. I suppose that the creator must have a basic structure for the poem that would be generated eventually, but there are parts in the structure that would be filled by choices participants made in the provided questions. Therefore, the content in the poem may be based on different people’s preferences, but the overall poem structure and style are dependent on the creator’s taste. It is just interesting that basic algorithms, which seem totally irrelevant to art, actually help people to create a new form of art that could let them easily manifest their personal bias and styles.

Artist: Claude Closky; Title: Do You Want Love or Lust?; Inception: 2001

https://webenact.rhizome.org/do-you-want-love-or-lust/http://archive.rhizome.org/artbase/1827/1375b.html

Project 1: My Self Portrait

sketch

//Siyun Wang, Section C
function setup() {
    createCanvas(400,600);
    strokeWeight(10);
}

function draw() {
    if(mouseX < (width/3)){
        background(160,160,160);
        
    } else if(mouseX > (width*2/3)){
        background(255,153,153);
        
    } else {
        background(204,229,255);
    }

    fill(71,51,24);
    circle((width/2),(height/2),350);
    rect((width-350)/2,(height/2),350,200);

    fill(255,204,153);
    rect(100,425,200,125);

    fill(255,204,153);
    circle(97,300,50);  
    circle(335,300,50);  

    stroke(255,102,178);
    line(350,310,350,345);
    line(85,310,85,345);
    noStroke(); 

    fill(255,153,51);
    square(100,200,225);

    fill(255,153,51);
    arc(212,425,224,125,0,PI);

    fill(88,62,28);
    arc(212,270,260,280,PI,0);

    fill(51,51,255);
    rect(100,550,200,50);

    fill(102,102,255);
    triangle(100,550,100,600,30,600);
    triangle(300,550,300,600,370,600);

    fill(0);
    ellipse(162.5,300,15,30);
    ellipse(287.5,300,13,27);

    fill(102,0,51);
    triangle(225,300,210,370,240,367);

    if(mouseX < (width/3)){
        stroke(0);
        arc(225,450,125,100,PI,0);
        noStroke();
        
    } else if(mouseX > (width*2/3)){
        stroke(0);
        arc(225,400,125,100,0,PI);
        noStroke();
    } else {
        stroke(0);
        line(162.5,425,287.5,425);
        noStroke();
    }
}