SectionA – Page 8 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Hyejo Seo – Looking Outwards – 06

Kenneth Martin was an English painter and sculptor – most importantly, he was an abstract artist. Kenneth focused on geometric abstraction, therefore, for his Chance and Order series, he utilized randomness to create geometric abstraction. “Chance” in this series refers to the combination of chance events, and the “Order” refers to the order of his procedures to create this series of paintings. His process was: (1) mark the canvas with points, moving clockwise around a rectangle (2) he had a bag full of pieces of paper with different numbers written. So, he would pick one pair of numbers (2 pieces of paper) and generated lines, following those two coordinates. (3) after doing this process once, he rotated the canvas clockwise, and repeated the process. This was a way of him attempting to be as random as he possibly could. One might say that this was not purely random since he was the one who wrote the numbers down on each piece of paper, but, in my opinion, combinations were what made each painting different, so it was the most random one could have been.

Even famous paintings that are prominent in abstract art period weren’t created truly by “random”. Each shape was usually placed by the artists, which is not random at all. This is why Kenneth’s works stood out. Although his process of creating geometrically random art was more “random” per se, but, somehow, these random lines create visual harmonies. It is nothing unsettling on the eyes to look at. I think part of the reason why this is possible is because he limited the number of colors to only two. Overall, Kenneth’s process of creating these “random” art was interesting to learn about, and his paintings are so simple, yet eye-catching.

Chance, Order, Change 6 (Black) 1978-9 Kenneth Martin 1905-1984

Danny Cho – LookingOutwards-5

Lungs in Silico 2019 – Alexey Kashpersky

Alexey Kashpersky animated the transaction process different components of our respiratory system. As I was watching this animation, though I knew that this is not a literal representation of how the system works, I was greatly mesmerized. This beautiful abstraction of how our body works allows us to broaden our perspective towards it and remind us the wonders of each of us being some kind of a universe.

I think Alexey Kashpersky did a great job of not visually articulating the system, but also doing it in such way that grabs the viewers and takes them on an immersive tour.

It seems like he used a type of 3D rendering tool such as Cinema 4D, which is a very desirable software that I am really looking forward to learning. It really amazes me how much the software can do.

Danny Cho – Project 5 – Wallpaper

Wallpaper

// Danny Cho
// changjuc
// Section: A
// Project: Wallpaper
var waveHeight = 4/5;
var move = 0;
var speed = 0;
var evenOdd = 0;
var tailSize = 20;
var tailHeight = 20;
var fishSize = 10;
function setup(){
  createCanvas(600, 600);
}
//creating waves
function waves(R, G, B, size, y, offset){
    fill(R, G, B);
    strokeWeight(0);
    stroke(255);
    //was trying to make the waves move, but not enough time & confusion
    for (j = 0; j < (width + 1000) / size; j++){
      var cirlceX = j * size * waveHeight + offset;
      if (cirlceX > width + 500){
        cirlceX = size * waveHeight + offset;
        ellipse(cirlceX, y, size, size);
      }
      else {
        ellipse(cirlceX, y, size, size);
      }
      

    }
    
  
}
//drawing fish out of two triangles
function fish(a){
    fill(231, 239, 233);
    var v = height / 200;
    var h = width / 200;
    //tail
    var t1x = a * h * 15;
    var t1y = a * v * 15 + 10;
    var t2x = a * h * 15 + tailSize;
    var t2y = a * v * 15 + tailSize;
    var t3x = t1x;
    var t3y = a * v * 15 + 2 * tailHeight - 10;
    print("t1x is" + t1x);
    print("t1y is" + t1y);
    //head
    triangle(t1x, t1y, t2x, t2y, t3x, t3y);
    var h1x = t2x;
    var h1y = t2y - fishSize;
    var h2x = t2x + 3 * fishSize;
    var h2y = t2y;
    var h3x = t2x;
    var h3y = t2y + fishSize;
    triangle(h1x, h1y, h2x, h2y, h3x, h3y);
  }


