Category: Uncategorized

Ziningy1 – Section C – Project 05 – Wallpaper

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-05



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

function draw() {

    background(40,40,40,40);


    //set intervals for spacings 
    var vinterval=100
    var hinterval=150

    
    //start for loop for grids 
     for (var y = 0; y < 7; y++) {

        if(y%2){  //if statement determine the even number row 

            for (var x = 0; x < 7; x++){ 

               //set variable for triangle three vertexs' position
                var tx1=60+x*hinterval;
                var ty1=y*vinterval;
                var tx2=x*hinterval;
                var ty2=60+y*vinterval;
                var tx3=120+x*hinterval;
                var ty3=60+y*vinterval;

                stroke(30,50,230,60);
                strokeWeight(3);
                noFill();

                //draw the overlapping three triangles(mountains) with offsets 
                triangle(tx1+hinterval/2,ty1,tx2+hinterval/2,ty2,tx3-10+hinterval/2,ty3);
                stroke(170,170,30);  
                triangle(tx1+hinterval/2+30,ty1+10,tx2+20+hinterval/2,ty2+10,tx3+20+hinterval/2,ty3+10);
                stroke(20,200,50);
                triangle(tx1+40+hinterval/2,ty1-10,tx2+60+hinterval/2,ty2+5,tx3+hinterval/2,ty3+5);


                
                //set variables for the ellipse(sun）and draw the ellipse on the top left of the mountain 

                var ey = 30 + y * vinterval;
                var ex = 30 + x * hinterval; 
                fill(240,120,80,70);
                stroke(200,200,50);
                ellipse(ex+hinterval/2, ey-10, 30, 30);
            }

        } else {

            for (var x = 0; x < 7; x++){


                //for odd number rows, again set variable for triangle three vertexs' position

                var tx1=60+x*hinterval;
                var ty1=y*vinterval;
                var tx2=x*hinterval;
                var ty2=60+y*vinterval;
                var tx3=120+x*hinterval;
                var ty3=60+y*vinterval;

                stroke(30,50,230,60);
                strokeWeight(3);
                noFill();

                triangle(tx1,ty1,tx2,ty2,tx3-10,ty3);
                stroke(170,170,30);  
                triangle(tx1+30,ty1+10,tx2+20,ty2+10,tx3+20,ty3+10);
                stroke(20,200,50);
                triangle(tx1+40,ty1-10,tx2+60,ty2+5,tx3,ty3+5);
                

                //set variable for sun position and draw the sun
                var ey = 30 + y * vinterval;
                var ex = 30 + x * hinterval; 
                fill(240,50,80,60);
                noStroke();
                ellipse(ex,ey-10,30,30);

                // draw the ellipses(clouds like)
                fill(200,200,200,60);
                strokeWeight(2);
                ellipse(ex+20,ey,60,20);
                ellipse(ex+50,ey+5,50,10);


            }

            
        }




    }




}

In this project, i was inspired by the strong geometric shapes in some clothing patterns. I also think that using the neon primary color will be a interesting choice against a black background. Building on top of what I learned from the Assignment b, my foundation pattern is a mountains with sun scenery constructed by mostly outlines.

HaeWanPark-LookingOutwards-5

Rainbow paper Series By Machineast, 2015

Machineast is a design studio consisting of two designers, Rezaliando and Fizah Rahim. Most of their works are 3D computer graphics. Even though this studio has provided visual solutions to clients, these two designers have also created several personal driven works as artists. ‘Rainbow Paper Series’ is also a project driven by themselves and inspired by their childhood experiences. During the childhood, they both have fascinated by holographic colors. When they have grown up in the 80’s, holographic cartoon and toys were so popular. After grown up, they found the way to express their fascination and nostalgia toward holographic colors in their 3D artwork. The shimmering and shiny surfaces characterized their childhood and give honor to the 80’s era of a hologram. In my opinion, the combination of shiny effects on surfaces and holographic bright colors created interesting visual. This work is nice artistic expression pieces.

Rainbow Paper Series, Machineast
Rainbow Paper Series, Machineast

Rainbow Paper Link

ctv-Project-05-Wallpaper

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-05

//canvas size
var cWid = 470;
var cHgt = 470;

//blockForm size
var wid = 50;
var hgt = 70;

//counter
var i = 0;

//some traits of circles and lines
var dia = wid;
var wght = 1;

//points shapes interact with
var xZero = 0;
var xOne = wid*.25;
var xTwo = wid*.5;
var xThree = wid*.75;
var xFour = wid;
var x = [xZero, xOne, xTwo, xThree, xFour];

var yZero = 0;
var yOne = hgt*.25;
var yTwo = hgt*.5;
var yThree = hgt*.75;
var yFour = hgt;
var y = [yZero, yOne, yTwo, yThree, yFour];


function setup() {
    createCanvas(cWid, cHgt);
    
    //splits canvas into cells for each pattern block
    //x-axis
    for(xOff=0; xOff<=cWid/wid; xOff++){
        
        //y-axis
        for(yOff=0; yOff<=cHgt/hgt*2; yOff++){
            
            //calls helper function bg(), sends coordinates
            draw(xOff, yOff);
        }
    }
}


