Fanjie Jin – Project 05 – Wallpaper

53

//Fanjie Mike Jin
//Section C
//rpai@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(400, 400);
    rectMode(RADIUS)
}

function draw() {
    background(100);
    drawGrid();
    drawSquare();
    drawCircle();
    noLoop();
}

function drawSquare() {
//nested loop for drawing the Squares
    for(var a = 1 ; a < 20; a ++){
      for(var b = 1 ; b < 20; b ++){
//change color transparency
        fill(255 - 7 * a, 255 - 2 * a, 200, 150);
        if(a % 2 == 0){
          strokeWeight(1);
          stroke(60, 211, 206, 90);
          rect(a * 20, b * 20, 20 - b , 20 - b);
        }else{
//odd columns that has a bigger square
          strokeWeight(1);
          stroke(255, 211, 206, 90);
          rect(a * 20, b * 20,  1 / 2 * b, 1 / 2 * b);
        }
      }
    }
}

function drawCircle(){
//nested loop for drawing the circles
    for(var a = 1 ; a < 20; a ++){
    for(var b = 1 ; b < 20; b ++){
      fill(255 - 2 * a, 255 - 2 * a,  100, 200);
      if(a % 2 == 0){
        strokeWeight(1);
        stroke(60, 211, 206, 90);
//color gradient
        ellipse(a * 20, b * 20, b , b);
      }else{
// odd columns
        strokeWeight(1);
        stroke(255, 211, 206, 90);
        ellipse(a * 20, b * 20, 20 - b, 20 - b);
      }
    }
  }
}

function drawGrid(){
//grids
    for(var c = 1 ; c < 20; c ++){
        stroke(255, 50);
        line(c * 20, 0, c * 20, height);
        line(0, c * 20, width, c * 20);
    }
}

I have experimented with using color transparency to create the perceptions of layerings in this wallpaper assignment. I aim to use some repetitive pattern to create some visually intriguing composition. From top to bottom, the size of the circle and square is either becoming larger or smaller. This process is enjoyable and I have gained much more familiarity with nested loop.

Aaron Lee – Project 05 – Wallpaper

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-05-Wallpaper
*/

