Category: SectionA

Project-05-Wallpaper

sketchDownload
//Isabel Xu
//15-104 Section A
const Y_AXIS = 1;
function setup() {
  createCanvas(480,480);
  // Two color in the end of the neon hue
  c1 = color(223,255,0);
  c2 = color(116, 0, 225);

  noLoop();
}

function draw() {
  // background
  setGradient(0, 0, 480, 480, c1, c2, Y_AXIS);
  //ellipseShape
  drawPattern();

}

function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();

    for (let i = y; i <= y + h; i++) {
      let inter = map(i, y, y + h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);
    }
}

function drawPattern(){
	cirW=150;
  	for (var x = 0; x <= width;x +=150){
  		cirH=150;
  		for (var y = 0;y <= height;y+=150){
  		noStroke();
  		fill(250);
  		ellipseMode(CORNER)
  		ellipse(x,y,cirW,cirH);
  		cirH-=40;
  	}
  	cirW-=40;
  }
}

A study on geometric symbols evolved from circles.

Project 5

I really enjoyed making the avocado’s in the project and it reminded me of breakfast!

sketch 
//Aadya Bhartia
//Section A

function setup() {
    createCanvas(600, 400);
    background(256,156,155);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	var aX = 70;
	var bX = 60;
	var aY = 90;
	var bY = 60;

	for(var y =18;y<=height+20;y+=80){
		if(y == 18||y==178||y == 338){//checking for even rows 
			for(var x = 50;x<=width;x+=100){
				avo1(x,y);
			}
		}
		else{
			for(var x = 0;x<=width;x+=100){
				avo2(x,y)
			}
		}
	}
	noLoop();
}
function avo1(a,b){
	b = b+2;
	//avocado shadow 
	noStroke();
	fill(25, 68, 35, 170);
	var a1 = a+10;
	beginShape();
	curveVertex(a1,b-65);
	curveVertex(a1-10,b-63);
	curveVertex(a1-19,b-52);
	curveVertex(a1-21,b-30);
	curveVertex(a1-30,b+12);
	curveVertex(a1,b+32);
	curveVertex(a1+30,b+12);
	curveVertex(a1+21,b-30);
	curveVertex(a1+19,b-52);
	curveVertex(a1+10,b-63);
	endShape(CLOSE);
	//the green part of avocado
	stroke(25,68,35);
	strokeWeight(2);
	fill(240,255,196);
	beginShape();
	curveVertex(a,b-65);
	curveVertex(a-10,b-63);
	curveVertex(a-19,b-52);
	curveVertex(a-21,b-30);
	curveVertex(a-30,b+12);
	curveVertex(a,b+32);
	curveVertex(a+30,b+12);
	curveVertex(a+21,b-30);
	curveVertex(a+19,b-52);
	curveVertex(a+10,b-63);
	endShape(CLOSE);
	//seed
	fill(163, 107, 67);
	stroke(69,48,25);
	strokeWeight(1);
	ellipse(a,b+2,35);
	//seed highlight
	noFill();
	stroke(69,48,25);
	strokeWeight(3.5);
	arc(a+2, b+2, 20, 20, 0, HALF_PI);
}
function avo2(a,b){
	//avocado shadow - whole
	var a2 = a-6;
	noStroke();
	fill(25, 68, 35,100);
	beginShape();
	curveVertex(a2,b-50);
	curveVertex(a2-4,b-49);
	curveVertex(a2-9,b-42);
	curveVertex(a2-11,b-25);
	curveVertex(a2-18,b+5);
	curveVertex(a2,b+19);
	curveVertex(a2+18,b+5);
	curveVertex(a2+11,b-25);
	curveVertex(a2+9,b-42);
	curveVertex(a2+4,b-49);
	endShape(CLOSE);
	//Avocado as a whole 
	stroke(25,68,35);
	strokeWeight(2);
	fill(25, 68, 35);
	beginShape();
	curveVertex(a,b-50);
	curveVertex(a-4,b-49);
	curveVertex(a-9,b-42);
	curveVertex(a-11,b-25);
	curveVertex(a-18,b+5);
	curveVertex(a,b+19);
	curveVertex(a+18,b+5);
	curveVertex(a+11,b-25);
	curveVertex(a+9,b-42);
	curveVertex(a+4,b-49);
	endShape(CLOSE);
	//white specks on the avocado 
	noStroke();
	fill(255,255,255,50);
	for(var d = a-15;d<=a+20;d+=2){
		ellipse(d,random((b-30), b+30),2);
	}
}