function draw(xOff, yOff){

    ellipseMode(CENTER);
    stroke(200);
    strokeWeight(1);
    
    
    //
    for(i=0; i<xOff; i++) {
        for(j=0; j<yOff; j++){
            
            
    //creates an offset variable for the shapes        
    var xOffset =  i * xOne;
    var yOffset = j * yFour;
            
    strokeWeight(wght);
    
    //rightDownLines
    line(xOne + xOffset, yZero + yOffset, xFour + xOffset, yFour + yOffset);

    
    //leftDownLines
    line(xThree + xOffset, yZero + yOffset, xZero + xOffset, yFour + yOffset);

    //verticalLines
    line(xZero + xOffset*2, yZero + yOffset, xZero + xOffset*2, yFour + yOffset);

    
    //horizontalLines
    line(xZero + xOffset*4, yZero + yOffset/2, xFour + xOffset*4, yZero + yOffset/2);

    
    //ellipses
    noFill();
    ellipseMode(CENTER);
    ellipse(xZero + xOffset*4, yOne + yOffset+8, dia, dia);        
        }
    }
}

This project is based around the Modernist movement (minus color). I am interested in proportions of shape and axis of movement within a static structure. This grid is loosely based on a project I am starting to work on for designing a typeface. Type has four major components: horizontal strokes, vertical strokes, diagonal strokes, and curves. This grid is a dissociation of those elements.

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.

Lrospigl – Looking outwards 05 (Quantum Fluctuations)

As I was looking at 3d computer graphics on Behance (a really cool design portfolio website), I stumbled upon this artist’s page who had a lot of 3d graphics. The video (linked bellow) is very interesting and kind of surreal. He uses proton collision and information from supercomputer simulations to create this visual. He visualizes different events that have to do with these collisions, and inputs that information of the simulation to make a 2d and 3d rendering of them visually.

fluctuation 1
fluctuation 2

He also has this project where creates human-body-shapes where the only thing you see are blood vessels that are moving, and rotating to give a sense of dimension and perspective.

monicah1-project-05

sketch

function setup() {
    createCanvas(450, 450);
    background(10,125,185);
    noStroke();
    var tw = 60;
    var th = tw*(sqrt(3/2));
    var oy = 0;
    var ox = 0;
    var numc = 0;

    for (var y = 0; y < 10; y++) {
    	if (y%2==0){
        	numc = 10;
    	}
    	else {
    		numc = 9
    	}
        for (var x = 0; x < numc; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
     

		if (y%2 == 0){
			fill(210,255,0);
			ellipse(px,py,50,50);
			fill(255,0,160);
			rect(px,py,20,20);
		}
		else{
			fill(210,255,0);
			ellipse(px+30,py,50,50);
			fill(0,30,255);
			rect(px-10,py,40,40);
		}
		}
	}
}

 

I played with shapes, patterns, and colors. I liked playing with size and ratio, creating depth.

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.

dchikows – Section C – Project-05-Wallpaper

sketch

// David Chikowski
// Section C
// dchikows@andrew.cmu.edu
// Project - 05



function setup() {
    createCanvas(480, 480);
    background(240, 190, 0);
    angleMode(DEGREES);
    
    //top left
    draw_clover();
   
    //top middle
    translate(100, 10);
    draw_clover();

    //top right
    translate(100, 40);
    draw_clover();

    //bottom left
    translate(-400, 0);
    draw_clover();

    //bottom middle
    translate(100, 10);
    draw_clover();
  
    //bottom right
    translate(100, 40);
    draw_clover();

}

function draw_clover() {
    noStroke();
    fill(140,210,0);
    
    translate(0,20);

//left leaves 
    ellipse(50,50,40,25);
    push();
    translate(50,50);
    rotate(-30);
    ellipse(-2,6,40,25);
    pop();

// right leaves 
    translate(40,50); 
    push();
    translate(50,0);
    rotate(30);
    ellipse(2,6,40,25);
    pop();
    ellipse(50,0,40,25);

//top leaves
    translate(27,-22);
    push();
    translate(0,0);
    rotate(30);
    ellipse(10,-5,25,40);
    pop();
    ellipse(0,0,25,40);

//stem
    stroke(0,200,0);
    strokeWeight(4);
    noFill();
    curve(45,40, 20,60, 5, 20, 50,30);

}

I originally started the project with the intent to do lines that related to each other on a grid through variables. Although I realized I wanted to make something more organic so I changed my idea. I then constructed a three leaf clover which I repeated in a pattern on my code. I was going to use a four loop, but I did not account for this early enough in my code so I ended up translate the clover. I learned that for next to

monicah1-lookingoutward-05

Nuclei::States_of_matter

Nuclei is made with varieties of medium Processing, c++, Koan3d,3Delight, Avisynth and Audacity. Nuclei is about space filling and field. It plays with several type of scalar fields size, ratio, density and orientation.

I am inspired and interested by the density and depth this piece creates. It seems like it can be create physically with paper or other medium. However the randomness and density of this piece help me realize it is made computationally. The piece creates the sense of unknown an mysteriousness with volume creating with one element but different sizes, ratio, and orientation. I wan to make something this intricate computationally.