Month: September 2017

sijings-project05-wallpaper

sijings-wallpaper

var topSw1=14;//for house roof, x axis
var topSw2=5;//for house's left wall, x axis
var topSw3=23;//for house's right wall, x axis
var topSw=30;//for houseRoof's weight
var topSh1=0;//for house roof, y axis
var topSh2=5;//for house's left and right wall, y axis
var topSh=25;//for houseRoof's height
var numofRow1=15;//for defining numbers of loop
var numofCol1=20;
var locFx=14;//for flower's x axis
var locFy=20;//for flower's y axis
var locYc=30;//flower's height in between
var locXc=1.25;//flower's weight
var flowerW=11;//flower's petal's size


function setup() {
    createCanvas(480, 455);
}
   
function draw() {
    scale(1.3);
    background(255);
    var r1=230;
    var b1=138;
    var g1=92;
    for (var row1=0; row1<numofRow1;row1++){
        for (var col1=0; col1<numofCol1;col1++){
            noStroke();
            r1=r1+0.2;//for gradiant color
            b1=b1+0.3;
            g1=g1+0.3;
            fill(r1,b1,g1);
            if (row1%2!=0){//for setting the condition 
                topSw1=30;//shifting between rows constantly
            }else{
                topSw1=15;

            }
            var x1=topSw1+col1*topSw;
            var y1=topSh1+row1*topSh-10;//based on calculation for eight points
            var x2=topSw1+col1*topSw+15;
            var y2=topSh1+row1*topSh;
            var x3=topSw1+col1*topSw;
            var y3=topSh1+row1*topSh+10;
            var x4=topSw1+col1*topSw-15;
            var y4=topSh1+row1*topSh;
            quad(x1,y1,x2,y2,x3,y3,x4,y4)
        
        }
    }
    var r2=225;//color variable for the walls
    var b2=205;
    var g2=203;
    var r3=240;
    var b3=240;
    var g3=240;

    for (var row2=0; row2<numofRow1;row2++){
        for (var col2=0; col2<numofCol1;col2++){
            noStroke();
            r2=r2+0.2;//changing varaibles for the color
            b2=b2+0.1;
            g2=g2+0.1;
            fill(r2,b2,g2);
            if (row2%2!=0){//for changing positions
                topSw2=20.5;
                topSw3=39;

            }else{
                topSw2=5;
                topSh2=5;
                topSw3=23;
            }
            var x11=topSw2+col2*topSw-5;//for setting up the eight points
            var y11=topSh2+row2*topSh-5;
            var x21=topSw2+col2*topSw+10;
            var y21=topSh2+row2*topSh+5;
            var x31=topSw2+col2*topSw+10;
            var y31=topSh2+row2*topSh+20;
            var x41=topSw2+col2*topSw-5;
            var y41=topSh2+row2*topSh+10;
            quad(x11,y11,x21,y21,x31,y31,x41,y41);
            r3=r3-0.2;//for the second side wall
            b3=b3-0.1;
            g3=g3-0.1;
            fill(r3,b3,g3);

            var x12=topSw3+col2*topSw-9;//for setting up the eight points
            var y12=topSh2+row2*topSh+4;
            var x22=topSw3+col2*topSw+7;
            var y22=topSh2+row2*topSh-6;
            var x32=topSw3+col2*topSw+11;
            var y32=topSh2+row2*topSh+8;
            var x42=topSw3+col2*topSw-8;
            var y42=topSh2+row2*topSh+20;
            if (col2==numofCol1-1){
                x32=topSw3+col2*topSw+7;
                y32=topSh2+row2*topSh+10;
            }
            quad(x12,y12,x22,y22,x32,y32,x42,y42);
            }
    }
    var r4=187;
    var g4=116;
    var b4=52;

    //green flower, flower roots, and door
    for (var row3=0; row3<numofRow1;row3++){
        for (var col3=0; col3<numofCol1;col3++){
            noStroke();
            fill(96,185,165);
            if (row3%2!=0){
                locFx=26;

            }else{
                locFx=10;
            }
            var e1=locFx+locYc*col3;
            var e2=locFy*locXc*row3;
            angleMode(DEGREES);//change radians to degree
            arc(e1, e2, flowerW, flowerW, -50, 10, PIE);
            arc(e1, e2, flowerW, flowerW, 35, 90, PIE);
            arc(e1, e2, flowerW, flowerW, 110, 155, PIE);
            arc(e1, e2, flowerW, flowerW, 175, 220, PIE);
            

            strokeWeight(1);
            stroke(87,148,83);
            noFill();
            curve(e1+30,e2+35,e1, e2, e1+7, e2, e1+15, e2+20);//the flower roots
            noStroke();
            
            //door and door handle
            r4+=0.2;
            g4+=0.2;
            b4+=0.2;
            fill(r4,g4,b4);
            if (row3%2!=0){
                topSw2=20.5;
                topSw3=39;
            }else{
                topSw2=5;
                topSh2=5;
                topSw3=23;
            }
            var x1=topSw2+col3*topSw;
            var y1=topSh2+row3*topSh+4;
            var x2=topSw2+col3*topSw+5;
            var y2=topSh2+row3*topSh+8;
            var x3=topSw2+col3*topSw+5;
            var y3=topSh2+row3*topSh+18;
            var x4=topSw2+col3*topSw-1;
            var y4=topSh2+row3*topSh+13;
            quad(x1,y1,x2,y2,x3,y3,x4,y4);
            fill(255);
            ellipse(x1+3,y1+8,3,3);

        }
    }
  
}

 

