Author: t.chen

Project 11 Generative Landscape

Planetscape?

sketch
//tjchen 
// project landscape 

var stars=[]; // array for circles 
var streaks=[]; // array for streaks
var speed = 3; // change for how zoom
// color initialization 
var r; 
var g;
var b;
// rate of change fo color 
var dr;
var dg;
var db;

function setup() {
    createCanvas(480, 480);
    //initalize objects
    for(i=0; i<=500; i++ ){
        var s =makeStar();
        var st=makeStreak();
        stars.push(s); 
        streaks.push(st);
    }
    //background color setup
    r = (random(255));
    g = (random(255));
    b = (random(255));
    dr = (random(-5,5));
    db = (random(-5,5));
    dg = (random(-5,5));
    }


function draw() {
    background(r,g,b);
    //set it up from the middle 
    translate(width/2,height/2);
    //draw the stars and streaks 
    for(i=0; i<500; i++){
        var s = stars[i];
        s.drawstar();
        s.updatestar()

        var st = streaks[i];
        st.drawstreak();
        st.updatestreak();
}
// color update 
    if (r>255 || r<0){
        dr= -dr;
    }
    if (g>255 || g<0){
        dg= -dg;
    }
    if (b>255 || b<0){
        db= -db;
    }
    r+=dr;
    g+=dg;
    b+=db;

}

//star construction 

function makeStar(){
    var star={
        x:random(-width,width),
        y:random(-height,height),
        z:random(width), // constant ratio for zoom 
        c:color(random(255),random(255),random(255)),
        drawstar: stardraw,
        updatestar: starupdate,
    }
    return star; 
}

function stardraw(){
    noStroke();
    fill(this.c);
    // draw stars but mapped to z 
    var dx = map(this.x/this.z,0,1,0,width);
    var dy = map(this.y/this.z,0,1,0,width);
    // map it for sizze increase 
    var r = map(this.z,0,width,20,0);  
    ellipse(dx,dy,r);
}

function starupdate(){
    this.z-=speed;
    // reset
    if (this.z<1){
        this.z = width;
        this.x = (random(-width,width));
        this.y = (random(-height,height));
    }

}

// streak construction 
function makeStreak(){
    var streak={
        x:random(-width,width),
        y:random(-height,height),
        z:random(width),
        c:color(random(255),random(255),random(255),50),
        pz: this.z, // previous location of z 
        drawstreak: streakdraw,
        updatestreak: streakupdate,
    }
    return streak; 

}

function streakdraw(){
    strokeWeight(5);
    stroke(this.c);
    var dx = map(this.x/this.z,0,1,0,width);
    var dy = map(this.y/this.z,0,1,0,width);
    var px = map(this.x/this.pz,0,1,0,width);
    var py = map(this.y/this.pz,0,1,0,width); 
    //draw line 
    line(dx,dy,px,py);
}

function streakupdate(){
    this.z-=speed;
    // reset 
    if (this.z<1){
        this.z = width;
        this.x = (random(-width,width));
        this.y = (random(-height,height));
        this.pz = this.z;
    }

}

LO 11 Women in Computational Deisgn

Jenny Wu is a co-founder at the architectural design firm Oyler Wu collaborative and Her own jewelry design company Lace by Jenny Wu. The firm is a highly experimental architectural practice that engages architecture and design with a hyper critical lens that focuses on research and fabrication. Their work crosses a variety of scales, from furniture detailing to large scale institutional buildings. Jenny Wu a classically trained architect received her alma mater from Columbia University and then Harvard graduate school of design, is currently a faculty member at the Southern California Institute of Architecture. What’s interesting about her work is that there’s a strong sense of connection between the jewelry she designs to the architectural work the firm produces, that engages the power of digital fabrication in relations to formal studies that relate back to the human in a variety of scales from the intimate jewelry to the inhabitable space of a building.

https://www.oylerwu.com/

Project 10 Sonic Story

This project is about the life of a Balloon.

It inflates, slightly deflates while floating up, quickly deflates and shoots around the canvas, inflates again, then finally popping.

sketch
// tjchen 
// hand in 10 project 
// life of a balloon 


