October 2020 – Page 51 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 5 – Wallpaper

function setup() {
    createCanvas(410, 380);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(241, 224, 197);
    
    //flowers
    for(var column = 1; column <= 7; column += 1) {
        //column 1
        push();
        translate(50, 50 * column);
        flowers(1);
        pop();

        //column 2
        push();
        translate(150, 50 * column);
        flowers(1);
        pop();

        //column 3
        push();
        translate(250, 50 * column);
        flowers(1);
        pop();

        //column 4
        push();
        translate(350, 50 * column);
        flowers(1);
        pop();

        //leaves
       for(var row = 1; row <= 7; row += 1) {
            //row 1
            push();
            translate(100, 50 * row);
            leaves(1);
            pop();

            //row 2
            push();
            translate(200, 50 * row);
            leaves(1);
            pop();

            //row 3
            push();
            translate(300, 50 * row);
            leaves(1);
            pop();
        }

        //dots
        for(var shape = 1; shape <= 40; shape += 1) {
            fill(41, 39, 76);

            //shape 1
            push();
            translate(10 * shape, 8);
            circle(0, 0, 3);
            pop();

            //shape 1
            push();
            translate(10 * shape, height - 8);
            circle(0, 0, 3);
            pop();
        }

        }

function flowers() {

    noStroke();
    push();
    translate(0, -10);
    //pedal color
    fill(255, 104, 107);
    //pedals
    circle(-10, -4, 20);
    circle(10, -4, 20);
    circle(0, -11, 20);
    circle(8, 8, 20);
    circle(-8, 8, 20);
    //center pedal
    fill(247, 230, 48);
    circle(0, 0, 10);
    pop();

}

function leaves() {
    fill(0, 168, 120);
    noStroke();

    push();
    translate(0, -10);
    rotate(radians(320));
    arc(0, 0, 27, 7, 0, PI, OPEN);
    arc(0, 0, 27, 7, PI, 0, OPEN);
    pop();


}

}

For this project, I wanted to create a simple, yet visually intriguing wallpaper. I was inspired by Tyler the Creator’s clothing brand, Golf. The simple shapes are repeating patterns are attractive to the eye.

I used for loops to complete the project. I first had to create a function for the different components in the design, such as the flower, the leaves and the dots. Then, using the for loop, I just called the functions and translated it accordingly.

LO – 05

The 2004 film, The Polar Express, is a film I am very fond of. It is a film I have watched every year over the holidays since it was released. It brings back memories of when I was younger, the biggest being how I thought it was so cool that they animated the characters after actors, like Tom Hanks as the Conductor (among other characters) and Josh Hutcherson as the Hero Boy (although he didn’t voice him). I didn’t know what it was called at the time, I just remember my older siblings telling me they made the characters look like the voice actors. I know the term now to be called motion-capture (mo-cap), which digitally captures actors movements, features, emotions, etc., with a computerized camera to help develop virtual characters . Director Robert Zemeckis brought on the Sony ImageWorks team to insert actors like Tom Hanks into a CGI environment, called Performance Capture. Performance Capture is an improvement of mo-cap that uses digital cameras with a 360-range to help simultaneously record multiple actors’ facial expressions and body movement. Jerome Chen’s was the visual effects supervisor of ImageWorks who initially worked on the advancement of mo-cap, that was later called Performance Capture (as mentioned above). Along with the mo-cap aspect, there was a lot of time put into the rest of the animations (like the train, etc.). However, the biggest thing that stood out to me when I was younger were the characters. Zemeckis really wanted to articulate the emotion of each character, and with too small a budget to do live action, he turned to mo-cap and created a world that is hard not to love as it gets played every holiday season. To check out more information about the production of this film check out the link below:

Performance Capture CGI Technique In ‘The Polar Express’: An Advance For Animation

And check out the trailer if you’ve never seen The Polar Express:

Project-05-Wallpaper

da ‘working on 104 for tonight’ wallpaper

wallpapercomp Download

function setup() {
    createCanvas(600, 600);
    background(30);
    rectMode(CENTER);
    angleMode(DEGREES);
    noLoop();
}

function draw() {
    for(let i=-100; i<800;i+=200){
        for(let j=-300; j<800;j+=400){
            push();
            translate(j,i);
            patterndraw();
            pop();
        }
    }
for(let i=-200; i<800;i+=200){
        for(let j=-100; j<800;j+=400){
            push();
            translate(j,i);
            patterndraw();
            pop();
        }
    }
}

