Category: SectionB

Project 5 – Wallpaper

The famous Coca-Cola bottle and its mascot, the polar bear, were my inspiration for this wallpaper. I first digitally sketched a Coca-Cola bottle to use as a template, as shown at the bottom, and then, I added some polar bears as decoration.

sketch
/* Michelle Kim
 * michell4
 * Section B
 */

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(255, 244, 196);
    //cola
    for(var x = 75; x < width; x += 200) {
        for(var y = 50; y < height; y += 220) {
            push();
            translate(x, y);
            cola();
            pop();
        }
    }
    //polar bear
    for(var a = -40; a < width; a += 200) {
        for(var b = 20; b < height; b += 220) {
            push();
            translate(a, b);
            bear();
            pop();
        }
    }
}

function cola() {
    push();
    scale(0.5);
    //bottle
    fill(193, 252, 255);
    noStroke();
    rect(0, 0, 40, 70);
    quad(40, 65, 0, 65, -12, 95, 52, 95);
    ellipse(20, 130, 75, 125);
    quad(-13, 160, 53, 160, 40, 190, 0, 190);
    quad(45, 190, -5, 190, -18, 225, 58, 225);
    arc(20, 280, 95, 200, radians(170), radians(10), CHORD);
    noFill();
    stroke(223, 248, 255);
    strokeWeight(12);
    arc(-7, 58, 25, 50, 0, radians(60));
    arc(47, 58, 25, 50, radians(120), radians(180));
    arc(-15, 185, 23, 75, radians(283), radians(80));
    arc(55, 185, 23, 75, radians(100), radians(256));
    arc(20, 287, 82, 15, 0, radians(180));
    //soda
    fill(68, 32, 10);
    noStroke();
    arc(20, 90, 40, 200, radians(340), radians(200), CHORD);
    arc(11, 125, 40, 100, radians(80), radians(255));
    arc(29, 125, 40, 100, radians(285), radians(100));
    rect(0, 165, 40, 50);
    arc(20, 278, 75, 178, radians(170), radians(10), CHORD);
    arc(20, 284, 74, 21, 0, radians(180));
    noFill();
    stroke(68, 32, 10);
    strokeWeight(12);
    arc(-7, 183, 23, 80, radians(290), radians(80));
    arc(47, 183, 23, 80, radians(100), radians(250));
    //cap
    fill(170, 0, 0);
    noStroke();
    rect(0, 0, 40, 16);
    circle(1, 8, 15);
    circle(39, 8, 15);
    //label
    rect(-15, 110, 70, 40);
    noFill();
    stroke(170, 0, 0);
    strokeWeight(5);
    arc(-11, 130, 8, 55, radians(100), radians(260));
    arc(51, 130, 8, 55, radians(280), radians(80));
    //bubbles
    fill(200);
    noStroke();
    circle(23, 95, 10);
    circle(33, 100, 5);
    circle(37, 91, 7);
    circle(10, 160, 5);
    circle(25, 168, 8);
    circle(12, 180, 13);
    circle(27, 183, 5);
    circle(0, 270, 5);
    circle(-7, 280, 10);
    circle(40, 260, 15);
    circle(25, 270, 7);
    circle(45, 275, 5);
    pop();
}

function bear() {
    push();
    //polar bear ears
    fill(255);
    noStroke();
    circle(5, -12, 20);
    circle(45, -12, 20);
    fill(220);
    circle(5, -12, 10);
    circle(45, -12, 10);
    //polar bear body
    fill(255);
    rect(0, 0, 50, 70);
    arc(25, 0, 50, 40, radians(180), 0);
    circle(-5, 45, 15);
    circle(45, 46, 50);
    circle(70, 45, 15);
    noFill();
    stroke(255);
    strokeWeight(5);
    arc(60, 10, 25, 35, radians(110), radians(190));
    line(3, 0, 1, 40);
    fill(255);
    arc(52, 45, 46, 50, radians(0), radians(120));
    arc(5, 45, 30, 50, radians(60), radians(175));
    ellipse(28, 65, 25, 10);
    //polar bear outlines
    fill(220);
    noStroke();
    circle(63, 47, 4);
    circle(70, 47, 4);
    circle(72, 53, 4);
    circle(62, 58, 12);
    noFill();
    stroke(220);
    strokeWeight(2);
    arc(-7, 46, 10, 50, radians(300), radians(80));
    arc(1, 65, 10, 15, radians(130), radians(190));
    arc(13, 46, 10, 50, radians(300), radians(80));
    arc(21, 65, 10, 15, radians(130), radians(190));
    arc(38, 46, 10, 50, radians(300), radians(80));
    arc(46, 65, 10, 15, radians(130), radians(190));
    arc(67, 52, 30, 30,radians(205), radians(272));
    //polar bear face
    fill(220);
    noStroke();
    circle(25, 10, 18);
    fill(0);
    circle(13, 0, 6);
    circle(37, 0, 6);
    ellipse(25, 7, 7, 5);
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(23, 10, 4, 8, 0, radians(130));
    arc(27, 10, 4, 8, radians(50), radians(180));
    pop();
}

