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

Shannon Ha – Project 05 – Wallpaper

//Shannon Ha
//Section D
//sha2@andrew.cmu.edu
//Project 05

function setup() {
    createCanvas(600, 400);
    background(237, 197, 17);
}
function draw() {
  var ox = 15; // x origin
  var oy = 40; // y origin
  var sizeAX = 30 //width of green ellipse
  var sizeAY = 20 //height of green ellipse


  for (var y = 0; y < height; y++) {
    for (var x = 0; x < 12; x++) {
//green ellipse
      noStroke();
      fill(191, 227, 205);
      ellipse(ox * x * 10, oy * y - 20, sizeAX + 10, sizeAY);
//purple ellipse
      noStroke();
      fill(166, 120, 222);
      ellipse((ox - 10)* x * 20, oy * y - 20, sizeAX-15, sizeAX-10);
//blue ellipse
      noStroke();
      fill(16, 9, 92);
      ellipse((ox - 10) * x * 10, oy * y - 20, sizeAX-20, sizeAX-20);
//overlapping red circles
      noFill();
      strokeWeight(2);
      stroke(237, 57, 17);
      ellipse(ox * x * 10, oy * y + 20, sizeAX + 100, sizeAX + 100);

    }
        }

      }

For this project, I looked at how patterns and shapes could alternate through tiles and so I make a series of ellipses that were abstract by itself, but combined together in the middle column to form an eye pattern.

Shariq M. Shah – Project 05 – Wallpaper

shariqs-05-project

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Project - 05




function setup() {
    createCanvas(640, 400);
    background(200, 50, 0);
    noStroke();

    var w = 60;
    var h = 60;



    for (var y = 0; y < height; y ++) {

       // using modulus operator to determine even or odd row



       for (var x = 0; x < width; x ++) {

            // using spacing multipliers to get accurate spacing

            var py = y * h;
            var px = x * w;

            stroke(180, 200 - py * 0.5, 300 - py * 0.5);
            strokeWeight(2)
            noFill();
            rectMode(CENTER);


            rect(px, py, 50, 50);


            //coinciding geometries based on positions by changing rectMode to center
            //applying gradient to wallpaper

            stroke(180, 200 - py * 0.5, 300 - py * 0.5);
            rect(px, py, 35, 35);
            ellipse(px, py, 50, 50);
            stroke(200, 30, 50);
            ellipse(px, py, 60, 60);

      }

    }
    noLoop();
}

In this project, I explored using nested for loops to create a wallpaper from coinciding geometries, which created interesting overlapping shapes. By doing this and applying a color gradient, the different geometries created through the for loop develop into an interesting pattern design.

Nadia Susanto – Project 05 – Wallpaper

sketch

/* Nadia Susanto
   nsusanto@andrew.cmu.edu
   Section B
   Project - 05 - Wallpaper */

function setup() {
    createCanvas(550, 550);
    background(92,160,219);
}

function draw() {
    //triangle pizza variables
    var triX1 = 50;
    var triY1 = 25;
    var triX2 = 25;
    var triY2 = 75;
    var triX3 = 75;
    var triY3 = 75;
    //pizza crust variables
    var crustX = 50;
    var crustY = 70;
    var crustW = 50;
    var crustH = 10;
    //peperoni variables
    var pepSize = 5;
    var pepX1 = 50;
    var pepY1 = 38;
    var pepX2 = 45;
    var pepY2 = 47;
    var pepX3 = 55;
    var pepY3 = 53;

    var flip = false;
    for (var triY1 = 25; triY1 < height; triY1 += 75) {
      triX1 = 50;
      triX2 = 25;
      triX3 = 75;
      pepX1 = 50;
      pepX2 = 45;
      pepX3 = 55;
      crustX = 50;
      for (var triX1 = 50; triX1 < width; triX1 += 75) {
          //cheese
          stroke(255, 241, 153);
          strokeWeight(0.5);
          fill(255,241,153);
          //upwards pizza
          if (flip == true)
          {
            triangle(triX1, triY1, triX2, triY2, triX3, triY3);
            fill(222,12,0)
            circle(pepX1, pepY1, pepSize, pepSize);
            circle(pepX2, pepY2, pepSize, pepSize);
            circle(pepX3, pepY3, pepSize, pepSize);
            //crust
            fill(226,104,60);
            ellipse(crustX, crustY+2, crustW, crustH);
            triX2 +=75;
            triX3 += 75;
            flip = false;
          }
          else { //downwards pizza
            triangle(triX1, triY2, triX2, triY1, triX3, triY1);
            fill(222,12,0);
            circle(pepX1, pepY1, pepSize, pepSize);
            circle(pepX2, pepY2, pepSize, pepSize);
            circle(pepX3, pepY3, pepSize, pepSize);
            stroke(226,104,60);
            strokeWeight(1);
            fill(226,104,60);
            ellipse(crustX, crustY-42, crustW, crustH);
            triX2 +=75;
            triX3 += 75;
            flip = true;
          }
          pepX1 += 75;
          pepX2 += 75;
          pepX3 += 75;
          crustX += 75;
    }
    triY2 += 75;
    triY3 += 75;
    pepY1 += 75;
    pepY2 += 75;
    pepY3 += 75;
    crustY += 75;
    }

}

