Author: sean!

LO-06 (randomness)

For this LO, I scoured the internet for randomness projects and I ultimately came upon this random script generator. Although the creation date and author is unknown, it is quite a robust software. After generating multiple scripts using a variation of around 30 inputs to generate the script, it was pretty clear that the results had enough variation to deem it to be sufficiently random. However, just how random is this script exactly? Assuming all 30 inputs each change a small part of the script then there could be theoretically be up to 30^30*the available words in the dictionary versions of scripts generated. This isn’t the case though, as after reading a couple scripts, I noticed that many themes and sentences were in fact being repurposed and reused, thus this program utilizes “pseudo” randomness.

https://www.plot-generator.org.uk/movie-script/

PROJECT-06 (clock)

move your mouse around to stabilize the clock!

sketch
// SEAN CHEN
// 15-104 A

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

function randomizer() { // giving the design "chaos"
    var diff = dist(width/2, height/2, mouseX, mouseY);
    if (diff > 25) {
        // more random shifting based on dist from center to mouse
        var chaos = random(-1, 1) * (diff-25)/25;
    } else {
        var chaos = random(-1, 1) * 0.175; // mini shifts for "texture"
    }
    return chaos;
}

function border() { // border ring including seconds hand
    textAlign(CENTER, BOTTOM);
    for (var i = 0; i < 60; i++) {
        push();
        textSize(9);
        if (second() == i) { // if second matches rotation, display sec location
            rotate(radians(6*i+randomizer()));
            textStyle(ITALIC);
            textStyle(BOLD);
            textAlign(LEFT, CENTER);
            rotate(radians(-90)); 
            text(' second ' + second(), 250+randomizer(), 0);
        } else { // say border otherwise
            rotate(radians(6*i+randomizer()));
            text('border', 0, -250+randomizer());
        }
        pop();
    }

}

function face() { // clock face
    push();
    textAlign(CENTER, BOTTOM);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    fill(color(constrain(200-diff, 0, 200)));
    for (var thick = 0; thick < 25; thick++){
        for (var i = 0; i < 60; i++) {
            push();
            rotate(radians(6*i));
            textSize(9);
            text('face', 0, -10*(thick+randomizer()));
            pop();
        }
    }
    pop();
}

function minHand() { // minute hand
    push();
    rotate(radians(6*minute()+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('minute', 30*num+20, 0);
        } else {
            text('minute '+ minute(), 30*num+20, 0);
        }
        pop();
    }
    pop();
}

function hrHand() { // hour hand
    var hr;
    if (hour() > 12) { // convert 24 hr to 12 hr
        hr = hour()-12;
    } else {
        hr = hour();
    }
    push();
    rotate(radians(30*hr+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('hour', 20*num+20, 0);
        } else {
            text('hour '+hr, 20*num+20, 0);
        }
        pop();
    }
    pop();
}

function logo() { // how to operate clock
    push();
    strokeWeight(2);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    ellipse(mouseX, mouseY, 5*diff/10, 2.5*diff/10);
    textStyle(ITALIC);
    textAlign(CENTER, CENTER);
    textSize(8*diff/100);
    text('clock', mouseX, mouseY);
    textSize(3*diff/100);
    textAlign(CENTER, CENTER);
    text('\n(move to stablize)', mouseX, mouseY+7);
    pop();
}

function draw() {
    background(255);
    push();
    translate(width/2+randomizer(), height/2+randomizer()); 
    border();
    face();
    minHand();
    hrHand();
    pop();
    logo();
}

PROJECT-05 (wallpaper)

sketch
// SEAN CHEN
// 15-104 A

function setup() {
    smooth();
    createCanvas(600, 1000);
    background(255,194,130);
}

function poka(scale) { // background pokadots
    for (var i = 0; i < scale/2; i++){ // array columns
        noFill();
        var w =  width / scale;
        var h = height / scale;
        push();
        translate(i*(2*w), 0);
        for (var j = 0; j < scale+1; j++){ // drawing a column
            push();
            var r = random(0.4, 0.6); // giving the ellipse rand sizes
            translate (0, j*h); // vert column of random ellipse
            ellipse (w/2, h/2, r*w, r*h);
            translate (w, h/2-h) // shifted vert column of rand ellipse
            ellipse (w/2, h/2, r*w, r*h);
            pop();
        }
        pop();
    }
}