For this project, my inspiration came from the two-dimensional way of expressing three-dimensional object. The whole pattern is meant to be a set of houses with a plant living on top of it. The only problem I met was that I ignored the dimension I suppose to use for the project and used a much larger dimension. The actual pattern I created is larger than what I have now. Overall, I am happy about learning for loop, it makes my concept to another level.

agusman-Project05-Wallpaper

sketch

//Anna Gusman
//Section E
//agusman@andrew.cmu.edu
//Project O5 Wallpaper
//This sketch draws colorful, circular arcs

function setup() {
    createCanvas(400, 600); //set the boundaries
    frameRate(2); //control the framerate
    // var change = [1,2,3,4]; //make array

}

function draw() {
    background(0);
    strokeWeight(1.5); //set width of lines
    stroke(255);

    //creating a for loop
    //1. initialize variable
    //2. boolian test
    //3. incrementation operation
    //REMEMBER SEMI COLON IN BETWEEEEN

    for (var x = 0; x <= width; x += 50) {
      var choice;
      for (var y = 0; y <=height; y +=50) {
        // fill(0,0,255);
        var centerA; //x position of arc center
        var centerB; //y position of arc center
        var start; //starting position of arc

        //draw arcs starting from 4 different corners
        choice = int(random(1,5));
        if (choice == 1) { //top left corner
          //changing location of arc center and starting position
          centerA = x;
          centerB = y;
          start = 3 * PI / 2;
        }else if (choice == 2) { //top right corner
          //changing location of arc center and starting position
          centerA = x;
          centerB = y;
          start = PI;
        }else if (choice == 3) { //bottom left corner
          //changing location of arc center and starting position
          centerA = x;
          centerB = y;
          start = 0;
        }else if (choice == 4) { //bottom right corner
          //changing location of arc center and starting position
          centerA = x;
          centerB = y;
          start = PI / 2;
        }
        noFill();
        stroke(300, random(255), random(255)); //randomizes color of stroke
        //nested loop to draw multiple arcs on the same rotation
        for(var i=1;i<=9;i++){
          arc(centerA, centerB, 10*i, 10*i, start, start + (PI / 2));

        }
        // arc(centerA, centerB, 90, 90, start, start + (PI / 2));
        // arc(centerA, centerB, 80, 80, start, start + (PI / 2));
        // arc(centerA, centerB, 70, 70, start, start + (PI / 2));
        // arc(centerA, centerB, 60, 60, start, start + (PI / 2));
        // arc(centerA, centerB, 50, 50, start, start + (PI / 2));
        // arc(centerA, centerB, 40, 40, start, start + (PI / 2));
        // arc(centerA, centerB, 30, 30, start, start + (PI / 2));
        // arc(centerA, centerB, 20, 20, start, start + (PI / 2));
        // arc(centerA, centerB, 10, 10, start, start + (PI / 2));
      }
    }
    noLoop();
}

