Category: Uncategorized

Sean Meng – Project 5

sketch


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

}

function draw() {
    
    background(245,245,220);
    noStroke()
//The repreating circles 
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            fill(178,34,34);   
            ellipse(50*x + 25, 50*y + 40, 10, 10);

        }

    }
//The first set of vertical shapes
    for (var a = 0; a < 5; a++) {
        for (var b = 0; b < 7; b++) {
            fill(0,0,139);
            rect(a*100, b*60, 5, 200)
        }
    }

//The second set of vertical shapes    
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            fill(210,180,140)
            rect(i*100+45, j*50, 20, 200)
        }
    }
//The first set of horizontal shapes
    for (var m = 0; m < 5; m++) {
        for (var n = 0; n < 15; n++) {
            fill(240,230,140)
            rect(m*120, n*50, 300, 3)
        }    
    }
//The second set of horizontal shapes
    for (var p = 0; p < 5; p++) {
        for (var q = 0; q < 15; q++) {
            fill(255)
            rect(p*120, q*50+20, 300, 12)
        }    
    }
    
}

Speaking of something that I would wear everyday, plaid pattern is one of my favorites. In this project, I played with simple geometries and designed this multicolored plaid pattern. And I added circle shapes to contrast with the rectangles to increase the visual balance.

Project 5

sketch.js


var d = 20

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

}

function draw() {
    background(0);
    for (var i=0;i<50;i+=1){
        for(var j =-10; j < 50;j +=1){
            fill (255,140);
            rect((50 + j *d * 1.5) + i * 15, 25 +(i *d *1.5), d+20, d); //offsets 

        }
    }
}

I created an optical allusion using for loop and offsetting the rectangles so when you look far away you can’t tell if the black negative spaces are straight or not.

Carley Johnson Project 05

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 05
*/

var d = 25;

function setup() {
    createCanvas(640, 480);
    background(255, 228, 233);
}

function draw() {
    for(var y = 0; y < 20; y += 2) {
        for(var x = 0; x < 20; x += 3) {

            // Bird body
            fill(0, 223, 252);
            stroke(0);
            rect((x*d * 1.5 - 185) + y * 25, 
                    25 + y*d * 2, d + 9, d + 2, 
                    0, 20, 20, 20);
            
            //Bird beak
            fill(255, 178, 76);
            stroke(0);
            triangle((x*d * 1.5 - 152) + y * 25, 35 + y*d * 2, 
                   (x*d * 1.5 - 152) + y * 25, 40 + y*d * 2, 
                    (x*d * 1.5 - 140) + y * 25, 35 + y*d * 2)

            //Bird eye
            fill(0);
            stroke(0);
            ellipse((x*d * 1.5 - 160) + y * 25, 33 + y*d * 2, 
                    3, 3)

            //Bird wing
            fill(154, 242, 253);
            stroke(142, 216, 252);
            bezier((x*d * 1.5 - 184) + y * 25, 38 + y*d * 2,
                    (x*d * 1.5 - 175) + y * 25, 55 + y*d * 2,
                    (x*d * 1.5 - 170) + y * 25, 55 + y*d * 2,
                    (x*d * 1.5 - 160) + y * 25, 38 + y*d * 2)

            //Bird food
            fill(255, 178, 76);
            stroke(0);
            ellipse((x*d * 1.5 - 110) + y * 25, 33 + y*d * 2, 
                    5, 5)
            }

      }
      
    }

 

I knew I wanted to do birds, because I think birds are an adorable and eccentric pattern. (I have a rain jacket with a repeating bird silhouette pattern on it that I love, pictured above) so I chose that. For a while I was trying to create five thousand variables for each individual shape, but that was making different patterns with each shape, not following where the body was. Then I realized that I could simplify the process by using the same variables (which also unified where the objects appeared) and had to live with the retrospective embarrassment of taking so long to figure it out. But I think this is adorable, so, worth it!

Tanvi Harkare – Project 05 – Wallpaper