I was confused at first on what to draw, but then I became hungry and thought of pizza. I was then inspired by this pizza wallpaper I found online. I started coding first the initial pizza on the top left, then I initialized the variables using the numbers I got from my first pizza. I then incorporated for loops and other elements to flip the pizzas and make it a repeating pattern.

YouieCho-LookingOutwards-05

Guardians of the Galaxy Vol. 2, Marvel Studios, 2017

Baby Groot in Guardians of the Galaxy Vol. 2, Framestore, 2017

For this week’s Looking Outwards, I chose the computer graphics work of Baby Groot character that was animated in Guardians of the Galaxy Vol. 2. I think this is a work that is very important in the movie because it has so many cute elements with natural animation. The sequence was done by Framestore, whose animation supervisor was Arslan Elver. Framestore intiially looked into characteristics of babies and young children. Then, they modified the design so that it would feel more mature than a human baby, and “autistic.” After creating the graphics, they had to animate within various contexts in the movie. I think an inspiring process is the way Framestore did animation tests to see how its walking and running cycle would be; there especially had to be sensible decisions made for it to be moving next to other human figures. how they added an extra distance in the movement so that it wouldn’t need extra steps.

Shannon Ha – Looking Outwards – 05

In this series of works, Pascal Dombis uses arbitrary geometrical or typographical patterns create complex and “less reasonable” environments. He would project abstract signs and patterns on to walls or canvases and computationally reproduce the same uncomplicated warped pattern in excess. And throughout the generation of patterns, there are instances where a geometric shape such as a square would emerge from this randomness.

I think a lot of abstract art these days does not effectively communicate the artist’s intentions, but what I appreciate about Dombis is the fact that he is able to use basic data to generate random elements, yet more importantly, he is still able to create a sense of balance between chaos, structure and order through the growth of a geometric shape amidst these abstract patterns.

Margot Gersing – Looking Outwards 05

This week I was inspired by the work of Zeitguised Studios. They are art studio that creates playful and quirky works using a lot of 3d computer graphics. It was founded by Jamie Raap and Henrik Mauler in Chicago and now is based in Berlin.

Birds by Zeitguised Studio

The project I really liked in particular is called birds. It is described as a “lighthearted essay on contextualized characters.” It is essentially representations of birds but only made from things associated with birds, like eggs. It is a playful animation and beautiful imagery.

I think the idea of representing a bird out of everything except for a bird is so cool and I love the playful way they went about it.

Carly Sacco – Project 05 – Wallpaper

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 5: Wallpaper

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