function leaf() { // drawing a little leaf (mint color)
    stroke(88,216,169);
    strokeWeight(5);
    line(-10, 0, 10, 0);
    line(-5, -5*sqrt(3)/2, 5, 5*sqrt(3)/2);
    line(-5, 5*sqrt(3)/2, 5, -5*sqrt(3)/2);
}

// drawing a small branch from a certain x,y
// (same as stem func)
function miniStem(x, y) { 
    noStroke();
    fill(94,59,24)
    for (var i = 0; i < 25; i++) {
        rectMode(CENTER);
        square(x, y+i, 5);
        if (i == 20) { // right before the end of the branch
            push();
            translate(x, y+i); // move leaf to that coordinate
            leaf(); // draw leaf
            pop();
        }
        x += random(-5, 5);
    }
}

function stem(maxH) {
    noStroke();
    fill(94,59,24)
    var x = 50 // center pt for each tile
    for (var i = 0; i < maxH; i++) {
        if (i < maxH-25) { // before getting to last 25 "pixels"
            rectMode(CENTER); // square using center
            square(x, i, 5); // drawing sqaure at x, i which is shifting down
            x += random(-3, 3); // aggregate the branches left and right
        } else {
            square(x, i, 5); // drawing squre
            var diff = x-50; // difference from center
            x += -1*(diff/15); // shifting x back to center for seamless
        }
        var y = i; // for ministem
        if (i%50 == 0) { // every 50 "pixels" downward add a small branch
            miniStem(x, y);
        }
    }
}

function draw() {
    poka(50); // add pokadot bg
    for (var i = -2; i < 9; i++) { // tiling of the branches
        push();
        translate (100*i, 0);
        for (var j = -2; j < 9; j++) {
            push();
            translate (0, 200*j);
            stem(200);
            pop();
        }
        pop();
    }
    noLoop();
}

LO-05 (3d computer graphics)

For todays looking outwards I want to focus on a specific 3D graphics artist, Randy Cano. He is a self taught 3D computer graphics artist and animator that uses 3D software to create unique and “trippy” scenes. His work varys from explosions, to paint spilling on a specific object, to fury humanoid figures dancing to strange music. Randy morphs our reality by using his personal style of morphing humanoid figures with unconventional materials and textures. In one of his works, a soft rubbery head is pushed through a dense field of equally rubbery heads, and that is the entire work: heads pushing through heads. Although all of his works are short clips of rendered videos on instagram, which is where I consume most of his content, it provides an interesting escape from reality in a 3-5 seconds video.

PROJECT-04 (string art)

sketch
// SEAN CHEN
// 15-104 A

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

function draw() {
    var colX = map(mouseX, 0, width, 0, 250);
    var colY = map(mouseY, 0, height, 0, 250);
    // map mouse pos to color range val
    var bgCol = color(colX, colY, 125); // background color
    var cirCol = color(colY, colY, 125); // variable obj color
    background(bgCol);

    push(); // center diamond backround blob
    noStroke();
    fill(cirCol);
    beginShape();
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    curveVertex(mouseX, mouseY+(height-mouseY)/2);
    curveVertex(mouseX/2, mouseY);
    curveVertex(mouseX, mouseY/2);
    curveVertex(mouseX+(width-mouseX)/2, mouseY);
    endShape();
    pop();

    for (var i = 0; i < 25; i ++) { // border + diamond line art
        // border
        let x1 = map (i, 0, 25, mouseX, width); // mid to right vals (x)
        let y1 = map (i, 0, 25, 0, mouseY); // top to mid vals (y)
        let x2 = map (i, 0, 25, 0, mouseX); // left to mid vals (x)
        let y2 = map (i, 0, 25, mouseY, height); // mid to bottom vals (y)

        // center diamond
        let x1s = map (i, 0, 25, mouseX/2, mouseX);
        // half from leftside to mouse
        let y1s = map (i, 0, 25, mouseY, mouseY+(height-mouseY)/2);
        // half from bottomside to mouse
        let x2s = map (i, 0, 25, 0, mouseX/2);
        // left to half of mouse
        let y2s = map (i, 0, 25, mouseY/2, mouseY);
        // half from topside to mouse
        let x3s = map (i, 0, 25, mouseX, mouseX+(width-mouseX)/2);
        // half from rightside to mouse
        let y3s = map (i, 0, 25, mouseY+(height-mouseY)/2, mouseY);
        // half from left to mouse
        
        // border
        line (x1, 0, width, y1); // top right
        line (width, y2, width-x2, height); // bottom right
        line (0, y2, x2, height); // bottom left
        line (width-x1, 0, 0, y1); // top left

        // diamond
        line (x1s, mouseY, mouseX, y1s); // top left
        line (mouseX, y2s, mouseX-x2s, mouseY); // top right
        line (mouseX, y2s, x3s, mouseY); // bottom right
        line (mouseX, y3s, x3s, mouseY); // bottom left
        line (mouseX, mouseY, mouseX+(width-mouseX)/2, mouseY)
        // xtra line from cent to right
    }
}

