Month: October 2020

Project 5: Wallpaper

I was feeling a little dead this week so why not skulls!

sketch
Illustrator sketch I did before coding.
//FrancisPark
//Section C

function setup() {
    createCanvas(600, 600);
    noStroke();
}
 
function draw() {
    background(0);
    noLoop(); 
        for (var y = 1; y < height + 120; y += 119) {
          for (var x =1; x < width + 120; x += 119) {
            skull(x,y);
            }
        }
}

function skull(x,y) {
  push();
  translate(x,y);
  noStroke();
  //border shapes
  fill("#ED4999");
  rect(0,24,2,73);
  rect(23,0,73,2);
  rect(118,21,2,73);
  rect(23,117,73,2);
  fill("#EB008B");
  arc(0,0,52.5,52.5,0,HALF_PI);
  arc(119.8,0,52.5,52.5,HALF_PI,PI);
  arc(119.8,120,52.5,52.5,PI,PI* 3/2);
  arc(0,120,52.5,52.5,PI*3/2,0);
  fill("#FF96CF");
  arc(0,0,34.5,34.5,0,HALF_PI);
  arc(119.8,0,34.5,34.5,HALF_PI,PI);
  arc(119.8,120,34.5,34.5,PI,PI* 3/2);
  arc(0,120,34.5,34.5,PI*3/2,0);
  
  //skull shape
  fill("#EE498A");
  quad(43,60,77.5,60,69,87,51.5,87); //jaw
  fill("#231F20"); //teeth
  quad(48.5,70.5,49.7,70.5,54,87,52.8,87);
  quad(51.5,70.6,52.8,70.5,55.7,87,54.5,87);
  quad(54.5,70.5,56,70.5,57.5,87,56.5,87);
  quad(57.7,70.5,59,70.5,59.5,87,58.5,87);
  quad(61.3,70.5,62.5,70.5,62,87,60.8,87);
  quad(64.3,70.5,65.5,70.5,63.7,87,62.6,87);
  quad(67.6,70.5,68.7,70.5,65.5,87,64.5,87);
  quad(70.5,70.5,71.7,70.5,67.5,87,66.4,87);
  fill("#EE498A");  //various parts of eyes and head
  ellipse(60,54,40.5,43);
  fill("#231F20");
  arc(60,58,39,44,PI,0);
  fill("#EB068C");
  arc(51.5,58,19,31,PI,0);
  arc(68,58,19,31,PI,0);
  fill("#F1A9C1");
  arc(60,60,17,42,PI,0);
  fill("#EE498A");
  circle(49.3,60.5,21.8);
  circle(70.5,60.5,21.8);
  fill("#231F20");
  circle(49.3,60.5,14.7);
  circle(70.8,60.5,14.7);
  fill("#EE498A");
  arc(50,62,6.5,6.5,PI,0);
  arc(71,62, 6.5,6.5,PI,0);
  fill("#231F20");
  triangle(60.8,59.6,63.7,71,60.8,71.8);
  triangle(59.5,59.6,59.5,71.8,56.6,71);    
  pop();
}

LO: Virtual Fashion Shows

With all precautions given Covid-19, creative people have been searching for more ways to communicate and further innovate despite these very limiting times. One interesting implementation of technology, specifically 3D rendering and computer-generated graphics, is direct-to-consumer based fashion label Hanifa’s virtual fashion show.

Anifa Mvuemba, Founder and Creative Director of Hanifa

Anifa Mvuemba, founder and creative director of Hanifa, launched their Pink Label Congo line through an Instagram Live streaming of a video featuring a series of animated 3D renderings. The garments were put against a black backdrop, without a human model; just the walking dresses treading empty space right in viewers’ hands.

Using computer generated graphic technology and 3D rendering softwares, Mvuemba was able to break past the limitations brought forth by the pandemic and reached an even larger and more inclusive audience through these means.

This recent exploration into the world of digital fashion shows challenges the traditional experience of traditional runways and the necessity for these shows. I begin to ask myself questions about this: does the convenience and breadth of being able to reach a larger live audience outweigh the rich experience of the physicality of seeing models walk by in garments on a stage?