var vol = 0.75 // set global volume 

function preload() {
    // call loadImage() and loadSound() for all media files here
    deflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/shortdeflate.wav");
    inflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/inflate.wav");
    bpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/pop.wav");
    slowDeflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/longdeflate_2.wav");
}

function soundSetup() { // setup for audio generation
        deflate.setVolume(vol);
        inflate.setVolume(vol);
        bpop.setVolume(vol);
        slowDeflate.setVolume(vol);
}

// set up balloon movement 
function balloonStep(){
    this.dx = random(-20,20);
    this.dy = random(-20,20);

    //first inflate

    if (this.age > 0 & this.age <= 200){
        this.size += 1; 
    
    //slow deflate 

    } else if (this.age > 200 & this.age <= 400){
        this.y -= 1; 
        this.size -= 0.3

    // quick deflate and fly around 

    } else if (this.age > 400 & this.age <= 600){
        this.x += this.dx;
        this.y += this.dy;
        if (this.x > width) { // bounce off right wall
            this.x = width - (this.x - width);
            this.dx = -this.dx;
        } else if (this.x < 0) { // bounce off left wall
            this.x = -this.x;
            this.dx = -this.dx;
        }
        if (this.y > height) { // bounce off bottom
            this.y = height - (this.y - height);
            this.dy = -this.dy;
        } else if (this.y < 0) { // bounce off top
            this.y = -this.y;
            this.dy = -this.dy;
        }
        this.size -= 0.4;

    //inflate again 

    }else if (this.age > 600 & this.age <800){
        this.size += 2;
        if(this.size > width){

    // balloon pops

            rect(0,0,width,height);
        } 

    // resets 

    } else if (this.age>800) {
        this.age = 0;
        this.size = 20;
        this.x = width/2;
        this.y = height/2;
    }
    this.age ++; 
}

function balloonDraw(){
    noStroke();
    fill(255,0,0);
    circle(this.x,this.y,this.size);
}

function makeballoon(px,py,pdx,pdy){
    balloon = {x: px, y: py, dx: pdx, dy: pdy, size: 20, stepfunction: balloonStep, drawfunction: balloonDraw, age: 0}
    return balloon; 
}

function setup() {
    createCanvas(400, 400);
    useSound();
    var b = makeballoon(width/2, height/2, random(-10,10), random(-10,10));
}

function draw() {
    background(0);
    balloon.stepfunction();
    balloon.drawfunction();
    // pop! text graphic 
    if (balloon.size > width){
            push();
            textSize(150);
            textAlign(CENTER);
            fill(0);
            text('POP!',width/2,height/2+40);
            pop();
    }
    var bo = false;

    //check balloon age and toggle sound based on it's state 

    if (balloon.age >= 0 & balloon.age <= 1){
       bo = true 
       if (bo == true){
            inflate.play();
       }
    }
    if (balloon.age >= 200 & balloon.age <= 201){
       bo = true 
       if (bo == true){
            slowDeflate.play();
       }
    }
    if (balloon.age >= 400 & balloon.age <= 401){
       bo = true 
       if (bo == true){
            deflate.play();
       }
    }
    if (balloon.age >= 600 & balloon.age <= 601){
       bo = true 
       if (bo == true){
            inflate.play();
       }
    }
    if (balloon.age >= 750 & balloon.age <= 751){
       bo = true 
       if (bo == true){
            bpop.play();
       }
    }
}

Looking outwards 10 computer music

Pixelh8 is a well known musician and digital music researcher that really pioneered the digital music field early in the 2000’s developing a software calle dMusic tech for the nintendo gameboy and the Game Boy Advance as well as the Nintendo DS, which turned the gaming consoles in to real time synthesizers similar to the ones electronic musicians use now on live stages. What’s interesting about Chipwave is that it has evolved into a subgenre of electronic music with a group of passionate followers that delve deep into modding and making music out of early digital devices such as a Gameboy or NES. This type of music is characterized by their synthetic sounds we often associate with electronics. What’s important about their work is that it really gives us an opportunity to look into a piece of living computational history. A look into what it was like when computational music was just begining to become a thing.

Youtube user JustinThursday demo-ing Music Tech on the original GameBoy