tanviharkare_sketch

var posX = 75; //starting position of tile x direction
var posY = 20;// starting position of tile y direction
var iteration = 0; //lets program know whether its odd or even row
var count = 0; //know when to terminate the program with noLoop

function setup() {  
    createCanvas(600, 450);
    background(0, 0, 75);
}

function draw() {
    if(iteration === 0){ //even number rows get 4 tiles
        for(var s = 0; s < 4; s++){
            tile(posX, posY);
            posX += 150;
        }
        iteration++;
    }

    else if(iteration === 1){ //odd number rows get 3 tiles to provide hexagonal effect
        for(var d = 0; d < 3; d++){
            tile(posX + 75, posY);
            posX += 150;
        }
        iteration--; 
    } 
    posX = 75;
    posY += 100;

    if(count > 13){
        noLoop();
    }
}

function tile(x, y){ //new function actually producing the tile with x, y parameters
    stroke(220, 219, 214);
    strokeWeight(1);
    line(x, y, x - 50, y + 50);
    line(x - 50, y + 50, x, y + 100);
    line(x, y + 100, x + 50, y + 50);
    line(x + 50, y + 50, x, y);

    line(x, y, x - 40, y + 50);
    line(x - 40, y + 50, x, y + 100);
    line(x, y + 100, x + 40, y + 50);
    line(x + 40, y + 50, x, y);

    line(x, y, x - 30, y + 50);
    line(x - 30, y + 50, x, y + 100);
    line(x, y + 100, x + 30, y + 50);
    line(x + 30, y + 50, x, y);

    line(x, y, x - 20, y + 50);
    line(x - 20, y + 50, x, y + 100);
    line(x, y + 100, x + 20, y + 50);
    line(x + 20, y + 50, x, y);

    line(x, y, x - 10, y + 50);
    line(x - 10, y + 50, x, y + 100);
    line(x, y + 100, x + 10, y + 50);
    line(x + 10, y + 50, x, y);

    count++;
}

The wallpaper that inspired me for my wall paper

I was inspired by a simple, modern wall paper to create a singular tile that would be repeated in the hexagonal pattern we learned about in Assignment 5B. I created a new function tile(x, y) with two parameters (starting x location and starting y location) to create a set of tiles on a background.

Julie Choi – Project 05 – Wallpaper

bubble wallpaper

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

function draw() {
    background(255);
    drawPatter(); //call function drawPatter
    noLoop(); 
}
function drawPatter() {
    // draw blue background line
    for(var i = 20; i < width; i += 60){
        strokeWeight(7);
        stroke(60, 211, 206, 50);
        line(i, 0, i, height);
    }
    // draw red background line
    for(var p = 10; p < width; p += 90){
        strokeWeight(3);
        stroke(255, 66, 0, 70);
        line(p, 0, p, height);
     }
    // draw the bubbles with ellipses with low opacity
    for (var y = 50; y < height + 50; y += 100) {
      for (var x = 50; x < width + 50; x += 100) {
          noStroke();
          var r = (y/200) * 255;
          var w = (x/200) * 255;

          fill(r / 32, w, 180, 50);
          ellipse(x, y, 30, 30);

          fill(134, w / 2, r, 50);
          ellipse(x + 18, y + 15, 30, 30);

          fill(r, w, 100, 50);
          ellipse(x + 18, y - 10, 30, 30);

          fill(r, w, 100, 50);
          ellipse(x + 10, y + 23, 20, 20);

          fill(r / 40, 0, 100, 50);
          ellipse(x + 10, y + 10, 10, 10);

          fill(r / 2, w, 100, 50);
          ellipse(x + 10, y + 10, 10, 10);

          fill(r, 0, 100, 50);
          ellipse(x + 30, y + 30, 50, 50);
      }
    }
}

I enjoyed this assignment because it really allowed me to be creative. My wallpaper is a pattern of colorful bubbles, and I was inspired by the old wallpaper I had as a child. Although it does not look similar to my actual wallpaper, I had fun making new designs from my memory.