LO-04 (sound art)

The Weather Thingy created by Adrien Kaeser is an instrument modifier that is controlled through variables generated by the weather. It is a simple idea that can be manipulated in a highly flexible way. I find this to be extremely compelling due to the fact that it can actually be seen as a way to translate a feeling or ambiance into musical composition. The ability to transform external feelings into parameters that affect the outcome of one’s creative works, which offers a kind of push and pull dichotomy between creator and the created. Kaeser uses a series of arduino modules and weather sensors and codes the whole project with arduino, C++, and MIDI. Although the code isn’t demonstrated, I assume each weather input (wind, direction, rain, sun) controls/limits the sound that the original instrument can create to result in the total output. What’s pretty clever is that he also added a range modifier which allows for this project to be utilized in calm (amplify) or violent (limit) situations.

https://www.ecal.ch/en/3843/studies/bachelor/media-interaction-design/presentation/weather-thingy

PROJECT-03 (dynamic drawing)

SEAN SKETCH 03
// SEAN CHEN
// 15-104 A

var size = 125; // overall size of graphic
var flip = 1; // val to control rotation direction
var angle = 1; 
var angle2 = 1;
var angle3 = 1; // individual speed
var diff = 0 // shift from center circle

function setup() {
    smooth();
    createCanvas(400, 400);
    background(255,219,88);
}

function spin(speed, vari) { // white orbiting circles
    push();
    noStroke();
    rotate(radians(angle));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6); // each big stationary orbit circle
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // mouse further from center smaller size
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200); // mouse further from center distance larger
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200); // each small moving circles
    angle += speed*flip;
    pop();
}

function spin2(speed, vari) { // same as 'spin' but cyan
    push();
    noStroke();
    fill(0,255,255);
    rotate(radians(angle2));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle2 += speed*flip;
    pop();
}