Mvuemba thinks that her fashion show may be the start of a new wave in fashion [shows]. The computer softwares allow her to not only render designs to finer detail than seen by the naked eye, but also fit all her garments to figures often seen with Black women, creating a more inclusive space in a highly discriminatory industry. She hopes to see a day where everyone, not just rich socialites, can “sit at the front row” and experience fashion come to life.

Project 5: Wallpaper

My process for creating this wallpaper assignment was to first create the repeating sun pattern and then the repeating snake pattern. To accomplish this, I created a separate sun function and snake function. After I created the two functions, I used a series of for loops to create the patterns. The symbols of the snake and the sun were inspired by the Temple of the Feathered Serpent in Teotihuacán.

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

function draw() {
	background(97,104,181);
	//sun pattern
	push();
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,50);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,100);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,150);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,200);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,250);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,300);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,350);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,400);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	push();
	translate(0,450);
	for(sunRow = 0; sunRow <= 9; sunRow += 1){
		sun();
		translate(50,0);
		}
	pop();
	translate(-20,0);
	for(drawSnake = 0; drawSnake <= 5; drawSnake += 1){
		snake();
		translate(0,105);
	}
	noLoop();
}

function sun() {
	noStroke();
	fill(97,104,181);
	square(0,0,50);
	fill(249,235,219);
	//sun 1
	circle(25,25,25);
	//sun rays 1
	stroke(249,235,219);
	line(25,25,25,5);
	line(25,25,25,45);
	line(5,25,25,25);
	line(45,25,25,25);
	line(25,25,10,10);
	line(25,25,40,40);
	line(25,25,10,40);
	line(25,25,40,10); 
}

function snake(){
	noStroke();
	fill(10,random(100,255),0);
	//body
	beginShape();
		vertex(125,25);
		curveVertex(150,35);
		curveVertex(200,25);
		curveVertex(250,35);
		curveVertex(300,25);
		curveVertex(320,30);
		curveVertex(350,40);
		curveVertex(375,30);
		curveVertex(400,25);
		vertex(475,32.5);
		curveVertex(400,34);
		curveVertex(350,50);
		curveVertex(300,35);
		curveVertex(250,50);
		curveVertex(200,35);
		curveVertex(150,50);
		curveVertex(125,30);
	endShape(CLOSE);
	push();
	//tongue
	stroke(255,10,0);
	line(90,29,80,29);
	//head
	noStroke();
	ellipse(110,29,40,15);
	//eye
	fill(255);
	ellipse(110,27,5,3);
	strokeWeight(3);
	stroke(0);
	//pupil
	point(110,27);
	
	
}

LO- 3D Computer Graphics

A work of 3D graphics that I found interesting is the augmented reality installation “Organised Labour (2016)” by UK artist Alan Warburton. The installation is of green protesters that block a street in Paris and was produced for Une Journée de Coïncidences.
I admire the artwork’s simplicity and strong impact because I appreciate how Warburton uses clear digital models and AR to convey his ideas. I suppose that the algorithms used to render this artwork had to respond to the environment of the Parisian street so that the shadows and size of the installation fit into the environment convincingly. The artist’s goal of the project was to explore the immateriality of AR and how it relates to the urban landscape. As such, the artist’s sensibilities show through the final product because the green model fits into the environment but, due to its style and the fact that it only exists in the digital realm, is constantly reminding the viewer that its not a physical object.

Image of “Organised Labour (2016)”

Project-05-Wallpaper

WPHC
//Hayoon Choi
//hayoonc
//section C

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

function draw() {
    background(232, 241, 255);
    //vertical lines
    for (var x = 0; x < width - 10; x += 35){
        stroke(255);
        strokeWeight(5);
        line(x, 0, x, height);
    }
    //drawing dogs
    for (var x = 100; x < width; x += 200){
    	for (var y = 70; y < height; y += 145){
    		dog(x, y, 0.75);
    	}
    }
    //drawing reflected dogs (2nd and 4th columns)
    for (var x = 200; x < width - 190; x += 200){
    	for (var y = 140; y < height - 140; y += 145){
    		dog(x, y, 0.7, -1);
    	}
    }
}