Rachel Lee Project 05 Section E

sketch

/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 05
*/


var spacing = 80; // spacing between elements
var kiwiSize = 60;

function setup() {
    createCanvas(480, 480);
    background(255, 210, 225);

    // drawing kiwi
    for (var x = 75; x < width - 75; x += spacing) { // width of rows
        for (var y = 85; y < height - 85; y += spacing * 1.2) { // length of columns
            noStroke();
     // brown kiwi skin
            fill(165, 115, 65);
            ellipse(x, y, kiwiSize, kiwiSize);
   
    // green kiwi flesh
            fill(190, 215, 90);
            ellipse(x, y, kiwiSize * 0.9, kiwiSize * 0.9);

    // beige kiwi core
            fill(240, 240, 205);
            ellipse(x, y, kiwiSize * 0.5, kiwiSize * 0.5);
    
    // kiwi seeds
            fill(0);
            ellipse(x - 15, y, 3, 3);
            ellipse(x + 15, y, 3, 3);
            ellipse(x, y - 15, 3, 3);
            ellipse(x, y + 15, 3, 3);
        }
    } 

    // text that aligns with kiwi
    for (var a = 45; a < width - 75; a += spacing) {
    	for (var b = 105; b < height - 85; b += spacing * 0.9) {
            fill(40, 140, 70);
            textSize(9);
            textFont('Akkurat Mono');
            text("kiwi dreams", a, b * 1.3);    
    	}
    }
    noLoop(); // drawing only once
}


function draw() {

}

I decided to base my wallpaper on my current favourite fruit, the kiwi. I wanted to incorporate more playful colors as well as a dreamier caption, since it is turning cold in Pittsburgh and I miss warm weather. I was inspired by a cherry printed shirt I came across when I was online shopping, and numerous fruit illustrations I found on Pinterest (such as this pomegranate one). Overall, it was really fun playing with symmetry and pattern, and I would like to continue this project to perhaps feature alternating sliced and whole kiwis.

Pomegranate pattern I took inspiration from
Cherry shirt I came across when online shopping

Jenni Lee — Looking outwards — 05

Video of “Trapped Summer”

The computer graphics/3D art project I chose for this week was “Trapped Summer” by UK based 3D artist and motion designer, Peter Tomaszewicz. This project is described by him as a “humoristic tone to a hot summer,” as it is based around everyday, mundane objects associated with summer, such as fans and beach paddles. As the bright objects are set on vivid yet minimalistic backgrounds, I was immediately drawn to the unique visuals, bright colors, and engaging movement within the video. Tomaszewicz masterfully blends 3D art and animation in order to create interesting, fluid motion and interactions between the plastic and the objects. I found it meaningful how he incorporated the element of plastic, as it makes a statement about this material’s controversial nature, which communicates a subtle environmental message within the seemingly mindless video. Ultimately, I found this video is both thought provoking and visually pleasing.

View full project here.

Jenna Kim (Jeeyoon Kim)- Looking Outwards-5


(Guide to Snow Simulation in Frozen)

Frozen Snow Simulation is a project by the graphics community to illustrate real snow in the animation environment. Since already existing 3D graphics only have techniques for solids and liquids, and making graphics for wet and dense snow is difficult, the graphics team had to use a grid that creates self collision and breaking of the snow. The algorithm used for this project is called Matterhorn, which made basis for most of the snow effects in the movie. The designers started with Matterhorn and changed the look for a perfect snow. The creator’s artistic sensibilities manifested in the final form because he carefully considered the composition, details of the snow, and style/ elegance of the whole animation into Frozen. I admire this project because in order to create the real, specific effects of the snow, a team of forty people came together to simulate snow that gives both reality and fits into the style of the movie.

Link: http://www.cgmeetup.net/home/making-of-disneys-frozen-snow-simulation/

Jenni Lee — Project 05 — Wallpaper

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project- 05
*/

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