Looking Outwards : 05

Alexey Kashpersky has  experience in creatingCG artworks, large amounts of 3D models for televisions, and 3D printing studios. His series of Virus artworks are intended to raise awareness while transforming it into something fantastic and something that had its own unique character. These majestic drawings although initially pleasing draw attention to the dangers of these viruses and diseases in the most thoughtful and fantastical way possible. Through VR, attention to detail and clean modelling, he is able to create beautiful forms which morph and grow as they evolve.

He also compares his imagination of these viruses to coral reefs, hoping to live the healthiest and happiest life travelling around the world through his imagination.

3D Graphic Art

Eamonn Burke

Alex Grey – Fear Innoculum Cover

This visual was the cover art for the release of a recent album by one of my favorite bands, TOOL, designed by their artist Alex Grey.
What I really love about this artwork is that it establishes not just a 3D image, but a 3D environment. The piece is very atmospheric in its arrangement, and also has a strong sense of perspective and motion. In order to achieve this,
Grey used his artistic sensibility. Specifically, the behavior of the top and bottom borders of the image really reinforce this sense of immersion, as does the emanating light which generates ominous highlights on the eyes and contributes to the image’s tone of mysticism.
His contrasting use of blur and definition enhance the sense of movement.

I could not find the software that Alex Grey used, but I would guess it is Rhino or a similar one.
I also guess that this is a more complex version of our classwork now: using one coded element (a 3D eye),
using nested loops to repeat that component and guide it along a warped path, adding a light source with something like V-ray,
and taking a perspective angle view.

Looking Outwards 5: 3D Graphics and faces

3D graphics have come a long way since its inception in the late 1970s, and is prevalent everywhere today. This is most prominently seen in movie and video game industry, where new technological breakthroughs revolutionize the industry every few years. Modern hardware and software allows us to create extremely complex, photo-realistic environments through techniques such as photogrammetry and physically-based-materials. We can even somewhat accurately simulate the physics of the real world to create realistic looking fluid simulations like fire, smoke, and water.

However, despite the extreme amount of detail that can be achieved through our current technology, recreating realistic, believable CG faces remains one of the biggest challenges in the 3D graphics industry. No one can pin-point exactly what it is that makes a computer-generated face uncanny; even if every hair, every pore, every bead of sweat is generated, it will still remain in the uncanny valley.

There have been a few successes when it comes to creating fully computer-generated faces that are distinctly NOT human. The alien race from the 2012 movie Avatar is a great example of how a CG face can achieve a sense of realism and believability. More recently, Marvel’s Thanos has taken the spotlight as being one of the more successful fully-CG characters. However, these aren’t human faces, so they never come across as uncanny.

The most successful CG face that manages to cross the uncanny valley, in my opinion, is the recreation of Sean Young’s character, Rachel, in Bladerunner 2049, courtesy of the English VFX company MPC. The combination of ideal lighting conditions, high quality 3D scans, the painstaking recreation of every muscle on Sean Young’s face, and the amazing performance of body-double Loren Peta resulted in what is probably the most realistic looking CG face in movie history. And of course, a lot of credit goes to the animators that made the subtle facial expressions look absolutely flawless.

Most of MPC’s success was achieved through how the scene was filmed – camera angles, lighting trickery, and so on. The recreation of Sean Young’s character would not have looked nearly as good in any other lighting condition or environment. 3D graphics technology has yet to conquer the challenge that is the human face.

Blade Runner 2049': How VFX Masters Replicated Sean Young as Rachael | IndieWire

PROJECT-05 (wallpaper)

sketch
// SEAN CHEN
// 15-104 A

function setup() {
    smooth();
    createCanvas(600, 1000);
    background(255,194,130);
}

function poka(scale) { // background pokadots
    for (var i = 0; i < scale/2; i++){ // array columns
        noFill();
        var w =  width / scale;
        var h = height / scale;
        push();
        translate(i*(2*w), 0);
        for (var j = 0; j < scale+1; j++){ // drawing a column
            push();
            var r = random(0.4, 0.6); // giving the ellipse rand sizes
            translate (0, j*h); // vert column of random ellipse
            ellipse (w/2, h/2, r*w, r*h);
            translate (w, h/2-h) // shifted vert column of rand ellipse
            ellipse (w/2, h/2, r*w, r*h);
            pop();
        }
        pop();
    }
}


