Month: September 2017

aboyle-Looking Outwards-05

“Dynamic Earth” is a 24-minute long video that uses 3D computer graphics to explore concepts related to climate. It was completed in 2012 after a two year long collaboration between Spitz Creative Media, the Advanced Visualization Lab at the National Center for Supercomputing Applications at the University of Illinois, NASA’s Scientific Visualization Studio, and Thomas Lucas Productions, Inc.

I admire this project because it ties together science with beautiful computer graphics. I believe that computer graphics’ potential in the field of education is enormous and I’m glad to see such an impressive product made with those ideas in mind. The algorithms were entirely based on real world data, although I suppose there could have been a few creative liberties with regards to the aesthetic representation. I can tell that the creators have both a love for science and art; in the trailer, scientific models are interspersed with beautiful panning shots of Venus and the ocean floor. Although I don’t have access to the whole film, I’m sure it was beautiful, informational, and impressively cohesive.

enwandu-Project-05-Wallpaper

Wallpaper

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-05-Wallpaper

cirY = 40; // Initial yposition of circle that start the columns
cirX = 40; // Initial xposition of circles that start the row
cSize = 80; // Diameter fo the circles
spacey = 20; // Controls vertical spacing betwen the circles
spacex = 20; // Controls horizontal spacing between the

function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0);

    // Draws a series of geometry in relation to each other
    // that fill the canvas
    for (var y = 0; y < height; y+=2.5){
        for(var x = 0; x < width; x+=2.5){
            var cy = cirY + y * spacey;
            var cx = cirX + x * spacex;
            noFill();
            // Controls stroke color based on position of circle
            stroke(cx, cy -100, cx + cy);
            strokeWeight(2);
            // Draws cirles that intersect with each other
            ellipse(cx - cSize/2, cy - cSize/2, cSize, cSize);
            rectMode(CENTER);
            noStroke();
            // Controls the color of the rectangle based on its position; matches the circles
            fill(cx, cy - 100, cx + cy);
            // Draws rectangle at the center of each circle
            rect(cx - cSize/2, cy - cSize/2, 15, 15);
            // Draws a small black dot at the center of each rectangle
            fill(0);
            ellipse(cx - cSize/2 ,cy-cSize/2 , 5, 5);
        }
    }

}

When I thought of wallpaper, my mind initially went to the ugly stuff you’d see on a grandparents wall in a movie or something. For this project, I was aiming for the opposite. My first pass at the code was essentially what I was trying to avoid; ugly wallpaper. Since I had initially had the intersecting circles as one color, i decided it would be interesting if they change depending on their position. After this I decided to accent the center of these circles, giving it a little more character.

sketch
// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-05-Wallpaper

cirY = 40; // Initial yposition of circle that start the columns
cirX = 40; // Initial xposition of circles that start the row
cSize = 80; // Diameter fo the circles
spacey = 20; // Controls vertical spacing betwen the circles
spacex = 20; // Controls horizontal spacing between the

function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0);

    // Draws a series of geometry in relation to each other
    // that fill the canvas
    for (var y = 0; y < height; y+=2.5){
        for(var x = 0; x < width; x+=2.5){
            var cy = cirY + y * spacey;
            var cx = cirX + x * spacex;
            noFill();
            // Controls stroke color based on position of circle
            stroke(cx, cy -100, cx + cy);
            strokeWeight(2);
            // Draws cirles that intersect with each other
            ellipse(cx - cSize/2, cy - cSize/2, cSize, cSize);
            rectMode(CENTER);
            noStroke();
            // Controls the color of the rectangle based on its position; matches the circles
            fill(cx, cy - 100, cx + cy);
            // Draws rectangle at the center of each circle
            rect(cx - cSize/2, cy - cSize/2, 15, 15);
            // Draws a small black dot at the center of each rectangle
            fill(0);
            ellipse(cx - cSize/2 ,cy-cSize/2 , 5, 5);
        }
    }

}

