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

LO 5 – 3D Computer Graphics

Alexis Christodoulou is a self-taught 3D artist whose work focuses on imaginary environments. He works on a range of creative projects, from commercial to personal, and produces his work using 3D computer graphics software. More specifically, Christodoulou uses Cinema4d and Redshift for rendering, additionally using Adobe CC for post-production edits.

I particularly like the editorial designs that he created for Icon Design Italy in 2019. He designed two covers and several other renders of dreamy, open spaces for the magazine. Christodoulou’s work is incredibly intriguing and visually appealing due to the highly realistic, serene compositions. I admire his sophisticated use of color to evoke certain emotions and creativity in imagining dream-like environments. I think that his use of direct natural light in his renders is very successful, in that it gives a very soothing, airy feeling to his work.

Project – 05 – Wallpaper

Since the loop is not difficult, I spend a lot of time figuring the individual shape to make them look interesting together. Especially for the polygon shape. I learned the cos() and sin() and vertex() to draw that shape. Also, I consider the color to be consistent with the visual.

sketch Download

    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-05-wall paper

var a=20;
var l=50;

function setup() {
    createCanvas(550, 550); 
    noLoop();

}



function draw(){
    
    background(221,209,183);
    
    //background
    var sparkle = {
        locationX: random(width),
        locationY: random(height),
        size: random(1, 5)
    }
    fill (0);
    noStroke();
    ellipse(sparkle.locationX, sparkle.locationY, sparkle.size, sparkle.size);
   
    // flower
    for (var x1=50; x1 < 600; x1+=150) {
      for (var y1=50 ; y1 < 600 ; y1+=150){
        flower(x1,y1);
      }
    }

    // eye
    for (var x2=60; x2 < 250; x2+=75) {
      for (var y2=25 ; y2 < 400 ; y2+=75){
        eye(x2,y2);
      }
    }

    // shape1
    for (var x3=120; x3 < 500; x3+=150) {
        for (var y3=120 ; y3 < 500 ; y3+=150){
        shape1(x3,y3);
      }
    }

}


function flower(x,y){
      push();
      fill(229, 148, 183);
      circle(x-a/2, y-a/2, a);
      circle(x+a/2, y-a/2, a);
      circle(x-a/2, y+a/2, a);
      circle(x+a/2, y+a/2, a);
      fill(27, 85, 155);
      circle(x, y, a);
      pop();
}


function eye(x,y) {
    push();
    translate(x, y);
    fill(255);
    arc(x, y-l/4.5, l, l, 0.5, PI-0.5);
    arc(x, y+l/4.5, l, l, PI+0.5, -0.5);
    //fill(22,125,88);
    fill(random(22),125,random(225));
    ellipse(x, y, l/2, l/2); 
    pop();

}

function shape1(x,y){
    push();
    translate(x, y);
    var spacing = 360 / 7;
    beginShape();
    fill(0);
    for(let i = 0; i <= 7; i++) {
        var angle = i * spacing;
        var b = cos(radians(angle)) * 10;
        var c = sin(radians(angle)) * 10;
        if (i==0) {
            vertex(b,c);
    }
         else {
             var cAngle = angle - spacing/2;
             var cX = cos(radians(cAngle)) * 40;
             var cY = sin(radians(cAngle)) * 40;
             quadraticVertex(cX, cY, b, c)
      }
    }
    endShape();
    pop();
}

Looking Outwards 05: 3D Computer Graphics

Melting memories by Refik Anadol

This project combines data paintings, light projections, and augmented data sculptures to visibly demonstrate how the brain recalls memories.To generate the data, the artist conducted experiments at the Neuroscape Laboratory at the University of California, San Francisco.

“Anadol gathers data on the neural mechanisms of cognitive control from an EEG (electroencephalogram) that measures changes in brain wave activity and provides evidence of how the brain functions over time. These data sets constitute the building blocks for the unique algorithms that the artist needs for the multi-dimensional visual structures on display.”

I really enjoy this art because the artist explores the intersection of physical and digital reality, neuroscience, and art. In the work, the digital data he collects is reflected in different 3D shapes like swirls move across the work’s surface, resembling cresting ocean waves, blossoming flowers, and shifting sand.

Project 5: Wallpaper

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
function setup() {
    createCanvas(600, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);
    background(146, 214, 255);
}

function draw() {
    // odd columns
    for(var i=50; i<=600;i+=200){
        for(var j=50; j<=600;j+=100){
            push();
            translate(i,j);
            carpattern();
            pop();
        }
    }
  // even columns
    for(var k=150; k<=600;k+=200){
        for(var l=0; l<=600;l+=100){
            push();
            translate(k,l);
            carpattern();
            pop();
        }
    }
}
function carpattern(){
    noStroke();
    // front window
    fill(195, 244, 266);
    quad(-15, -1, -17, -2, -6, -9, -5, -8);
    // car body
    fill(248, 95, 120);
    rect(-36, 2, 78, 4);
    fill(237, 67, 80);
    rect(-36, 6, 78, 5);
    fill(255, 33, 49);
    rect(29, 5, 13, 4);
    quad(42, 5, 42, 9, 44, 8, 44, 5);
    quad(-38, 6, -39, 9, -30, 9, -30, 6);
    quad(-30, 9, -30, 11, -36, 11, -38, 9);
    fill(248, 95, 102);
    rect(-15, -2, 57, 8);
    quad(-14, 6, -36, 6, -37, -2, -15, -4);
    rect(-15, 2, 57, 8);
    quad(-18, 1, -5, -9, 20, -10, 33, -1);
    // windows
    fill(195, 244, 266);
    quad(-12, 0, -3, -9, 19, -9, 26, 0);
    // black line separating the window
    fill(0);
    quad(6, 0, 8, -9, 10, -9, 10, 0);
    fill(120, 0, 3);
    rect(-20, 10, 40, 2);
    // tires
    fill(0);
    ellipse(-25, 10, 12, 12);
    ellipse(25, 10, 12, 12);
    fill(151, 162, 168);
    ellipse(-25, 10, 8, 8);
    ellipse(25, 10, 8, 8);
    // lights
    fill(247, 109, 49);
    rect(41, 1, 1, 2);
    quad(-37, 4, -38, 2, -36, 2, -36, 4);
}

I started by sketching my car in illustrator before calculating the coordinates for the geometric shapes in my canvas.

This is the reference of the car:

LO5: Computer Graphics

Apples by Aleksandr Kuskov is a 3D render that exaggerates the reality of cutting fruits. In his work, Kuskov uses Autodesk Maya and Keyshot to achieve these hyper-realistic effects. I really enjoy this work because as I look at it– the sliced apples flying elegantly left and right, the fresh berries, smooth-textured peaches, and the splashing of apple juice–makes me thirsty. I couldn’t resist but think about how fulfilling it would be to have a taste of that sweet and refreshing juice. Through his 3D render work, Kuskov turns typical household fruits and the mundane process of cutting them up into something elegant and dynamic while provoking a sense of desire as it responds to the basic human need of eating.

Link: https://alekscg.pro/fruit

Title: Apples

Creater: Aleksandr Kuskov

Year: 2020

LO: 3D Computer Graphics

Edward Mcevenue is a 3D & motion graphics freelancer who created this art piece called “Wires & Splines.” These art pieces evoke the tornado/wind feelings as those colorful lines are rendered like a pattern. I admire how the configuration of those beautiful colors creates these harmonies patterns. Most of his works are created with the idea of repetitive geometric patterns. It is also interesting to see how he explores different abstract landscapes and geometric designs using 3ds Max, TyFlow & Redshift. He also illustrates by playing with dramatic lighting & atmosphere. He usually works with this type of imaginary spaces more than realistic aspects so that he could explore/create as he wants.

LO-05

Material Exploration

Vincent Schwenk & Vitaly Grossmann

Vincent Schwenk and Vitaly Grossman teamed up with a group of designers from all over the world to create an up-close exploration of material qualities represented through 3D renderings. Their animation brings viewers into an abstract and playful world of textures ranging from soft, yarn-like hairballs to sleek and polished industrial parts. One key aspect that I find intriguing is that the materials shown in the video are not real-life objects; rather, they take on ever-changing, organic forms that bend, shift, and meld into one another, keeping viewers continuously engaged with the sequence. The extensive rendering and computation for this project were done in Cinema 4D, as shown in a process video that is equally as engaging and vibrant.

Project-05: Wallpaper

zimmy wallpaper



function setup() {
    createCanvas(600, 600);
    background(254, 218, 187);
}

function draw() {

	for(var x = 0; x <= 600; x += 150){
	    for(var y = 0; y <= 650; y += 104){
		    shoe(x, y);
		}

    }
}

function shoe(x, y) {
    push();
    translate(x, y);
	noStroke();
	strokeWeight(1);
	fill(255, 187, 220);
	circle(85, -10, 63);
	fill(255);
	rect(0, 0, 80, 30); // lower body of shoe
	fill(207);
	arc(0, 30, 60, 60, -PI, 0); // grey toe
	fill(255);
	arc(10, 30, 60, 60, -PI, 0); // white toe
	rect(50, -30, 30, 60); // upper body
	// main body of shoe

	fill(54, 85, 165);
	arc(30, 14, 20, 20, radians(40), radians(220));
	triangle(28, 15, 36, 22, 75, -9);
	fill(255);
	circle(28, 8, 13);
	// nike check

	stroke(207);
	ellipse(32, -14, 47, 40);
	fill(254, 218, 187);
	noStroke();
	ellipse(23, -26, 56, 55);
	// lace section

	fill(240);
	rect(-30, 27, 110, 7);
	fill(207);
	triangle(-17, 27, -5, 20, 20, 27);
	arc(80, -30, 25, 28, PI/2, PI);
	// sole and heel patch

	stroke(240);
	strokeWeight(5);
	strokeCap(ROUND);
	noFill();
	/* line(50, -15, 60, 15);
	line(100, 0, 100, 50); */ 

	bezier(47, -20, 20, -45, -20, 10, -35, -52);
	bezier(50, -10, 60, 15, 100, 0, 115, 52);
	// shoelaces

    pop();

}

For this wallpaper, I took inspiration from the shoes I was wearing that day and decided to turn them into a stylized illustration. The whole shoe is illustrated in one function, based on an initial illustration I made in Adobe Illustrator. The most difficult aspect of drawing the shoe was figuring out how to accurately recreate the nike check using the shapes and forms afforded by Javascript, as well as drawing the bezier curves that make up the laces. Afterward, I was able to use some of the hexagon assignment to inform the for loop, and adjusted the start/end points for the laces to make them meet.

Project 5: Wallpaper

sketch

//Jessie Chen
//D
//Project 05
//Floral Wallpaper


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

function draw() {
    //background white dots
    for (var x = 0; x <= width; x += 10) {
        for (var y = 0; y<= height; y += 10) {
            dots(x,y);
            print(dots);
        }
    }
    push();
    //rows of red flowers
    translate(-200, -85);
    for (x = 0; x <= width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(25));
            flower(0, 0, 220, 50, 20);
            pop();
        }
    }
    //rows of brown flowers
    translate(100, 100);
    for (x = 0; x <= width * 2; x += 200) {
        for (y = 0; y < height* 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(55));
            flower(0, 0, 112, 66, 36);
            pop();
        }
    }
    //rows of green flowers
    translate(-100, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height* 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(25));
            flower(0, 0, 130, 186, 114);
            pop();
        }
    }
    //rows of orange flowers
    translate(100, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            rotate(radians(55));
            flower(0, 0, 255, 133, 2);
            pop();
        }
    }
    pop();
    //rows of small pink flowers
    translate(-95, -45);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 255, 163, 163);
            pop();
        }
    }
    //rows of small brown flowers
    translate(50, 95);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 156, 116, 65);
            pop();
        }
    }
    //row of small green flowers
    translate(145, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 161, 214, 157);
            pop();
        }
    }
    //rows of small orange flowers
    translate(55, 100);
    for (x = 0; x < width * 2; x += 200) {
        for (y = 0; y < height * 2; y += 400) {
            push();
            translate(x, y);
            smallflower(0, 0, 255, 167, 89);
            pop();
        }
    }
}