function leaf() { // drawing a little leaf (mint color)
    stroke(88,216,169);
    strokeWeight(5);
    line(-10, 0, 10, 0);
    line(-5, -5*sqrt(3)/2, 5, 5*sqrt(3)/2);
    line(-5, 5*sqrt(3)/2, 5, -5*sqrt(3)/2);
}

// drawing a small branch from a certain x,y
// (same as stem func)
function miniStem(x, y) { 
    noStroke();
    fill(94,59,24)
    for (var i = 0; i < 25; i++) {
        rectMode(CENTER);
        square(x, y+i, 5);
        if (i == 20) { // right before the end of the branch
            push();
            translate(x, y+i); // move leaf to that coordinate
            leaf(); // draw leaf
            pop();
        }
        x += random(-5, 5);
    }
}

function stem(maxH) {
    noStroke();
    fill(94,59,24)
    var x = 50 // center pt for each tile
    for (var i = 0; i < maxH; i++) {
        if (i < maxH-25) { // before getting to last 25 "pixels"
            rectMode(CENTER); // square using center
            square(x, i, 5); // drawing sqaure at x, i which is shifting down
            x += random(-3, 3); // aggregate the branches left and right
        } else {
            square(x, i, 5); // drawing squre
            var diff = x-50; // difference from center
            x += -1*(diff/15); // shifting x back to center for seamless
        }
        var y = i; // for ministem
        if (i%50 == 0) { // every 50 "pixels" downward add a small branch
            miniStem(x, y);
        }
    }
}

function draw() {
    poka(50); // add pokadot bg
    for (var i = -2; i < 9; i++) { // tiling of the branches
        push();
        translate (100*i, 0);
        for (var j = -2; j < 9; j++) {
            push();
            translate (0, 200*j);
            stem(200);
            pop();
        }
        pop();
    }
    noLoop();
}

LO-05 (3d computer graphics)

For todays looking outwards I want to focus on a specific 3D graphics artist, Randy Cano. He is a self taught 3D computer graphics artist and animator that uses 3D software to create unique and “trippy” scenes. His work varys from explosions, to paint spilling on a specific object, to fury humanoid figures dancing to strange music. Randy morphs our reality by using his personal style of morphing humanoid figures with unconventional materials and textures. In one of his works, a soft rubbery head is pushed through a dense field of equally rubbery heads, and that is the entire work: heads pushing through heads. Although all of his works are short clips of rendered videos on instagram, which is where I consume most of his content, it provides an interesting escape from reality in a 3-5 seconds video.

Project-05

sketch
//dmclaugh, Diana McLaughlin, Section A

var s = 60;
var x = 90;
var y;

function setup() {
    createCanvas(600, 600);
    background(52, 225, 235); //light blue
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //little background rectangles
	for(var y1 = 2; y1 <= height; y1 += 5) {
		for(var x1 = 2; x1 <= width; x1 += 5) {
		noStroke();
		fill(0, 0, 255);
        rect(x1, y1, 2, 2);
		}
	}
    //pattern
	for (y = 40; y <= height; y += 90){
		for (x = 30; x <= width; x += 90)
		pattern(x, y);
	}
    
}

function pattern(x, y){
	push();
	rectMode(CENTER);
	translate(x, y);
    stroke(255);
    strokeWeight(4);
    fill(random(0, 256), random(0, 256), random(0, 256));
    rect(0, 0, s, s); //background rectangle
    rotate(radians(45));
    rect(0, 0, s, s); //rotated rectangle
    fill(255);
    ellipse(0, 0, 5, 5); //white dots
    ellipse(0, 8, 5, 5);
    ellipse(0, -8, 5, 5);
    ellipse(8, 0, 5, 5);
    ellipse(-8, 0, 5, 5);
    pop();

    noLoop();
}

I made this wallpaper based off of something you might see on Animal Crossing patterns. I played around with which colors to use for the rectangles’ fill, and ended up selecting random colors because I liked how bright and colorful it was and thought it worked best with what I was looking for. I tried doing more subtle shades of blue and purple, but it seemed too dull for what I was looking for.

LO-05

Tesla by Toni Bratincevic uses V-Ray to produce its 3D graphics. The project is dedicated to Nikola Tesla and presents a man (Tesla), standing on the control board with the Tesla coil in an arch above him. I originally picked the project because I did not know what it was depicting, but thought it was humorous. Once I found the creator’s description, the image made more sense.
When creating this image, the author knew that he wanted to depict Tesla and the Tesla coil in the image, but that was all that he started with. The rest of the creation, including how the coil and the Tesla figure are displayed, was up to artistic sense.