mjnewman Project-05, Section A

mjnewman-wallpaper

//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-05 Wallpaper

function setup() {
    createCanvas(470, 470);
}

function draw() {
    background(100, 200, 205);
    for (var y = 0; y < height+50; y += 120) {
        for (var x = 0; x < width+50; x += 120) {

        	//Top Half-Head
        	noStroke();
            fill(290, 130, 200);//pink
            ellipse(x + 50, y + 50, 50, 50);
            //cover up for bottom half of circle
            fill(100, 200, 205);
            rect(x + 25, y + 50, 50, 25);

            //Tentacles
            stroke(290, 130, 200);
            strokeWeight(4);
            line(x + 30, y + 50, x + 35, y + 80);
            line(x + 42, y + 50, x + 48, y + 90);
            line(x + 54, y + 50, x + 57, y + 72);
            line(x + 66, y + 50, x + 71, y + 82);

            //Head Circle
            noStroke();
            fill(240, 80, 150);//slightly darker pink
            ellipse(x + 56, y + 33, 15, 8);//oblong circle

            //Bubbles
            fill(120, 220, 225)//slightly lighter blue
            ellipse(x + 90, y + 55, 10, 10);//medium bubble
            ellipse(x + 78, y + 20, 20, 20);//big top bubble
            ellipse(x + 20, y + 90, 8, 8);//small bottom left bubble
            ellipse(x + 33, y + 100, 5, 5);//tiny bubble
        }
    }
    noLoop(); 
}

I first had the idea to do a pattern of jellyfish. While, sketching actual jellyfish, I couldn’t stop thinking about Spongebob Squarepants and when he would go jelly fishing. So that definitely informed my color choice and somewhat of the graphic translation.

hqq – secE – lookingOutwards05

I’m deeply inspired by Morphogenetic Creations by Andy Lomas, currently on display in the LACDA. This piece uses fractalization and data trees to create masses inspired by genetic code. Lomas’ work uses three-dimensional computer graphics to explore organic and natural forms that express theories behind aggregation and creation. I’m particularly inspired by Lomas’ work in this regard because it uses an architecture backstory to consider the spatial cavities that exist within the forms. As they morph and wither, it creates interesting spaces in the voids that, as an architecture student, I find valuable because much of contemporary architecture is derived from this kind of method. In doing so, Lomas second-handedly explores architectural capacities while using computer-generated graphics to dramatically express an expansion on computer- and genetic-based coding.

hqq – secE – project05 – wallpaper

hamza

//hamza qureshi
//hqq@andrew.cmu.edu
//section e
//project 5: wallpaper
function setup(){
    createCanvas(480, 480);
    background(190, 235, 254);
  }

function draw(){
    noStroke();


    lineitup(); //calls the functions for the three main
    plane1();   //components to the pattern
    plane2();
    noLoop(); //makes sure  nothing is redrawn
  }

function lineitup(){                        //lines running through background
    for (var y = 0; y < 480; y += 3){       //defines spacing between lines
      push();
      if (y%2 == 0){
        var d = .25;
      }
      else if (y%2 == 1){
        d = 0.75;                           //allows for the horizontal lines
      }                                    //to change based on whether the
      strokeWeight(0.5);                   //y-value is even or odd
      stroke(255);
      line(0, y, width, y);                //draws horizontal lines
      stroke(160,165,205);
      strokeWeight(d);
      line(y,0,y,height);                 //draws vertical lines
      pop();                              //used push/pop to change strokes
    }
}

function plane1(){
    for (var x = 0; x < 450; x+= 75){              //draws first set of planes
      for (var y = 0; y < 500; y+= 100){           //restricts it to 5 rows and 6 columns
        var r = random(170,255);                   //allows subtle color change between each
        var b = random(200,250);                   //paper plane
        var p = 30+x;
        var q = 15+y;
        fill(r, 180, b);
        triangle(p+15,q+45, p+30,q, p+55,q+5);
        triangle(p+15,q+45, p+20,q, p,q+10);
        fill(r-50, 150, b-50);
        triangle(p+15,q+45, p+20,q, p+28,q+5);
      }
    }
  }

