Category: SectionC

Looking Outwards – 05

Strawberry by Wagner de Souza

For this week’s Looking Outwards on the topic of 3D computer graphics, I chose to look at the artwork titled Strawberry (https://www.behance.net/gallery/4114195/Strawberry) by the artist Wagner de Souza. I came across his work looking on Pinterest, and I found it really unique and interesting because he 3D mapped the proportions and form of the strawberry, then deconstructed it and created additional graphics. I like the aspect of how the strawberry almost “unravels” and reveals the chocolate, and it gives me a sense of how a strawberry might look if its outer layer were peeled. In terms of the algorithms, I think that de Souza used mapping techniques to plot coordinates in space. He also used the seeds on the strawberry as guiding coordinates. Additionally, I like how he incorporated shadows in the final strawberry rendering to give the effect of it realistically twisting, which was probably generated by creating a drop shadow or gradient. I think the artist would have thought about a strawberry and ways to deconstruct the form, and this led him to produce what he envisioned. He brought out his creativity with the chocolate added to it, and it dripping off the spiraling strawberry layers. While this overall image isn’t actually a believable thing that could happen, it is interesting to me to think of the process of imagining this in 3D, and using code to produce it.

Project-05- Wallpaper

sketchDownload

//Shruti Prasanth
//Section C
//Project 5- Wallpaper

function setup() {
    createCanvas(500, 500);
    background (243,239,201);
}

function draw() {
    rectMode(CENTER);
    //flower starts at canvas top left corner, and translates from the previous position:
    flower(0, 0);
    flower(150,0);
    flower(150,0);
    flower(150,0);
    flower(-75,150);
    flower(-150,0);
    flower(-150,0);
    flower(-150,0);
    flower(-75,150);
    flower(150,0);
    flower(150,0);
    flower(150,0);
    flower(150,0);
    flower(75,150);
    flower(-150,0);
    flower(-150,0);
    flower(-150,0);
    flower(-150,0);

}

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

    noStroke();
    fill(215,210,143);
    //diam= 50
    circle(width/10, height/10, 50); 
    fill(255);
    circle(width/10, height/10, 10);
    push();
    translate(width/10, height/10);
    fill(255);

    //inbetween big circle and ellipse dots
    circle(-55,-100,10);
    circle(55,-100,10);
    circle(55,100,10);
    circle(-55,100,10);
    circle(-100,-18,10);
    circle(100,-18,10);
    circle(-100,18,10);
    circle(100,18,10);


    circle(0,-30,20);//inner white circles
    circle(0,30,20);
    circle(30,0,20);
    circle(-30,0,20);
    circle(-20,20,20);
    circle(20,20,20);
    circle(20,-20,20);
    circle(-20,-20,20);
    ellipse(0,70,20,50);
    ellipse(0,-70,20,50);
    ellipse(70,0,50,20); //right long petal
    ellipse(-70,0,50,20);
    circle(45,45,30); //bigger outer circle
    circle(45,-45,30);
    circle(-45,-45,30);
    circle(-45,45,30);
    pop();

}

For my coded wallpaper, I was inspired by the queen annes lace flower, and I decided to abstract the petals into a vector design version. I used a lot of ellipses and circles of varying sizes, and based it off a light green + white color scheme. This wallpaper might be something I would wear possibly on a printed dress.

Project 05 – Wallpaper

I really wanted to try to imitate some feeling of classical old wallpapers. I made sure to include the fleur-de-lis, as well as some of the colors and shapes from an old soccer team’s crest. I also wanted to capture some depth in the wallpaper, so there are some overlapping parts to begin to invoke that feeling.

sketchDownload
var x = 0
var y = 0

function setup() {
    createCanvas(600, 600);
    background(0,56,120);
}

function draw() {
  //because the overlapping is happing on the right hand side and bottom,
  //the loop is set up to overlap on the left hand side and top of the
  //previous groups
translate(600,600)
  for (let i = 0; i <= 7; i += 1) {
    push();
    for (let f = 0; f <= 7; f += 1) {
      groups();
      translate(-160,0);
    }
    pop();
    translate(0,-200);
  }
  noLoop();
}

function groups() {
  //assembling each of the functions in the proper order
  baseshape();
  patterning();
  sideshapes();
  fleur();
}

function baseshape() {
    //Background Diamond
      push();
        strokeWeight(4);
        stroke(253,204,80);
        fill(225,33,40);
          quad(0,-100,80,0,0,100,-80,0);
      pop();
}