function patterndraw(){
    linebg();
    cord();
//display cord
    stroke(0);
       beginShape();
        curveVertex(0,-30);
        curveVertex(0,-30);
        curveVertex(40,-30);
        curveVertex(40,30);
        curveVertex(50,45);
        curveVertex(50,45);
    endShape();
    noStroke();
//table legs
    fill(60);
    rect(-60,30,5,60);
    rect(60,30,5,60);
//tabletop
    fill(75);
    rect(0,0,150,10);
//display
    fill(20);
    rect(0,-35,70,40);
    fill(210);
    rect(0,-35,65,35);
//lines on display
    strokeWeight(2);
    stroke(80);
    for(let r=0; r<26; r+=4){
        line(-30,-48+r,random(-27,27),-48+r);
    }
    noStroke();
//coffee cup
    //cup
        fill(120);
        rect(-50,-12,10,14,0,0,4,4);
    //handle
        noFill();
        stroke(120);
        strokeWeight(2);
        arc(-46,-12,8,8,-90,90);
        noStroke();
    //steam
        fill(60);
        beginShape();
            curveVertex(-50,-20);
            curveVertex(-50,-20);
            curveVertex(-52,-23);
            curveVertex(-47,-28);
            curveVertex(-50,-32);
            curveVertex(-50,-32);
        endShape();
//floor
      fill(255,255,255,20);
        beginShape();
            curveVertex(-63,60);
            curveVertex(-63,60);
            curveVertex(0,85);
            curveVertex(63,60);
            curveVertex(63,60);
        endShape();
//light casting
    fill(156,196,255,60);
    beginShape();
        curveVertex(0,-75);
        curveVertex(0,-75);
        curveVertex(85,0);
        curveVertex(0,85);
        curveVertex(-85,0);
        curveVertex(0,-75);
        curveVertex(0,-75);
    endShape();
//lamp shade
    fill(160);
    beginShape();
        vertex(-10,-75);
        vertex(10,-75);
        vertex(20,-65);
        vertex(-20,-65);
    endShape();
//person/chair
    //head
        fill(20);
        ellipse(0,-30,20,25);
    //humanarms
            ellipse(-26,-2,10,13);
            ellipse(26,-2,10,13);
            triangle(-31,-4,-20,-2,-20,-20);
            triangle(31,-4,20,-2,20,-20);
    //chairbase
        //vert part
            rect(0,40,6,35);
        //supports
            triangle(0,60,-30,60,0,50);
            triangle(0,60,30,60,0,50);
    //human legs
        beginShape();
            vertex(-18,60);
            vertex(-10,60);
            vertex(-6,30);
            vertex(-16,30);
        endShape();
        beginShape();
            vertex(18,60);
            vertex(10,60);
            vertex(6,30);
            vertex(16,30);
        endShape();
    fill(35);
    //seatback
        beginShape();
            vertex(-23,-22);
            vertex(23,-22);
            vertex(20,30);
            vertex(-20,30);
        endShape();
    //chairarms
        rect(-26,5,10,5);
        rect(26,5,10,5);
//computer
    fill(110);
    rect(50,45,18,30);
//power symbol on computer
    noFill();
    stroke(255);
    strokeWeight(1);
    arc(50,45,8,8,-60,-120,OPEN);
    line(50,40.5,50,44);
}

function linebg(){
    fill(85,88,77);
    noStroke();
    beginShape();
        curveVertex(-80, 50);
        curveVertex(-80, 50);
        curveVertex(-20,30);
        curveVertex(20,-30);
        curveVertex(120, -50);
        curveVertex(120, -50);
    endShape();
}

function cord(){
    noFill();
    strokeWeight(3);
    stroke(110);
    beginShape();
        curveVertex(-150, -40);
        curveVertex(-150, -40);
        curveVertex(-150,-41);
        curveVertex(-110,0);
        curveVertex(-45,-100);
        curveVertex(0,-71);
        curveVertex(0, -70);
        curveVertex(0, -70);
    endShape();
}

I used a quick drawing to understand how the pieces that connected from tile to tile, as well as the layering of all the objects because some were semi-translucent. I tried to add a little visual intrigue with randomized text lengths.

LookingOutwards-05

The Zoo, 2004

The project I chose is titled “The Zoo” by German 3D graphics design firm Zeitguised. I admire the ‘real-world’ utilization of the rendering software here, as many of these types of animated computer renders are done in synthetic environments, so having a synthetic subject interacting with a real environment adds a lot to the piece in my opinion. I know that algorithms exist that use a technology called ray tracing to understand how light interacts with objects, and algorithms define the different ‘materials’ as having different opacities, reflectiveness, and roughness. Using these algorithms in combination with real light and environment data only adds to the realism of these surreal forms, objects, and animations, making this project very successful.

“The Zoo” Zeitguised, 2004
https://vimeo.com/2917970
https://zeitguised.studio/