For this project, I created a generative, color-changing and angle-rotating arc-tiled wallpaper. I’ve always been drawn to circular forms and loved the effect I got when repeating and transforming the arc quadrants. First I needed to dictate the four points of origin for the arcs on each vertex of the tile, then the rotation direction and angle of the arcs. I randomize the origin points, the starting points of rotation and the colors of the arcs so that the wallpaper can generate a different pattern with each refresh.

Here are some of my abstract sketches and logic.

Iterations:

adev_Project_05_Wallpaper

sketch

// Aisha Dev
// 15-104 Section D
// adev@andrew.cmu.edu
// Project 5

var i; //y
var sW = 0.1;
var spacingOne;
var spacingTwo;
var spacingThree;

var lineX1 = 1;

var lineWdith;

var n; // x

function setup() {
   createCanvas (480,480);
  background (206,193,164);
  noFill();
  stroke(6,7,0);
  spacingOne = random (15,23);
  spacingTwo = random (10,15);
   spacingThree = random (15,23);
   
 lineWdith = 48;

}

function draw() {
var lineX2 = n+lineX1;
 for (n = 0; n < width; n = n+1){
 for (i = 0; i < height; i = i + 1){

 	
    strokeWeight (sW*i);
    line (lineX1, i*spacingOne,lineWdith ,i*spacingOne);    
    strokeWeight ((sW*2)*i);
    line (lineWdith, i*spacingTwo, lineWdith*1.5,i*spacingTwo);
    line (lineWdith*1.7, i*spacingTwo, (lineWdith*1.7)+i*2,i*spacingTwo);
    line ((lineWdith*2)+(i*2), i*spacingOne, width/2.5,i*spacingOne);
     strokeWeight ((sW*1.6)*i/2);
     line ((width/2.5) + 10, i*spacingThree,(width/2.5) + 58 ,(i*spacingThree));
      strokeWeight ((sW*2)*i);
    line ((width/2.5) + 64, i*spacingTwo,(width/2.5) + (lineWdith*3),i*spacingTwo);
    line (345, i*spacingTwo, 345 + i*2,i*spacingTwo);
    strokeWeight (sW*i);
      line (365 + i*2, i*spacingOne, 425,i*spacingOne);
       strokeWeight ((sW*1.3)*i);
        line (430, i*spacingThree, width ,i*spacingThree);  
	}
     }




   

 }

I was really inspired by Nasreen Mohamedi’s work. I think her patterns and textiles are so amazing an intricate and I have been a fan of her work for so long. She did all these delicate lines and geometries by hand and I thought it would be interesting to see how to take that into a digital space.

ssontag – Project – 05 – Wallpaper

For this project i wanted to be reminiscent about the striped blue and grey wallpaper i had in my childhood bedroom. I also decided i wanted to add some of the line work style that i have developed in architecture school.

sketch

;function setup() {
//variables to set up ordered spacing within the for loop
    var sY = 40;
    var sX = 20;

    var rX = 20;

    createCanvas(380, 380);
    background(210);
//a for loop that sets up the background bars of blue and grey iterating across the x axis
   for(var i = 0; i < 20; i++) {
        noStroke();
//modulus so there is an alternating pattern between even and odd
        if ((i % 2) == 0) {
            fill(70, 130, 180);
//an else statment that sets the fill as grey for every other
        } else {
            fill(210);
        }
        rect(i * rX, 0, rX, 400);
    }
//a for loop that wil set up the grid for th repeating pattern in the x direction 
    for(var x = 0; x < 20; x++) {
// an if statement and a for loop that makes the bezier curves and some ellipse's using modulus to
//make it occur every other row
        if ((x % 2) == 0) {
            for(var y = 0; y < 10; y++) {
                noFill();
                stroke(1);
                bezier(x * rX + sX, y * sY, x * rX, y * sY, x * rX + sX, y * sY + 20, 
                    x * rX + sX - 10, y * sY + 20);
                bezier(x * rX + sX - 10, y * sY + 20, x * rX, y * sY + 20, x * rX + sX,
                    y * sY + 40, x * rX, y * sY + 40);
                ellipse(x * rX + 10, y * sY + 20, 20, 20);
            }
        } else {
//an else statement that sest the lines and ellipses for the grey rows
            for(var y = 0; y < 10; y++) {
                line(x * rX + sX, y * sY, x * rX, y * sY);
                ellipse(x * rX + 10, y* sY, 35, 35);
            }
        }
    }
    noLoop();
//keeps the drawing from animating, it will draw itself once like a wallpaper
}

