Category: Section E

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.

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.

ifv-LookingOutwards-05

Artist: Thomas Ludwig

Coral Rift: “unprincipled iteration formula with zillions of iterations, producing an ultrafine “net” of torn microsurfaces (in consequence the surface normal computation is approximate at best)” 3 days of rendering required used Allura Renderer, high res here

Kaleidoscopic II: digital image created using a fractal distance estimator and rendered overnight on a gtx 970, high res here

What drew me to Ludwig’s work has the levels of detail and depth in his work, the images he creates appear as though they could exist in a real but unusual space. I was also interested in his tendency to create forms that have the characteristics of an electron microscope image of the structure of an object found in nature. Ludwig experiments with different programs for generating and rendering his images, which are usually created by manipulating 3-dimensional fractals. His artistic sensibilities influence how he decides to render, what parameters he sets for depth perception, motion blur, lighting etc. For many of his pieces the minimum render time is overnight; many works take multiple days to render.

More of his work can be found here

ifv-Project05-Wallpaper

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//ifv-05-Project
function setup() {
    createCanvas(480, 480);
    background(140, 184, 135);
}

function draw() {
//curves
for (var countz = width/50; countz < width; countz += width/5){
for (var x = 0; x < width; x = x + 1) {
    stroke(163, 214, 157);
    fill(163, 214, 157);
    strokeWeight(2);
    point((60 - 50 * 0.5*sin(radians(2*x)))+countz,x);
    point( (60 - 50 * 0.5*cos(radians(2*x)))+countz,x);
  }
}
//line of dots
for(var dotx = 0; dotx < width+10; dotx += 10){
  for(var doty = 0; doty < (4*height)/3; doty += height/3){
    if((dotx/10)%2==0){
      stroke(90, 143, 85);
      fill(90, 143, 85);
      strokeWeight(4);
    } else{
      stroke(163, 214, 157);
      fill(163, 214, 157);
      strokeWeight(2);
    }
    point(dotx,doty);
    point(dotx,doty+height/6);
  }

}
//Flowers
for(var fly =0; fly <height; fly += height/3){

for(var elc =0; elc< width; elc +=width/7){
  var ely = fly+height/10;
  var space = width/14;
  fill(255, 186, 171);
  noStroke();
  triangle((elc-5),ely,(elc),ely-20,(elc+5),ely)


  stroke(83, 131, 78);
  strokeWeight(3);
  noFill();
  triangle((elc-10),ely-8,(elc),ely,(elc-5),ely);
  triangle((elc+10),ely-8,(elc),ely,(elc+5),ely);
  elc += space
}

}
noLoop();
}

This was my initial sketch for the wall paper design, it was inspired by the wallpapers in the database that was linked. I decided to add a more organically shaped space divider with cos and sin loops. I kept the idea to include a representation of a plant just changed what the plant looked like.

adev_Looking_Outwards_05

 

Lucy Hardcastle

I really enjoy the work of Lucy Hardcastle. She studied textiles and has moved on to 3D computer graphics and works specifically with Cinema4D. I think her work is almost too perfect and otherworldly, it has this strange, hyper realistic quality about it. She recently worked with Chanel/i-D magazine in the Fifth Sense campaign for which she created an animation meant to convey scent. She did this through textures in an almost dimension-less space and I thought that work was brilliant.

Even thought it seems to perfect and serene and sterile, it has a very human quality to it because it related back to touch, which is a constant in our lives.

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.

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.

gyueunp – Project-05: Wallpaper

Wallpaper

//GyuEun Park
//15-104 E
//gyueunp@andrew.cmu.edu
//Project-05-A

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

function draw() {
    background(114, 0, 0);
    for (var x = 0; x <= width; x = x + 50){
      for (var y = 0; y <= height; y = y + 50){

//white hightlight 
        push();
        stroke(247, 230, 230, 110);
        strokeWeight(1.5);
        fill(247, 230, 230);
        arc(x+1, y+1, 15, 10, 0, PI-120, CHORD);
        pop();

//shadow below seed
        push();
        stroke(0);
        strokeWeight(1);
        fill(0);
        arc(x, y, 15, 10, 0, PI-20, CHORD);
        pop();

//seed
        push();
        noStroke();
        fill(209, 200, 123);
        arc(x-3, y-3, 20, 15, 0, PI-20, CHORD);
        pop();

//shadow on seed
        push();
        noStroke();
        fill(181, 173, 106);
        arc(x-2, y-0.5, 16, 10, 0, PI-20, CHORD);
        pop();

//circle highlights from left to right
        noStroke();
        fill(247, 230, 230);
        ellipse(x-8, y+6, 1, 1);

        stroke(247, 230, 230, 110);
        strokeWeight(1.5);
        fill(247, 230, 230);
        ellipse(x-5, y+8, 2.5, 1);

        stroke(247, 230, 230, 110);
        strokeWeight(1.5);
        fill(247, 230, 230);
        ellipse(x-1, y+9, 1, 1);

        noStroke();
        fill(247, 230, 230);
        ellipse(x+2.5, y+8.7, 1, 1);
    }
  }
}

Although I made a repeating pattern by following the project guideline, my wallpaper resembles the naturally occurring pattern of strawberry achenes. While maintaining the characteristics of the fruit, I used multiple geometric shapes to add small details, such as subtle highlights and shadows. For future projects, I would love to experiment with creating not only repeating patterns, but also textures and dimensions that further enhance the quality of my work.