//background dot
function dots(x,y) {
    noStroke();
    fill(255);
    ellipse(x, y, 5, 5);
}

//one regular flower
function flower(x, y, r, b, g) {
    noStroke();
    fill(r, b, g);
    push();
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    translate(95, 5);
    rotate(radians(72));
    rect(30, 20, 30, 40, 15, 15, 10, 10);
    pop();
    //yellow center
    fill(255, 215, 135);
    ellipse(43, 68, 30, 30);
}

//small flowers
function smallflower(x, y, r, b, g) {
    noStroke();
    fill(r, b, g);
    push();
    rect(3, 20, 15, 20, 15, 15, 10, 10);
    translate(40, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    translate(65, -5);
    rotate(radians(72));
    rect(30, 20, 15, 20, 15, 15, 10, 10);
    pop();
    //yellow center
    fill(255, 215, 135);
    ellipse(10, 42, 13, 13);
}

this was inspired by my golf le fleur shoes 🙂

Project 5 – Wallpaper

butterandmilk

// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(490, 490);
    noLoop();
}

function draw() {
	background(145,204,236);
	noStroke();
	//repetition of butter on plate as wallpaper
	for (var x = 0; x < width; x += 80) {
		for (var y = 0; y < height; y += 80 ) {
		push();
		translate(x, y);
		drawButter();
		pop();
		}
	}

	//repetition of milk as wallpaper
	for (var x = 0; x < width; x += 80) {
		for (var y = 0; y < height; y += 80 ) {
		push();
		translate(x - 60, y - 60);
		drawMilk();
		pop();
		}
	}

	//orange juice
	fill(255,140,0);
	ellipse(197, 189, 12, 3);
	quad(191, 189, 203, 189, 203, 202, 191, 202);
	ellipse(197, 202, 12, 3);
}

//milk drawing
function drawMilk() {
	//milk cup - gray
	fill(207, 212, 214);
	ellipse(97, 79, 14, 3);
	quad(90, 79, 104, 79, 104, 103, 90, 103);
	ellipse(97, 103, 14, 3);

	//milk - white
	fill(255);
	ellipse(97, 89, 12, 3);
	quad(91, 89, 103, 89, 103, 102, 91, 102);
	ellipse(97, 102, 12, 3);
}

//butter drawing
function drawButter() {
		//plate dark side - light gray
		fill(212, 211, 206);
		quad(66, 49, 75, 55, 51, 63, 42, 55);

		//plate right light side - white
		fill(233,229,234);
		quad(75, 55, 75, 56, 51, 64, 51, 63); 
		//plate left light side - white
		quad(42, 55, 51, 63, 51, 64, 42, 56);

		//butter light side - light yellow
		fill(255, 229, 155);
		quad(49, 50, 67, 45, 71, 49, 53, 55);
		//butter light side (cut piece)
		quad(49, 56, 53, 61, 46, 62, 42, 57);

		//butter medium dark side - medium dark yellow
		fill(236,195,93);
		quad(49, 50, 53, 55, 53, 61, 49, 56);
		//butter medium side (cut piece)
		quad(42, 57, 46, 61, 46, 62, 42, 58);

		//butter dark side - dark yellow
		fill(218,177,72);
		quad(71, 49, 71, 55, 53, 61, 53, 55);
		//butter dark side (cut piece)
		quad(46, 61, 53, 60, 53, 61, 46, 62);
}

I personally love the butter and milk emojis so I wanted to make a wallpaper containing these emojis. It looks quite simple from far away, but I tried to detail the butter as much as I could to replicate the emoji in my iPhone as closely as possible. I added a slight randomness of orange juice for visual playfulness.