function draw(){

  for (i = 0; i <= 16; i++) {
    var count = (i % 2);
    if (count == 0) {

      waves(15, 146, 167, 100, 600 - (40 * i), -50);

    //every other waves are different color  
    }
    else if (count == 1) {
      waves(20, 188, 199, 100, 600 - (40 * i), 0);
    }
  }
  for (row = 0; row <= 10; row ++){
    push()
    translate(row * 100 - 500, 0);
    for (k = 0; k <= 12; k++){
    fish(k);
  }
  pop()
  }

  noLoop();

}

I originally wanted to make the waves move and have a ship or fish moving in between them, but I realized the way that I created the waves and how they overlap on top of each other didn’t allow it. So I decided to just overlay fish on top of the waves.

Project 05 – Ilona Altman – Section A

sketch

var step = 0

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

function draw() {

    background(255, 255, 255);


    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 100) {
            fill(250,180,112,40);
            ellipse(x, y, 200, 200);
            stroke(255,50,50);
        }
    }

    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 100) {
            fill(255,240,240);
            ellipse(x, y, 10, 10);
            stroke(150,70,75);
        }
    }

    for (var y = 0; y < height+25; y += 50) {
        for (var x = 0; x < width+25; x += 100) {
            fill(230,255,255);
            ellipse(x, y, 5, 5);
            stroke(60,110,100);
        }
    }

    for (var y = 0; y < height+25; y += 100) {
        for (var x = 0; x < width+25; x += 50) {
            fill(0,0,0);
            line(x, y, x+50, y+50);
            stroke(204, 102, 0);
        }
    }
}

I am really interested in how a simple shape like a circle can become incredibly complex, through the repetition of its form repeating. I have always loved the idea of intersections, and transparency. I wanted to experiment with these ideas, the transparency of color and harshness of the outlines.

Looking Outward – 05 – Ilona Altman

Even though I find the visuals of this work to be less lyrical than the concept, I find this work incredibly beautiful. Especially that it could only ever be created with a computer. In this work titled Blackberry Winter by Christian Mio Loclair this year, space activated by the body is explored. He fed images of different poses of the body relating to space to a neural network, which then created these simulations of human movement . I found it very interesting how what it means to dance is to explore the spacial potential around oneself. I admire that something without a body can give a visualization of what it is to have a body.

Image of imagined body movement / dance by AI n

The creators sensibilities are present in the final form by the relationship between chaos and organization within this piece. The chaos of generated body movements and a, at times, fragmented body is pared with an orderly. background and color scheme. The color scheme itself also reveals the theme of chaos and order, as the color was chosen by the neural network (chaos) after analyzing the color schemes of different artist works (order).

I am unsure about the way this was created because I don’t know too much about how one might program an AI to generate an image. I do get the sense though that it requires a lot of Data to “train” a neural network. And I would imagine there must exist a programming language that can represent three-dimensional data/space which helps to encode the motion.

Blackberry Winter – Artificial human motion in asymmetry

Min Ji Kim Kim – Project 05 – Wallpaper

sketch

I need a new shower curtain, so for this week, I chose to design something that I would be willing to buy. The circle and diamonds reminded me of water droplets and I kept a general blue color palette to go with the water theme.

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-05
*/

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

    //navy diamonds
    fill('#002548');
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            quad(x + 45, y + 15, x + 65, y + 45, x + 45, y + 75, x + 25, y + 45);
        }
    }

    //inside blue diamond with white outline   
    stroke(255);
    strokeWeight(3);
    fill('#5A7189');
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            quad(x + 45, y + 30, x + 55, y + 45, x + 45, y + 60, x + 35, y + 45);
        }
    }

    //blue circles
    noStroke()
    fill('#5A7189')
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            var db = 25; //big circle diameter
            circle(x + 10, y + 10, db);
        }
    }

    //small magenta dots
    noStroke()
    fill('#6C4971')
    for (var y = 0; y < height; y += 70) {
        for (var x = 0; x < width; x += 70) {
            var ds = 10; //small circle diameter
            circle(x + 10, y + 45, ds);
        }
    }
    noLoop();
}

