Month: September 2017

mecha-project05-wallpaper

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-05

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

function draw() {
    bird();
    noLoop();
}

function bird() {
    background(230,225,215);
    //dictates the x position of all of the elements
    var z = random(-70,20);

    //randomizes angle of grass
    var grassAdd = random(-10,10);
    var grassAdd3 = random(0,20);

    //randomizes whether or not third piece of grass will appear
    var randomGrass = random(0,10);

    //nested for loop that creates grid of chickens
    for(var x = z; x < 880; x+=140){
        for(var y = z; y < 880; y+=140){
        //grass
        noFill();
        strokeWeight(1);
        stroke(130,125,115);
        line(80+x,140+y,80+x-grassAdd,140+y-random(8,14));
        line(85+x,140+y,85+x-grassAdd,140+y-random(10,20));

        //chance that third piece of grass will appear
        if(randomGrass <= 5){
            line(100+x+grassAdd3,140+y,100+x-grassAdd+grassAdd3,140+y-random(8,14));
        }

        //wing shadow
        noStroke();
        fill(215,200,190);
        rect(3+x,52+y,35,30,40,20,0,20);

        //legs
        noFill();
        stroke(255,123,0);
        strokeWeight(2);
        line(40+x,90+y,40+x,110+y);
        line(40+x, 110+y, 37+x, 110+y);
        
        stroke(215,93,0);
        line(30+x, 110+y, 27+x, 110+y);
        line(30+x,90+y,30+x,110+y);

        //body
        noStroke();
        fill(255);
        rect(10+x,25+y,30,70,0,20,0,50);
        rect(20+x,60+y,50,35,0,0,20,20);

        //eye
        fill(130,125,115);
        ellipse(20+x,34+y,5.5,5.5);
        noFill();
        strokeWeight(1);
        stroke(130,125,115);
        ellipse(20+x,34+y,8,8);

        //beak
        noStroke();
        fill(255,123,0);
        triangle(10+x,35+y,-2+x,25+y,10+x,25+y);
    
        //wing shadow
        fill(230,225,215);
        rect(30+x,52+y,35,30,40,20,0,20);

        //wing
        fill(255);
        rect(30+x,50+y,35,30,40,20,0,20);
        }
    }
}

For this project, I decided to start with creating a graphic that I could use to repeat and make an aesthetically pleasing wallpaper with. While I was originally planning to create a function and place it in a for loop in draw, I instead implemented a nested for loop in my “bird” function. After creating my bird, I added different lines of grass that would change angles based on randomized x and y values. Additionally, a randomized variable would dictate whether or not a third piece of grass would show up.

jennyzha, Project-05-Wallpaper

sketch

//Jenny Zhang
//Section D
//jennyzha@andrew.cmu.edu
//Project 05: Wallpaper

var tw = 0;
var th = 0;
var oy = 0;
var ox = 0;

function setup() {
	createCanvas(480,480);
	background(179, 217, 255);
}	

function draw() {
	background(180, 215, 255);
	var tw = 55;
	var th = 55;
	var oy = 45;
	var ox = 45;
	
	for (var x = 0; x < width; x = x + 1) {
		for (var y = 0; y < 8; y += 1) {
		stroke(255);
		point(x, (y * 100) + 60 - 50 * sin(radians(x)));
		stroke(255, 255, 0);
		point(x, (y * 100) + 60 - 50 * cos(radians(x)));
		}
	}

	for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value 
		for (var x = 0; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			fill(185,145,255);
			noStroke();
			rect(px, py, 50, 50);
			noStroke();
			rect(px, py, 60, 60);
		}
	}
	for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value 
		for (var x = 0; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			fill(255);
			noStroke();
			rectMode(RADIUS);
			rect(px, py, 25, 25);
			rectMode(RADIUS);
			noStroke();
			rect(px, py, 25, 25);
		}
	}
	for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
		for (var x = 1; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			noStroke();
			fill(255, 255, 225);
			ellipse(px, py, 30, 30);
		}
	}
		for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
		for (var x = 1; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			noStroke();
			fill(255);
			ellipse(px, py, 15, 15);
		}
	}
	noLoop();
}