function draw() {
  background(234, 228, 237);
  var i, j, num;
  var distF = 75; // distance between two flowers (center)
  var numY = 7, numX = 6; // number of flower to draw on x- and y- dimension
  var r, g, b;
  for (j = 0; j < numY; j++) { // use nested for loop to draw 
    //flowers on both horizontal and vertical directions
    if (j % 2 == 0) { // even row, draw numX of flowers with one color
      num = numX;
      r = 169;
      g = 132;
      b = 173;
    } 
    else { // odd row, draw numX-1 flowers, and different color
      num = numX - 1;
      r = 163;
      g = 62;
      b = 103;
    }
    for (i = 0; i < num; i++) {
      var py = 40 + j * distF * sqrt(3) / 2; // vertical distance between 
      //two flowers is sqrt(3)/2
      var px;
      if (j % 2 == 0) { // even row - start with default position
        px = 50 + i * distF;
      } 
      else {
        px = 50 + distF/2 + i * distF; // else, indent the flower 
        //by distance/2 (distF is the distance between two flowers)
      }
      push(); // remember the state
      drawFlower(px, py, r, g, b);
      pop();
    }
  }
}

function drawFlower(x, y, r, g, b) {
  fill(r, g, b, 127); // fill in the color of the flower, 
  //plus transparency for effects

  translate(x, y);
  noStroke();
  ellipseMode(CENTER);

  for (var i = 0; i < 10; i++) { // draw ellipse 10 times, each time 
    //rotate by 36 degrees to create flower
    ellipse(0, 20, 13, 35);
    rotate(PI / 5);
  }
}

For my wallpaper project, I was inspired by my current design studio poster project which involves many flower illustrations. I found this wallpaper project to be a fun extension of Assignment B, as I extracted the element of nested for loops and combined it with the usage of ellipse rotations in order to personalize the drawing. This project was a thorough learning experience, as it allowed me to apply newly learned topics into my own projects.

Jenna Kim (Jeeyoon Kim)- Project 5- Wallpaper

jennakim05

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Week 5 Project: Mr. Avocado and Ms. Eggy
*/
function setup() {
    createCanvas(600, 600);
    noStroke();
}

function draw() {
    background(245, 138, 125);

    for (var y = 0; y < height; y += 100) { //avocado peel
        for (var x = 0; x < width; x += 70) {
            fill(79, 50, 54);
            ellipse(x, y, 30, 30);
            ellipse(x, y + 30, 40, 40);
      }
    }
    for (var y=0;y < height;y += 100){ //inside of avocado
      for (var x = 10;x < width;x += 70){
        fill(204, 228, 182);
        ellipse(x - 10, y, 25, 25);
        ellipse(x - 10, y + 25, 35, 35);
        fill(79, 50, 54); 
        ellipse(x - 15, y, 3, 3); //left eye
        ellipse(x - 7, y, 3, 3); //right eye
      }
    }

    for (var y = 0;y < height;y += 100){ //avocado seed!
      for (var x = 10;x < width;x += 70){
        fill(79, 50, 54);
        ellipse(x - 10, y + 30, 15, 15);
      }
    } 
    for(var y = 70;y < height * 3 / 2;y += 100){ //egg! 🙂
    for(var x = 30;x < width;x += 70){
      fill(255); //white part
      ellipse(x, y, 40, 50);
      fill(252, 210, 94); //yolk
      ellipse(x, y, 20, 20);
      fill(252, 210, 94); //eyes
      ellipse(x - 10, y - 10, 4, 4); //left eye
      ellipse(x + 10, y - 10, 4, 4); //right eye
    }
  }
    noLoop();
}

For this project, I designed a pattern for a kind of pajamas I want for myself. 🙂
I made a pattern of avocados and eggs, my favorite food. Although this project was also challenging as the assignments a and b, I enjoyed using my creativity and apply what I learned from this week’s lecture and recitation. Through keep experimenting with the coding, I started to understand the loops fully than before. I know that next time, I can further improve by using % operator.