function patterning() {
  //this creates the pattern of white specks within each large red diamond
  var g = 0;
    for (let i = 0; i <= 6; i += 1) {
        gunner(-60+g,0);
        g += 20
    }
  g -= 140;
    for (let i = 0; i <= 4; i += 1) {
        gunner(-40+g,-20);
        gunner(-40+g,20);
        g += 20
    }
  g -= 100;
    for (let i = 0; i <= 2; i += 1) {
        gunner(-20+g,-40);
        gunner(-20+g,40);
        gunner(-20+g,-60);
        gunner(-20+g,60);
        g += 20;
    }
  noLoop();
}

function gunner(x,y) {
  //creating the individal white dotted groups
push();
  noStroke();
  fill(255);
    circle(x-4,y,4);
    circle(x+4,y,4);
    circle(x,y-2,4);
    triangle(x,y+1,x+3,y+6,x-3,y+6);
pop();
}

function sideshapes() {
    //Horizontal Diamond
      push();
        strokeWeight(4);
        stroke(0,158,78);
        fill(225,33,40);
          quad(0,60,30,100,0,140,-30,100);
      pop();
    //Side Diamond
      push();
        strokeWeight(4);
        stroke(0,158,78);
        fill(225,33,40);
          quad(30,0,80,-70,130,0,80,70);
      pop();
}

function fleur() {
  //the fleur de lis coordinates
      push();
      translate(80,0);
        strokeWeight(1.5);
        stroke(255);
        fill(253,204,80);
          beginShape();
              curveVertex (0,-60);
              curveVertex (0,-60);
              curveVertex (15,-43);
              curveVertex (22,-25)
              curveVertex (10,5);
              curveVertex (8,25);
              curveVertex (25,60);
              curveVertex (25,60);
              curveVertex (15,60);
              curveVertex (10,50);
              curveVertex (10,50);
              curveVertex (0,60);
              curveVertex (0,60);
          endShape();
          beginShape();
              curveVertex (0,-60);
              curveVertex (0,-60);
              curveVertex (-15,-43);
              curveVertex (-22,-25)
              curveVertex (-10,5);
              curveVertex (-8,25);
              curveVertex (-25,60);
              curveVertex (-25,60);
              curveVertex (-15,60);
              curveVertex (-10,50);
              curveVertex (-10,50);
              curveVertex (0,60);
              curveVertex (0,60);
          endShape();
          beginShape();
              curveVertex (40,20);
              curveVertex (40,20);
              curveVertex (35,27);
              curveVertex (32,28);
              curveVertex (28,25);
              curveVertex (23,10);
              curveVertex (30,-8)
              curveVertex (40,-15);
              curveVertex (44,-11);
              curveVertex (50,-18);
              curveVertex (46,-24);
              curveVertex (40,-26);
              curveVertex (30,-22);
              curveVertex (20,-10);
              curveVertex (14,10);
              curveVertex (24,30);
              curveVertex (35,35);
              curveVertex (45,32);
              curveVertex (45,27);
              curveVertex (40,20);
              curveVertex (40,20);
          endShape();
          beginShape();
              curveVertex (-40,20);
              curveVertex (-40,20);
              curveVertex (-35,27);
              curveVertex (-32,28);
              curveVertex (-28,25);
              curveVertex (-23,10);
              curveVertex (-30,-8)
              curveVertex (-40,-15);
              curveVertex (-44,-11);
              curveVertex (-50,-18);
              curveVertex (-46,-24);
              curveVertex (-40,-26);
              curveVertex (-30,-22);
              curveVertex (-20,-10);
              curveVertex (-14,10);
              curveVertex (-24,30);
              curveVertex (-35,35);
              curveVertex (-45,32);
              curveVertex (-45,27);
              curveVertex (-40,20);
              curveVertex (-40,20);
          endShape();
          ellipse(0,15,70,15);
    pop();
}
The crest used, specifically for the colors and white specks in the background
Quick sketch from before I began.

Looking Outwards-05

A group that really interests me in their capacity for 3D graphics is the small architecture firm WOJR. The way in which they render their buildings can at times even make the unbuilt projects look extremely realistic. I think that the way they incorporate graphics into their workflow is really great, since they often have much rougher and patched together graphics to get an idea for the textures and feeling of the place, but are then able to translate those same ideas into realistic renderings that give a much greater sense of place for the viewer, and can sometimes trick you into thinking you’ve stumbled onto a staged photograph. The image below is from their house a ‘Mask House’.