LO – 05

When hearing about the topic I immediately thought about @liliquela on instagram.
This account is an influencer account but the difference here is that the “person” Miquela is actual created with AI.
One of the first instances where I remember seeing this technology happening is during the Fast and Furious seventh movie when they utilized CGI to make Paul Walker’s face for the end scene.
It is crazy to think how graphic art has evolved so muc hso that now there is actually Miquela who is entirely created by AI working as a fashion influencer, essentially she is an AI model.
Not only is she attracting attention and followers but also recognition as she graces the pages of multiple magazines wearing the latest fashions.
This is super intriguing to me as the fashion industry is something Ilove and it’s crazy to see how much tech has developed where it is even permating the model industry.

Looking Outwards – 05: 3D Art

One two dimensional digital representation that I greatly admire is Stepan Ryabchenko’s “Power Pump,” (2011) a piece of artwork from the Computer Virus Series. I am intriguied by the thoughtfulness put into the work both in its actual physicality as well as its intention and general concept. Essentially Ryabchenko compiled data on major catastrophic viruses that have occurred since the inception of the computer, and gave them an identity be revisualizing them as actual, biological viruses. In the words of art critic Natalia Matsenko, this work renders the virtual nature of the virus which effectively overcomes the “limit between the figurative and the abstract.” It appears as the artist utilized generative modelling as well as parametric modelling in his design, with the shape of the image ebbing and flowing in deliberate ripples. I particularly like this specific piece out of his series because “Power Pump”, while still looking foreboding, further takes on an aesthetic quality that is reflective of the artist’s crossroads of sensibilities as a visual artist, architect, and programmer. The realistic rendering and materiality adds another level of dimension that seems to appear even more than just 3-D in a 2-D representation.

LO-05

Pixar is known as one of the first studios to produce high quality 3D animated feature-length films.
Their process is similar to the creation of any digital media which includes storyboard, voice acting, art design, music. I admire the drive and vision of the studio in creating a feature-length film with 3D rendering.
There are important steps and processes that take advantage of the computers, namely 3D rendering.
I imagine the algorithms create the 2D product from the 3D models by capturing the animations from a specific angle.
Pixar movies always have an indescribable quality that no other early studio was able to recreate. By viewing the final product, it is abundantly clear that every department cares deeply about their work and the project as a whole.

The models are created by artists using computers then called by the animators to create scenes for the movie. Pixar developed out of an older rendering software, Renderman, which played a pivotal role in the creation of movies like Jurassic Park and Toy Story. This software is used to put the final touches on the project, like textures and lighting, creating the final 2D product after a few days of rendering.

Toy Story (1995)
Walt Disney Pictures
Pixar Animation Studios


Project-05

sketch
//Shaun Murray, Section B

var x = 100
var y = 100

function setup() {
    createCanvas(500, 500);
   
}

function draw() {
    background(0, 200, 255);

    //cloud set 1
    for (x = -40; x <= width - 95; x += 190) {
    	for (y = -35; y <= height - 100; y += 75){
    		cloud(x, y);
    	}

        noLoop();
    }
	
	//cloud set 2
	for (x = 50; x <= width - 95; x += 190) {
    	for (y = 8; y <= height - 100; y += 75){
    		cloud(x, y);
    	}

    	noLoop();
    }
    

}

function cloud(x, y) {
	push();
    translate(x, y);

    //cloud 
	noStroke();

	fill(255);
	ellipse(95, 83, 43, 43);
	fill(245);
	ellipse(97, 85, 40, 40);

	fill(255);
	ellipse(118, 88, 30, 30);
	fill(245);
	ellipse(120, 90, 27, 27);

	fill(255);
    ellipse(80, 91, 25, 23);
    fill(245);
    ellipse(83, 94, 23, 20);

	fill(255);
	ellipse(100, 100, 80, 10);
	fill(245);
    ellipse(105, 101, 75, 8);

    pop();
}

