Month: September 2017

mjanco – wallpaper

wallpaper

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project-05-Wallpaper

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

function draw() {
    background(0);
    drawGrid();
    noLoop();
}
function drawGrid() {
  stroke(170, 80, 100);
  strokeWeight(2);
  //vertical ellipses - green
  for (var y = -1; y < height; y += 80) {
        for (var x = 50; x < width+50; x += 100) {
            fill(74,250,160,90);
            ellipse(x, y, 100, 200);
        }
    }
    //horizontal ellipses - yellow
    for (var y = 0; y < height+50; y += 80) {
          for (var x = 50; x < width+50; x += 100) {
              fill(240,200,60, 90);
              ellipse(x, y, 200, 100);
        }
    }
    //rectangles
    noStroke();
    for (var y = 0; y < height+50; y += 80) {
          for (var x = 50; x < width+50; x += 100) {
              fill(200,91,66 , 90);
              rect(x-5, y-10, 10, 20);
        }
    }
}

For this project I just wanted to use a simple geometric print using a color scheme that I like. I found that I could create new shapes by layering familiar ones, and altering the opacity of my colors.

rgroves – Wallpaper – section B

sketch

//Becky Groves
//Section B
//rgroves@andrew.cmu.edu
//Project 5 Wallpaper

//dimensions of the pattern
var h = 140;
var w = 200;

function setup() {
    createCanvas(480, 480);  
    background(167, 178, 181);	
}

function draw() {
for (var y = 0; y < height/h; y++){
		for (var x = 0; x < width/w; x++) {
			//change the position of the pattern for each row
			if (y%2 == 0) {
				texas(x * 2 * w, y * h);
				//change the color of the star for each column
				noStroke();
				if (x%3 == 0) {
					fill(255, 255, 255);
				} else
				if (x%2 == 0) {
					fill(255, 0, 0);
				} else {
					fill(0, 0, 255);
				}
				star((x * 2 * w) + w, y * h, 20, 50, 5);
			} else {
				texas(-w + (x * 2 * w), y * h);
				noStroke();
				if (x%3 == 0) {
					fill(0, 0, 255);
				} else
				if (x%2 == 0) {
					fill(255, 255, 255);
				} else {
					fill(255, 0, 0);
				}
				star((x * 2 * w), y * h, 20, 50, 5);
			}
		}
	} 
}


function texas(x, y){ //combine right and left sides of the pattern
	lefttexas(x, y);
	righttexas(x + w, y);
}

function lefttexas(x, y){ //left half of the pattern
	fill(167, 178, 181);
	noStroke();
	rect(x, y, w, h);
	//grass
	fill(142, 130, 78);
	rect(x, y + h - 45, w, 45);
	//windmills
	var a = 25; //distance of first windmill from the left
	var xs = 30; //horizontal spacing
	var yst = 15; //difference in heights from the top
	var ysb = 5; //difference in heights from the bottom
	for (i = 0; i < 3; i++) {
		stroke(223, 218, 207);
		strokeWeight(3);
		line(x + a + (xs * i), y + 30 + (yst * i), x + a + (xs * i), y + h - 10 - (ysb * i));
		line(x + a + (xs * i), y + 30 + (yst * i), x + a + (xs * i) + 6, y + 30 + (yst * i));
		push();
		noStroke();
		fill(223, 218, 207);
		translate(x + a + (xs * i) + 6, y + 30 + (yst * i));
  		rotate(frameCount / 200.0 * (i + 1)); //the blades spin!
  		rotate(45 * (i + 1))
		star(0, 0, 2, 30, 3); 
		pop();
	}
	//fence
	stroke(100);
	strokeWeight(4);
	noFill();
	rect(x + ((11/16) * w), y + 80, (5/16) * w, 50, 10, 0, 0, 10);
	line(x + w - 10, y + 80 + 25, x + w, y + 80 + 25);
	for (i = 1; i <= 4; i++) {
		strokeWeight(2);
		var s = 50/5;
		line(x + ((5/8) * w), y + 80 + (i * s), x + w, y + 80 + (i * s));
	}
	stroke(188, 157, 118);
	strokeWeight(10);
	line(x + ((5/8) * w), y + 80, x + ((5/8) * w), y + h);
}