LO 09

In catbug’s Looking outwards 6 post, catbug talks about Robbie Barrat’s Neural Network Balenciaga series. The series is comprised of a line of fasion items produced by and amalgamation of an AI’s interpretation of Balenciaga’s lookbook, runway shows, and published images. What is interesting about this is that it walks the fine line, like catbug says, “creativity and mimicry”. The AI’s interpretation at the same time not only allows us to analyze what makes the Balenciaga line Balenciaga, but also begins to examine the idea of a designer’s true need to design. If there is a commonality within all the design work done by this luxury fasion house, what’s the point of hiring new designers? Wouldn’t a computer algorithm be enough to generate the next season of their line? As long as the inputs for the current trend and the “Balenciaga DNA” is present, a continuity of their design legacy is sure to last.
The ephemorality of human led design is upon us.

Looking Outwards 06: Randomness

https://www.ssense.com/en-us/editorial/fashion/do-androids-dream-of-balenciaga-ss29?utm_term=collabshare

Project 9 Portrait

The project uses transparency and the mouse IS Pressed function to achieve a variety of detail with the newly generated portrait. The new portrait can range from highly abstract to an almost monet like blurry vision.

Hold the mouse button to scramble the image.

Release the moue button to make the image clear

sketch
//tjchen 
//hand in 9 project 

var img;
var pts;// amount of divisions on the canvas
var steps;

function preload(){
    //loads teh image
    img= loadImage("https://i.imgur.com/68RyRgM.jpg");
}
function setup() {
    background(255);
    frameRate(10);
    createCanvas(480, 270);
    //center image on canvas
    imageMode(CENTER);
    noStroke();
    img.loadPixels();
    //generate random grid subdivision
    pts = int(random(1,40));
    print(pts); // for dbugging
}

function draw() {
    //generate grid
    for (let x = 0; x<width; x+=width/pts){
        for(let y = 0; y<height; y+=height/pts){
            //get color information from pixel
            let c = img.get(x,y);
            noStroke();
            //create the subdivided pixelated image 
            fill(c[0],c[1],c[2],10);
            square(x,y,width/pts);
        }
    }

    //hold mouse to rescramble the image 
    //release to unblur
    if(mouseIsPressed){
        pts = int(random(1,40));
    } 
}

Looking outwards 08

Dan Shiffman is a professor at the ITP (interactive telecommunications program) at the New York University’s Tisch school of art. He is known for his youtube channel Coding Train where his focus is trying to make coding and scripting more accecible to people. He is also known to have co-created an open source graphics library called Processing, which is based on the JAVA language but aims to teach non-programmers the fundamentals of the world of programming. To me what is most admirable of Shiffman is his approachability and down to earthness. Programmers and computer scientists are stereotypically seen as these whizzes that are unapproachable residing in the ivory towers of whatever institution they are part of. But with shiffman, his ideals and actions break that stereotype and brings code to the people. Not only are his youtube tutorials funny and engaging, he isn’t afraid of making mistakes on camera. This is evident in the intro video of his youtube channel where he has a supercut of him saying “whoops” during his live and regular tutorials.

https://shiffman.net/

LO 07 Data Visualization

TableTop Whale is an online blogger currently working in at the New York Times graphics department. Her work is specialized towards information design with a focus o science communication. Her PHD work was done in Biology and Data science. On her blog the tableTop whale, she posts a variety of data visualization graphics. I think what intrigues me the most is her explorations on the geology of various planets of the solar system. Mapping terrain and topography has been an interest of explorers for centuries even before the age of exploration. In the past cartographers used various analog techniques to map out the world as we know today. Now, with the avdvent of GIS data, we have the capability creating maps almost on demand with digital tools such as ARC GIS and a variety of other Geospatial data visualizer. What’s interesting about TableTop Whale’s work is that she uses USGS’s data sets for the planets, but renders them in a style that evokes maps of the age of sail. This is interesting because, the style evokes a sense of unknown and allows for out imagination to run wild about the possibilities of new uncharted territory. That’s also what’s so special about having large datasets to manipulate and visualize, it can allow for new information to emerge from things we already know about. Allowing us to dive even deeper into what we already know possibly defining the unknown.