For this project, I was inspired by assignment 05B for this week’s deliverables. I wanted to gain a deeper understanding of how the program worked and added a couple more shapes, lines, and colors to make it my own and make it into a more aesthetically pleasing wallpaper.

alchan-Project 05-wallpaper

sharp

// palette
var dark = {r: 179, g: 191, b: 191}
var medium = {r: 203, g: 214, b: 214}
var light = {r: 217, g: 225, b: 225}

function setup() {
    createCanvas(480, 480);
    background(250);
    rectMode(CENTER);
    angleMode(DEGREES);
    noLoop();
}

function draw() {
    var offsetX = 50;
    var offsetY = 52;
    var rowNum;
    var slant = -20;
    var which = 1;

    for(var y = 0; y < 5; y++) {
      //check if the row is odd or even and offset odd rows
      if(y % 2 == 0) {
        offsetX = 10;
        rowNum = 6;
      } else {
        offsetX = 60;
        rowNum = 5;
      }
      for(var x = 0; x < rowNum; x++) {
        scratch(x*130 - offsetX, y*150 - offsetY);

        //determine which type of knife to draw
        which = nf(random(0,3)+1, 1, 0);
        if(which == 1) {
          sharp(x*100 + offsetX, y*100 + offsetY, slant);
        } else if(which == 2) {
          sharp2(x*100 + offsetX, y*100 + offsetY, slant);
        } else if(which == 3) {
          sharp3(x*100 + offsetX, y*100 + offsetY, slant);
        }
      }
    }
}

// KNIFE 1
function sharp(xPos, yPos, angle) {
  var sharpX = 0;
  var sharpY = 0;

  var sharpW = 8;
  var sharpH = 30;
  var guardW = 10 + sharpW;
  var guardH = 3;
  var handleW = 6;
  var handleH = 20;

  noStroke();
  push();
  translate(xPos, yPos);
  rotate(angle);
  // blade 1
  fill(medium.r, medium.g, medium.b);
  rect(sharpX, sharpY, sharpW, sharpH);
  triangle(sharpX + sharpW/2, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2 + 12);
  fill(light.r, light.g, light.b);
  rect(sharpX - sharpW/4, sharpY, sharpW/2, sharpH);
  triangle(sharpX - sharpW/2, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2 + 12);

  // guard 1
  fill(dark.r, dark.g, dark.b);
  rect(sharpX, sharpY - sharpH/2 - guardH/2, guardW, guardH);
  ellipse(sharpX - guardW/2, sharpY - sharpH/2 - guardH/2, guardH * 1.5);
  ellipse(sharpX + guardW/2, sharpY - sharpH/2 - guardH/2, guardH * 1.5);

  // handle 1
  rect(sharpX, sharpY - sharpH/2 - handleH/2, handleW, handleH);

  // pommel 1
  ellipse(sharpX, sharpY - sharpH/2 - handleH, handleW + 2);
  pop();
}

// KNIFE 2
function sharp2(xPos, yPos, angle){
  var sharp2X = -5;
  var sharp2Y = -18;

  var sharp2W = 25;
  var sharp2H = 80;
  var handle2W = 6;
  var handle2H = 22;

  noStroke();
  push();
  translate(xPos, yPos, angle);
  rotate(angle);
  // blade 2
  fill(medium.r, medium.g, medium.b);
  arc(sharp2X, sharp2Y, sharp2W, sharp2H, 0, 90, PIE);
  fill(light.r, light.g, light.b);
  rect(sharp2X - 1, sharp2Y + sharp2H/4, 2, sharp2H/2);

  // handle 2
  fill(dark.r, dark.g, dark.b);
  rect(sharp2X + sharp2W/2 - handle2W/2, sharp2Y - handle2H/2,
    handle2W, handle2H);
  ellipse(sharp2X + sharp2W/2 - handle2W/2, sharp2Y - handle2H,
    handle2W);
  pop();
}