function righttexas(x, y) {
	push();
	translate(2 * x + w, 0);
	scale(-1, 1);
	lefttexas(x, y);
	pop();
}

//this is from the p5.js reference site
function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

For this project I was inspired by the landscape of my home state Texas. I think it looks better at a larger scale so here’s a screenshot of what that would look like:

 

karinac-Project-05

karinac-Project-05

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

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

    //first set of boxes
    for (var y = 30; y < height-30; y += 90) {
        for (var x = 30; x < width-30; x += 90) {
            stroke(250);
            strokeWeight(10);
        	noFill();
            rect(x, y, 70, 70);
        }
    }

    //underneath layer of boxes
    for (var a = 50; a < height-80; a += 90) {
        for (var b = 50; b < width-80; b += 90) {
            stroke(250);
            strokeWeight(6);
            noFill();
            rect(a, b, 70, 70);
        }
    }
}

I wanted to create a wallpaper with simple geometric designs that are not too distracting. The hardest part I faced was trying to find the parameters for the loop.

elizabew-Project-05- Wallpaper

sketch

// Elizabeth Wang
// elizabew
// Section E
//Project 5: Wallpaper


function setup() {
  createCanvas(450, 450);
  background(214,239,255); //blue
  noLoop();

}


function draw() {
  drawLine(); //vertical lines
  drawDiaganal(); //diaganal lines
  drawDots(); //dots
  drawLeaf(); //ellipses
}

function drawLine() { //vertical lines
  for (var xv = 0; xv < width; xv += 5) { //vertical lines
    var xvPos = xv * 10;
    strokeWeight(2);
    stroke(177,226,174); //green
    line(xvPos, 0, xvPos, height);
  }

}

function drawDiaganal(){ //diagnal lines

  for (var y = 0; y < height; y += 100){ //diaganal lines from left to right
      strokeWeight(1);
      stroke(243,207,194); //pink
      line(y, 0, width, height - y);
      yPos = -400 + y;
      line(yPos, 0, width, height - yPos);
  }
  for (var y = 0; y < height; y += 100){ //diaganal lines from right to left
      strokeWeight(1);
      stroke(243,207,194); //pink
      line(50, height + y, width + 50, y );
      yPos = y - 400;
      line(0, height + yPos - 50 , width, yPos - 50);
  }

}


function drawDots() { //hexigonal grid of dots

  for( var ly = 0; ly < height; ly += 5){

    if (ly%2 == 0){ // every other row
      for (var lx = 0; lx < width; lx += 10) {
        var lxPos = (lx * 20) ; //x position of dot
        var lyPos = ly * 20; // y position of dot
        noStroke();
        fill(237,240,218); //yellow
        ellipse(lxPos/2, lyPos/2, 10, 10);
      }
    }
    else {
      for (var lx = 0; lx < width; lx += 10) {
        var lxPos = (lx * 20) + 100; //x position of dot
        var lyPos = (ly * 20) ; // y position of dot
        noStroke();
        fill(237,240,218); //yellow
        ellipse(lxPos/2, lyPos/2, 10, 10);
      }
    }
  }
}


function drawLeaf(){

  for( var ly = 0; ly < height; ly += 5){

    if (ly%2 == 0){ //creates a hexogonal grid
      for (var lx = 0; lx < width; lx += 10) {
        var lxPosRight = (lx * 20) + 21 ; //position of right leaf x
        var lxPosLeft = (lx * 20) - 19 ; //position of left leaf x
        var lyPos = (ly * 20) - 100; // y position of leaves
        fill(177,226,174);
        noStroke();
        ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
        ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
      }
    }
    else {
      for (var lx = 0; lx < width; lx += 10) {
        var lxPosRight = (lx * 20) + 121; //position of right leaf x
        var lxPosLeft = (lx * 20) - 119;//position of left leaf x
        var lyPos = (ly * 20) + 100 ;// y position of leaves
        fill(177,226,174);
        noStroke();
        ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
        ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
      }
    }
  }

}

Initial Sketches

Reflection