Project-05: Hexagrams

The creation of optical illusions has always intrigued me. Hexagrams have always been a favorite geometric pattern of my and most importantly, the ability to create depth by underlaying and overlaying different portions. This ended up being more difficult than I had hoped as with p5js, drawings always layer based upon where in the function each element is created. For this reason, I had to separate one side of the hexagram into two pieces to actually create the illusion I wanted which resulted in a lot of calculations and math.

sketchDownload
//side length of the hexagon that a hexagram is based upon
var s = 50
function setup() {
    createCanvas(3.5*3*s, 12*s*sqrt(3)/2);
    background(150);
    noLoop();
}

function draw() {
    //translates the center of the canvas to the center of the first hexagram
    translate(3/2*s, 2*s*sqrt(3)/2);
    //loop creates the gradient effect of the background
    for (var i = 0; i<width/10; i++) {
        for (var j = 0; j<height/10; j++) {
            push();
            //translates to start at the top left corner of the canvas
            translate(-3/2*s, -2*s*sqrt(3)/2);
            //varies the color based on the variables of the loop
            fill(255/height*j*10+50, 255/height*j,255/height*j*10+50, 255);
            noStroke();
            //draws squares based upon the variables of the loop
            rect(i*10, j*10, 10, 10);
            pop();
        }
    }
    //loops creates the repeating pattern of hexagrams
    for(var i = 0; i<width/(3*s); i++) {
        for (var j = 0; j<height/(4*s*sqrt(3)/2); j++) {
            push();
            //translates based upon variables to draw the grid of hexagrams
            translate(150*i, 4*s*sqrt(3)/2*j);
            //rotates the hexagrams to create the hourglass patterns
            rotate(radians(60*i));
            rotate(radians(60*j));
            //draws the hexagram
            opticHexagram();
            pop();
        }
    }
}

//I acknowledge code that is unused should be deleted, however the following
//block comment is necessary to show the math done to create the visual.
//Each function is a building block to the final opticHexagram
/*function hexagon() {
    line(-s/2, -s*sqrt(3)/2, s/2, -s*sqrt(3)/2)
    line(s/2, -s*sqrt(3)/2, s, 0)
    line(s, 0, s/2, s*sqrt(3)/2)
    line(s/2, s*sqrt(3)/2, -s/2, s*sqrt(3)/2)
    line(-s/2, s*sqrt(3)/2, -s, 0)
    line(-s, 0, -s/2, -s*sqrt(3)/2)
}

function spikes() {
    triangle(-s/2, -s*sqrt(3)/2, s/2, -s*sqrt(3)/2, 0, -2*s*sqrt(3)/2);
    triangle(s/2, -s*sqrt(3)/2, s, 0, 3/2 * s, -s*sqrt(3)/2);
    triangle(s, 0, s/2, s*sqrt(3)/2, 3/2 * s, s*sqrt(3)/2);
    triangle(s/2, s*sqrt(3)/2, -s/2, s*sqrt(3)/2, 0, 2*s*sqrt(3)/2);
    triangle(-s/2, s*sqrt(3)/2, -s, 0, -3/2 * s, s*sqrt(3)/2);
    triangle(-s, 0, -s/2, -s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2);
}

function hexagram() {
    noFill();
    triangle(0, -2*s*sqrt(3)/2, 3/2 * s, s*sqrt(3)/2, -3/2 * s, s*sqrt(3)/2);
    triangle(3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2)
    line(0, -2*s*sqrt(3)/2, 3/2 *s, s*sqrt(3)/2);
    line(3/2 * s, s*sqrt(3)/2, -3/2 * s, s*sqrt(3)/2);
    line(-3/2 * s, s*sqrt(3)/2, 0, -2*s*sqrt(3)/2);
    line(3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2);
    line(0, 2*s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2);
    line(-3/2 * s, -s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2);
}
*/