// KNIFE 3
function sharp3(xPos, yPos, angle) {
  var sharp3X = 0;
  var sharp3Y = 0;

  var sharp3W = 8;
  var sharp3H = 30;
  var handle3W = 6;
  var handle3H = 20;
  var guard3W = sharp3W + 4;
  var guard3H = 4;

  noStroke();
  push();
  translate(xPos, yPos);
  rotate(angle);

  // handle 3
  fill(dark.r, dark.g, dark.b)
  rect(sharp3X, sharp3Y - sharp3H/2 - handle3H/2,
    handle3W, handle3H);

  // guard 3
  rect(sharp3X, sharp3Y - sharp3H/2 - guard3H/2-1,
    guard3W, guard3H);
  // pommel 3
  ellipse(sharp3X, sharp3Y - sharp3H/2 - handle3H,
    handle3W+3);
  fill(light.r, light.g, light.b);
  ellipse(sharp3X, sharp3Y - sharp3H/2 - handle3H,
    handle3W-2);

  // blade 3
  fill(light.r, light.g, light.b);
  quad(sharp3X - sharp3W/2, sharp3Y - sharp3H/2,
    sharp3X + sharp3W/2, sharp3Y - sharp3H/2,
    sharp3X + sharp3W/2, sharp3Y + sharp3H/2 + 8,
    sharp3X - sharp3W/2, sharp3Y + sharp3H/2);
  // highlights
  fill(medium.r, medium.g, medium.b);
  quad(sharp3X - sharp3W/2, sharp3Y,
    sharp3X + sharp3W/2, sharp3Y + 8,
    sharp3X + sharp3W/2, sharp3Y + 4,
    sharp3X - sharp3W/2, sharp3Y - 4);
    quad(sharp3X - sharp3W/2, sharp3Y - 8,
      sharp3X + sharp3W/2, sharp3Y,
      sharp3X + sharp3W/2, sharp3Y - 16,
      sharp3X - sharp3W/2, sharp3Y - 16);
    pop();
}

// LINES
function scratch(xPos, yPos) {
  var spacing = 20;

  noFill();
  stroke(255);
  strokeWeight(4);
  line(xPos, yPos, xPos + 100, yPos + 100);
  line(xPos, yPos + spacing, xPos + 100, yPos + 100 + spacing);
  line(xPos, yPos + spacing*2, xPos + 100, yPos + 100 + spacing*2);

}

I wanted to play around with creating functions and more complex shapes, so the elements themselves are more complicated than the repetition. The type of knife is also randomly generated, so the pattern is slightly different every time.

dayoungl: Project -05

sketch

//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Project 05
function setup() {
    createCanvas(400, 400);
    background(156,255,228);
    var tw = 60;
    var th = 40;
    var oy = 30;
    var ox = 30;
    var z = 10;
    var d = 30;
    //rows
    for (var y = 0; y < 8; y += 1) {
        //columns
        for (var x = 0; x < z; x += 1) {
            //
            var py = oy + y * th;
            var px = ox + x * tw;
            if (y % 2) {
              z = 9;
              stroke(0);
              strokeWeight(5);
              fill(229,223,73);
              stroke(255);
              line(px-30, py, width-20, py);
              rectMode(CENTER);
              rect(px + 30, py, d, d);
              
            } else { 
              z = 10;
              noStroke();
              fill(255,70,138);
              // ellipse(px ,py , d, d);
            }
        }
    }
    noLoop();
}

I worked with simple geometric shapes to create this wallpaper. I was inspired by some of the art-nouveau wallpapers which focused on shape of the plants. The yellow square is an abstract representation of leaves.

Connie – LookingOutwards – 05

I decided to look for 3D art that is meant to mimic the incredible intricacy of OUR real world. It’s easy to be amazed by how wonderful and creative the things in fantasy worlds are but I think that even “mundane” real life holds many wonders.

Architect and CGI artist, Ibrahim Saad from Cairo, Egypt uses a texture/material-adding software known as Substance created by a company known as Allegorithmic. Saad uses Substance Painter to actualize his project, the “Black & White Apartment (2017)” by using it to add incredible details to his models of everyday objects that really reflect everyday life in this apartment he has designed.

