October 2020 – Page 48 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

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();
}

One 3D computer graphics artist that I find inspiring is Ian Spriggs and his 3D portraits. For most of his works, he models and textures using the Maya and Mudbox programs without using any scans. He adds touch-ups in Photoshop and renders his work using RTX graphic cards from Nvidia. It is a phenomenon of how realistic each portrait is. It is inspiring to see him create such realistic 3D forms in 2D space. Besides the fact that his work is inspiring, he himself as a person is as well. He is very generous in sharing his work and even sharing tutorials in his methods. Even though it’s just a project, it is so jaw-dropping how he creates every strand of hair, the glimmer of light in the iris, down to even single pore. It’s hard enough to paint a realistic portrait but to render it through computer graphics is insane.

Ian Spriggs’ 3D Portraits: https://ianspriggs.com/portraits

Project 5: Wallpaper

wallpaper cb

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

function draw() {
    background(249, 220, 180);

    //grid pattern background
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y <= height; y += 20) {
        push();
        translate(x, y);
        grid();
        pop();
        }
    }

    //columns of 4 eggs
    for (var x = 56; x <= 560; x += 164) {
        for (var y = 72; y <= 522; y += 150) {
        push();
        translate(x, y);
        rotate(radians(-20));
        egg();
        pop();
        }
    }

    //columns of 3 eggs
    for (var x = 140; x <= 470; x += 164) {
        for (var y = 150; y <= 450; y += 150) {
        push();
        translate(x, y);
        rotate(radians(30));
        scale(.85);
        egg();
        pop();
        }
    }

    //columns of 3 bacons
    for (var x = 50; x <= 546; x += 164) {
        for (var y = 144; y <= 450; y += 150) {
        push();
        translate(x, y);
        rotate(radians(20));
        scale(.5);
        bacon();
        pop();
        }
    }

    //columns of 4 bacons
    for (var x = 140; x <= 472; x += 162) {
        for (var y = 70; y <= 538; y += 152) {
        push();
        translate(x, y);
        rotate(radians(-280));
        scale(.7);
        bacon();
        pop();
        }
    }
}

function egg() {
    fill(255);  //white
    noStroke();
    ellipse(-11, -14, 40, 42);
    ellipse(-7, 21, 50, 48);
    beginShape();
    curveVertex(4, -28);
    curveVertex(4, -28);
    curveVertex(23, 10);
    curveVertex(9, 40);
    curveVertex(9, 40);
    endShape();
    beginShape();
    curveVertex(-27, -10);
    curveVertex(-27, -10);
    curveVertex(-10, -10);
    curveVertex(-27, 10);
    curveVertex(-27, 10);
    endShape();

    fill(255, 200, 100);  //yolk
    ellipse(-2, 5, 30);
    noFill();
    stroke(255);
    strokeWeight(3);
    arc(-2, 5, 20, 20, HALF_PI, PI);
}

function bacon() {
    noFill();
    strokeWeight(8);
    strokeCap(SQUARE);
    stroke(147, 73, 0);
    bezier(35, -25, -40, -40, 40, 40, -35, 35);
    push();
    translate(13, 13);
    bezier(35, -25, -40, -40, 40, 40, -35, 35);
    pop();
}

function grid() {
    rectMode(CENTER);
    noStroke();
    fill(255, 175, 148, 150);
    rect(0, 0, 17, 17);
}

For this project, I was inspired by my water bottle, which has an eggs and bacon design on it. I decided to make my own pattern and have included some of my initial sketches below. I wanted to play with custom shapes, specifically curveVertex and bezier curves, as well as arcs. To add visual interest, I experimented with shifts in scale and rotation in creating an alternating pattern of eggs and bacon.

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);
}

LO 5 – 3D Computer Graphics

Alexis Christodoulou is a self-taught 3D artist whose work focuses on imaginary environments. He works on a range of creative projects, from commercial to personal, and produces his work using 3D computer graphics software. More specifically, Christodoulou uses Cinema4d and Redshift for rendering, additionally using Adobe CC for post-production edits.

I particularly like the editorial designs that he created for Icon Design Italy in 2019. He designed two covers and several other renders of dreamy, open spaces for the magazine. Christodoulou’s work is incredibly intriguing and visually appealing due to the highly realistic, serene compositions. I admire his sophisticated use of color to evoke certain emotions and creativity in imagining dream-like environments. I think that his use of direct natural light in his renders is very successful, in that it gives a very soothing, airy feeling to his work.

Looking Outwards-05: 3D Computer Graphics

The 3D Computer Graphics project I chose to focus on was Generation Gap by Mike Campau. This project captured my attention because of how realistic the renderings were–I had to get a really good look to believe it was all computer graphics. The images were also colored in a way to invoke nostalgia, as he was depicting objects from his childhood. I admire it because of Campau’s ability to use CG to substitute photography. Like his other works, I believe Campau used photography as a baseline and used CGI programs to mimic the effects of a real photo. With rendering, he was able to emphasize the highlights, shadows, and small details to make the images come to life. Mike Campau’s artistic sensibilities are manifested in this project since, like in his other works, he captures the realness of the objects he produces through CG, to make the final outcome like a real photo.