function draw() {

}

atraylor – Project 05 – Section B

sketch

// atraylor
// Section B
// Project 05


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

function draw() {

    moreThings(); // yellow spots



    var move = 8; // the amount move in x per line segment
    var lastX = -1; // beginning values
    var lastY = -1;
    var y = 1;
    var borderX = 0; // translates to edge
    var borderY = -1;
    stroke(127, 199, 255);

    for(var moveY = 0; moveY < 1000; moveY += 10){ // lines in the background
        for(var x = borderX; x <= width-borderX; x+= move){
            y = moveY + borderY + random(1, 20);

            line(x, y, lastX, lastY);

            lastX = x; //place the "new" x y values into last
            lastY = y;
        }
    }
    noLoop();
    things();//orange and purple circles
    noLoop();


}

function things(x, y){ //orange and purple circles
    for(var y = 0; y < width; y+= 100){
        for(var x = 0; x < height; x+= 100){
            var n = random(1, 5);
            var m = random(-5, 5);
            stroke(255, 183, 87);
            fill(255, 146, 0);
            ellipse(40 + x + n, 40 + y + n, 40, 40);
            stroke(108, 108, 244);
            noFill();
            strokeWeight(5);
            ellipse(41 + x + m, 48 + y + m, 40 + m, 40 + m);
        }
    }
}

function moreThings(x, y){ // yellow spots
    for(var y = 0; y < height; y += 100){
        for(var x = 0; x < width; x += 100){
            var n = random(1, 5);
            noStroke();
            fill(255, 230, 154);
            ellipse(x + n, y + n, 10, 10);
        }
    }
}

 

For this project, I wanted to practice making noisy lines. I used a for loop that drew sections of the line, using previous coordinates as starting points. Then I added another loop that translates the y coordinates of the line through each iteration. An improvement that I would make would be to remove the connecting lines between the rows. The result of the loop looked like primitive waves or mountains to me. I decided to pursue this concept by using bright and sunny colors. I don’t think I would wear this pattern, but it gave me a chance to try something new.

jknip-Project-05-wallpaper

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(400, 400);
    background(255,254,208);
    var tw = 80; //horizontal spacing between circles
    var th = 40; //vertical spacing between circles
    var oy = 0; //y position of circles
    var ox = 0; //x position of circles
    var circlesize = 20;

//for odd rows
    for (var y = 0; y < 6; y++) { //create 6 rows
        for (var x = 0; x < 6; x++) { //create 6 circles in each row
            var py = oy + y * th * 2; //y position = position + row  * vertical spacing distance
            var px = ox + x * tw; //adjust x spacing to accomodate 2*space + one circle
           
    //shadow behind avocado
            fill(138,86,47);
            noStroke();
            ellipse(px+2, py, circlesize, circlesize*1.2);
            ellipse(px+2, py+11, circlesize*1.3, circlesize*1.8);

    //avocado       
            fill(186,217,64);
            noStroke();
            ellipse(px, py, circlesize, circlesize*1.2); // top half of avocado
            ellipse(px, py+11, circlesize*1.3, circlesize*1.8); //bottom half of avocado
            
    //pit
            fill(138,86,47);
            ellipse(px-1, py+13, circlesize/2, circlesize/1.7);
        }
    }