Tesla (2014) by Toni Bratincevic

Project 5: Wallpaper

For this week’s project, I decided to make a pattern off of 2 animals and the things that they eat! In this case, I chose a rabbit and a bear, and alternated the pattern in between the bigger animal face and smaller food item to create a rhythm both vertically and horizontally that alternates between big and small.

sketchDownload
// Susie Kim, Section A
// susiek@andrew.cmu.edu
// Assignment-05-A

function setup() {
    createCanvas(600, 600);
    background(163, 185, 216);
    noLoop();
}

function draw() {
	background(163, 185, 216);

	// bunnies
	for(var x = 25; x <= 600; x+= 150) {
		for(var y = 0; y <= 600; y+= 200){
			push();
			translate(x, y);
			bunny(x,y);
			pop();
		}
	}

    // carrots
	for(var x = -50; x <= 600; x+= 150) {
		for(var y = 0; y <= 600; y+= 200){
			push();
			translate(x, y);
			carrot(x,y);
			pop();
		}
	}

    // bears
	for(var x = -50; x <= 600; x+= 150) {
		for(var y = 100; y <= 600; y+= 200){
			push();
			translate(x, y);
			bear(x,y);
			pop();
		}
	}

    //fishes
	for(var x = 25; x <= 600; x+= 150) {
		for(var y = 100; y <= 600; y+= 200){
			push();
			translate(x, y);
			fish(x,y);
			pop();
		}
	}
}

function bunny(x,y) {
	// head
	noStroke();
	fill(255);
	ellipse(50, 65, 69, 50); 

	// ears
	ellipse(30, 37, 25, 55); 
	ellipse(70, 33, 23, 55);

	// eyes
	fill(51, 51, 51);
	ellipse(38, 60, 5, 5); 
	ellipse(62, 60, 5, 5);

    //  nose
    ellipse(50, 70, 6, 6) 

	// cheeks
	fill(246, 202, 201);
	ellipse(30, 69, 13, 8); 
	ellipse(70, 69, 13, 8);

	// mouth
	strokeWeight(2);
	noFill();
	stroke(51, 51, 51); 
	curve(50, 30, 50, 70, 40, 75, 40, 60);
	curve(50, 30, 50, 70, 60, 75, 60, 60);
}

function bear(x,y) {
	// head
	noStroke();
	fill(225, 189, 152);
	ellipse(50, 60, 68, 58);

	// ears
	ellipse(25, 35, 24, 24); 
	ellipse(75, 35, 26, 29);

	// cheeks
	fill(239, 163, 163);
	ellipse(30, 65, 13, 8); 
	ellipse(70, 65, 13, 8);

	// eyes
	fill(51, 51, 51);
	ellipse(37, 55, 5, 5); 
	ellipse(63, 55, 5, 5);

    // nose
    ellipse(50, 65, 6, 6); 

    // mouth
    strokeWeight(2);
	noFill();
	stroke(51, 51, 51);
    line(50, 65, 50, 72); 
	curve(45, 60, 45, 71, 55, 71, 55, 60);
}

function carrot(x,y) {
	//leaf1
	noStroke();
	fill(165, 209, 117); 
	ellipse(50, 38, 9, 20); 
	
	// leaf2
	push();
	translate(57, 38);
	rotate(radians(30));
	ellipse(0, 0, 9, 23);
	pop();

	//leaf3
	push(); 
	translate(43, 38);
	rotate(radians(-30));
	ellipse(0, 0, 9, 23);
	pop();


	// carrot body
	fill(253, 195, 117);
	ellipse(50, 60, 17, 35); 
}

function fish(x,y) {
	// body
	noStroke();
	fill(74, 98, 168); 
	ellipse(46, 50, 38, 18); 
	push();

    // back fin 1
    translate(63, 54); 
    rotate(radians(17));
	ellipse(0, 0, 23, 9);
	pop();

    // back fin 2
	push();
	translate(63, 46); 
    rotate(radians(-17));
	ellipse(0, 0, 23, 9);
	pop();

    // eye
	fill(0); 
	ellipse(37, 47, 3, 3); 

    // side fin
	fill(58, 78, 155); 
	ellipse(48, 53, 15, 7)
}

To start, I “sketched” out each animal, as well as the pattern, in illustrator, and coded from there: