Month: September 2016

LookingOutwards-05-sehenry

pink-rhino

pink-sumo

pink-tornado

Duracell Print Campaign Europe/Asia
Ogilvy & Mather Paris
Digital illustration : Full Computer Generated Image.
2010 Cannes Shortlisted
2009 Eurobest Bronze Award

Behance Nikopicto Site

Nikopicto is a Hong Kong based 3d production company that has an enormous portfolio of 3d projects. As I was browsing through their projects, one particular one that caught my eye was one they had made a few years ago called DURACELL. They took the cartoon animation from DURACELL and turned it into a masterpiece. By using a large amount of small pink bunnies, they were able to create a pink stampeding rhino, a pink tornado, and a large pink sumo-wrestler. And if you look closely you can see various bunnies all in different poses. I like when something so small can make up something even bigger and that is exactly what Nikopicto did. The agency that sponsored the full computer generated images was Ogivly and Mather for the client Proctor and Gamble as a part of the Duracell Print Campaign 2009 Europe and Asia.

vtavarez-Looking-Outwards-05

The song “Drugs” by Eden is complemented by this great piece of computational Virtual Reality art. The piece was filmed using a Canon 5D on top of a Kinect, which captured the real-time 3D data using a beta software. Creator, Stuart Cripps, worked hard to incorporate the experience of music into his piece and demoed it 2D system running Rift. The piece uses a series of lines to depict depth and perception. I really enjoy it for its narration of the story and use of virtual reality to immerse the user in the experience. I wish I knew how they incorporated the 2D view into the virtual reality experience, but I could not find anything on that process. I would assume it was putting together several 2d models

presentation1

sihand – LookingOutwards 05 – Glinting Algorithm

Glinting Algorithm

Researchers used their method to model the glittery shell of this snail.
Credit: Jacobs School of Engineering/UC San Diego

If you like the glittery metal texture as much as I do, you would understand the struggle of recreating the shimmering surface in drawings. A couple of current commercial software are able to recreate the details, but only in stills. However, the game has changed recently. A team of researchers led by UC San Diego professor Ravi Ramamoorthi developed an algorithm that significantly improves how computer software reproduces the glints, which is how light interacts with the smallest details on a metal surface.

The current method, which models details at the pixel level, is sufficient for most production but cannot represent the real world scenario. Professor Ramamoorthi’s team, on the other hand, broke down each pixel into “thousands of light-reflecting points smaller than a pixel, called microfacets”, so the results will be more grainy and noisy, and more realistic (Science Daily). Their solution also features a “position-normal distribution” that approximates the distribution of light at each location. This method is tremendously more efficient than the traditional method, where the light on each microfacet is calculated.

With their new algorithm, rendering will become almost instant. Their work is a manifest of how improvement in technology pushes artistic potential.

Iron Man’s armor

Read the original article at Science Daily

Jiyoung Ahn_05_Walll paper

After I saw Sarita Chen’s 8 bit pixel art work, I wanted to explore and learn how this worked. So I chose my favorite character minion, and I decided to explore them and make it into a wall paper.

254296de07591e0bbbd923b4598b6bf4

sketch

//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -05-project


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

function draw() {

  background('pink');

  for(var x = 0; x < width ; x +=70){  
    for(var y = 0; y < height; y += 70){
      heartminion(x,y); 
    }
  } 
}
  function heartminion(x,y){

    noStroke();
    var outline = ('black');
    var heart = ('red');
    var minionskin = ('yellow');
    var goggle = (150);
    var clothes = ('blue');
    var eye = ('white');
    var onepixel = 2.5;

      //line1
    fill(outline);
    rect(x+5*onepixel,y,onepixel*2,onepixel);
    rect(x+8*onepixel,y,onepixel*2,onepixel);

      //line2
    fill(outline);
    rect(x+4*onepixel,y+onepixel,onepixel,onepixel);
    fill(heart);
    rect(x+5*onepixel,y+onepixel,onepixel*2,onepixel);
    fill(outline);
    rect(x+7*onepixel,y+onepixel,onepixel,onepixel);
    fill(heart);
    rect(x+8*onepixel,y+onepixel,onepixel*2,onepixel);
    fill(outline);
    rect(x+10*onepixel,y+onepixel,onepixel,onepixel);

      //line3
    fill(outline);
    rect(x+4*onepixel,y+onepixel*2,onepixel,onepixel);
    fill(heart);
    rect(x+5*onepixel,y+onepixel*2,onepixel*5,onepixel);
    fill(outline);
    rect(x+10*onepixel,y+onepixel*2,onepixel,onepixel);

      //line4
    fill(outline);
    rect(x+5*onepixel,y+onepixel*3,onepixel,onepixel);
    fill(heart);
    rect(x+6*onepixel,y+onepixel*3,onepixel*3,onepixel);
    fill(outline);
    rect(x+9*onepixel,y+onepixel*3,onepixel,onepixel);

      //line5
    fill(outline);
    rect(x+6*onepixel,y+onepixel*4,onepixel,onepixel);
    fill(heart);
    rect(x+7*onepixel,y+onepixel*4,onepixel,onepixel);
    fill(outline);
    rect(x+8*onepixel,y+onepixel*4,onepixel,onepixel);

      //line6
    fill(outline);
    rect(x+7*onepixel,y+onepixel*5,onepixel,onepixel);


      //line8
    fill(minionskin);
    rect(x+5*onepixel,y+onepixel*8,onepixel*6,onepixel);

      //line9
    fill(minionskin);
    rect(x+4*onepixel,y+onepixel*9,onepixel*3,onepixel);
    fill(goggle);
    rect(x+7*onepixel,y+onepixel*9,onepixel*2,onepixel);
    fill(minionskin);
    rect(x+9*onepixel,y+onepixel*9,onepixel*3,onepixel);

      //line10
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*10,onepixel*3,onepixel);
    fill(goggle);
    rect(x+6*onepixel,y+onepixel*10,onepixel,onepixel);
    fill(eye);
    rect(x+7*onepixel,y+onepixel*10,onepixel*2,onepixel);
    fill(goggle);
    rect(x+9*onepixel,y+onepixel*10,onepixel,onepixel);
    fill(minionskin);
    rect(x+10*onepixel,y+onepixel*10,onepixel*3,onepixel);

      //line11
    fill(outline);
    rect(x+3*onepixel,y+onepixel*11,onepixel*2,onepixel);
    fill(goggle);
    rect(x+5*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(eye);
    rect(x+6*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(outline);
    rect(x+7*onepixel,y+onepixel*11,onepixel*2,onepixel);
    fill(eye);
    rect(x+9*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(goggle);
    rect(x+10*onepixel,y+onepixel*11,onepixel,onepixel);
    fill(outline);
    rect(x+11*onepixel,y+onepixel*11,onepixel*2,onepixel);

      //line12
    fill(outline);
    rect(x+3*onepixel,y+onepixel*12,onepixel*2,onepixel);
    fill(goggle);
    rect(x+5*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(eye);
    rect(x+6*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(outline);
    rect(x+7*onepixel,y+onepixel*12,onepixel*2,onepixel);
    fill(eye);
    rect(x+9*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(goggle);
    rect(x+10*onepixel,y+onepixel*12,onepixel,onepixel);
    fill(outline);
    rect(x+11*onepixel,y+onepixel*12,onepixel*2,onepixel);

      //line13
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*13,onepixel*3,onepixel);
    fill(goggle);
    rect(x+6*onepixel,y+onepixel*13,onepixel,onepixel);
    fill(eye);
    rect(x+7*onepixel,y+onepixel*13,onepixel*2,onepixel);
    fill(goggle);
    rect(x+9*onepixel,y+onepixel*13,onepixel,onepixel);
    fill(minionskin);
    rect(x+10*onepixel,y+onepixel*13,onepixel*3,onepixel);

      //line14
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*14,onepixel*4,onepixel);
    fill(goggle);
    rect(x+7*onepixel,y+onepixel*14,onepixel*2,onepixel);
    fill(minionskin);
    rect(x+9*onepixel,y+onepixel*14,onepixel*4,onepixel);

      //line15
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*15,onepixel*10,onepixel);

      //line16
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*16,onepixel*10,onepixel);

      //line17
    fill(clothes);
    rect(x+3*onepixel,y+onepixel*17,onepixel,onepixel);
    fill(minionskin);
    rect(x+4*onepixel,y+onepixel*17,onepixel*8,onepixel);
    fill(clothes);
    rect(x+12*onepixel,y+onepixel*17,onepixel,onepixel);

      //line18
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*18,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*18,onepixel,onepixel);
    fill(minionskin);
    rect(x+5*onepixel,y+onepixel*18,onepixel*6,onepixel);
    fill(clothes);
    rect(x+11*onepixel,y+onepixel*18,onepixel,onepixel);
    fill(minionskin);
    rect(x+12*onepixel,y+onepixel*18,onepixel,onepixel);

      //line19
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*19,onepixel*2,onepixel);
    fill(clothes);
    rect(x+5*onepixel,y+onepixel*19,onepixel*6,onepixel);
    fill(minionskin);
    rect(x+11*onepixel,y+onepixel*19,onepixel*2,onepixel);

      //line20
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*20,onepixel*2,onepixel);
    fill(clothes);
    rect(x+5*onepixel,y+onepixel*20,onepixel*6,onepixel);
    fill(minionskin);
    rect(x+11*onepixel,y+onepixel*20,onepixel*2,onepixel);

      //line21
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*21,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*21,onepixel*8,onepixel);
    fill(minionskin);
    rect(x+12*onepixel,y+onepixel*21,onepixel,onepixel);

      //line22
    fill(minionskin);
    rect(x+3*onepixel,y+onepixel*22,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*22,onepixel*8,onepixel);
    fill(minionskin);
    rect(x+12*onepixel,y+onepixel*22,onepixel,onepixel);

      //line23
    fill(outline);
    rect(x+3*onepixel,y+onepixel*22,onepixel,onepixel);
    fill(clothes);
    rect(x+4*onepixel,y+onepixel*22,onepixel*8,onepixel);
    fill(outline);
    rect(x+12*onepixel,y+onepixel*22,onepixel,onepixel);

      //line24
    fill(outline);
    rect(x+2*onepixel,y+onepixel*23,onepixel*2,onepixel);
    fill(outline);
    rect(x+5*onepixel,y+onepixel*23,onepixel*2,onepixel);
    fill(outline);
    rect(x+9*onepixel,y+onepixel*23,onepixel*2,onepixel);
    fill(outline);
    rect(x+12*onepixel,y+onepixel*23,onepixel*2,onepixel);

      //line25
    fill(outline);
    rect(x+4*onepixel,y+onepixel*24,onepixel*3,onepixel);
    fill(outline);
    rect(x+9*onepixel,y+onepixel*24,onepixel*3,onepixel);


  }

Diana Connolly – Project 5

For this project, I wanted to make a wallpaper with a bunch of cute woodland creatures. I added in the sun, tree, and flower to give context to where they might be living. I created for loops for each icon and created the pattern seen below!

Wallpaper

var eyeSize = 5;
var noseUnit = 5;

function setup() { 
    createCanvas(790, 550);
    noLoop(); 
}

function draw() {
    background("LightBlue"); 
    noStroke();
    //Loop sun
    for (var xSun = 135; xSun < width; xSun += 200) {
        for (var ySun = 50; ySun < height; ySun += 800) {
            drawSun(xSun, ySun);}
        }	
    //Loop bear
    for (var xBear = 50; xBear < width; xBear += 200) {
        for (var yBear = 120; yBear < height; yBear += 800) {
            bear(xBear, yBear);}
        }	
    //Loop raccoon
    for (var xRaccoon = 135; xRaccoon < width; xRaccoon += 200) {
        for (var yRaccoon = 190; yRaccoon < height; yRaccoon += 800) {
            raccoon(xRaccoon, yRaccoon);}
        }	
    //Loop tree
    for (var xTree = 50; xTree < width; xTree += 200) {
        for (var yTree = 260; yTree < height; yTree += 800) {
            tree(xTree, yTree);}
        }	
    //Loop deer
    for (var xDeer = 135; xDeer < width; xDeer += 200) {
        for (var yDeer = 360; yDeer < height; yDeer += 800) {
            deer(xDeer, yDeer);}
        }
    //Loop owl
    for (var xOwl = 50; xOwl < width; xOwl += 200) {
        for (var yOwl = 430; yOwl < height; yOwl += 800) {
            owl(xOwl, yOwl);}
        }	
    //Loop flower
    for (var xFlower = 135; xFlower < width; xFlower += 200) {
        for (var yFlower = 500; yFlower < height; yFlower += 800) {
            flower(xFlower, yFlower);}
        }
}




function drawSun(xSun, ySun) {
    fill("yellow");
    var diamSun = 29;
    ellipse(xSun, ySun, diamSun, diamSun); //Center circle
    //Sun rays:
    var rayX = 5;
    var rayY = 20;
    push();
    translate(xSun,ySun);
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    rotate(radians(45));
        triangle(rayX, -rayY, 0, -rayY*1.6, -rayX, -rayY);//Top spike
        triangle(rayX, rayY, 0, rayY*1.6, -rayX, rayY);//Bottom spike
    pop();
}


function bear(xBear, yBear) {
    var bearUnit = 50;
    var bearEar = 15;
    fill(126,85,38);
        ellipse(xBear,yBear,bearUnit,bearUnit); //head
        ellipse(xBear-bearUnit*.4,yBear-bearUnit*.4,bearEar,bearEar); //left ear
        ellipse(xBear+bearUnit*.4,yBear-bearUnit*.4,bearEar,bearEar); //right ear
    fill(158,111,57);
        ellipse(xBear,yBear+7,bearUnit/2.3,bearUnit/2); //snout
    fill(0);
        triangle(xBear-noseUnit,yBear+noseUnit, xBear,yBear+noseUnit*2, xBear+noseUnit,yBear+noseUnit); //nose
        ellipse(xBear-15,yBear-5, eyeSize,eyeSize); //left eye
        ellipse(xBear+15,yBear-5, eyeSize,eyeSize); //right eye
}

function raccoon (xRaccoon, yRaccoon) {
    var wRaccoon = 45;
    var hRaccoon = 40;
    var eye = 10;
    fill(150);
        ellipse(xRaccoon, yRaccoon, wRaccoon, hRaccoon); //head
        triangle(xRaccoon-wRaccoon/4,yRaccoon-wRaccoon/3, xRaccoon-wRaccoon/2,yRaccoon-hRaccoon/2, xRaccoon-wRaccoon/2.1,yRaccoon-5); //left ear
        triangle(xRaccoon+wRaccoon/4,yRaccoon-wRaccoon/3, xRaccoon+wRaccoon/2,yRaccoon-hRaccoon/2, xRaccoon+wRaccoon/2.1,yRaccoon-5); //right ear
    fill(0);
        ellipse(xRaccoon, yRaccoon+8, noseUnit*2,noseUnit); //nose
    fill(100);
        ellipse(xRaccoon-eye, yRaccoon, eye*1.5, eye); //left eye patch
        ellipse(xRaccoon+eye, yRaccoon, eye*1.5, eye); //right eye patch
    fill(0);
        ellipse(xRaccoon-eye, yRaccoon, eyeSize,eyeSize); //left eye
        ellipse(xRaccoon+eye, yRaccoon, eyeSize,eyeSize); //right eye
}

function tree (xTree, yTree) {
    var wLeaves = 70;
    var hLeaves = 90;
    var branch = 20;
    fill(28,118,108);
        ellipse(xTree, yTree, wLeaves, hLeaves); //leaves
    fill(86,58,36);
        triangle(xTree-5,yTree+hLeaves, xTree, yTree-branch, xTree+5,yTree+hLeaves); //trunk
        triangle(xTree-2,yTree+5, xTree,yTree+branch*.75, xTree-branch, yTree-branch); //left branch
        triangle(xTree+2,yTree+branch, xTree,yTree+branch*1.5, xTree+branch, yTree-5); //right branch
}

function deer(xDeer, yDeer) {
    fill(188,140,85);
        ellipse(xDeer, yDeer, 35,50); //head
        quad(xDeer-4,yDeer-18, xDeer-14,yDeer-30, xDeer-24,yDeer-32, xDeer-20, yDeer-23); //left ear
        quad(xDeer+4,yDeer-18, xDeer+14,yDeer-30, xDeer+24,yDeer-32, xDeer+20, yDeer-23); //right ear
    fill(158,111,57);
        ellipse(xDeer,yDeer-15, 12,20); //forehead patch
    fill(0);
        ellipse(xDeer-10,yDeer+2, eyeSize,eyeSize); //left eye
        ellipse(xDeer+10,yDeer+2, eyeSize,eyeSize); //right eye
        triangle(xDeer-noseUnit,yDeer+noseUnit*3, xDeer,yDeer+noseUnit*4, xDeer+noseUnit,yDeer+noseUnit*3); //nose
}

function owl(xOwl, yOwl) {
    var wOwl = 50;
    var hOwl = 40;
    var ear = 20;
    fill(80,110,132);
        ellipse(xOwl, yOwl, wOwl,hOwl);
        triangle(xOwl-ear*.7,yOwl-ear*.75, xOwl-ear,yOwl-ear, xOwl-22,yOwl-ear*.25); //left ear
        triangle(xOwl+ear*.7,yOwl-ear*.75, xOwl+ear,yOwl-ear, xOwl+22,yOwl-ear*.25); //right ear
    fill(236,236,163);
        ellipse(xOwl-10,yOwl-2, hOwl/2,hOwl/2); //left eye patch
        ellipse(xOwl+10,yOwl-2, hOwl/2,hOwl/2); //left eye patch
    fill(0);
        ellipse(xOwl-10,yOwl-2,eyeSize,eyeSize); //left eye
        ellipse(xOwl+10,yOwl-2,eyeSize,eyeSize); //right eye
    fill("orange");
        triangle(xOwl-noseUnit,yOwl+noseUnit, xOwl,yOwl+noseUnit*3, xOwl+noseUnit,yOwl+noseUnit) //beak
}

function flower(xFlower, yFlower) {
    var wPetal = 10;
    var hPetal = 20;
    var yPetal = 15;
    var rotatn = 45;
    //Petals
    push();
    fill(179,91,134);
    translate(xFlower,yFlower);
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    rotate(radians(rotatn));
        ellipse(0,-yPetal, wPetal,hPetal);
        ellipse(0,yPetal, wPetal,hPetal);
    pop();
    //Center of Flower
    fill("orange");
        ellipse(xFlower,yFlower, yPetal,yPetal);
}

And here’s my initial sketch for the design:
fullsizerender

vtavarez-project-05-wallpaper

sketch-246.js

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Assignment-05-B

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

}


function draw() {
    background(100,100,255);
    for (var x=0; x<=width; x+=50){
        for(var y=0; y<=height; y+=50) {
            drawT(x,y);
            drawV(x,y);
            
        }
    }
    for(var x=0; x<=width; x+=50){
        for(var y=-25; y<=height+25; y+=50){
            drawDot(x,y);
        }
    }
    for(var x=0; x<=width; x+=50){
        for(var y=0;y<=height;y+=50){
            drawSquares(x,y);
        }
    }
}

function drawSquares(x,y){
    noStroke();
    fill(255,100,100);
    if (x/50%2==1){ //50 since x is in terms of pixels
        rect(x-10,y-10,5,5);
        rect(x+5,y-10,5,5);
    } else{
        rect(x-10,y+5,5,5);
        rect(x+5,y+5,5,5);
    }
}

function drawDot(x,y){ //creates a dot before T/V figure
    noStroke();    
    fill(0,100,240);
    ellipse(x,y,5,5);
}

function drawV(xV1,yV1){ //draws V shape at every T
    var xV2 = xV1-5;
    var xV3 = xV1+5;  
    var yV2 = yV1-15;//arrow up
    var yV3 = yV1+15;//arrow down
    
    stroke(220,100,245);
    strokeWeight(2)
    if (xV1/50%2==1) {//depending on the column the figure flips
        line(xV1,yV1,xV3,yV3);
        line(xV1,yV1,xV2,yV3);
    } else{
        line(xV1,yV1,xV2,yV2);
        line(xV1,yV1,xV3,yV2);
    }
}

function drawT(xT1,yT1){
    var xT2 = xT1-15;
    var yT2 = yT1;
    var xT3 = xT1+15;
    var yT3 = yT1;
    var xT4 = xT1;
    var yT4 = yT1-15;
    //upsidedownT
    var xT5 = xT1;
    var yT5 = yT1+15;

    stroke(220,100,245);
    strokeWeight(2);
    // if statment will alternate the direction of the T's
    if ((xT1/50)%2==1){
        line(xT2,yT2,xT3,yT3);
        line(xT1,yT1,xT4,yT4);
    } else{
        line(xT2,yT2,xT3,yT3);  
        line(xT1,yT1,xT5,yT5);

    }
}

Sihand – Project 05 – Wallpaper

The wallpaper was inspired by a design online (shown below). I used multiple layers of elements to construct the interlocking frame effect.

As a side note, WordPress seems to be interfering with my code. There’s no margin on the left when I ran it.

tessellation

sihand – wallpaper

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 05 project: wall paper

//the weight of each frame
var colorWid = 12;
//the width of each set of frames
var unitWid = 7*colorWid;

function setup() {
    createCanvas(480, 480);
    background(230, 236, 244);
  //translate the coordinates so that the pattern
  //fills the entire canvas
    translate(-600, 0);
}

function drawElement () {
	noStroke();
	rect (0, 0, colorWid, colorWid*3);
	rect (0, colorWid*2, colorWid*2, colorWid);
	push();
	translate (colorWid*3, colorWid*3);
	rotate(-PI/2);
	rect (0, 0, colorWid, colorWid*3);
	rect (0, colorWid*2, colorWid*2, colorWid);
	pop();

}

function drawUnit() {
  var c1 = color(200, 220, 153);
  var c2 = color(159, 170, 81);
  var c3 = color(111, 135, 3);
  var c4 = color(50, 69, 1); //green palette

	push();
	for (i = 0; i<4; i++){
	 if(i % 4 == 0) {
		fill(c1);
	 	drawElement();
	 }
	 if(i % 4 == 1){
	 	fill(c2);
	 	translate (0, unitWid);
	 	rotate (-PI/2);
	 	drawElement();
	 }

	 if(i % 4 == 2){
	 	fill(c3);
	 	translate (0, unitWid);
	 	rotate (-PI/2);
	 	drawElement();
	 }

	 if(i % 4 == 3){
	 	fill(c4);
	 	translate (0, unitWid);
	 	rotate (-PI/2);
	 	drawElement();
	 	}
	}
	pop();
}

function drawPattern() {
	for (var j = 0; j<4; j++) {
		push();
		if(j % 2 == 0) {
      translate(j/2*(8*colorWid), j/2*(6*colorWid));
      drawUnit();
		}

		if(j % 2 == 1) {
      //these simple j functions generate the respective coordinates
      //for j = 1 and j = 3
			translate((17-3*j)*colorWid, (2+4*j)*colorWid);
			rotate(j*PI);
			drawUnit();
		}
    pop();
	}
}

function draw() {
	for (var x = 0; x < 10; x++) {
		for (var y = 0; y < 10; y++) {
      var dx = 2*x*unitWid;//2*x*colorWid;
			var dy = 2*y*unitWid;

      push();
  //generate rows and columns of units
      translate(dx, dy);
  //translate the coordinates so that the units fit together
      translate(y*2*colorWid, -x*2*colorWid);
      drawPattern();
      pop();
    }
	}
  noLoop();

}

Project 05-Wall Paper

jkatungyproject05wallpaper

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-05
var x = 400;
var y = 400;

function setup(){
  createCanvas(800,800);
  background(227,218,186);
}
function draw(){
  for(x=100;x<width;x+=200){//loop pattern along x axis
    for(y=100;y<height;y+=200){//loop pattern along y axis
      //stroke(208,169,97);
      //strokeWeight(6);
      //ellipse(x,y,76,76);
      middleFlower(x,y);
      angularScroll(x,y);
      circularScroll(x,y);
    }
  }
  noLoop();
}
function middleFlower(x,y){
  stroke(208,169,97);
  strokeWeight(1);
  ellipseMode(CENTER);
  noFill();
  ellipse(x,y,8,8);
  push();
  translate(x,y);
  for (i=0;i<360;i+=90){//rotate elements 4 times around x,y
    rotate(radians(90));
    ellipse(18,0,19,8);//side ellipse
    arc(19,-19,24,24,radians(45),radians(215));//big arc
    arc(36,-9,18,18,radians(90),radians(180));//small arc 1
    arc(36,+9,18,18,radians(180),radians(270)); //small arc 2
  }
  pop();
  push();
  translate(x+100,y+100);
  for (i=0;i<360;i+=90){//rotate elements 4 times around x,y
    rotate(radians(90));
    ellipse(18,0,19,8);//side ellipse
    arc(19,-19,24,24,radians(45),radians(215));//big arc
    arc(36,-9,18,18,radians(90),radians(180));//small arc 1
    arc(36,+9,18,18,radians(180),radians(270)); //small arc 2
  }
  pop();
}
function angularScroll(x,y){
  stroke(208,169,97);
  strokeWeight(1);
  ellipseMode(CENTER);
  push();
  translate(x,y);
  for (i=0;i<360;i+=90){//rotate elements 4 times around x,y
    rotate(radians(i));
    arc(20,96,250,250,radians(273),radians(306));//innermost lower arc
    arc(28,87,250,250,radians(273),radians(288));//next to innermost lower arc
    arc(186,-72,250,250,radians(161),radians(176));//next to outermost lower arc
    arc(194,-78,250,250,radians(144),radians(177));//outermost lower arc
    arc(-97,-20,250,250,radians(333),radians(356));//innermost upper arc
    arc(-90,-25,250,250,radians(343),radians(354));//next to innermost upper arc
    arc(62,-181,250,250,radians(93),radians(105));//middle upper arc
    arc(70,-188,250,250,radians(94),radians(116));//next to outermost upper arc
    arc(77,-196,250,250,radians(94),radians(126));//outermost upper arc
    println("angular scroll");
  }
  pop();
}
function circularScroll(x,y){
  stroke(208,169,97);
  strokeWeight(1);
  noFill();
  push();
  translate(x,y);
  for (i=0;i<360;i+=90){
    rotate(radians(i));
    ellipseMode(CENTER);
    ellipse(100,0,6,6);//small end ellipse
    arc(100,-3,12,12,HALF_PI,PI+HALF_PI);//small arc around ellipse
    arc(100,0,18,18,PI+HALF_PI,HALF_PI);//big arc around ellipse
  }
  pop();
}

The inspiration was ‘Provincetown Geometric” pattern by Warner Company. My rendition of pattern grows around a unit made up of three fundamental components – the ‘middle flower’, the ‘4 angular scrolls’ and ‘4 circular scrolls’. Each component was built around a polar loop of arcs and ellipses.

To achieve the proportions, I drew it out using CAD software and measured off the parameters by arc and by ellipse (‘patterns’ below). The colors are true to the original. I would not make a shirt out of it, but as wall paper, it would be okay.

patterns

Diana Connolly – Looking Outwards 5

screen-shot-2016-09-30-at-1-36-39-pm

Zika Virion Scientific Illustration, John Liebler

Link to the article about this illustration:
http://www.artofthecell.com/animation/2587

Scientific illustrator John Liebler was intrigued by the Zika Virus as its name quickly spread due to its severe health implications. Liebler knew that there was a need for somebody to illustrate the Zika virion in its entirety, depicting all of the proteins in it. So, he set out to illustrate it and came up with the above image. His artistic sensibilities are manifested in the final form in that the image is a very clear but detailed depiction of the Zika virus, illustrating for any viewer what the physical make-up of the virus is. His use of varying colors also helps the viewer to parse each of the proteins in the virus. I’m not sure of the algorithms used to create the image, but I am sure that he must have used a program such as Maya to create his 3D representation of the virus, modeled after several scientific images of the physical virus, and then had the final 2D image rendered from this model. I had thought for a while that I might want to become a scientific illustrator, so scientific illustrations have always intrigued me. After searching online for 3D Zika illustrations, I came across Liebler’s and found it truly inspiring. I admire this piece because it not only filled the need for a detailed and clear illustration of the Zika virus, but it also inspired researchers to further study each of the individual proteins in the Zika virus. Now, researchers have published the homology models (3D renderings of each protein for the sake of other scientists to observe when the specific protein make-ups aren’t yet known). Thus, this illustration not only helps to depict the Zika virus in its visual properties, but it also spurred further research of the virus itself!

Looking Outwards 05 – Alison Hoffman

1327573131_chamelion-01-1000

This piece is a 3D model of a Chameleon by Aram Vardazaryan done in completely in photoshop. Even though it is incredible that this piece only took him a week to complete, what I find more fascinating is how it not only is a 3D render in 2D, but that it is also completely sculpture-like. I would expect to find a piece like this in a sculpture garden, crafted from mixed metals and wire, yet it is completely done on the computer with software. It amazes me how realistic the metallic elements are. Recreating such effects must have required a lot of consideration when it came to lighting sources, especially given the fact that there is so much curvature in the shapes.