//for even rows
    for (var y = 0; y < 5; y++) { //create 5 rows
        for (var x = 0; x < 6; x++) { //create 6 circles in each row
            var py = oy + y * th * 2 + circlesize*2;
            var px = ox + x * tw + circlesize*2; //adjust x spacing to accomodate 2*space + one circle
    
    //shadow behind avocado
            fill(138,86,47);
            noStroke();
            ellipse(px+2, py, circlesize, circlesize*1.2);
            ellipse(px+2, py+11, circlesize*1.3, circlesize*1.8);
        
    //avocado  
            fill(186,217,64);
            noStroke();
            ellipse(px, py, circlesize, circlesize*1.2); // top half of avocado
            ellipse(px, py+11, circlesize*1.3, circlesize*1.8); // bottom half of avocado
           
    //pit
            fill(138,86,47);
            ellipse(px-1, py+13, circlesize/2, circlesize/1.7); //avocado pit
        }
    }
    noLoop();
}


function draw() {
    // draw is not called due to noLoop() in setup()
}

Inspired by a friend’s graphic design work, I wanted to create a simple avocado wallpaper that mimics the fun in her work. I was also inspired by the hexagonal pattern from the previous assignment.

 

ljkim Looking Outward 05


Snapshot from Nike’s Air Max campaign using 3D computer graphics.

After reading the prompt, I was immediately drawn to my internship this summer with Nike. I worked internally for them, and became close to the 3D team. This commercial/ad uses 3d graphics to communicate Nike Airs. The use of color and material communicates the light, flow, and durability of that particular line of shoes. I appreciate how easily Nike was able to convey that feeling through the use of 3D computer graphics. Its impressive how this level of fidelity is now available.

This is defiantly more design than coding – and frankly I much enjoy that. If there were algorithms used for this project, I see it being used in the geometric patterned scenes.Repeating the same shape, in different sizes, then randomizing the location of each. For example, 00:13.

Nike ~ Air Max 2017 from ManvsMachine on Vimeo.

“>

yoonyouk-project05-wallpaper

sketch

function setup() {
    createCanvas(480, 480);
    background(255, 213, 238);

    for(var x = 0; x < 500; x+=100){
        for(var y = 0; y < 500; y+=100){
            cacti(x,y);

        }
    }

}



function draw() {
    cacti();

}


function cacti(x,y) {
    noStroke();
    fill(255, 185, 71);
    ellipse(x+50, y-20, 20, 20);

    //clouds
    noStroke();
    fill(131, 175, 226);
    ellipse(x+20, y-10, 15, 15);
    ellipse(x+30, y-5, 20, 20);
    ellipse(x+45, y-10, 26, 26);
    ellipse(x+60, y-10, 15, 15);

   //cacti
   stroke(99, 212, 136);
    strokeWeight(15);
    line(x, y-10, x, y+60);
    line(x-20, y-10, x-20, y+10);
    line(x-20, y+10, x-10, y+10);
    line(x+10, y+30, x+25, y+30);
    line(x+25, y+30, x+25, y);

    //needles
    stroke(255, 185, 71);
    strokeWeight(4);
    line(x-3, y, x-3, y+10);
    line(x-1, y+20, x-1, y+40);

    //sun
    /*noStroke();
    fill(255, 185, 71);
    ellipse(100, 30, 20, 20);

    //clouds
    noStroke();
    fill(131, 175, 226);
    ellipse(70, 40, 15, 15);
    ellipse(80, 45, 20, 20);
    ellipse(95, 40, 26, 26);
    ellipse(110, 40, 15, 15);

   //cacti
   stroke(99, 212, 136);
    strokeWeight(15);
    line(50, 40, 50, 110);
    line(30, 40, 30, 60);
    line(30, 60, 40, 60);
    line(60, 80, 75, 80);
    line(75, 80, 75, 50);

    //needles
    stroke(255, 185, 71);
    strokeWeight(4);
    line(47, 50, 47, 60);
    line(49, 70, 49, 90);*/
}

I initially started out by creating a tile of the cacti in the desert scene with the cloud and the sun. By making this tile its own function, I was then able to make it repeat using for loops. It was very interesting to make a drawing its own function in order to repeat it throughout the canvas.

yunzhous-LookingOutward-04

Lumière III

Lumière III

Lumière III

This is Lumière III by Robert Henke. It is a audiovisual laser performance, in which an algorithm generates laser curves to bounce off the pre-designed spaces in the auditorium to create series of visual effect, including geometries, curves, lights, colors, etc. Sound also generated from the lasers. A dedicated sound synthesis engine was built for this particular project. Therefore, the artist built a custom algorithm for generating sound.

