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

Looking Outwards 05: 3D Computer Graphics

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:

LO-05

David Pyatt is a small artist that has been completing art since the age of 7, he focuses on landscapes and 3D digital art. This piece is called “3D Dimensional Art”. I admire this piece because it is made by a small artist for fun and has a very personal and cool feel to it. I am unsure of how this art was generated as Pyatt is a small artist so not much is known on his mediums or style. From looking at the piece I supposed he made it by looping squares and rectangles on top of each other. Another thing I admire about this piece is that it reminds me of the ocean. The colors resemble the bottom of the sea, and the abstract 3D nature of this piece make it feel as is I am under water with my eyes open.

https://pixels.com/featured/3d-dimensional-art-david-pyatt.html

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

Project 05: Wallpaper

This wallpaper was inspired by a phone case I recently purchased online. Watermelons are one of my favorite fruits and green is my favorite color so I thought it’d be fun to code this design. To make it more dynamic, I decided to make the positions of the watermelons somewhat random and the placement of the seeds random inside so that each slice is unique.

sketch

function setup() {
    createCanvas(600, 400);
    background(101, 173, 119); // green background
    for(var x = 0; x <= width; x += 20){ // vertical stripes
    	stroke(136, 213, 156);
    	strokeWeight(5);
    	line(x, 0, x, height);
    }
    for(var y = 0; y <= height; y += 20){ // horizontal stripes
    	stroke(136, 213, 156);
    	strokeWeight(5);
    	line(0, y, width, y);
    }

}

function watermelonHalf() { // draw watermelon halves
	//semicircle
	rotate(radians(random(-30, 30))); // random position
	noStroke();
	fill(38, 144, 65);
	arc(0, 0, 60, 60, 0, PI); // green part
	fill(255);
	arc(0, 0, 55, 55, 0, PI); // white part
	fill(236, 80, 102);
	arc(0, 0, 50, 50, 0, PI); // red part
	for(var seeds = 0; seeds <= 5; seeds += 1){ // random seed positions
		fill(0);
		ellipse(random(-20, 20), random(5, 15), 2, 3);
	}
	noLoop();
}

function watermelonSlice() { // draw watermelon slices
	//triangular slice
	rotate(radians(random(60, 90))); // random position
	noStroke();
	fill(38, 144, 65);
	arc(0, 0, 70, 70, 0, PI/3); // green
	fill(255);
	arc(0, 0, 65, 65, 0, PI/3); // white
	fill(236, 80, 102);
	arc(0, 0, 60, 60, 0, PI/3); // red 
	for(var seeds = 0; seeds <= 2; seeds += 1){ // seeds
		fill(0);
		ellipse(random(15, 20), random(5, 20), 2, 3);
	}
	noLoop();
}

var column = 0; // column counter to alternate 
function draw() {
	for(var x = 30; x <= width; x += 80){
		if(column%2 == 0){ // if odd number columns
			for(var y = 0; y <= height; y += 120){ // first slice
				push();
				translate(x, y);
				watermelonSlice();
				pop();
			}
			for(var y = 60; y <= height; y += 120){ // second half
				push();
				translate(x, y);
				watermelonHalf();
				pop();
			}
			column += 1; // add to column counter
		}
		else{ // if even number columns
			for(var y = 0; y <= height; y += 120){ // first half
				push();
				translate(x, y);
				watermelonHalf();
				pop();
			}
			for(var y = 60; y <= height; y += 120){ // second slice
				push();
				translate(x, y);
				watermelonSlice();
				pop();
			}
			column += 1; // add to counter
		}
	}
}

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.

Looking Outwards 05: 3D Computer Graphics

Mike Winkelmann, otherwise known as Beeple, is a 3D artist who has created videos and images everyday nonstop for the past few years. All his renders are eye captivating and realistic in detail. There is also a wide variety of designs he does, some political, some gruesome, and some tame. He has done collaborations with major brands such as LV. He uses a combination of different programs to fuel his work. He works in both 2D and 3D, but the way each image or model is generated is through 2D calculations of meshes. By deciding how detailed, smooth, or consistent his models will be, the properties of each mesh have to be specific. Beeple also chooses specific angles or frames when rendering his work which shows an intention behind how he wants to depict certain aspects or highlight specific objects. In modeling programs, meshes and curves and the base foundation of a surface of an object. By using that to his advantage, he is able to manipulate, shadow, scale, and proportions to have models work in his favor. In addition, there is the artistic idea of having a foreground, midground, and background.

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 🙂