Looking Outwards 5

After further researching Andy Lomas to get a better picture of 3d computer graphics, I came across his project “Cellular Forms”, created around 6 years ago. This project aims to mimic and simulate the visuals of cellular growth through algorithms which act as a rule set for the cell production. For example, one of the parameters that Lomas sets on his simulation is the nutrient level, which triggers production of splitting cells.

While this could be taken very literally as the visuality of how cells are produced, what interested me about this project was the capacity it had to be further applied onto other projects. Since the project leaves the production of cells up to the simulation and parameter set, there is hypothetically an extremely large number of different outputs that can be produced: each in which can be related to other organic forms, such as coral, algae, or organs.

Project 05-Wallpaper

My process for this project was to create a wallpaper or textile design I would like to see on my wall, the shapes follow this but the colors were picked to have a cool and relaxing sunset feel.

sketch Download

var w=50;    //squares width
var ww=20;    //rectangle variable
var m=30;    //rectangle variable

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

function draw() {
    background(0);
    drawGrid();
}

function drawGrid() {
  var size=2*w+ww;
  for (var y = 0; y < height + size; y += size) {
        for (var x = 0; x < width + size; x += size) {
          fill(49,39,255);
          square(x,y,w);    //4 medium blue squares
          square(x+w+ww,y,w);
          square(x,y+w+ww,w);
          square(x+w+ww,y+w+ww,w);
          fill(114,192,254);
          rect(x+w,y,ww,m);    //4 light blue rectangles
          rect(x,y+w,m,ww);
          rect(x+w+2*ww,y+w,m,ww);
          rect(x+w,y+w+2*ww,ww,m);
          fill(247,98,255);
          rect(x+w,y+m,ww,2*m);    //pink plus sign rectangles
          rect(x+m,y+w,2*m,ww);
          fill(22,5,57);
          arc(x,y, 35,35,0,2*PI);    //dark blue ring
          fill(49,39,255);
          arc(x,y,30,30,0,2*PI);    //medium blue in ring
          fill(22,5,57);
           arc(x,y, 25,25,0,2*PI);    //middle dark circle in ring
          fill(254,175,98);
          arc(x+w+ww/2,y+w+ww/2,10,10,0,2*PI);    //yellow circle
        }
    }
}

Project – 05 – Wallpaper

Since the loop is not difficult, I spend a lot of time figuring the individual shape to make them look interesting together. Especially for the polygon shape. I learned the cos() and sin() and vertex() to draw that shape. Also, I consider the color to be consistent with the visual.

sketch Download

    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-05-wall paper

var a=20;
var l=50;

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

}



function draw(){
    
    background(221,209,183);
    
    //background
    var sparkle = {
        locationX: random(width),
        locationY: random(height),
        size: random(1, 5)
    }
    fill (0);
    noStroke();
    ellipse(sparkle.locationX, sparkle.locationY, sparkle.size, sparkle.size);
   
    // flower
    for (var x1=50; x1 < 600; x1+=150) {
      for (var y1=50 ; y1 < 600 ; y1+=150){
        flower(x1,y1);
      }
    }

    // eye
    for (var x2=60; x2 < 250; x2+=75) {
      for (var y2=25 ; y2 < 400 ; y2+=75){
        eye(x2,y2);
      }
    }

    // shape1
    for (var x3=120; x3 < 500; x3+=150) {
        for (var y3=120 ; y3 < 500 ; y3+=150){
        shape1(x3,y3);
      }
    }

}


function flower(x,y){
      push();
      fill(229, 148, 183);
      circle(x-a/2, y-a/2, a);
      circle(x+a/2, y-a/2, a);
      circle(x-a/2, y+a/2, a);
      circle(x+a/2, y+a/2, a);
      fill(27, 85, 155);
      circle(x, y, a);
      pop();
}


function eye(x,y) {
    push();
    translate(x, y);
    fill(255);
    arc(x, y-l/4.5, l, l, 0.5, PI-0.5);
    arc(x, y+l/4.5, l, l, PI+0.5, -0.5);
    //fill(22,125,88);
    fill(random(22),125,random(225));
    ellipse(x, y, l/2, l/2); 
    pop();

}

function shape1(x,y){
    push();
    translate(x, y);
    var spacing = 360 / 7;
    beginShape();
    fill(0);
    for(let i = 0; i <= 7; i++) {
        var angle = i * spacing;
        var b = cos(radians(angle)) * 10;
        var c = sin(radians(angle)) * 10;
        if (i==0) {
            vertex(b,c);
    }
         else {
             var cAngle = angle - spacing/2;
             var cX = cos(radians(cAngle)) * 40;
             var cY = sin(radians(cAngle)) * 40;
             quadraticVertex(cX, cY, b, c)
      }
    }
    endShape();
    pop();
}

Month: October 2020

Project-05 Wallpaper

LO: 3D Computer Graphics

Project 5: Wallpaper

Looking Outwards 05: 3D Computer Graphics

Project-05-Wallpaper

LO 5 – 3D Computer Graphics

Looking Outwards-05: 3D Computer Graphics

Looking Outwards 5

Project 05-Wallpaper

Project – 05 – Wallpaper