function dog(x, y, s1 = 1, s2 = 1){
	push();
	fill(216, 154, 80);
	translate(x, y);
	scale(s1);
	scale(s2, 1); //reflecting dog
	//ears
    strokeWeight(5);
	stroke(216, 154, 80)
	strokeJoin(ROUND);
	triangle(18, -35, 19, -19, 4, -23);
	triangle(-12, -39, -5, -24, -20, -22);
	stroke(200);
	fill(200);
	triangle(15, -30, 19, -19, 4, -23);
	triangle(-12, -33, -5, -24, -20, -22);
	//fur
	stroke(216, 154, 80)
	strokeWeight(1);
	fill(216, 154, 80);
	beginShape();
	curveVertex(27, -2);
    curveVertex(27, -2);
	curveVertex(42, 5);
	curveVertex(37, 5);
	curveVertex(44,12);
	curveVertex(32, 12);
	curveVertex(29, 6);
	endShape();
	beginShape();
	curveVertex(44, 34);
    curveVertex(44, 34);
	curveVertex(47, 44);
	curveVertex(42, 42);
	curveVertex(42, 56);
	curveVertex(37, 52);
    curveVertex(37, 52);
	endShape();
	//body
	noStroke();
	ellipse(0, 0, 64, 59);
	ellipse(11, 31, 68, 72);
	ellipse(-1, 49, 80, 44);
	//legs
	ellipse(-11, 69, 12, 24);
	ellipse(-38, 59, 12, 24);
	//mouth
	strokeWeight(0.5);
	stroke(0);
	fill(200);
	arc(-10, 6, 15, 5, QUARTER_PI, PI + QUARTER_PI, OPEN)
	arc(-10, 0, 25, 10, QUARTER_PI, PI + QUARTER_PI, OPEN)
	//eyes
	fill(255);
	ellipse(3, -7, 10, 5)
	ellipse(-20, -7, 10, 5)
	fill(0);
	ellipse(3.5, -7, 7, 4)
	ellipse(-19.5, -7, 7, 4)
	//nose
	ellipse(-17, 0, 5, 3);
	pop();
}

I wanted draw my dog and show the face she makes whenever I call her name. She tries very hard to ignore me and looks at the other direction.

LO-3D Computer Graphics

Peter Kolus is a senior 3D artist and a CG generalist. Kolus has taken lead projects for leading companies such as Disney, Tiger Beer, and Mercedes Benz. For one of his projects, he collaborated with Leo Calliard and Gosia Sluszkiewicz to create a series of artworks called “Heroes of Stones.” I was intrigued by it because it shows such detailed and realistic stone sculptures of heroes and villains from comic books. It was really interesting to see vivid expressions captured on each character’s face, even though they were supposedly just sculptures. In addition, each individual artwork carries so much detail on all aspects, such as lighting and texture. He successfully turned his interest in comics to a realistic artwork in a compelling setting. Kolus was responsible for shading, rendering, and composition. It’s possible that he may have used programs like 3ds Max, photoshop, and nuke to generate different textures and shades. 

Project 05 – Wallpaper

sketch

function setup() {
  createCanvas(600, 600);
  background(250,233,208);
}

function draw() {

  for (let y = 0; y < 10; y++) { //setting up array for the shapes
    for (let x = 0; x < 8; x++ ) {
        push()
        translate(x*80,y*60);
        leftsrf()
        rightsrf()
    	pop()
    }
  }

}

function leftsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b) ;
	quad(0,0,0,40,40,60,40,20);
}

function rightsrf() { 
  noLoop()
  var r = random(0,250);
  var g = random(0,250);
  var b = random(0,250);
  fill(r,g,b)
  quad(40,20,80,0,80,40,40,60)

}

Project 04 – String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 300);
    background(200);
    line(0, 0, 0, 300);
    line(300, 300, 350, 100);
    dx1 = (0-0)/numLines;
    dy1 = (300-0)/numLines;
    dx2 = (550-100)/numLines;
    dy2 = (1)/numLines;
}

function draw() {
	background(0)
    var x1 = 40;
    var y1 = 0;
    var x2 = 0;
    var y2 = 300;
    var x4 = 0;
    var y4 = 400
    for (var i = 0; i <= numLines; i += 1) {
        stroke(0,0,255);
        line(mouseX/1.7, 0, 400, y1); //blue curves
        stroke(255,0,0)
        line(mouseX-30,y1,x2,y2); //red curves
        stroke(0,255,0)
        line(mouseX/1.2,y1,y4,y2) //green curves
        x1 +=dx1
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    } 
}