What I think was really helpful for me during this process was the fact that we had an assignment that had to do with a hexagonal grid — which I used for pretty much every aspect of my wallpaper. Overall it was a huge learning experience and I’m very pleased with the results — I think the overall colors that I’ve chosen and the pattern I’ve made really suits who I am. However, the process was a bit difficult for me since I am still not used to for() looping lines and the large amount of code was a bit overwhelming (making my own functions was incredibly helpful for this).

mjnewman LookingOutwards-05, Section A

Design company, Immersive, is striving to bring new life into emoticons. With the help of a technology called Emotion Capture by Expressive AI, anybody is able to create emotionally responsive avatars. What I admire most about this project is not the creativity they are taking with conveying a more accurate depiction of human emotion through technology, but the fact that this new product has helped kids with autism. Kids with autism respond to these virtual avatars because there is “less fear and agitation when talking with a robot.” It goes beyond the obvious entertainment aspect to actually help others communicate.

However, with 40 cameras surrounding each person and a heavy weight on top of their head, this process is no easy feat. After each expression is made (sadness, anxiety, joy, etc.), there are 40 cameras fired at the same time. Each session only takes about 20 minutes, but it can take up to 4 to 6 weeks in order to get the two dimensional pictures into a three dimensional shape by way of a process that combines “mathematical algorithms with computer vision in order to create software personalities.”

Article Here

yunzhous-Looking Outward-03

Oblique Circulation 3

My eyes were immediately drawn to this image when I opened Pinterest. I’m an architecture student and this computer-generated building looks almost magical to me. As an architectural student I need to think about how to divide up space when I design. Using algorithm to do the work might not be the most functional solution but the result is definitely interesting. The artists tries to show circulation around the building through computer-generated curves. I didn’t find what algorithm the artist used but this reminds me of Grasshopper, a plug-in for Rhino that architect students often uses. Grasshopper is designed for parametric modeling. Using grasshopper to generate geometries is like using grasshopper’s language to tell it to do certain things.
The artist is Benjamin Dillenburger and the work title is Oblique Circulation 3. You can see more of his work here.

mecha-lookingoutwards-05

ramen scene (buttons determine what elements fall/how they interact)

Creator of the company Terrified Jellyfish, Tj Hughes thought up Nour, an interactive food simulator experimenting with 3D stylistic renditions of food. Advertised as “food art” on kickstarter, the program allows users to interact with scenes of ramen, boba, and popcorn through button mashing (whether on a keyboard or midi board). The user learns about how each button affects the scene through experimentation.

What drew me to this project was the beautiful visuals and the seamless combination of art and code. The way that the scenes appear makes it feel like an animation, yet the ability for users to interact with it the way that they do ties it back to programming. I also liked how the creator’s admitted love of “bright, saturated colors” and “absurdist humor” are reflected in the visual aesthetics and interactivity of the game itself.

Although it has yet to be fully backed and completed, the game is expected to be downloadable through Steam.

boba scene (buttons determine how/what elements move)

Bettina-Project05-Wallpaper-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 5 Wallpaper

function setup() {
  createCanvas(480,480);
  background("#8ca1d2");
  for (var y=0;y<7;y++) {
    if (y%2===0) { //every odd row
          for (var x = 0; x < 5; x++) {
              var ty=y;
              var tx=x;
              drawTriangles(tx,ty);
              drawTrianglesTwo(tx,ty);
              HorizontalLines(tx,ty);
              TearDrops(tx,ty);

          }
      }
      else {
        for (var x = 0; x < 4; x++) { //every even row
              var tx=x+.5; //shifts every other row to the right
              var ty=y;
              drawTriangles(tx,ty);
              drawTrianglesTwo(tx,ty);
              HorizontalLines(tx,ty);
              TearDropsTwo(tx,ty);
          }
      }
  }
  noLoop();
}

function TearDrops(tx,ty) {
  var TearCounter=random(3); //only draws about a little under half of the tears
  if (TearCounter>1.75) {
  fill("#728fc9");
      noStroke();
      push();
      translate((tx*100)+50,(ty*50)+random(50));
          beginShape();
          curveVertex(50,80);
          curveVertex(50,80);
          curveVertex(58,102);
          curveVertex(50,110);
          curveVertex(42, 102);
          curveVertex(50,80);
          curveVertex(50,80);
          endShape();
      pop();
  }
}