I appreciate that the algorithm generates both visual and sonic effect. Therefore, changing the laser would make change to both of them. From the geometries and colors, the observer can guess what the sound would be, because certain shapes and colors probably represent certain aspects of music. (eg. red represent dramatic emotion, etc). I thought the randomness of the lasers, and the random yet inter-connected visual and sonic effect generated by it is very interesting.

You can read more here

aerubin-Project-05-Wallpaper

I was inspired by the popular palm leaf design as I wanted to choose a design with a balance between organic and geometric forms. In my design, the geometric repeating layered square pattern in the background is contrasted with the randomly placed leaves in the foreground.

My Inspiration:

I first began by drawing creating a function that draws the squares to then rotate the pattern so they create a diamond-shaped configuration for the basis of my background design. The leaves add interest to the geometric pattern that would otherwise be basic and uninteresting without a random organic design in the foreground. The two different types of leaves compose the foreground design and they are placed in aesthetically pleasing random positions. Overall, I could see a wall or a shirt featuring this design for a casual look.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-05-Wallpaper

function setup() {
    createCanvas(400, 480);
    background(220);
    noLoop();
}

function draw() {
    //Background Square Pattern
    push();
    rotate(radians(45));
    translate(-150,-300);
    for(var i = 0; i < 10; i++) {
        for(var r = 0; r < 1000; r +=130) {
            squares((i*130), r); 
        }
    }
    pop();

    //Fan Leaves Design
    push();
    for(var m = 10; m < 20; m++) {
        rotate(radians(m*3));
        fanleaves(m+40, m-50);
    }
    pop()

    //Fan Leaves Design (Upper Left)
    push();
    for(var u = 0; u < 2; u++) {
        fanleaves(u-100, u-160);
    }
    pop();

    //Wide Leaves (Upper Right & Lower Left)
    push();
    for(var v = 0; v < 20; v+=2) {
        rotate(45);
        wideleaves(v+100,v+200);
    }
    pop();

    //Wide Leaves (Upper Left)
    push();
    rotate(20);
    for(var e = 0; e < 40; e+=10) {
        wideleaves(e-100, e-190);
    }
    pop();

    //Wide Leaves (Lower Right)
    push();
    rotate(radians(-30));
    for(var h = 0; h < 1; h++) {
        wideleaves(h-180, h+370);
    }
    pop();

    //Wide Leaves (Lower Middle)
    push();
    rotate(radians(15));
    for(var k = 0; k < 90; k+=80) {
        wideleaves(k, k+100);
    }
    pop();

} 
function squares(p,q) {
    fill(0);
    noStroke();
    rectMode(CENTER);
    //p = x cordinate
    //q = y cordinate
    rect(-55+p, 35+q, 150, 150);
    fill(244, 218, 215);
    rect(-55+p, 35+q, 120, 120);
    fill(0);
    rect(-55+p, 35+q, 90, 90);
    fill(244, 218, 215);
    rect(-55+p, 35+q, 60, 60);
    fill(0);
    rect(-55+p, 35+q, 30, 30); 
}

function fanleaves(f,l) {
    translate(f+200, l+300);
    fill(86, 165, 78);
    stroke(38, 84, 32);
    for(var t = 10; t < 28; t++) {
        rotate(radians(t*.5));
        triangle(0, 0, 100, 70, 90, 70);
    }
}

function wideleaves(w,o) {
    translate(w, o);
    noFill();
    strokeWeight(4);
    stroke(41, 96, 51);
    line(300, 320, 300, 100);
    strokeWeight(2);
    for(var a = 0; a < 77; a+=2.7) {
        line(300, 300-a, 270-(a*.4), 280-a);
    }
    for(var b = 0; b < 155; b+=2.7) {
        line(300, 223-b, 239+(b*.4), 203-b);
    }
    for(var c = 0; c < 77; c+=2.7) {
        line(300, 300-c, 330+(c*.4), 280-c);
    }
    for(var d = 0; d < 155; d+=2.7) {
        line(300, 223-d, 361-(d*.4), 203-d);
    }
}