Hyejo Seo – Project 05 – Wallpaper

sketch

/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project 5 - Wallpaper
*/
function setup() {
    createCanvas(600,600);
    background(255, 203, 215);
    var w = 150;
    var h = 120;
    var oy = 60;
    var ox = 75;
// background orange lines
    noFill();
    stroke(255, 178, 15);
    strokeWeight(2);
    for (var l = 0; l <= width; l+=5){
      line(l, 0, l, height);      
  }
//smiley FACES
    fill(255, 255, 27);
    stroke(0);
    strokeWeight(5);
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          ellipse(xx, yy, 80, 80);
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        ellipse(xx, yy, 80, 80);

        }
      }
    }   
// eyes
    fill(0);
    noStroke();
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          ellipse(xx - 13, yy - 10, 10, 20);
          ellipse(xx + 13, yy - 10, 10, 20);
          
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        ellipse(xx - 13, yy - 10, 10, 20);
        ellipse(xx + 13, yy - 10, 10, 20);
        }
      }
    }    
//mouth
    noFill();
    stroke(0);
    strokeWeight(5);
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          arc(xx, yy + 8, 50, 35, 0, PI);
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        arc(xx, yy + 8, 50, 35, 0, PI);      
        }
      }
    }  
//diamonds
    fill(0);
    noStroke(0); 
    for (var x = 225; x < width; x += 300) {
      for(var y = 30; y < height; y += 240){
        quad(x, y, x + 15, y + 25, x, y + 50, x - 15, y +25);        
      }
    } 
    for (var x = 75; x < width; x += 300) {
      for(var y = 155; y < height; y += 240){
        quad(x, y, x + 15, y + 25, x, y + 50, x - 15, y +25);        
      }
    } 
    noLoop();
}
function draw() {    
}

Initially, I was inspired by the Golf Wang Smiley Face Sweater. I added more elements such as the orange lines and diamonds to make it more interesting as a wallpaper. I have always wanted to create something with smiley faces even for my previous projects, and, this time, I was able to do it. I had fun creating this wallpaper.

Smiley face sweater by a brand called “Golf Wang”

Steven Fei-Project5-Wallpaper

sketch

This approach is to take advantage of the multiple nested loops to further my string art approach of creating the red “illusion” curves through repetition and more rigid layouts. The inspiration is still from the Sharingan in Naruto.


function setup() {
    createCanvas(600, 600);
    background("black");
    
    
}
var angle;//variables for the red fish curves
var radius = 8;//varaibles for the size of red curves