In this image, Saad uses the Substance texture features to be able to add even fingerprints to this model. (Credit: https://www.allegorithmic.com/blog/interior-design-fingerprint-ibrahim-saad )

I find this project inspiring because his works are so beautiful and I am in awe of the capabilities of Substance to be able to add such a strikingly realistic and life-like quality to these models.

Examples of his work. (Credit:https://www.allegorithmic.com/blog/interior-design-fingerprint-ibrahim-saad)

From the dishevelment of the hammock to the cups and bowls stacked on top of the cabinets in the kitchen, there is something particularly beautiful of being able to capture “real life” in an honest visual that feels so real like you could feel the fabric of those pillows on the floor.

karinac-Project-04

karinac-Project-04

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-04

function setup() {
    createCanvas(500, 500);
    background(0);
}

function draw() {
    //points of triangle
    var x1 = width/3;
    var y1 = height/3;
    var x2 = width/3;
    var y2 = height-(height/3);
    var x3 = width-(width/3);
    var y3 = height/3;
    var x4 = width-(width/3);
    var y4 = height-(height/3);

    stroke(255,100,0);
    strokeWeight(2);
    rectMode(CENTER);
    fill(250,200,0);
    rect(width/2,height/2,width/3,height/3);


    for (var i = 0; i < 50; i +=2) {
        strokeWeight(0.2);

        //lines outside square
        line(x1, y1, 1, i*10);
        line(x1, y1, i*10, 1);
        line(x2, y2, 1, height-i*10);
        line(x2, y2, i*10, height-1);
        line(x3, y3, width-i*10, 1);
        line(x3, y3, width-1, i*10);
        line(x4, x4, width-1, height-i*10);
        line(x4, x4, width-i*10, height-1);
    }

}

At first, I did not know how I wanted this project to look. I just played around with the loop function to draw lines until I came across a design that I could branch off of. I implemented this design that is based off of the concept of light, which includes the source of light in the middle and the rays that come from it. The most difficult part for me was definitely coming up with a design that was proud to create. After that process was over and I could see a clear picture of what I wanted to draw, the rest was straightforward.

mmiller5-Project-05

sketch

//Michael Miller
//Section A
//mmiller5@andrew.cmu.edu
//Project-05

var toggle = [-1,1]; //randomly flip the spiral
var columnNum = 9

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

function draw() {
    for (var i1 = 0; i1 < columnNum; i1 ++) { //makes rows of bamboo
	x = map(i1, 0, 7, 0, 7 * width / columnNum);
	var yOffset = random(-height / 3, 0); /*each column height will be
						randomly offset*/
	for (var i2 = 0; i2 < 4; i2 ++) { //makes columns of bamboo
	    y = map(i2, 0, 3, 0, 3 * height / 3);
	    bambooDesign(x, y, yOffset);
	}
    }
    noLoop();
}

function bambooDesign(x, y, yOffset) { //makes bamboo segments
    colorFill(x, y, yOffset);
    stroke(0, 25);
    strokeWeight(3);
    fill(200, 204, 153);
    rect(x + .5, y + yOffset - 2.5, width / columnNum - 1, 4);//segment joints
    var spiralX = x + width / (2 * columnNum) + random(-5, 5);
    var spiralY = y + yOffset + height / 6
    var flip = random(toggle);
    spiral(spiralX, spiralY, flip);
}

function colorFill(x, y, yOffset) { //colors each bamboo segment with a gradient
    var size = 1
    for (var iy = size / 2; iy < height / 3; iy += size) {
	for (var ix =  size / 2; ix < width / columnNum; ix += size) {
	    //color of each segment will be the same, so map it to current one
	    r = map(iy + y, y, y + height / 3, 125, 175);
	    g = map(ix + x, x, x + width / columnNum, 125, 200);
	    noStroke();
	    fill (r, g, 0); 
	    ellipse(ix + x, iy + y + yOffset, size, size);
	}
    }
}

function spiral(spiralX, spiralY, flip) { //small spiral ingrained into bamboo
    var angle = 35 - (105 * flip);
    var spiralSize = 200;
    fill(255, 150);
    noStroke();
    push();
    translate(spiralX, spiralY + 60);
    rotate(radians(angle));
    for(count = 0; count < spiralSize; count ++) { //made from many ellipses
	push();
	rotate(radians(flip * 6 * count));
	translate (1, 1);
	ellipse(count/15, count/15, 2, 2);
	pop();
    }
    pop();
}

I was playing around with rectangular tiles that had randomly spaced heights when I thought it looked like bamboo! It then took me way too long to color the segments properly with a gradient, but it worked out in the end. I also wanted to make leaves, but it didn’t pan out, so I have the flowery-ish spirals instead — one of these days though, there will be leaves. Also, the bamboo heights and spiral directions randomize with each refresh.

ghou-project-05-Wallpaper

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 05 A

//globals
//rectangles
var lx = 60;
var ly = 40;
var rx;
var ry;
//diagonals
var dx = 0;
var dy = 0;
var dyn = 0;


function setup(){
    createCanvas(600,600);
    background (255);
    angleMode(DEGREES);
}

function draw(){
    for (var y = 0; y < height/ly; y++) {
        for (var x = 0; x < width/lx; x++) {
            //local variable (needs to change w each square);
            //circles
            var sizes = [0,0,0,lx,lx*2,lx*3];
            var csize = random(sizes);
            //transparency
            var tran1 = random(20,100);
            //lineweight
            var linew = random(0.1,1);
            var cirw = random();
            
            //colour
            var colr = randomGaussian(200,20);
            var colg = randomGaussian(200,20);
            var colb = randomGaussian(200,20);
            
            //rectangles
            noStroke();
            rx = x * lx;
            ry = y * ly;
            fill(colr,colg,250,tran1);
            rect(rx,ry,lx,ly);            
            
            //circles
            strokeWeight(linew);
            stroke(255);
            fill(250,colg,colb,tran1);
            ellipse(rx,ry,csize);
        }
    }
    
    for (var y = -2; y < height/ly; y++) {
        for (var x = -2; x < width/lx; x++) {
            var linew = random(0.5,1);
            //rect strokes
            rx = x * lx;
            ry = y * ly;
            stroke(255);
            strokeWeight(2);
            noFill();
            rect(rx,ry,lx,ly);
            
            //diagonals
            dx = (x + 1) * lx;
            dy = (y + 1) * ly;
            strokeWeight(linew);
            //lines crossing rectangle
            line(rx,ry,dx,dy);
            line(dx,ry,rx,dy);
            //lines crossing each 3 rectangles
            dyn = (y + 3) * ly;
            line(rx,ry,dx,dyn);
            line(dx,ry,rx,dyn);
            
        }
    }
    noLoop()
}

I wanted to create a wallpaper more suited to be a wallpaper for a phone or an iPad. Based on that, I wanted to make something more geometric. I used a Gaussian randomizer to more easily make it look more naturally generated.

nahyunk1-Looking Outwards 05: 3D Graphics

Similar to generating 3D graphics with 2d images through Photoshop and Illustrator, this piece of animation story made by Disney used two dimensional art to create a third dimensional world on screen. First by drawing the characters and the setting, the computer then generates each of the motions to create a set of animated scenes into film. What I admire about this is Disney’s high regard of manual skills and the collaboration of the hand-drawn and the computer. Short films like these from Disney hold significance in that they originate from the artistic skills of the artist more than the artist’s ability to handle machines and softwares. That itself is a quality in this film that I admire and believe a commendable work that sticks to the older practice of creating animation.

mjanco – Looking Outwards-05

 

I’ve chosen to look at this piece by Mikael Hvidtfeldt Christensen. He is a physicist who creates 3D generative artworks using Structure Synth and Fragmentarium, both open source applications. This particular piece, “Algebraic Decay,” uploaded to Christensen’s profile on October 19, 2012, really captured my attention because of its stunning textures and colors. I see it as if it is a large floating landscape, but it also is just vague enough that it could be an image under a microscope. I love how the composition and textures play with the perspective, and make me wonder whether this 3D object is very large or very small. This piece is very complex, therefore it is hard for me to pinpoint what must have been required to produce this piece. However, they must have needed a soft, warm-toned light source, and perhaps Perlin Noise to create the soft, gently wavering textures. The artist does specify that the work was folded in Fragmentarium. The artist says he is interested in chemistry, physics, and complex systems. The texture, lighting, and vague background definitely give the impression that it is a specimen being examined under a light, which is where the artists’ fascination with scientific examination comes into play. The textures and colors also give the impression of an organic substance, which the artist also has interest in exploring.

https://www.flickr.com/photos/syntopia/

Algebraic Decay