function spin3(speed, vari) { // same as 'spin' but magenta
    push();
    noStroke();
    fill(255,0,255);
    rotate(radians(angle3));
    circle(0, size+diff, size*5/6);
    circle(size+diff, 0, size*5/6);
    circle(-size-diff, 0, size*5/6);
    circle(0, -size-diff, size*5/6);
    circle(size*2/3+vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(size*2/3+vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, size*2/3+vari/5, size*5/12*vari/200);
    circle(-(size*2/3)-vari/5, -(size*2/3)-vari/5, size*5/12*vari/200);
    angle3 += speed*flip;
    pop();
}

function draw() {
    var vari = dist(width/2, height/2, mouseX, mouseY) // distance from center to mouse
    background(0);
    translate(width/2, height/2); // new origin at center
    noStroke();
    circle(0, 0, size); // center circle
    spin3(1*vari/150, vari); // mouse closer to center slower, vice versa
    spin2(1.5*vari/150, vari); // for cyan
    spin(2*vari/150, vari); // for white
    if (mouseIsPressed) {
        flip = -1; // reverse rotation if pressed
    } else {
        flip = 1; // clockwise otherwise
    }
}

LO-03 (computer fabrication)

Computer fabrication in the current digital age is becoming increasingly commonplace as fabrication tools are becoming exponentially more complex than ever. For this LO, I will be discussing the “BLOOM” works by John Edmark. I think this project is an excellent marriage of the human body and art. The algorithms I assume are used to procedurally generate the form of these “blooming” sculptures. But the real magic happens through the combination of rotation speed and manipulating it to match the frame rates of the human eyes. As we can only see at a certain “refresh rate”, the rotation speed of the sculpture can affect the way the sculpture moves or morphs due to the speed in which we see each cell/module, creating unique frame animation styled sculptures. I had the privilege of seeing these works in real life and I can attest that they are quite mesmerizing.

PROJECT-02 (variable faces)

SEAN-02
// SEAN CHEN
// 15-104 A

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

function mouseClicked() {
    noStroke();
    background(232, 232, 228);

    var cntr = width / 2;
    var facex = random(width/4, width/2);
    var facey = random(width/4, width/2);

    // FACE BASE
    fill(255, 219, 88);
    var x = 10
    var ushift = random(-x, x);
    var rshift = random(-x, x);
    var dshift = random(-x, x);
    var lshift = random(-x, x);
    beginShape();
    curveVertex(cntr+ushift, cntr-facey/2+rshift);
    curveVertex(cntr+facex/2+ushift, cntr-facey/2+rshift);
    curveVertex(cntr+facex/2+rshift, cntr+dshift);
    curveVertex(cntr+facex/2+rshift, cntr+facey/2+dshift);
    curveVertex(cntr+dshift, cntr+facey/2+lshift);
    curveVertex(cntr-facex+dshift, cntr+facey/2+lshift);
    curveVertex(cntr-facex/2+lshift, cntr+ushift);
    curveVertex(cntr-facex/2+lshift, cntr-facey+ushift);
    endShape(CLOSE);
    
    // eye whites
    fill(255);
    var eyew = random(height/20, height/10);
    stroke(255);
    strokeWeight(eyew);
    beginShape(LINES);
    vertex(cntr-facex/4, cntr);
    vertex(cntr-facex/4, cntr-facey/4);
    vertex(cntr+facex/4, cntr);
    vertex(cntr+facex/4, cntr-facey/4);
    endShape();

    // pupils
    stroke(0);
    strokeWeight(eyew/4*3);
    var pupil = eyew/8*5;
    var lshift = random(-5, 5);
    var rshift = random(-5, 5);
    beginShape(POINTS);
    vertex(cntr-facex/4+lshift, cntr-5+2*rshift);
    vertex(cntr-facex/4+lshift, cntr-5-pupil+2*rshift);
    vertex(cntr+facex/4+rshift, cntr-5+2*lshift);
    vertex(cntr+facex/4+rshift, cntr-5-pupil+2*lshift);
    endShape();

    // eyelids
    beginShape(POINTS);
    stroke(255, 180, 88);
    strokeWeight(eyew);
    vertex(cntr-facex/4, cntr-facey/4);
    vertex(cntr+facex/4, cntr-facey/4);
    endShape();
    beginShape();
    noStroke();
    fill(255, 180, 88);
    vertex(cntr-facex/4-eyew/2, cntr-facey/4);
    vertex(cntr-facex/4+eyew/2, cntr-facey/4);
    vertex(cntr-facex/4+eyew/2, cntr-facey/4+eyew/2);
    vertex(cntr-facex/4-eyew/2, cntr-facey/4+eyew/2);
    endShape();
    beginShape();
    vertex(cntr+facex/4-eyew/2, cntr-facey/4);
    vertex(cntr+facex/4+eyew/2, cntr-facey/4);
    vertex(cntr+facex/4+eyew/2, cntr-facey/4+eyew/2);
    vertex(cntr+facex/4-eyew/2, cntr-facey/4+eyew/2);
    endShape();

    // eyebrows
    var broww = eyew/2;
    var browshift = random(-10, 10);
    stroke(0);
    strokeWeight(20);
    beginShape();
    curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr-facex/4, cntr-facey/4-eyew/2);
    curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
    endShape();
    beginShape();
    curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr+facex/4, cntr-facey/4-eyew/2);
    curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
    endShape();

    //lips
    var mouthw = facex/4*3
    var mouthshift = random(-100, 100);
    stroke(255, 38, 38);
    strokeWeight(random(30, 50));
    beginShape();
    curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
    curveVertex(cntr-mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
    endShape();
    stroke(0);
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
    curveVertex(cntr-mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
    endShape();

}

LO-02 (generative art)

The inspirational work for me this week was definitely Weird Faces by Moka. Previous to being exposed to this work, I always assumed computer generated art to have a certain aesthetic such as hard clean lines, or hyper data driven simulations. However, mokas delicacy and deconstructing his own style and recreating it through a series of algorithms seems to blend that line between computation and art for me. I suppose the algorithms have to somehow mimic the way his hand flows and decides on the shape of the faces as well as the style for the rest of the face. The styles I’m assuming he codes a couple simple algorithms and lets a random generator mix and match various “designs” together to create new ones. In this case, Moka’s artistic sensibilities directly show on the board through the algorithms directly dissecting and recreating his style in a new way.

https://www.mokafolio.de/works/Weird-Faces