function draw() {
    
    
//   background lines
    for (var y = 0; y<height; y+=60){
        for (var x = 0; x<width; x+=60){
            stroke(35,41,54);
            strokeWeight(2);
            line(x, y, x+60, y+60);//rightward diagonal line
            stroke(148,148,148);
            line(x+40, y, x-40, y+60);//leftward light grey line
            stroke(77,78,80);
            line(x+30, y, x+90, y+60); //rightward dark gray line
        }
    }
    // yellow hex circles
    var radiusTwo = 12;
    for (var y = 0; y < height; y+=120){
        for(var x = 0; x < width; x+=100){
            push();
            translate(x+50, y+30+40);
            for (var i = 0; i<6; i++){
                push();
                rotate(radians(30));
                rotate(radians(i*360/6));
                noStroke();
                fill(255,255,102);
                circle(radiusTwo, 0, 5);
                pop();
            }
            pop();
        }
    }

// constructions of the red wheels    
    for(var y = 0; y < height; y += 120){
        for (var x = 0; x < width; x+= 100){
            push();
            translate(x+50, y+30); // spacing
            // top part of the red fish
            rotate(-PI/2);
            for (angle = 0; angle <90; angle += 5){
                angConv = radians(angle);
                angConv2 = 1.5*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
            }
            for (angle=90; angle<100; angle += 3){
                angConv = radians(angle);
                angConv2 = 1.8*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
                
            }
            for (angle=120; angle<=180; angle += 3){
                angConv = radians(angle);
                angConv2 = 3*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
                
            }
            for (angle=135; angle<163; angle+=4){
                angConv = radians(angle);
                strokeWeight(0.5);
                stroke("red");
                line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
            }
            // left part of the red fish
            rotate(PI/2); //return to the original angle coordinates
            translate(-30, 50);
            rotate(radians(30));
            for (angle = 0; angle <90; angle += 5){
                angConv = radians(angle);
                angConv2 = 1.5*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
            }
            for (angle=90; angle<100; angle += 3){
                angConv = radians(angle);
                angConv2 = 1.8*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
                
            }
            for (angle=120; angle<=180; angle += 3){
                angConv = radians(angle);
                angConv2 = 3*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
                
            }
            for (angle=135; angle<163; angle+=4){
                angConv = radians(angle);
                strokeWeight(0.5);
                stroke("red");
                line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
            }
            //right part of the red fish
            rotate(radians(-30)); //return to the original angle coordinates
            translate(60, 0);
            rotate(radians(-30));
            for (angle = 0; angle <90; angle += 5){
                angConv = radians(angle);
                angConv2 = 1.5*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
            }
            for (angle=90; angle<100; angle += 3){
                angConv = radians(angle);
                angConv2 = 1.8*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), 2*radius*cos(angConv2), 2*radius*sin(angConv2));
                
            }
            for (angle=120; angle<=180; angle += 3){
                angConv = radians(angle);
                angConv2 = 3*angConv;
                strokeWeight(0.5);
                stroke("red");
                line(radius+radius*cos(angConv), radius*sin(angConv), -radius-radius*cos(angConv2), -radius*sin(angConv2));
                
            }
            for (angle=135; angle<163; angle+=4){
                angConv = radians(angle);
                strokeWeight(0.5);
                stroke("red");
                line(radius, radius, 2*radius*cos(angConv), 2*radius*sin(angConv));
            }
            pop();
        }
    }
   

}

Steven Fei-Looking Outwards-05

With the advent of digital graphics, art has stepped into a new era with faster pace and more opportunities.

The 3D artist, Hirokazu Yokohara, has integrated 3D modeling techniques with computational renderings to produce photo-realistic scenes and images. Instead of directly drawing and painting 2D information onto canvas, the artist utilized the 3D modeling software called Blender to compose the objects. Such a process provides the artist with more details and considerations for every element of the forms. In his famous work the Golden Skull, the artist takes advantage of the software to first create the complex geometry and control each part of the skull and bones parametrically to get immediate results. Later, textures are selected and mapped freely onto the parts to give a general impression of how the 2D image of the specific scene should look like. Finally, by utilizing another real-time renderer EEVEE, the artist is able to see quick result of the photo-realistic image provided by the computer which calculates the lighting and compositions of the graph with tremendous speed.

Such a process strongly attracts me not only for its new, organic way of modeling forms which could hardly be achieved through pure handwork but also for the quick, human-interactive process of producing images through putting realistic factors and textures. Such a process indeed has shaped a more dynamic and innovative design strategy, and it also paves the way for quicker image presenting through computing and parametric controlling.

Substance Painter — Organic 3D modeling with texture mapping

click here to see the original artwork

Hyejo Seo – Looking Outwards 05

This CGI award winning “All You Need Is Ecuador” campaign was created in order to attract more tourism to Ecuador. It was created by a Brazilian agency Studio, Manipula, using CGI. The campaign accurately promotes the bio-diversity in Ecuador – from its animals and nature. This 3D campaign was eye-catching since it was a creative way of illustrating the attractions of Ecuador – something a simple 2D graphics could not achieve. Ecuador campaign was a good example of the use of art to make campaigns more interesting, which is what I aspire to do in the future.