Category: SectionD

LO 5 – Computer Graphics

Christoffer Bjerre – Echoes of Light (2016)

Chris Bjerre is a multidisciplinary motion graphic designer whose works are dark, intricate, and maximalistic. His interest in dark and moody atmosphere with a monochromatic palette is seen all throughout his works, especially Echoes of Light. Echoes of Light is an exploration project of geometric infinity. The film shifts from a light (white) to dark (black) scheme. The structures create a chaotic pattern from a simple paradigm.  The top softwares he uses are After Effects, Premier Pro, Adobe Illustrator. This specific project’s renders heavily relied on a software called Octane compiled and produced in a software called Cinema 4D. Bjerre states, “the fractals are just made with any type of geo and multiple instances of moextrude.” I admire the shapes and sharp color contrast in this video the most.

Echoes of Light by Chris Bjerre / Music by Johann Johannsson

LO 05 – 3D Computer Graphics

Peter Tarka

AUDI Q-riosity

Today, I will be talking about a 3D rendering project done by Peter Tarka in the Niche & Wearesoclal design agency for Audi UK. For Audi’s advertising campaign in the UK, Peter was asked to think of a new space for the vehicles to exist in—representing the car’s personality and features in abstract form. I admire this project because through shapes and color, the artist was able to successfully encapsulate the branding of Audi, yet still modernizing the vehicles for the advertising campaign. Peter Tarka effectively creates a new innovative (dreamy) environment, merging the artificial world with the real-life product. I believe that Peter used a 3D rendering software to complete the designs: perhaps C4D, or keyshot, etc. It is also very possible that Peter implemented code in order to streamline his code, or apply physics, or rules for the animation. 

Visit the portfolio here

Project 5 – Wallpaper

sketch
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.

Tyler the Creator – Golf

Project-05-Wallpaper

da ‘working on 104 for tonight’ wallpaper

wallpapercompDownload

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/

Project 04-String Art

sketch
var dx2;
var dy2;
var dy3;
var numLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    noStroke();
    line(200, 50, 200, 250);    //vertical guide line
    line(100, 50, 300, 250);    //diagonal guide line
    dx2 = (200)/numLines;
    dy2 = (200)/numLines;
    dy3 = (300)/numLines;
}

function draw() {
    background(0);

    // outer ring
    push();
    translate(200, 150); //origin in the middle
    for (let i = 1; i <= 200; i += 1) {
        rotate(2);      //rotating around the origin
        stroke(184, 156, 46, 70)
        line(-50, -130, 200, -150);
    }

    pop();
    //  the middle square
    var x1 = 100;
    var y1 = 250;
    var x2 = 100;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        stroke(111, 162, 179, 150);
        line(x1, y1, x2, y2);
        line(x1+200, y1-200, x2, y2);
        x2 += dx2;
        y2 += dy2;
    }

    var x1 = 100;
    var y1 = 150;
    var x2 = 200;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        //biggest diamond
        stroke(40, 77, 89);
        line(x1-100, y1, x2, y2-100);
        line(x1-100, y1, x2, y2+100);
        line(x1+300, y1, x2, y2-100);
        line(x1+300, y1, x2, y2+100);

        //smallest diamond
        stroke(111, 162, 179);
        line(x1, y1, x2, y2);
        line(x1+200, y1, x2, y2)
        y2 += dy2;
    }
    noLoop();
}

This is my string art inspired by a diamond ring. I wanted the diamonds to look three-dimensional.

LO 04- Sound Art

This interactive sound art exhibition made in 2016 is created by Anders Lind, a Swedish composer. The exhibition is called LINES, which is connected to the floors, walls, and ceiling to create sensors that allow the audience to be able to make music with the movement of their hands along the walls. While no musical experiences are required, this project brings novelty and inspiration to those who are new to music, allowing them to interact with musical notes with their own bodies. I am inspired by the exhibition because LINES creates a unique form of musical instrument using computer interaction and programming.

Project-04 stringArt

project-04-stringDownload
	// Huijun Shen  session D
    // huijuns@andrew.cmu.edu

var gray = 0;



 
function setup() {
    createCanvas(600,450);
    background(100);

    strokeWeight(0.5);
    
}
 
function draw() {
    
    background(100);

    
    gray = mouseX/ 2;
    
    fill(255-gray);
    noStroke();
    circle(width / 2, height / 2, 450);


    

    dist(mouseX , mouseY , width/2, height/2 ) 

    for(var i = 50; i <= 600; i += 50){
        if(dist (mouseX, mouseY, width/2, height/2 ) < 225  ){
        stroke(255);
        line(i, 0, constrain(mouseX, 75, 525), constrain(mouseY,0,450));
        line(constrain(mouseX, 75, 525), constrain(mouseY,0,450), i , height);
    }   else {
        stroke(0);
        line(i, 0, constrain(mouseX, 75, 525), constrain(mouseY,0,450));
        line(constrain(mouseX, 75, 525), constrain(mouseY,0,450), i , height);
    }

    }

    for( var e = 30; e <= 450 ; e += 10){
        line(0,e,mouseX,i);
        line(600,e,mouseX,i);
    }
    
}

LookingOutwards – 04

http://hertzianlandscapes.com/

This project Hertzian Landscapes is created by Richard Vijgen. It reflect the invisible sound in a scientific and visual way.

This project uses a very scientific way to create reliable interaction between human and sound. The project setting is well thought and effective.

Also this project thoughtfully categorizes sound frequencies into familiar sub-groups, so that participants can relate the abstract waves into something daily and understandable.

I guess, the program maybe collect spatial data in certain frequencies then transmit them into program then translate them into graphic patterns. When people move, the spatial data is changing at the same time, which will result in the graphical changes.

I don’t think the aim of this project is to demonstrate the author’s art taste, but the project demonstrates a new way of people interacting with sound.

It is very innovative.




Hertzian Landcape #1 from R Vijgen on Vimeo.

Project 4 – String Art

sketch.sll4Download
// Sarah Luongo
// Section A

function setup() {
    createCanvas(400, 300);
    background(232, 240, 255);
}

function draw() {
    for (var i = 0; i <= 150; i++) {
	stroke(120, 150, 180);
	
	// Blue background horizontal lines
	line(0, height/2- i, width, height/2 - i);
        
	// Blue intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
        stroke(132, 205, 190);
	
	// Green background horizontal lines
	line(0, height/1.5 + i, width, height/1.5 + i);
	
	i += 1;
    }

    for (var i = 0; i <= 75; i++) { 
	stroke(210, 200, 220);
	// Pink intersecting lines at the bottom
	line(0, height/2 + (i/2), 3 * i, height); // left
	line(width, height/2 + (i/2), width - (3 * i), height); // right
	
	// Pink intersecting lines at the top
        line(width-(6*i), 0, 0, height/2 + (2*i)); // left
        line(6*i, 0, width, height/2 + (2*i)); // right
    }
    // Pebbles
    fill(230, 230, 250);
    ellipse(mouseX, mouseY, 100, 50);
}

I want to create something that resembled a bag of pebbles. So, I made a see-through, colorful, bag using string art, and an ellipse that moves around behind the string art to look like a bunch of pebbles. I was also attempting to make the bag look open.