function draw() {

	background(145, 185, 217);
		
	fill(255); //white rectangles
	noStroke();
	for(var x = 0; x < 100; x = x + 1) {
		rect(x, 20, width, 25); //top two white lines
		rect(x, 100, width, 100);
		
		rect(x, 440, width, 25); //bottom two white lines
		rect(x, 300, width, 100);
}

	fill(178, 206, 219); //blue rectangles
	noStroke();
	for(var y = 0; y < 100; y = y + 1) {
		rect(x + 50, y, x, 25); //top set of three rectangles
		rect(x + 200, y + 50, x, 25);
		rect(x - 100, y + 50, x, 25);
		
		rect(x + 50, y + 205, x, 25); //middles set of rectangles
		rect(x + 200, y + 250, x, 25);
		rect(x - 100, y + 250, x, 25);
		
		rect(x + 50, y + 420, x, 25); //bottom set of rectangles
		rect(x + 200, y + 470, x, 25);
		rect(x - 100, y + 470, x, 25);
}

	stroke(186, 191, 194); //grey line set
	line(125, 0, 125, 500);
	line(275, 0, 275, 500);
	line(115, 0, 115, 500);
	line(135, 0, 135, 500);
	line(265, 0, 265, 500);
	line(285, 0, 285, 500);

	stroke(214, 120, 145); //pink
	line(0, 30, 500, 30); //top set of three pink lines
	line(0, 20, 500, 20);
	line(0, 45, 500, 45);
	
	line(0, 440, 500, 440); //bottom set of pink lines
	line(0, 450, 500, 450);
	line(0, 465, 500, 465);
}

The inspiration for my wallpaper were different types of line types that were abstracted. Therefore, I used dotted lines, different line thicknesses, and different colored lines.

Carly Sacco – Looking Outwards – 05

An image from Machine Hallucination at ARTECHOUSE in New York City.

Machine Hallucination by Refnik Anadol has recently debuted in New York City at ARTECHOUSE in New York City. This exhibit uses machine learning algorithms on a data set of images of architectural styles and movements. The result reveals the correlation between moments in architectural history. The images produced help visually represent moments in a city that may have gone unnoticed to the user prior. Fluid motions are used to represent how city movements are continuous and the images projected on them help show how complex cities are.

Refnik Anadol is a media artist, director, and entrepreneur in the aesthetics of machine learning. This project allowed him to merge his traits and compose an exhibit that was rooting in machine learning but has an artistic execution of the data collected. He presents a new way to look at images from a city by showing viewers what they’ve already seen but in a fluid, continuous memory.

Jai Sawkar – Looking Outwards – 05

*Digital render of a 3D-printed jaw implant by Deviaene*

We often associate 3D Computer Graphics with video games; however, this week, I found out that designers are beginning to make medical implants through video game development software!

The above work is done by Sebastiaan Deviaene; he has begun using digital tools usually reserved for video game developers to create 3D-printed implants for bone reconstruction. Using a 3D scan of the patient, he was able to reconstruct both an original jaw and a redesigned implant to fit the jaw perfectly.

In order to fabricate the implant, he used Electron Beam Melting. Through the process, from examining the patient all the way to delivering the implant, Sebastiaan was able to do the work completely remotely.

Having had intensive education in the realm of using 3D modeling, I believe this is a completely viable and more precise method for creating implants like this, and I am very excited to see what the future holds in this field.

Link

Margot Gersing – Project 05 – Wallpaper

mgersing-project5

// Margot Gersing - Project 5 - Section E - mgersing@andrew.cmu.edu

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

}

function draw(){
	background(249, 209, 99);

	// blue
	for (var y = height/24; y < height; y += height/6) {
        for (var x = width/24; x < width; x += width/6) {
            fill(61, 93, 112);
            noStroke();
            rect(x + 17.5, y, 15, 50);
            rect(x, y + 17.5, 50, 15);
        }
    }

    // red +
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            fill(213, 85, 39);
            noStroke();
            rect(x - 7.5, y, 15, 50);
            rect(x - 25, y + 17.5, 50, 15);
        }
    }

    // green shape
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 25; x < width + width/6; x += width/6) {
            fill(139, 163, 126);
            noStroke();
            rect(x, y - 25, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // gray shape
    for (var y = 75; y < height + height/6; y += height/6) {
        for (var x = 75; x < width + width/6; x += width/6) {
            fill(50);
            noStroke();
            rect(x, y, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // white horizontal dots
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = width/12; x < width + width/6; x += width/6) {
            fill(255);
            ellipse(x, y + 15, 5, 5);
            ellipse(x - 15, y + 15, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
          
        }
    }

    // white vertical dots
    for (var y = height/12; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            ellipse(x + 15, y, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
            ellipse(x + 15, y + 30, 5, 5);
            
          
        }
    }

}

For this project I wanted to create a geometric pattern. I also wanted to use festive colors. It was fun to make a playful pattern from simple shapes.