function TearDropsTwo(tx,ty) {
  var TearCounter=random(3);//only draws about half of the tears
  if (TearCounter>1.5) {
  fill("#728fc9");
      noStroke();
      push();
      translate((tx*100)-random(10,50),(ty*50)+random(70));
          beginShape();
          curveVertex(50,80);
          curveVertex(50,80);
          curveVertex(58,102);
          curveVertex(50,110);
          curveVertex(42, 102);
          curveVertex(50,80);
          curveVertex(50,80);
          endShape();
      pop();
  }
}

function drawTriangles(tx,ty) {
  noFill();
  stroke("#ffefbd");
  strokeWeight(2);
  push();
  translate(tx*95,ty*65);
  triangle(50, 25, 65, 47, 35, 47);
  pop();
}

function drawTrianglesTwo(tx,ty) {
  noFill();
  stroke("#ffefbd");
  strokeWeight(2);
  push();
  translate(tx*95,(ty*65)+10); //draws the second in the pair that's translated in the y-direction
  triangle(50, 25, 65, 47, 35, 47);
  pop();
}

function HorizontalLines(tx,ty) {
  noFill();
  stroke("#194e93");
  strokeWeight(3);
  var lineCounter=random(3); //only draws about less than half of line groups
  if (lineCounter>1.85) {
  push();
  translate((tx*80)-20,(ty*60)-random(10,20));
  line(65,70,110,70);
  line(50,80,80,80);
  line(95,80,120,80);
  line(85,90,105,90);
  pop();
  }
}

I was inspired by the chilly fall evenings to create a pattern that symbolized the weather. I first sketched a variety of geometric and organic shapes in illustrator and developed a color palette. I simplified the shapes to create more abstract representations of rain, stars, and clouds. Wanting to create something aligning with the characteristics of code (as opposed to trying to “pixel-push”) I realized that mathematical patterns are a key speciality of code. I was inspired by the assignments to create a pseudo-hexagonal grid for all of my elements, and added random omissions and translation variations using conditionals. (try refreshing, the pattern will vary each time!)

yunzhous-project-03

sketch

//elephant
var LeftEarW = 110;
var LeftEarH = 150;
var RightEarW = 70;
var RightEarH = 100;
//heights of mountains
var mh1 = 150;
var mh2 = 230;
var mh3 = 260;
var mh4 = 300;
var mh5 = 200;
var Y = 300; // y coordinate of snow
var R = 229;    
var G = 247;
var B = 224;

function setup() {
    createCanvas(640, 480);
    angleMode(DEGREES);
}