Project 03 – Dynamic Drawing

sketch
var angle = 0 ;
var x=50 ; 
var y=50 ;


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

function draw() {
	background(mouseX/5,mouseY/5,(mouseY+mouseX)/10);
	stroke(0,mouseX/5,width-mouseY/5);
	strokeWeight(mouseX/100);
    for (let w=0; w<=width;w+=30){ //setting up circle grid 
    	for(let h=0;h<=height; h+=30) {
    		r = 75 * exp(((-1)*dist(mouseX, mouseY,w,h))/100); //varying size with mouse position
    		fill(width-mouseX,height-mouseY,mouseY/5) //varying color of balls with mouse positoin
    		ellipse(w,h,r) ; //circle
    	}
    }
    push();
	translate(mouseY,mouseX); 
	rotate(radians(mouseX));
	fill(mouseY);
	strokeWeight(mouseY/100);
	ellipse(x,y+100,dist(mouseX,mouseY,x,y+100)/10,dist(mouseX,mouseY,x,y+100)/10); //circle floating on top

	translate(mouseX,mouseY);
	rotate(radians(mouseY));
	ellipse (x,y, dist(mouseX,mouseY,x,y)/10, dist(mouseX,mouseY,x,y)/10) ; 
	
	translate(mouseX*0.4,mouseY*0.8);
	rotate(radians(mouseY*0.5));
	ellipse(x+80,y,dist(mouseX,mouseY,x+80,y)/10,dist(mouseX,mouseY,x+80,y)/10);
	pop();
 

}

Project 02 – Variable Face

sketch
var canvaswidth = 640
var eyehx = 230
var eyehy = 270
var lidh = 255
var face = 0
var r=255
var g=255
var b=255

function setup() {
    createCanvas(canvaswidth, 510);
    background(220);
}

function draw() {

	background(r,g,b);

	//face
	strokeWeight(6)
	stroke(25)
	fill(229,149,95);
	ellipse(150,110,200,200); //left ear 
	ellipse(canvaswidth-150,110,200,200); //right ear
	fill(46,44,44);
	ellipse(150,110,120,120); //left ear inner
	ellipse(canvaswidth-150,110,120,120); //right ear inner
	fill(229,149,95); 
	ellipse(canvaswidth/2,270,500,450); //face
	noStroke();
	fill(242,219,140); 
	ellipse(canvaswidth/2,380,320,230); //mouth/chin

	//eyes
	fill(37,37,41)
	ellipse(220,280,60,60); // left eye
	ellipse(canvaswidth-220,280,60,60); // right eye
	fill(255,255,240);
	ellipse(eyehx,eyehy,20,20); // left eye highlight
	ellipse(canvaswidth-eyehx+20,eyehy,20,20); // right eye highlight

	//eyelids
	stroke(229,149,95); 
	strokeWeight(20);
	line(180,255,256,lidh); // left 
	line(canvaswidth-180,255,canvaswidth-256,lidh); // right



	//moon
	noStroke()
	fill(242,229,196);
	ellipse(canvaswidth/2,180,230,200);
	fill(229,149,95);
	ellipse(canvaswidth/2+40,180,175,143);


    //mouth
	if (face == 0){
		stroke(25);
		line(270,400,canvaswidth-270,400); //flat line
	} else if (face == 1){
		stroke(25);
		strokeWeight(6)
		fill(240,184,163)
		ellipse(canvaswidth/2,400,120,70);
		noStroke();
		fill(230,154,143);
		ellipse(320, 414,96,50);
		noFill();
		stroke(25);
		ellipse(canvaswidth/2,400,120,70); //mouth open


	} else if (face == 2){
		stroke(25);
		strokeWeight(22);
		line(270,440,canvaswidth/2,400);
		line(canvaswidth-270,440,canvaswidth/2,400); //upset
	}
}


function mousePressed() {
	lidh = random(218,264);
	r = random(0,255);
	g = random(0, 255);
	b = random(0, 255);
	if (face == 2){
		face = 0;
	} else {
		face += 1;
	}
	


}