https://tabletopwhale.com/index.html

Project 7 Curves Composition

There are two hypotrochoids that are being drawn simultaneously in this program, as Mouse Y changes you can alter the pedals of the hypotrochoids., the lines redraw themselves every 3 loops around the circle so as you move Mouse Y around you begin to get an overlay of various patterns.

sketch
//tjchen 
// section a 
// 07 project composisiton with curves
var t = 0
var numPoints = 100;// global set up of num of points on circle
var lineX = [];
var lineY = [];
var lineX2 = [];
var lineY2= [];
function setup() {
    createCanvas(480, 480);
    background(0);
    strokeWeight(1);
    stroke(255);
    noFill();
}


function draw() {
    background(0);
    translate(width/2,height/2)
    stroke(255,0,0);
    draw_hypotrochoid_1(t);
    stroke(0,255,0);
    draw_hypotrochoid_2(t);
    t+=1; 
}


function draw_hypotrochoid_1(t){
    var a = 150; // radius of large circle 
    var b = 8; // radius of spinning circle 
    var h = mouseY/10; // location of fixed point 
    var xH= (a-b) * cos (radians(t)) + h * cos(((a-b)/b)*(radians(t)));
    var yH = (a-b) * sin (radians(t)) - h * sin(((a-b)/b)*(radians(t))); 
    circle(xH,yH,10);;
    lineX.push(xH);
    lineY.push(yH);
    if (radians(t)>4*PI){ // 4 trips around the circle before redrawing circle 
        lineX.shift();
        lineY.shift();
    }
    strokeWeight(1);
    for (i=0; i < lineX.length-1; i++){
        line(lineX[i], lineY[i], lineX[i+1], lineY[i+1]);
    }


} 

function draw_hypotrochoid_2(t){
    var a2 = 200; // radius of large circle 
    var b2 = 8; // radius of spinning circle 
    var h2 = mouseX/10; // location of fixed point 
    var xH2= (a2-b2) * cos (radians(t)) + h2 * cos(((a2-b2)/b2)*(radians(t)));
    var yH2 = (a2-b2) * sin (radians(t)) - h2 * sin(((a2-b2)/b2)*(radians(t))); 
    circle(xH2,yH2,10);;
    lineX2.push(xH2);
    lineY2.push(yH2);
    if (radians(t)>4*PI){ // 4 trips around the circle before redrawing circle 
        lineX2.shift();
        lineY2.shift();
    }
    strokeWeight(1);
    for (i=0; i < lineX2.length-1; i++){
        line(lineX2[i], lineY2[i], lineX2[i+1], lineY2[i+1]);
    }


}
the Circle transitioning
curves in one composition

curves in another composition

Project 06 Abstract Clock

In this project the aim was to create various patterns based on numerical operations on the values of time it self. The resulting clock behaves more like a timer, that resets every 20 seconds. There are in reality 6 different types of patterns that can be created based on manipulating the numeric value of seconds, but by overlaying two 10 second patterns, there begins to be a higher level of nuance to the resulting geometries.

sketch
//tjchen
//section a
//abstract clock

var angle = 0;
var r = 0; // distance from center 
var framecount= 0;

function setup() {
    createCanvas(480, 480);
    background(0);
    noStroke();
    frameRate(60);
}

function draw() {
//map time to color
    var minutecolor = map(minute(),0,59,0,255);
    var secondcolor = map(second(),0,59,0,255);
//reset's stopwatch after 20 seconds 
    if(second()%20==0){
        fill(0);
        square(0,0,width);
    }
//new pattern every 10 seconds
    if (second()%10 === 0){
        angle=0;
        r = 0 ;
        framecount = 0;
    }
    var cenX = (width/2);
    var cenY = (height/2);
//draw circles 
    push();
    translate(cenX,cenY);
    x = r*cos(radians(angle));
    y = r*sin(radians(angle));
    fill(random(255),minutecolor,secondcolor);
    circle(x,y,3);
    r += 0.75;
// creates circle pattern 
    angle += map(second(),0,59,0,360); 
    pop();
    framecount+=1
}