//creates a hexagram with interlacing sides to create an optical illusion
function opticHexagram() {
  push();
  noStroke();
  //half of the white side of the lighter triangle
  //this needed to be broken into two pieces in order for the optical illusion
  //to work
  fill(255);
  quad(0, 2*s*sqrt(3)/2,0, .8*2*s*sqrt(3)/2, .8*-3/4 * s, .8*s*sqrt(3)/4,
      -3/4*s, s*sqrt(3)/4);
  //black side of the dark triangle
  fill(0);
  quad(.8*-3/2*s, .8*s*sqrt(3)/2 , -3/2*s, s*sqrt(3)/2, 3/2*s, s*sqrt(3)/2,
      .8*3/2*s, .8*s*sqrt(3)/2)
  //medium side of the lighter triangle
  fill(255-50);
  quad(.8*3/2 * s, .8*-s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2, 0, 2*s*sqrt(3)/2,0,
      .8*2*s*sqrt(3)/2)
  //medium side of the darker triangle
  fill(0+50);
  quad(0, -2*s*sqrt(3)/2, 0, .8*-2*s*sqrt(3)/2,.8*3/2*s, .8*s*sqrt(3)/2 ,
      3/2*s, s*sqrt(3)/2);
  //darkest side of the lighter triangle
  fill(255-100);
  quad(-3/2 * s, -s*sqrt(3)/2, .8*-3/2 * s, .8*-s*sqrt(3)/2,.8*3/2 * s,
      .8*-s*sqrt(3)/2, 3/2 * s, -s*sqrt(3)/2);
  //lightest side of the darker triangle
  fill(0+100);
  quad(0, -2*s*sqrt(3)/2, 0, .8*-2*s*sqrt(3)/2,.8*-3/2*s, .8*s*sqrt(3)/2 ,
      -3/2*s, s*sqrt(3)/2);
  //other half of the white side of the lighter triangle
  //completes the illusion
  fill(255);
  quad(.8*-3/2 * s, .8*-s*sqrt(3)/2, -3/2 * s, -s*sqrt(3)/2, -3/4 * s,
      s*sqrt(3)/4, .8*-3/4*s, .8*s*sqrt(3)/4)
  pop();

}

LO 5: 3D Rendered Art

Art Piece: Glasses, pitcher, ashtray and dice
Artist: Oyonale
Year: 2006

The piece depicts a rather typical scene for painting. Similarly to conventional art, the point of the scene is to show realistic elements such as shadows, reflections, and depth. I most admire how the artist used a generally practiced technique from conventional art and converted it into 3D computational art. The artist stated he utilized Ray Tracing as the primary technique to create the visual. Ray Tracing has become a much more utilized tool in 3D graphics as it creates the most realistic renderings possible. Currently, the technology is beginning to become more prevalent in the world of video games to create the most realistic graphics. The reason it has taken so long for the widespread use of this technology is because it is rather demanding on computers. Before now, typical computers simply did not have the computational power to run more than a simple image. Amazingly, this image was created nearly 15 years ago, showing the artist’s innovative nature as this was not a widely popular technique. The artist’s sensibilities are obvious as he creates a realistic image that can be seen in all sorts of paintings, but rather he converted it to a computational format. Artists like Oyonale are the ones who have paved the way to CGI and other 3D rendered art that we see in our daily lives.

Glasses, pitcher, ashtray and dice

http://www.oyonale.com/modeles.php?lang=en&page=40

LO-05 Computer Graphics

For this week’s looking outwards, I thought I would highlight one of my favorite topics in the world of computation – non-euclidean geometry. The youtuber Code Parade makes videos showcasing their work developing rendering engines that display non-euclidean space.

These videos showcase the ability of computer graphics to show us other, possible worlds. Hyperbolica in particular shows us hyperbolic & hypobolic space: worlds where space is literally curved. Worlds where space is literally more or less dense, producing otherworldly visuals that confound the human mind. Triangles with three right angles. Seeing the back of your own head. These projects bring advanced geometry to life in a visual, visceral way.

I really admire the project because it does something that would be nigh-impossible without computation. It is difficult enough to grasp rendering flat space by hand, but curved space would be totally out of reach. These rendering engines are built from the ground up to simulate curved space & impossibly interconnected geometries.
-Robert

Project-05 Wallpaper

For this project I did several sketches before I started to draft the design & code it. I was particularly inspired by the idea of the rising sun & linear sunbeams radiating from it.

I thought the contrast between the more organic circle and the rigorous linework created an interesting composition.

The final draft before I went into to digital process. A simple tiling method turns the design into a undulating diamond grid.

-Robert

sketch
//Robert Rice
//Section C
//rdrice@andrew.cmu.edu
//Assignment-05-A


size = 100   //the side length of each hexagon

function setup() {
    createCanvas(600, 400);
    background(255);
}

function draw() {
    background(38, 0, 77);

    for(let w = 0; w <= width/(size*0.75); w = w+1) {
        for(let v = 0; v <= height/(size); v = v+1) {
            tile(w*0.375*size, v*0.5*size, size);
            print(w, v);
        }
    }
    noLoop();
}