function setup() {
    createCanvas(600, 600);
    background("grey");
    var d = 30;

    for (var y = 0; y < 660; y = y + 60) {
        for (var x = 0; x < 600; x = x + 60) {
          push();
          fill('#809DFF');
          beginShape();
          vertex(x, y);
          vertex(x + 10, y - 10);
          vertex(x + 20, y);
          vertex(x + 30, y - 10);
          vertex(x + 40, y);
          vertex(x + 20, y + 20);
          endShape(CLOSE); //the shape1
          pop();
          push();
          fill('#5A5B83');
          beginShape();
          vertex(x, y);
          vertex(x + 20, y + 20);
          vertex(x + 20, y + 80);
          vertex(x + 10, y + 60);
          vertex(x + 10, y + 30);
          vertex(x, y + 20);
          endShape(CLOSE); //the shape2
          pop();
          }
        }

    for (var y1 = -30; y1 < 660; y1 = y1 + 60) {
        for (var x1 = 0; x1 < 600; x1 = x1 + 60) {
          push();
          fill('#CCD8FF');
          beginShape();
          vertex(x1 + d, y1);
          vertex(x1 + 10  + d, y1 - 10);
          vertex(x1 + 20  + d, y1);
          vertex(x1 + 30  + d, y1 - 10);
          vertex(x1 + 40 + d, y1);
          vertex(x1 + 20 + d, y1 + 20);
          endShape(CLOSE); //the shape3
          pop();
          push();
          fill("#7274CC");
          beginShape();
          vertex(x1 + d, y1);
          vertex(x1 + 20 + d, y1 + 20);
          vertex(x1 + 20 + d, y1 + 80);
          vertex(x1 + 10 + d, y1 + 60);
          vertex(x1 + 10 + d, y1 + 30);
          vertex(x1 + d, y1 + 20);
          endShape(CLOSE); //the shape4
          pop();
          }
        }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

This was a rather simple process. First, setting up a loop function for both x and y. Then I created shapes in rows that create illusion.

Taisei Manheim – Project 05 – Wallpaper


sketch

For this project I wanted the repetition to be a geometric pattern.  I chose this pattern because of the sense of three dimensionality it gave as well as the interesting relationship between positive and negative space.

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-05

function setup() {
    createCanvas(600, 600);
    background(128);
    var w = 50;
    for (var y = 0; y < height + 50; y += 100) {
        for (var x = 0; x < width; x += 100) {
            //top quad
            stroke(255);
            fill(255,192,203);
            quad(x, y, x + w, y - sqrt(3) * w / 4,  x + 2 * w, y, x + w, y + sqrt(3) * w / 4); ;
            line(x + 2 * w - 10, y - 5, x + w - 10, y + sqrt(3) * w / 4 - 5);
            line(x + 2 * w - 20, y - 10, x + w - 20, y + sqrt(3) * w / 4 - 10);
            line(x + 2 * w - 30, y - 14, x + w - 30, y + sqrt(3) * w / 4 - 14);
            line(x + 2 * w - 40, y - 18, x + w - 40, y + sqrt(3) * w / 4 - 18);

            //left quad
            stroke(255);
            fill(255,162,233);
            quad(x, y, x + w, y + sqrt(3) * w / 4, x + w, y + sqrt(3) * w / 4 + 57, x, y + 57); 
            line(x, y + 11, x + w, y + sqrt(3) * w / 4 + 11);
            line(x, y + 22, x + w, y + sqrt(3) * w / 4 + 22);
            line(x, y + 33, x + w, y + sqrt(3) * w / 4 + 33);
            line(x, y + 44, x + w, y + sqrt(3) * w / 4 + 44);

            //right quad
            stroke(255);
            fill(255,132,255);
            quad(x + w, y + sqrt(3) * w / 4, x + 2 * w, y, x + 2 * w, y + 57, x + w, y + sqrt(3) * w / 4 + 57); 
            line(x + 2 * w - 10, y + 5, x + 2 * w - 10, y + 57 + 5);
            line(x + 2 * w - 20, y + 10, x + 2 * w - 20, y + 57 + 10);
            line(x + 2 * w - 30, y + 14, x + 2 * w - 30, y + 57 + 14);
            line(x + 2 * w - 40, y + 18, x + 2 * w - 40, y + 57 + 18);
        }
    }
    noLoop();
}

Sean Meng-Looking Outwards-05

Miquela Sousa
video: https://www.youtube.com/watch?v=w1wjiQ0bqic

Miquela Sousa, better known as Lil Miquela machuca, is a fictional character and digital art project. Miquela is an Instagram model and music artist claiming to be from Downey, California. The project began in 2016 as an Instagram profile. By April 2018, the account had amassed more than a million followers by portraying the lifestyle of an Instagram it-girl over social media. The account also details a fictional narrative which presents Miquela as a sentient robot in conflict with other digital projects. The team engaged artificial intelligent 3D graphic  while creating and modeling this figure to Make it ultra realistic. Now, the project set a new trend for fashion field to start using fictional computational generated model for their campaign and lookbook. This is also the sign of the overlaps between technology and fashion. 

Katrina Hu – Looking Outwards – 05

The Utah Teapot

A modern rendering of Newell’s Utah Teapot

The Utah Teapot is very commonly regarded as the most important object in computer graphics. Made by computer scientist Martin Newell in 1974 when he was a Ph.D. student at the University of Utah, it was a breakthrough in 3D computer graphics. Newell was looking for new ways to make computer graphics look more realistic, and he needed a subject. The teapot was the perfect object for Newell to demonstrate his complex algorithms, as it had both concave and convex surfaces, and it cast shadows on itself.

I admire the simplicity yet effectiveness of this project. The teapot was not too simple nor too complicated, and it is easily recognizable. It also didn’t need a texture for the object to look realistic. This teapot eventually paved the way for lots of future computer graphics research, and both Adobe and Pixar got their start at the lab Newell worked at.

Sean Leo – Looking Outwards 05

Alan Warburton – East Tower, 2016

East Tower. gif 2016 – sequence of modeled floors of the BBC East Tower by Alan Warburton

In 2016, artist Alan Warburton was accepted into a residency by White Noise City, that placed artists into the BBC East Tower, soon to be demolished to make way for a new development. Warburton created a virtual replica based on documentation of the site in mid-2016 that restored the building to an ideal state. 

Not only is his replica incredibly photo-realistic, it is also free. Often digital assets, of this quality and scale, would be priced with a professional market in mind. By releasing it for free, Warburton enacts a radical and democratic action.  He states on his website, that the model  ” can be used for any purpose, with the hope that the real-life 20th century space continues to live on in 21st century digital animation, virtual reality, architecture, 3D printing and games.”

He created the model using Maya and Vray.

East Tower, 2016 – Digital Render
East Tower, 2016 – Digital Render

Joanne Chui – Looking Outwards- 05

Andy Lomas “Growth by Aggregation”

Andy Lomas is a mathematician and a computational artist. He creates computer generated 3D sculptures that explore and simulate different processes of growth. Growth by Aggregation is a study of how natural forms can produce such complex intricate aggregations just by adhering to simple mathematical laws. This is based on simulating disposition and flow and how these natural processes can create structures similar to coral. The artist’s creative sensibilities manifest in this computer graphic in how a lot of Lomas’s graphics visualize the process of expanding and contracting, dividing and multiplying, etc. What I find interesting about not only this computer graphic but also his other ones are the constraints that he uses in order to restrict the form that is produced, rather than creating a general massed aggregation.

Kimberlyn Cho- Looking Outwards 05

rendering of the beach by Koola

Koola, a computer graphics artist, uses a video game development tool called Unreal Engine 4 to create incredibly realistic scenery renderings. The youtuber is known for his/her attention to environmental details and the effects on the 3D attributes of the landscapes. Koola doesnt limit him/herself to any specific season or environment. From underwater structures to science fiction depictions, the renderings all depict a high level of reality.

I was initially intrigued by the shocking resemblance to reality. As the article is literally titled “This Isn’t Real Beach”, I clicked on it to see just how realistic the beach looked. Renderings are an important tool for artists to depict the physical realities of their design. Architects for example, use rendering tools to portray how their design would look in reality in context to the site and human interaction when proposing an idea. I appreciate the attention to detail as well as both the realistic and creative aspects of Koola’s renderings.

This Isnt a Real Beach

Ammar Hassonjee – Looking Outwards – 05

“Dear Fabricio” Computer Art

Image of the 3D generated graphic image “Dear Fabricio”

The graphic image above is a rendered image of a toddler and toy in an artificial landscape developed by CG and 3D artist Pedro Conti. The artist was inspired to make this image for his wife after she announced that she was pregnant, and its inspired by forms of the ultrasound of their child as well as a toy that they bought for their newborn child. The artist used software such as 3D Max, ZBrush, Maya, and Cinema3D in order to physically sculpt the figures from existing images.

I admire this works intricate level of detail and rendering that make it look both realistic and yet cartoon-like at the same time. I also love the sentimental intent behind this image. I think that the artist’s original artistic intent was manifested in this piece as he produced a realistic image that worked well with the message he wanted to convey to his audience.

Taisei Manheim – Looking Outward – 05

The project I chose was the Nike Strike Series FA16 by onformative, a studio for digital art and design.  Growing up, I was a huge soccer fan and I have always loved the Nike soccer advertisements so I was curious about how they were made.  For this project, onformative created still images and films for the fall 2016 launch of the Strike Series apparel collection. In order to do this, they took full body scans of several famous soccer players which were made into specialized 3D models that served as the base for the visuals.  Motion capture data from training drills were used to create the dynamic imagery that fit the campaign’s slogan, “Play fast. Train faster.” The data of each player like speed and power helped to define and stylize the figures. In order to create dramatic effect, rim and back lighting highlights the players on darkened backgrounds. The collection is very prominent on each athlete, which results in captivating images and films.


Promotional video made as part of the series using 3D body scanning  technology.