When I heard wallpaper, I thought of Andy’s room.

Project-05-Wallpaper

I was inspired by one of my favorite prints-cow print, and a fruit I love- cherries. Additionally, when you click on the image, the background will change.

graanak-05
//Graana Khan
//Section B
//graanak@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	
	//cow print backdrop 

	background(255);
	noStroke();
	fill(0);
	beginShape();
	curveVertex(40, 45);
	curveVertex(40, 45);
	curveVertex(46, 35);
	curveVertex(76, 26);
	curveVertex(139, 78);
	curveVertex(66, 141);
	curveVertex(36, 123);
	curveVertex(47, 83);
	curveVertex(47, 83);
	endShape();
	beginShape();
	curveVertex(180, 32);
	curveVertex(180, 32);
	curveVertex(197, 19);
	curveVertex(249, 23);
	curveVertex(255, 62);
	curveVertex(232, 62);
	curveVertex(232, 62);
	endShape();
	beginShape();
	curveVertex(276, 45);
	curveVertex(276, 45);
	curveVertex(307, 23);
	curveVertex(361, 26);
	curveVertex(375, 89);
	curveVertex(369, 126);
	curveVertex(318, 141);
	curveVertex(282, 82);
	curveVertex(282, 82);
	endShape();
	beginShape();
	curveVertex(156, 141);
	curveVertex(156, 141);
	curveVertex(152, 120);
	curveVertex(196, 82);
	curveVertex(256, 117);
	curveVertex(316, 197);
	curveVertex(259, 220);
	curveVertex(176, 187);
	curveVertex(176, 187);
	endShape();
	beginShape();;
	curveVertex(344, 182);
	curveVertex(344, 182);
	curveVertex(355, 199);
	curveVertex(355, 231);
	curveVertex(331, 196);
	curveVertex(331, 196);
	endShape();
	beginShape();
	curveVertex(83, 172);
	curveVertex(83, 172);
	curveVertex(56, 170);
	curveVertex(44, 200);
	curveVertex(52, 210);
	curveVertex(87, 200);
	curveVertex(87, 200);
	endShape();
	beginShape();
	curveVertex(168, 253);
	curveVertex(168, 253);
	curveVertex(175, 231);
	curveVertex(196, 228);
	curveVertex(218, 241);
	curveVertex(208, 273);
	curveVertex(180, 273);
	curveVertex(180, 273);
	endShape();
	beginShape();
	curveVertex(78, 253);
	curveVertex(78, 253);
	curveVertex(130, 247);
	curveVertex(180, 331);
	curveVertex(142, 369);
	curveVertex(78, 377);
	curveVertex(36, 317);
	curveVertex(36, 317);
	endShape();
	beginShape();
	curveVertex(250, 253);
	curveVertex(250, 253);
	curveVertex(311, 244);
	curveVertex(354, 259);
	curveVertex(369, 293);
	curveVertex(307, 321);
	curveVertex(237, 324);
	curveVertex(237, 324);
	endShape();
	beginShape();
	curveVertex(214, 341);
	curveVertex(214, 341);
	curveVertex(242, 345);
	curveVertex(248, 365);
	curveVertex(206, 377);
	curveVertex(195, 367);
	curveVertex(195, 367);
	endShape();
	beginShape();
	curveVertex(234, 400);
    curveVertex(234, 400);
    curveVertex(293, 349);
    curveVertex(369, 363);
    curveVertex(388, 400);
    curveVertex(388, 400);
    endShape();
    beginShape();
    curveVertex(23, 348);
    curveVertex(23, 348);
    curveVertex(44, 362);
    curveVertex(52, 388);
    curveVertex(10, 384);
    curveVertex(5, 374);
    curveVertex(5, 374);
    endShape();

    //red cherry columns 

    for(var x = -10; x <= 340; x += 100){
    	for(var y = -60; y <= 372; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(-15));
    		cherries();
    		pop();
    	}
    }


    // pink cherry columnns

    for(var x = 60; x <= 293; x += 100){
    	for(var y = 45; y <= 352; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(15));
    		pinkcherries();
    		pop();
    	}
    }
    noLoop();
}