function tile(x, y, s) {
    push();
    
    translate(x, y);
    stroke(204, 170, 0);
    strokeWeight(1);

    line(x + 0.375*s, y + 0.5*s, x, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.188*s, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.563*s, y);
    line(x + 0.375*s, y + 0.5*s, x + 0.750*s, y);

    line(x + 0.375*s, y + 0.5*s, x, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.188*s, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.563*s, y + s);
    line(x + 0.375*s, y + 0.5*s, x + 0.750*s, y + s);

    strokeWeight(1);
    stroke(255);
    line(x, y + 0.575*s, x + 0.75*s, y + 0.575*s);

    noStroke();
    fill(255, 77, 77);
    circle(x + 0.375*s, y + 0.5*s, 0.4*s);

    strokeWeight(1);
    stroke(255);
    line(x, y + 0.625*s, x + 0.75*s, y + 0.625*s);
    
    pop();
}

Looking Outwards 05: 3D Computer Graphics

Jae Son
Section C

Looking Outwards 05: 3D Computer Graphics

Olympthings by Branko Kolarevik and Ryan Cook was particularly interesting to me. It is a conceptual architecture of a tower. It is a conceptual work in which curates tower that is a repurposed structure of things changed through time. According to Kolarevik and Cook, “The interior is defined through advection and perlin noise algorithms which help to create openings and pathways for people to access. Variations of these algorithms are repeated throughout each structural layer to create a blurring effect when viewed from afar.” It is a theoretical work, so I am not sure of what kind of algorithms they used to generate this, but I suppose it will be something that is looped. I admire its creativity and imagination, and its beautifully executed composition and details. Massive amounts of series of lines are intertwined to create the tower architecture, and I admire this sensibilities in the detail and complex structure.

https://www.behance.net/gallery/46350115/OLYMPTHINGS?tracking_source=search_projects_recommended%7C3d%20graphic%20computational

Project-05-Wallpaper

sketch

//Jae Son, Section C, hyunjaes@andrew.cmu.edu,Project-05-Wallpaper

function setup() {
    createCanvas(600, 400);
    background(220);
}

function draw() {
  background(247,242,210); //beige background
  
  //columns of yellow square that have 2 squares
  for(y = 100; y <= 300 ; y += 200){
    for(x=0; x <= 600 ; x += 200){
      push();
      yellowbox(x,y);
      pop();
    }
  }
  
  //columns of yellow square that have 3 squares
  for (y = 0 ; y <= 400; y+=200){
    for (x=100; x < 600 ; x +=200) {
      push();
      yellowbox(x,y);
      pop();
    }
  }

  //green line that is rotated 7*PI/4
  for (y = 80; y >= -165; y -= 75){
    for (x = 142; x <= 568; x +=142){
      push();
      greenline(x,y);
      pop();
    }
  }
  
  //green line that is rotated PI/4
  for (x = -142; x <= 284; x +=142){
    push();
    greenline2(x,340);
    pop();
  }
  
  //columns of yellow square that have 2 squares
  for (y = 95; y <= 295; y += 200){
    for (x = -12; x <= 588; x +=200){
      push();
      heart(x,y);
      pop();
      }
    }
 
  //columns of heart shapes that have 3 heart shapes
  for (y = -5; y <= 395; y +=200 ){
    for(x=88; x<=488; x +=200){
      push();
      heart(x,y);
      pop();
    }
  }
  
}
  

//yellow sqaure  
function yellowbox(x,y) {
  noStroke();
  rectMode(CENTER);
  translate(x,y);
  rotate(PI/4);
  fill(248,228,87);
  rect(0,0,90,90);
}

//green line 
function greenline(x,y){
  noStroke();
  rectMode(CENTER);
  rotate(PI/4);
  translate(x,y);
  fill(180,223,90);
  rect(0,0,16,680);
}

//green line
function greenline2(x,y){
  noStroke();
  rectMode(CENTER);
  rotate(7*PI/4);
  translate(x,y);
  fill(180,223,90);
  rect(0,0,16,750);
}

//heart shape
function heart(x,y){
  noStroke();
  translate(x,y);
  fill(237,132,103);
  ellipse(0,0,34,34);
  ellipse(25,0,34,34);
  triangle(-14,10,12,37,38.5,10);
}

sketch I draw on ipad before coding