Category: SectionD

Looking Outwards 05: 3D Computer Graphics

For my work I chose another work/series by artist Andy Lomas. I’ve always been fascinated by the physical properties and designs of cells and the intricate geometry of the microcosm, and Andy Lomas has created a series which tickles that one specific part of my brain. This is the Cellular Forms series, which explores generalizable natural forms which create these cell-like three dimensional structures. I find this incredibly interesting just because of the uniqueness of each cell. From one which looks like it’s composed of petals, to another which looks like a baseball made of brain. The amazing variety of natural forms which were analyzed and recreated to generate these structures is mind boggling. 

Cellular Form 18
Cellular Form 17

But not only that, there’s a full explanation of the algorithms used in the piece. It’s a really fascinating concept which attempts to simulate the natural development of a colony of cells into a sort of organism using various factors like nutrition, light, and proximity. The simulations are also staggeringly detailed, as they’re actually composed of what seem like millions of generated cells. This approach to generating naturalistic forms is really unique, and it is just so satisfying to look at, wouldn’t you agree?

SydneyCha-Project-05-Wallpaper

For this project, I wanted to create a comical wallpaper with bright colors. Here is the finished result.

sketch
//Sydney Cha
//Section D
 
function setup(){
    createCanvas(600, 600);
    background(255);
    noStroke(); 
}

function draw() {
    background(0, 150, 150);
    drawGrid();
    noLoop();
}

function drawGrid() {
    var red = 90;
    var blue = 90;
    for (var y = 0; y < height + 40; y += 40) {
        blue = 10;
        for (var x = 0; x < width + 30; x += 30) {
            fill(red, 0, blue);
            arc(x, y, 30, 80, 0, PI);
            fill(200, 200, 0);
            rect(x, y, 20, 20);
            rect(x-15, y+10, 10, 20);
            blue += 10;
        }
        red += 10;
    }
}

SydneyCha-LookingOutwards-05

Fragstein’s promotional video for LAMY Safari

Michael Fragstein is a 3d graphic artist whose main works are promotional videos for LAMY, a company that modernized the traditional fountain pen. Below is a link to his personal portfolio site.

https://fragstein.net

This 2019 special edition promotional video showcases new colors for the LAMY Safari pen in an unconventional way. Fragstein uses the three colors as a consistent theme for the video, making the colors come to life beyond the confines of the pen. Personally, the colors remind me of Easter, and if I were to make a promotional video for this line, I would’ve likely defaulted to rendering floating blobs or orbs. I particularly admire the different ideas/scenes Fragstein rendered to the music (which he also created). The two that I find the most creative are at the 15 second and 25 second marks.

Although it’s not explicitly stated, my guess is that Fragstein uses Blender, a 3D modeling program, for his work. Quite different from what we do in this class, Blender works a lot like modeling and stretching clay, just digitally. Regardless, I’m inspired by Fragstein’s dynamic and eye-catching work and hope to achieve a similar effect using p5.js (or other languages, if possible) to create captivating pieces.

CREDITS:

LAMY aion / Special Edition 2019Client: LAMY
Concept, Artdirection, Production: Büro Achter April / Michael Fragstein
Production Team: Johannes Rauch, Raphael Rau, Thomas Nathan, Jonas Anetzberger, Michael Fragstein
Music & Sound: Marc Fragstein

Project 05: Wallpaper

sketch
//amyhu
//amyhu@andrew.cmu.edu
//section d
//project 05

var s = 100

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

function draw() {
    //first column 
    for(let y = 0; y <= 600; y += 100){
        for(let x = 0; x <=600; x += 200){
            drawSquare(x,y);
        }
    }

    //offset column
    for(let y = -s/2; y <= 600; y += 100){
        for(let x = s; x <=600; x += 200){
            drawSquare(x,y);
        }
    }
}



function drawSquare(x,y){
    fill(50,10,40);
    noStroke();
    square(x,y,s);


    fill(130,2,99);
    arc(x+s,y,s,s,(radians(90)),-(radians(180)));
    fill(217,3,104);
    arc(x,y,s,s,0,(radians(90)));
    fill(234,222,218)
    arc(x,y+s,s,s,(radians(270)),(radians(0)));
    fill(46,41,78);
    arc(x+s,y+s,s,s,(radians(180)),(radians(270))); 
}

//offseted column
// function drawSquares(a,b){
//     fill(240);
//     square(x,y,s);
//     fill("red"); 
//     arc(x+s,y,s,s,(radians(90)),-(radians(180)));
//     arc(x,y,s,s,0,(radians(90)));
//     arc(x,y+s,s,s,(radians(270)),(radians(0)));
//     arc(x+s,y+s,s,s,(radians(180)),(radians(270))); 
// }

LO 05- 3d computer graphics

I looked at the project To All The Good Books by Hao-Yun Cheng. The project showcases a boy reading books and looks at an imaginary scene of a small town with books as buildings. The artist’s inspiration behind the design is his love for books way which can allow him to immerse himself in imagination. The scene on the table is representative of the imagination of the land with books. This project was created using a combination of 3d modeling software and photography images to create the final outcome. This project also shows the possibilities with 3d computer graphics and rendering software to create what can only be imagined and combine with realistic elements to tell a story.

Link

Wallpaper/fabric

fabric sketch
function setup() {
    createCanvas(620, 600);
    background('skyblue');
}