function mousePressed(){
    background(213, 238, 247);
    for(var x = 0; x <= 360; x += 145){
        for(var y = 0; y <= 360; y += 105){
        	push();
        	translate(x,y);
        	clouds1();
        	pop();
    		
    	}
    }

    for(var x = 0; x <= 260; x += 145){
    	for(var y = 0; y <= 260; y += 105){
    		push();
    		translate(x,y);
    		clouds2();
    		pop();
    	}
    }

    //red cherry columns 

    for(var x = -10; x <= 340; x += 100){
    	for(var y = -60; y <= 372; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(-15));
    		cherries();
    		pop();
    	}
    }


    // pink cherry columnns

    for(var x = 60; x <= 293; x += 100){
    	for(var y = 45; y <= 352; y += 80){
    		push();
    		translate(x,y);
    		rotate(radians(15));
    		pinkcherries();
    		pop();
    	}
    }
    noLoop();    
}

//cherries pattern

function cherries(){

	//stems
	stroke(61, 130, 48);
	strokeWeight(2);
	line(35, 40, 44, 22);
	line(53, 40, 44, 22);
	
	//leaf
	noStroke();
	fill(61, 130, 48);
	beginShape();
	curveVertex(44, 22);
	curveVertex(44, 22);
	curveVertex(46, 19);
	curveVertex(50, 19);
	curveVertex(47, 22);
	curveVertex(47, 22);
	endShape();

	//cherry
	noStroke();
	fill(229, 14, 14);
	circle(35, 44, 15);
	circle(52, 44, 15);

}

function pinkcherries(){

	//stems
	stroke(61, 130, 48);
	strokeWeight(2);
	line(35, 40, 44, 22);
	line(53, 40, 44, 22);
	
	//leaf
	noStroke();
	fill(61, 130, 48);
	beginShape();
	curveVertex(44, 22);
	curveVertex(44, 22);
	curveVertex(46, 19);
	curveVertex(50, 19);
	curveVertex(47, 22);
	curveVertex(47, 22);
	endShape();

	//cherry
	noStroke();
	fill(255, 199, 227);
	circle(35, 44, 15);
	circle(52, 44, 15);

}


//clouds1 pattern 
function clouds1(){
	noStroke();
	fill(255);
	rect(21, 23, 51, 28, 30);
	rect(51, 40, 38, 18, 15);
}

//clouds2 pattern 
function clouds2(){
	noStroke();
	fill(255);
	rect(106, 76, 60, 24, 20);
	rect(103, 89, 33, 24, 10);
}

Project 05- Wallpaper

I really like bubble tea, so I created this homage to the drink It was difficult for me to coordinate and organize the spacing in between the different drinks, especially taking into consideration the scaling factor.

peachsketch
function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(255, 224, 226);
//mint stripes
  for (var m = 0; m < width; m+=90){
    push();
    translate(0, m-275)
    strokeWeight(7);
      stroke(202, 230, 225)
      line(0,0,width, height)
    pop();
}
//blue bubble tea cups
    for (var i= 0; i < width-60; i+=100){
    push();  
  	translate(i, 0);
  
      for(var j = 20; j< height; j += 50){
        push();
        translate(0, (j*3)-90);
        rotate(PI/8)
        stroke(134, 164, 219)
  		strokeWeight(5)
  noFill();
  //bubble tea cap
  ellipse(122, 30, 40,15);
  //bubble tea cup
      line(100,30,110,80);
      line(144, 30, 135,80);
      line(134,80,110,80);
  //straw
  stroke(65, 95, 150)
  strokeWeight(7);
  	line(122, 15,122, 70)
  //tapioca balls
  stroke(0)
  strokeWeight(6);
    point(132, 70);
    point(127, 67);
    point(114, 66);
    point(115, 74);
    point(122, 69);
    point(127, 74);
    pop();
  }
    pop();
    }
  
  //mango green tea cups
      for (var a= 0; a < width-60; a+=100){
    	push();
  			translate(a-50, 0);
      for(var c = 0; c< height; c += 50){
      push();
        translate(30, (c*3));
        rotate(-PI/8)
        scale(0.5)
          stroke(179, 139, 104)
          strokeWeight(5)
        noFill();
          ellipse(122, 30, 40,15);
            line(100,30,110,80);
            line(144, 30, 135,80);
            line(134,80,110,80);
      noStroke();
      fill(255, 195, 56)
        quad(107, 60, 135, 60, 135, 80, 107, 80);
      strokeWeight(7);
        line(122, 15,122, 70)
    pop();
    }
  pop();
  }
  noLoop();
}

