I had the great opportunity to meet a senior designer here at CMU who did very interesting 3D computer graphics. Specifically for the Lunar Gala Collectiva show, Danny Cho created a series of computer generated 3D graphics to become dynamic backgrounds for advertisement and each fashion line. I really admire the attention to color and detail in each of these backgrounds. They were truly thoughtfully designed to fit each and every line, and they feel so immersive and polished. Each asset was carefully rendered in Cinema4D and then spliced together by a team that worked under Danny. I think that the final product is a testament to not only Danny’s work, but work of the entire team, as well as a celebration of the Lunar Gala Designers.
//Catherine Liu
//jianingl
//Section D
var catList = [1, 2, 3]; //keeps track of cat for genration of wallpaper
function setup() {
createCanvas(600, 600);
background(230,230,250);
}
function draw() {
for (var y = 30; y <= 600; y += 100) {
for (var x = 50; x <= 550; x += 150) {
var cat = random(catList); //randomly generates a cat at that position
if (cat == 1) {
CatStand(x,y);
} else if (cat == 2) {
CatFront(x,y);
} else if (cat == 3) {
CatSit(x,y);
}
}
}
noLoop()
}
function CatStand (x, y) {
strokeWeight(2);
push();
noFill();
strokeWeight(5);
stroke(233,150,122);
arc(x + 60, y-20, 50, 50, 0, HALF_PI); //tail
pop();
stroke(139,69,19)
fill(233,150,122);
ellipse(x+60, y + 40, 5, 20); // back left leg
ellipse(x+10, y + 40, 5, 20); // left front leg
ellipse(x + 40, y + 20, 80, 50); //body
triangle(x + 15, y - 15, x + 30, y - 25, x + 25, y - 5); // right ear
triangle(x - 15, y - 15, x - 30, y - 25, x - 25, y - 5); // left ear
ellipse(x, y, 50, 40); //head
ellipse(x+70, y + 42, 5, 20); //back right leg
ellipse(x+18, y + 43, 5, 20); // right front leg
fill(100,107,47);
ellipse(x-15, y, 10, 5); //left eye
ellipse(x+5, y, 10, 5); //right eye
fill(205,92,92);
ellipse(x-7, y+5, 5, 3); //nose
stroke(0,100,0);
fill(50,205,50);
circle(x-20, y+50, 10);
push();
noFill();
arc(x -65, y+45, 50, 50, 0, HALF_PI);
pop();
circle(x-35, y +50, 15);
push();
noFill();
arc(x + 83, y-20, 50, 50, 0, HALF_PI);
pop();
circle(x+ 85, y+3, 8);
}
function CatFront (x, y) {
strokeWeight(2);
push();
noFill();
strokeWeight(5);
stroke(139,69,19);
arc(x + 45, y-20, 50, 50, 0, HALF_PI); //tail
pop();
stroke(139,69,19)
fill(255,218,185);
ellipse(x+10, y+10, 90, 70); //body
triangle(x + 15, y - 15, x + 30, y - 25, x + 25, y - 5); // right ear
triangle(x - 15, y - 15, x - 30, y - 25, x - 25, y - 5); // left ear
ellipse(x, y, 50, 40); //head
fill(119,136,153);
ellipse(x-15, y, 10, 5); //left eye
ellipse(x+5, y, 10, 5); //right eye
fill(244,164,96);
ellipse(x-7, y+5, 5, 3); //nose
fill(255,218,185);
ellipse(x + 35, y + 40, 20, 10); // right leg
ellipse(x - 10, y + 40, 20, 10); // left leg
stroke(70,130,180);
push();
noFill();
arc(x -60, y+45, 50, 50, 0, HALF_PI);
arc(x + 80, y+15, 50, 50, 0, HALF_PI)
pop();
fill(135,206,235);
circle(x-30, y+45, 10);
circle(x+80, y+45, 15);
}
function CatSit (x, y) {
strokeWeight(2);
push();
noFill();
strokeWeight(5);
stroke(119,136,153);
arc(x + 60, y-10, 50, 50, 0, HALF_PI); //tail
pop();
stroke(139,69,19);
fill(119,136,153);
ellipse(x+5, y+50, 10, 20); //front right leg
ellipse(x+30, y+30, 70, 60); //body
ellipse(x+45, y+50, 30, 20); //back leg
ellipse(x+15, y+50, 10, 20); //front left leg
triangle(x + 15, y - 15, x + 30, y - 25, x + 25, y - 5); // right ear
triangle(x - 15, y - 15, x - 30, y - 25, x - 25, y - 5); // left ear
ellipse(x, y, 50, 40); //head
fill(0,100,0)
ellipse(x, y, 10, 5); //left eye
ellipse(x-15, y, 10, 5); //right eye
fill(40,26,13)
ellipse(x-7, y+5, 5, 3); //nose
stroke(75,0,130);
fill(147,112,219);
circle(x+60, y-15, 15);
circle(x+75, y-15, 15);
ellipse(x+75, y-5, 10, 5);
ellipse(x+60, y-5, 10, 5);
push();
strokeWeight(3)
line(x+67, y-15,x+67, y-5);
pop();
push();
noFill();
arc(x -65, y+45, 50, 50, 0, HALF_PI);
pop();
circle(x-35, y +50, 15);
}
Before creating this wallpaper, one of my friends from home called me and showed me pictures of her cats. In the spur of the moment, I thought that it’d be cute to create a wallpaper full of cats. I also thought it would be cool if the wallpaper could generate different versions of itself. For this, I created 3 different cats and had the draw function choose a random cat to draw each time it ran through the 2 for loops. For each cat, I drew up a quick sketch of what I wanted each cat to look like and added some decorative yarn and butterflies to make them look more like wallpaper:
For this week’s project, I chose a project is the 2009 sci-movie called Avatar by James Cameron. I chose this project because I am really astonished by the hyperrealistic yet magical graphics present in this project. For example, the facial graphics of Avatars, the ‘Pandora’ environment, the majestical animals present in this said environment etc. All these amazing photorealistic graphics present in the movie are computer generated using technologies like motion capture animation, which were developed with a lot of effort and thought. The facial expressions of the Avatars were created by designing customized skull caps for each individual actor which different small scaled technological objects embedded in these caps, which collect data and transmit it to the computers. Elements like the environmental lighting for ‘Pandora’ and highlights and shadows etc. are made using new systems that were developed using computational algorithms and motion and performance capture tech.
// Yash Mittal
// Section D
var x = 95;
var y = 95;
function setup() {
createCanvas(600, 600);
background (232, 217, 203);
noLoop();
}
function draw() {
for (var col = 0.95; col <= 10; col = col + 2) {
for (var row = 1.3; row <= 9; row = row + 2) {
lion (x * 0.8 * col, y * row);
}
}
}
function lion (x, y) {
noStroke();
fill (250, 68, 9);
ellipse (x - 35, y + 35, 50, 50); // mane circle 1
ellipse (x - 55, y + 2, 43, 45); // mane circle 2
ellipse (x - 43, y - 39, 55, 50); // mane circle 3
ellipse (x - 10, y - 63, 53, 53); // mane circle 4
ellipse (x + 32, y - 50, 53, 53); // mane circle 5
ellipse (x + 52, y - 10, 50, 50); // mane cirlce 6
ellipse (x + 40, y + 30, 50, 50); // mane circle 7
ellipse (x + 5, y + 50, 55, 55); // mane circle 8
fill (254, 146, 9); // orange face
ellipse (x, y, 96, 90); // background of face
fill (59, 23, 9); // dark brown
ellipse (x - 25, y, 8, 12); // left eye
ellipse (x + 25, y, 8, 12); // right eye
fill (255, 209, 53);
ellipse (x, y + 5, 16, 35); // nose highlight
fill (255);
ellipse (x, y + 20, 33, 22); // mouse background
fill (53, 22, 3);
ellipse (x, y + 13, 20, 8); // nose
rect (x - 1, y + 13, 1, 9); // line from nose to mouth
strokeWeight (1);
stroke (53, 22, 3);
line (x - 6, y + 23, x + 6, y + 21); // mouth smile
fill (255);
noStroke ();
ellipse (x - 26.5, y - 3, 3, 5); // left eye highlight
ellipse (x + 23.5, y - 3, 3, 5); // right eye highlight
fill (255, 170, 187);
ellipse (x - 25, y + 15, 12, 12); // left cheek highlights
ellipse (x + 25, y + 15, 12, 12); // right cheek highlights
fill (254, 146, 9);
ellipse (x - 30, y - 40, 18, 18); // left ear base
ellipse (x + 30, y - 40, 18, 18); // right ear base
fill (255, 209, 53);
ellipse (x - 30, y - 40, 10, 10); // left ear highlight
ellipse (x + 30, y - 40, 10, 10); // right ear highlight
}
I made a lion wallpaper for this project. I started off with drawing my ideas out and then I started making the different elements of the face. Next, I created the loops to repeat the pattern, which took a little bit of time because I got confused with the numbers.
The project I am looking at this week is called “Momoplanet | Inner Peace Animation” by Zigor Samaniego and his team in 2018.
I really admire this project specifically because I think it is so well crafted. Part of the part of this project was to incorporate many styles into one animation seamlessly and it not only is well done but it also elevated the story it conveyed.
Because of the many styles, the animation must of been created with multiple programs to effectively combine every medium. The team used not only 3D graphics but also “retro-futurism, illustration, stop motion, hand-drawn illustration in 3D-graphics…” So, to bring all the styles together the team must’ve used an animation software to piece together each scene.
Overall between the level of craft and certain style you can tell this work was influenced by Samaniego.
//gnmarino
//Gia Marino
//Section D
var sizeChange = .1; //makes everything 1/10th the original size
function setup() {
createCanvas(600, 600);
background(121, 181, 177); //cyan
}
function draw() {
fill(250, 250, 236); //cream
stroke(169, 96, 0); //dark orange
scale(sizeChange);
// makes the 1st row of mandalas and alternates every other row
// continues till it reaches border of canvas
for (var xSpacing = 0; xSpacing < 10000; xSpacing += 900){
for (var ySpacing = 0; ySpacing < 10000; ySpacing += 1800){
//push and pop makes it so spacing doesn't compound
push();
mandala(xSpacing, ySpacing);
pop();
}
}
// makes 2nd row of mandalas and alternates every other row
//continues till it reaches the point where it will not be on the page
for (var xSpacing = -450; xSpacing < 9000; xSpacing += 900){
for (var ySpacing = 900; ySpacing < 10000; ySpacing += 1800){
//push and pop makes it so spacing doesn't compound
push();
mandala(xSpacing, ySpacing);
pop();
}
}
//draws diamond pattern
for (var dxSpacing = 450; dxSpacing < 9000; dxSpacing += 900){
for (var dySpacing = 450; dySpacing < 10000; dySpacing += 900) {
//push and pop makes it so spacing doesn't compound
push();
diamond(dxSpacing, dySpacing);
pop();
}
}
noLoop();
}
function diamond (x2, y2) {
// translate with parameters allows the loop functions in draw to move the whole design easily
translate(x2, y2);
//push and pop to avoid settings effecting other functions
push();
translate (300, 300);
noStroke();
fill(169, 96, 0); //dark orange
triangle (-30, 0, 30, 0, 0, 30);
triangle(-30, 0, 30, 0, 0, -30);
pop();
}
function mandala(x, y) {
// translate with parameters allows the loop functions in draw to move the whole design easily
translate (x, y);
//whole shape is roughly 500 X 600 pixels before scaling
threeLeafShape();
circleBorder();
flowerAndCircle();
}
function threeLeafShape() {
//push pop makes it so the settings in this function doesn't effect other functions
push();
//moves top leaf to the middle of the mandala
translate(200, 0);
strokeWeight(5);
//draws top leaf
beginShape();
vertex(100, 200);
quadraticVertex(70, 125, 0, 100);
quadraticVertex(60, 90, 85, 115);
quadraticVertex(90, 40, 50, 20);
quadraticVertex(115, 40, 115, 115);
quadraticVertex(135, 85, 175, 80);
quadraticVertex(120, 125, 100, 200);
endShape();
//push pop makes it so the translation and rotation for the bottom leaf does not effect top leaf
push();
//translate and rotate moves bottom leaf so it's mirrored directly undernenth top leaf
translate(200, 600);
rotate(radians(180));
//draws bottom leaf
beginShape();
vertex(100, 200);
quadraticVertex(70, 125, 0, 100);
quadraticVertex(60, 90, 85, 115);
quadraticVertex(90, 40, 50, 20);
quadraticVertex(115, 40, 115, 115);
quadraticVertex(135, 85, 175, 80);
quadraticVertex(120, 125, 100, 200);
endShape();
pop ();
pop();
}
function circleBorder () {
//push pop makes it so the settings in this function doesn't effect other functions
push();
//translate to center of canvas to make it easier to make a border in a circular formation
translate(300, 300);
strokeWeight(4);
//radius of basline circle for the tiny circles to follow and make a border along
var r = 250;
//makes tiny circle border on right side
//constrained from theta -55 to theta 55 so circles do not collide with the 2 leaf shapes
for (var theta = -55; theta < 55; theta += 15) {
cx = r * cos(radians(theta));
cy = r * sin(radians(theta));
circle(cx, cy, 40);
}
//makes tiny circle border on left side
//constrained from theta 125 to theta 235 so circles do not collide with the 2 leaf shapes
for (var theta = 125; theta < 235; theta += 15) {
cx = r * cos(radians(theta));
cy = r * sin(radians(theta));
circle(cx, cy, 40);
}
pop();
}
function flowerAndCircle () {
//(push pop 1)push and pop make it so translated origin does not effect next function
push();
//puts origin in center so it is easier to draw in a circular formation
translate (300, 300);
//circle around flower
//push and pop so nofill doesn't effect flower
push();
noFill();
strokeWeight(5);
circle(0, 0, 200);
pop();
//flower center
strokeWeight(5);
circle (0, 0, 35);
//draws 8 flower petals that rotates around the center origin
for (theta = 30; theta <= 360; theta += 45){
//(push pop 2)
//the push and pop in this loop makes it so it rotates only 45 each time and not 45 + theta
push();
rotate(radians(theta));
ellipse( 55, 0, 45, 20);
//pop uses push 2
pop();
}
//this pop uses push 1
pop();
}
Drawings
I started off with deciding a design that I could then repeat over and over. Then after I decided, I made the design in a 500×600 pixels dimensions. Then I scaled it down and looped it. Then I felt like the pattern needed something in-between the mandala I created so I made a diamond and made a separate nested loop to repeat it so it went in the empty spaces. I had to make two nested loops for the mandala so the columns were staggered and not lined up perfectly. For the circle border I used polar coordinates so I could space it out and also not have to complete the circle. But for the flower I had to use rotation so the ellipse turned and went in a circle.
var xp = 50;//startingx
var yp = 50;//startingy
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);//using degrees instead of radians
}
function draw(){
background(237, 224, 212);
noStroke();
for (var row = 0; row <= 10; row++){
for (var col = 0; col <= 10; col++){
drawCougar(row*90, col*90);//loop drawing
}
function drawCougar(x, y){
push();
translate(x-20, y-20);
fill(221, 184, 146);
ellipse(xp-20,yp-15,20,30);
ellipse(xp+20,yp-15,20,30);
fill(127, 85, 57);
ellipse(xp,yp+20,35,30);//front mouth
ellipse(xp-20,yp-15,20,30);
ellipse(xp+20,yp-15,20,30);
fill(176, 137, 104);
ellipse(xp,yp,60,60);//head
push();
translate(10,10);
rotate(7);
fill(221, 184, 146);
ellipse(xp-10,yp+5,20,27);//left mouth
pop();
push();
rotate(353);
fill(221, 184, 146);
ellipse(xp,yp+25,20,27);//right mouth
pop();
fill(0);
ellipse(xp-20,yp,5,10);//left eye
ellipse(xp+20,yp,5,10);//right eye
ellipse(xp,yp+5,20,10);//nose
pop();
}
}
}
I started the project by sketching out ideas. Then, I moved to p5.js and created one drawing, and embedded a loop to make it repeat, creating the pattern and effect. I think figuring out how to employ a for loop was the most challenging for me. However, I really liked how my wallpaper turned out in the end. The project provided me with a better understanding of loops and functions.
function setup() {
createCanvas(600, 400);
background(250, 220, 137);
}
function draw() {
noStroke();
for(i = -1; i < 3; i++) {
fill(250, 162, 137);
rect(70 + i * 210, 0, 50, 400);
for(j = 0; j < 2; j++) {
fill(202, 227, 152);
arc(200 + i * 210, 70 + j * 250 - (i % 2) * 50, 140, 120, radians(80), radians(250));
fill(250, 220, 137);
arc(210 + i * 210, 70 + j * 250 - (i % 2) * 50, 140, 120, radians(80), radians(250));
fill(204, 112, 138);
circle(200 + i * 210, 45 + j * 250 - (i % 2) * 50, 17);
circle(213 + i * 210, 55 + j * 250 - (i % 2) * 50, 17);
circle(213 + i * 210, 70 + j * 250 - (i % 2) * 50, 17);
circle(200 + i * 210, 75 + j * 250 - (i % 2) * 50, 17);
circle(187 + i * 210, 55 + j * 250 - (i % 2) * 50, 17);
circle(187 + i * 210, 69 + j * 250 - (i % 2) * 50, 17);
fill(209, 158, 71);
circle(200 + i * 210, 61 + j * 250 - (i % 2) * 50, 20);
circle(165 + i * 210, 90 + j * 250 - (i % 2) * 50, 18);
circle(180 + i * 210, 105 + j * 250 - (i % 2) * 50, 12);
}
for(j = 0; j < 2; j++) {
fill(202, 227, 152);
arc(200 + i * 210, 200 + j * 250 - (i % 2) * 50, 140, 120, radians(280), radians(100));
fill(250, 220, 137);
arc(190 + i * 210, 200 + j * 250 - (i % 2) * 50, 140, 120, radians(280), radians(100));
fill(204, 112, 138);
circle(200 + i * 210, 175 + j * 250 - (i % 2) * 50, 17);
circle(213 + i * 210, 185 + j * 250 - (i % 2) * 50, 17);
circle(213 + i * 210, 200 + j * 250 - (i % 2) * 50, 17);
circle(200 + i * 210, 205 + j * 250 - (i % 2) * 50, 17);
circle(187 + i * 210, 185 + j * 250 - (i % 2) * 50, 17);
circle(187 + i * 210, 199 + j * 250 - (i % 2) * 50, 17);
fill(209, 158, 71);
circle(200 + i * 210, 191 + j * 250 - (i % 2) * 50, 20);
circle(230 + i * 210, 220 + j * 250 - (i % 2) * 50, 18);
circle(215 + i * 210, 235 + j * 250 - (i % 2) * 50, 12);
}
}
noLoop();
}
This project was very difficult, yet I enjoyed making a repetitive 2D design. I originally made it on Adobe Illustrator to get an idea of what I wanted, and the final outcome is very similar to what I wanted it to be. I used three different for loops for the rectangles and the two different columns of flowers.
After looking through many different types of 3D computer graphic artworks, my personal favorite is Game Buildings by Gustavo Henrique. I really admire this artwork because I think it’s so interesting how Henrique manipulates his photographs of cubes to make them look softer and rounder. I feel that using computer graphic techniques create an interesting mood to his artworks. When I first saw the artwork, I didn’t recognize it was originally a photograph because the objects looked so smooth and soft. Henrique uses different programs to render the original photographs he takes. The creator’s artistic sensibilities are manifested in the final form by working with geometric shapes and models to create a building that has a soft atmosphere to it.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