function plane2(){                               //draws second set of planes
    for (var x = 0; x < 450; x += 75){           //restricts it to 6 columns and 4 rows
        for (var y = 0; y < 400; y+= 100){
          var r = random(160,220);               //subtle color  change
          var b = random(120,200);
          var u = 40 + x;
          var v = 60 + y;
          fill(r, 220, b);
          triangle(u,v+30, u+40,v, u-10,v+15);
          triangle(u+5,v+35, u+40,v, u+30,v+35)
          fill(r-50, 180, r-50);
          triangle(u,v+30, u+40,v, u,v+40);
          triangle(u,v+40, u+5,v+35, u+10,v+35);
          }
        }
}

For this assignment, I was inspired by the whimsicality of paper planes and how evocative their folds can be. I decided to take the opportunity to use lines to mimic a subtle fold in the background, while using tones to exemplify the shading in the folds. Next time, I’d love to figure out a way to turn this into a non-static graphic that flies with the mouse.

mstropka-Project-05-E

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-05

var spacing = 120;
var x = 0; //initial x value
var y = 0; //initial y value


function setup() {
    createCanvas(480, 480);
    background(220);

    for(x = 0; x <= 5; x += 1){
      for(y = 0; y <= 5; y = y+1){
        var xpos = x * spacing;
        var ypos = y * spacing;
        if(y % 2 == 1){
          xpos -= 60;
          //defining each triangle that makes up the hexagon
          noStroke();
          fill(random(0,225));
          triangle(xpos+30,ypos, xpos, ypos+60, xpos +60, ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos,xpos+60,ypos+60,xpos +90,ypos);
          fill(random(0,225));
          triangle(xpos+90,ypos,xpos+120,ypos+60,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos,ypos+60,xpos+30,ypos+120,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos+120,xpos+60,ypos+60,xpos+90,ypos+120);
          fill(random(0,225));
          triangle(xpos+60,ypos+60,xpos+90,ypos+120,xpos+120,ypos+60);
        }else{
          noStroke();
          fill(random(0,225));
          triangle(xpos+30,ypos, xpos, ypos+60, xpos +60, ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos,xpos+60,ypos+60,xpos +90,ypos);
          fill(random(0,225));
          triangle(xpos+90,ypos,xpos+120,ypos+60,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos,ypos+60,xpos+30,ypos+120,xpos+60,ypos+60);
          fill(random(0,225));
          triangle(xpos+30,ypos+120,xpos+60,ypos+60,xpos+90,ypos+120);
          fill(random(0,225));
          triangle(xpos+60,ypos+60,xpos+90,ypos+120,xpos+120,ypos+60);
          //ellipse(xpos, ypos, 120, 120)


        }


      }
    }
}

For this project I used a hexagonal grid and drew each hexagon as triangles with a random black and white value assigned.

dnam-project-05-Wallpaper

sketch

/*
Doo Won Nam
Section B
dnam@andrew.cmu.edu
Project - 05
*/

function setup() {
    createCanvas(600, 600);
    background(142, 4, 2); //red background
}
function draw() {
  var rng = random()
  for (var y = 50; y < height -5; y += 100) { //small rectangles
      for (var x = 50; x < width - 5; x += 100) {
      //x and y increases depending on the line
      noStroke();
      fill(10, 46, 28); //dark green
      rect(x, y, 40, 40);
}
}
for (var y = 40; y < height -5; y += 150) { //big circles
    for (var x = 40; x < width - 5; x += 150) {
    noStroke();
    fill(9, 20, 1); // darker green
    rect(x, y, 70, 70);
}
}
//generate white randomly depending on the refresh
stroke("white");
var lineX = random(20, 400);
for (var lX = 0; lX < width; lX += lineX)
  line(lX, 0, lX, 600);
  noLoop(); // not constantly creating lines
}