Looking Outwards-05

Air Max Campaign for Nike by ManvsMachine.

Graphic by ManvsMachine.

In this campaign, ManvsMachine created a series of 3d computer graphics that abstracted Nike’s Air Max sneaker into a layered composition. This project is admirable in its use of different textures to create variation between the abstracted shoes. Shading, transparency, and texture all help the graphics appear 3d. The textures he uses communicates the message of the shoe campaign as they demonstrate the airiness and lightness of the shoe, while his render of the shoe form composed from stones communicates a different aspect of the shoe’s performance. 

The shadows casted on the graphics are what truly help make it appear 3d. It gives dimension to the illustration and generates surfaces that bend, fold, and capture the light differently. In the campaign video linked below, ManvsMachine animates the graphics in a way that responds to the textures of the graphics which additionally helps make them appear 3d and have qualities that are bound to the physics of our world like gravity. 

Overall this project creatively uses all these methods to simulate the 3d experience of the graphic. 

Project – 05 – Wallpaper

sketch
function setup() {
    createCanvas(600,600);
}

function draw() {
	background(255,203,134);
//	background(0,24,91);

	// Repeat Confetti 
	for (var x = 20; x < width; x += 80){
		for (var y = 20; y < height; y += 185){
		push(); 
		translate(x,y); 
		confetti(x,y); 
		pop(); 
		}
	}	

	// Repeat Pumpkin 
	for (var x = 0; x < width - 100; x += 200){
		for (var y = 0; y < height - 100; y += 200){
		push(); 
		translate(x,y); 
		pumpkin(x,y); 
		pop(); 
		}
	}

	// Repeat Ghost 
	for (var x = 0; x < width - 200; x += 200){
		for (var y = 0; y < height - 200; y += 200){
		push(); 
		translate(x,y); 
		ghost(x,y); 
		pop(); 
		}
	}

}

 function pumpkin(a,b){
	// Pumpkin Stem 
	noStroke(); 
	fill(48,26,0); 
	triangle(95,25,105,25,100,60); 

	// Shadow Under Pumpkin
	fill(239,177,115); 
	ellipse(100,145,130,35); 
	// Pumpkin
	fill(243,132,4); 
	ellipse(66.5,100,50,100); 
	ellipse(100,100,55,100); 
	ellipse(133,100,50,100); 
	// Eyes 
	fill(0); 
	ellipse(73,90,12); 
	ellipse(126,90,12);  
	// Mouth 
	fill(0); 
	ellipse(100,120,20,30); 
	fill(243,132,4);
	ellipse(100,110,20,15);
	fill(243,132,4);
	rect(95,110,8,10);
	// Nose 
	fill(0);
	triangle(93,105,100,92,107,105);
}

function confetti(a,b){
	noStroke(); 
	// Yellow Circles 
	fill(255,251,203); 
	ellipse(0,0,25); 
} 

function ghost(a,b){
	fill(255,255,255)
	noStroke(); 
	// Body 
	ellipse(200,210,65,90); 
	ellipse(200,235,23,45); 
	ellipse(180,235,23,45); 
	ellipse(220,235,23,45);
	// Eyes  
	fill(0); 
	ellipse(185,205,5); 
	ellipse(215,205,5); 
	// Mouth 
	ellipse(200,210,7,4); 
	// Cheeks 
	fill(255,193,221); 
	ellipse(183,210,7,4); 
	ellipse(217,210,7,4); 
}

I was inspired by the fall season and Halloween festivities for this project.

Looking Outwards 05: 3D Computer Graphics

The 3D computer graphics project I am interested in is Andy Lomas’ “Aggregation” series. Lomas takes inspiration from famous scientists and mathematicians who studied nature’s processes of building and rebuilding. He uses the Diffusion Limited Aggregation to simulate a growing object; this object is built by random particles moving through the space and interacting in novel ways to form unique and complex objects.

A video depicting some of the variations of the Aggregation series by Andy Lomas (2005).

The algorithm can also be modified in order to represent different features or changes within the imagined environment, creating very different digital simulations. These works are quite interesting as they visualize the natural principles seen in coral reef growth or sediment erosion while also being generative and aesthetically pleasing. I think this series is a very satisfying synthesis of natural phenomena and technology, by using computer graphics as the vessel for and visual representation of them.