function draw() {
    //blue patches
    for(let x=10; x<width; x+=240){
        for(let y=0; y<height; y+=240){
            patch(x,y);
        }
    }

    //other blue lol
    for(let x=130; x<width; x+=240){
        for(let y=120; y<height; y+=240){
            patchtw(x,y);
        }
    }

    //pig moving etc
    for(let x=70; x<width; x+=120){
        for(let y=50; y<height-50; y+= 120){
            pigg(x, y);       
        }
    }

    //rows of stitch up and down
    for(let x=10; x<width; x+=120){
        for(let y = 10; y<height; y+=20){
            cross(x, y);
        }
    }

    //row of stitch across
    for(let y =120; y<height; y+=120){
        for(let x=10; x<width; x+=20){
        cross(x,y);
        }
    }

}



function pigg (x, y){
    strokeWeight(1);
    stroke('black');
    fill('pink');
    //legs
    rect(x - 30, y, 10, 60);
    rect(x + 20, y, 10, 60);
    //bod
    ellipse(x, y, 100, 80);
    //ears
    triangle(x-10, y-20, x-20, y-15, x-20, y-30);
    triangle(x+10, y-20, x+20, y-15, x+20, y-30);
    //head
    ellipse(x, y, 50);
    //snout
    push();
    fill('plum');
    ellipse(x, y+10, 20, 10); 
    pop();
    //eyes
    push();
    fill('black');
    ellipse(x-10, y-5, 5);
    ellipse(x+10, y-5, 5);
    //nose hole
    ellipse(x-5, y+10, 2);
    ellipse(x+5, y+10, 2); 
    pop(); 
 
}


function cross(x,y){
    strokeWeight(1);
    stroke('yellow');
    line(x-10, y-10, x+10, y+10);
    line(x-10, y+10, x+10, y-10);
}

function patch(x,y){
    noStroke();
    fill('darkcyan');
    rect(x, y, 120, 120);
}

function patchtw(x,y){
    noStroke();
    fill('lightseagreen');
    rect(x, y, 120, 120);
}

Project 5 – Wallpaper

I had a really hard time doing this one, the array functions were giving me difficulty and at one point I created a file that just crashed the html file permanantly so I kept having to make more files but I figured them out in the end and ended there.

sketchDownload
var s = [10,15,20,25,20,15];
var x=20;
var y=20;
var c=0;
function setup(){
    createCanvas(600, 600);
    background(255);
}

function draw() {
fill(0); 
for(var l = 0;l <= 5;l += 1){
    y = 20
    for(var h = 0; h <= 5;h += 1){
    x = 20+c;
     for(var i = 0;i < 6;i ++){

        circle(x,y,s[i]);
        x += 15;
        y += 15;
     }
     y += 5;
    }
    c += 90;
}
noLoop();
}

Looking Outwards 05 – Computational Graphics

One computational graphics project that really impressed me is the work of Vincent Pace and James Cameron in the film Avatar. The movie, released in 2009, was critically acclaimed for its advanced usage of CGI and how it advanced CG technologies that set precedent to sci-fi movies later to come. The usage of stereoscopic cameras and rigging actors with gear to mimic human eyes. 60% of the film utilized CGI imagery, as the film integrates CGI with live action recording as well – each second in the film contains about 17 gigabytes of data.

What I especially appreciate about this piece is how natural the integration with technology and graphics was undertaken. It’s always a risk to “overcompute” a creative practice within these types of projects, which undermine the realistic nature of the scenery. However, the project revolutionized how the movie industry can be taken further through CGI.


The Evolution of Animation to CGI (Computer-Generated Imagery) and the Impact of James Cameron’s Avatar

Project 05 – Wallpaper

Stereoscopic style wallpaper with randomly generated shapes throughout composition.

sketch
//Aarnav Patel
//Section D
//aarnavp@andrew.cmu.edu
//Project-05

var side = 100;
var radius = 0.8 * side
function setup() {
    createCanvas(600, 600);
    background(0);
}

function draw() {
	noStroke();

	let arr1 = [1, 2, 3];
	count = 0;
	for (var y = 0; y < height; y += side) {
		count = count + 1; 
		for (var x = 0; x < width; x += side) {
			if (count == floor(random(0, 5))) {
				drawTile(x, y);
				drawRandomShape(x, y);
				count = 0;
			} else {
				drawTile(x, y);
			}
		}
	}
	noLoop();
}

function drawTile(x, y) {
	fill(0, 0, 255, 150);
	ellipse(x + side / 2, y + side / 2, radius);
	fill(255, 0, 0, 100);
	ellipse(x + radius / 2, (y + side / 2 ), radius);

	fill(0, 0, 255, 100);
	triangle(x - 5, y - 5, (x + side) - 5, y - 5, x - 5, (y + side) - 5);
	fill(255, 0, 0, 150);
	triangle(x, y, x + side, y, x, y + side);

}

function drawRandomShape(x, y) {
	var r = floor(random(0, 3));
	fill(255);

	if (r == 0) {
		rectMode(CENTER);
		rect(x + (side / 2), y + (side / 2), side * 0.1, side * 0.5);
		rect(x + (side / 2), y + (side / 2), side * 0.5, side * 0.1);
	} else if (r == 1) {
		rectMode(CENTER);
		rect(x + (side / 2), y + (side / 2), side * 0.1, side * 0.5);
	} else {
		rectMode(CENTER);
		rect(x + (side / 2), y + (side / 2), side * 0.5, side * 0.1);
	}
}

Looking Outwards-05 

Computer Graphics 

When I think about 3D computer graphics, as a designer I immediately think about Solidworks.

Solidworks is a CAD program that can be used to digitally design three dimensional things, and then render those things and produce drawings that may be helpful to the user.  

It’s hard to imagine this heavy complex program in terms of what we are doing in class, but I would assume there are a lot of simple math functions that need to be done to make the program work. I guess you could simplify Solidworks into an interactive visual processor. 

What I like most about Solidworks is its practicality and exactness. It is a very powerful tool that is fun to explore as a user. It also does a lot of math and measurements that might be difficult to impossible to do all by hand.