Inspired from CMU’s tartan pattern, I wanted to make a background wallpaper that resembles the red, green, and white rectangles and line. I wanted to make the pattern lines refresh and have a new look everytime. The small rectangles change positions each line to make it more visually interesting.

mstropka-LookingOutwards-05-E

X-Particles is a product made by a CGI company to enable artists to use particle systems to create special effects. Every year when they release a new version of the software, the company creates a showreel to display the different effects that the software affords the users. I think that these advertisements do a great job of bridging the gap between purely computational and creative work.

serinal- project 5 (section C)

sketch

function setup() {
    createCanvas(640, 480);
    background(224, 255, 255);

 	var constant = (sqrt(3)/2)*20; // value for the width
    var row = 8;
    var w = 65; //spacing
    var th = constant;
    var oy = 10; // original y
    var ox = 2; // original x

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < row; x++) {
            var py = oy + y * th;
            var px = ox + x * w;
            if (y%2 == 0){
            	noStroke();
            	fill (112, 128, 144);
            	rect(px+w*0.3, py*8, 10, 10); //smaller rectangles (top n bottom)
            	row = 10; 
            } else {
            	noStroke();
            	fill (176, 192, 222);
            	rect(px, py+119, 50, 50); //larger rectangle in middle
            	row = 10;
            }
        }
    }
    noLoop();
}

function draw(){
	for (var i =0; i<800+40; i+=30) {
		stroke (30, 144, 225);
		strokeWeight (2);
    	line(i-2, 35, i+5, 40); //shorter line top
    	line (i-2, 35, i+5, 50); //longer line bottom
    	stroke (245, 255, 250, 80);
    	line (2, 3*i, 5*i, 1);
    	stroke (30, 144, 225);
    	strokeWeight (2);
    	translate (-5, 0);
    	line (i+40, 400, i+25, 405);
    	line (i+40, 400, i+25, 420);
    }
}

This project was pretty low-key for me and I wanted to keep my project mostly geometric/basic. I liked playing around with the colors and I chose to do a blue-guided color palette. If I had more time, I definitely would want to make it a little more complex.

JDBROWN – Project 5 – Textile Pattern

For this project, I took inspiration from the color gradient lab that we did on Tuesday. I wanted to experiment with more textured shapes than I had been using previously, and I think this turned out really interesting.

Jdbrown Proj 5

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 5: Wallpaper

var i = 0;
var fuck = 150;
var shit = 50;
var flash = 10;

function setup () {
    createCanvas (600, 480);
    stroke (255);
    strokeWeight (3);
}

function draw () {

    background (255);
 
    for (var y = 50; y < height + 50; y += 100) {
        rect (x + 50, y - 25, 50, 50);
        
        for (var x = 50; x < width + 50; x += 100) {
            fill (y/2, x/2, 0, x*y);
            ellipse(x - 25, y - 10, 25, 150);   // vertical grid
            ellipse(x - 25, y - 10, 50, 50);    // big circles at each nexus point
            ellipse(x + 25, y + 45, 20, 20);    // little dot in the center of each square
            ellipse(x, y, 30, 30);              // lower bump
            ellipse(x - 25, y - 10, 30, 30);    // lower bump
            ellipse(x - 10, y - 10, 35, 35);    // bee body (big)
            ellipse(x - 10, y - 10, 115, 15);   // horizontal grid
            ellipse(x - 25, y - 10, 25, 25);    // central circle
        }
    }

    for (var y = 0; y < height+25; y += 50) {       // Draws columns (just Y)
        for (var x = 0; x < width+25; x += 50) {    // Draws rows (just X)
            fill(150, 200);
            ellipse(x + 1000, y, 25, 25);
        }
    }
    for (var  x = 5; x < width + 25; x += 10) {
        for (var y = 5; y < height + 25; y += 10) {
        fill(255, 120);
        ellipse(x, y, 5, 5);
        }
    }
}