function draw() {
    background(R, G, B);
    //skycolor change
    if (mouseX > 0 & mouseX < width){
        R = 229 - mouseX/20;
        G = 247 - mouseX/50;
        B = 224 + mouseX/20;
    }
    
    //mountains
    //mountains decrease
    if (mouseX < width/2){
        mh1 ++;
        mh2 ++;
        mh3 ++;
        mh4 ++;
        mh5 ++;
    }

    //mountain stop decreasing
    if (mh1 > 250){
        mh1 = 250;
    }
    if (mh2 > 330){
        mh2 = 330;
    }
    if (mh3 > 360){
        mh3 = 360;
    }
    if (mh4 > 400){
        mh4 = 400;
    }
    if (mh5 > 300){
        mh5 = 300;
    }

    //mountains increase
    if (mouseX > width/2){
        mh1 --;
        mh2 --;
        mh3 --;
        mh4 --;
        mh5 --;
    }

    //mountains stop increasing
    if (mh1 < 150){
        mh1 = 150;
    }
    if (mh2 < 230){
        mh2 = 230;
    }
    if (mh3 < 260){
        mh3 = 260;
    }
    if (mh4 < 300){
        mh4 = 300;
    }
    if (mh5 < 200){
        mh5 = 200;
    }
    //mountains
    noStroke();
    fill(185, 230, 191);
    triangle(400, height, 700, height, 530, mh1);
    fill(164, 201, 169);
    triangle(300, height, 700, height, 470, mh2);
    fill(97, 147, 147);
    triangle(300, height, 400, height, 350, mh3);
    triangle(450, height, 580, height, 520, mh4);
    fill(62, 109, 92);
    triangle(360, height, 500, height, 430, mh5);

    //sun turns to moon
    fill(255, 255, 238);
    ellipse(mouseX, 90, 70, 70);

    if (mouseX > width/2){
        var offset = map(mouseX, 0, width, 100, 0); //offset of the ellipse to make moon
        fill(R, G, B);
        ellipse(mouseX - offset, 90, 70, 70);
    }

    //snow
    if (mouseX > width/2){
        Y ++;
        if (Y > 400){
            Y = 400;
        } 
    } else {
        Y = 300;
    }
    fill(255, 255, 238);
    ellipse(350, Y, 10, 10);
    ellipse(390, Y + 20, 10, 10);
    ellipse(450, Y - 30, 10, 10);
    ellipse(500, Y + 40, 10, 10);
    ellipse(530, Y + 20, 10, 10);
    ellipse(600, Y - 50, 10, 10);

    //elephant
    //body
    push();
    translate(-150, 130);
    noStroke();
    fill(210);
    beginShape();
    curveVertex(200,  250);
    curveVertex(220,  260);
    curveVertex(175,  330);
    curveVertex(165, 400);
    curveVertex(300, 400);
    curveVertex(330, 240);
    curveVertex(350, 240);
    endShape();
    pop();

    push();
    translate(-150, 130);
    var angle = map(mouseX, 0, width, 0, 5);
    rotate(angle);
    if (mouseX > 640){
        mouseX = 640;
    }

    //right ear
    push();
    rotate(10);
    noStroke();
    fill(210);
    ellipse(270, 120, RightEarW, RightEarH);
    fill(252, 225, 225);
    ellipse(270, 120, RightEarW/1.5, RightEarH/1.5); //inner ear
    pop();

    //Left ear
    noStroke();
    fill(210);
    ellipse(220, 210, LeftEarW, LeftEarH);
    fill(252, 225, 225);
    ellipse(220, 210, LeftEarW/1.5, LeftEarH/1.5); //inner ear

    //face
    noStroke();
    fill(210);
    ellipse(300, 220, 150, 150);

    //eye
    fill(50, 32, 32);
    ellipse(345, 220, 10, 10);

    //cheek
    fill(232, 200, 200);
    ellipse(330, 250, 35, 20);
   

    //nose
    fill(210);
    beginShape();
    curveVertex(350, 200);
    curveVertex(355, 190);
    curveVertex(375, 180);
    curveVertex(425, 130);
    curveVertex(420, 145);
    curveVertex(420, 175);
    curveVertex(400, 195);
    curveVertex(390, 220);
    curveVertex(365, 255);
    curveVertex(365, 260);
    endShape();

    fill(255, 255, 238);
    ellipse(450, 150, 10, 10);
    ellipse(470, 110, 10, 10);
    pop();

}

In this project, I try to depict the change from day to night. The background color, the sun and moon, the snow, and the elephant’s head all changes with mouseX. I also use map function to set limit for the change.

sunmink-LookingOutwards-05

Manfred Mohr created a Computer-Generated Art that captures a hypercube in 2D. Once users type something in the search engine such as Google, users’ text goes through an algorithm and proceed an outcome that matches what users put in. This algorithm is an equation that is a set of operations mathematically built to create particular tasks.

Thus, through this algorithm, users are able to create an abstract visual art. I admire the artist Manfred Mohr because he is a pioneer of computing art who continuously explores through a varied collection of algorithmic-based artworks drawn by a computer. He has produced several algorithmic-based works such as algorithmic music in the 60s and algorithmic-based artworks called “Artificiata II.”

“Artificiata II” is an artwork that I am most interested in because it is pulled out from a design concept that he created called “diagonal path.” It is interesting to see how he used this algorithm to build a hard-line abstract shape into a hypercube drawn randomly between 11 and 15 dimensions. With his artistic sensibilities, he could convert a simple abstract shape into an impressive artwork using the randomness of the algorithm.