Category: Section C

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.

LookingOutward-05

For my 3D computer graphics project, I choose to feature the work of Alex McLeod. I’m using his piece, Mystical Pond 2010 as my example, but I admire his work as a whole in general.

Alex McLeod is a new media visual artist who creates landscape “paintings” through computer rendering. He uses renderings of various materials and textures to create romantic, otherworldly landscapes. Through his art, he uses reoccurring themes such as overpopulation, urban overdevelopment, and climate change.

I view artists such as Alex McLeod as a bridge between traditional artists and modern graphic animators. McLeod treats his work similar to that of traditional artists, trying to convey a message with no limits or boundaries to his work. However, he uses modern technologies and modern “materials”/mediums to create his art.

http://www.alxclub.com/

rfarn-Project-05-wallpaper

Before beginning to code my wallpaper, I looked around online for inspiration. A lot of the online patterns I found incorporated organic and complex shapes. For my wallpaper, I wanted to focus on the use of for loops and repetition of simple shapes. I made a few rough sketches to help visualize what I needed to code.

I decided to use the last thumbnail sketch as a basis for my actual coded wallpaper design. After coding the shapes, I then went and played around with different colors.

sketch

function setup() {
    createCanvas(480, 480);
    background(121, 128, 113);

    //creating circular pattern
    var cdiam = width/5; //diameter of circles
    var spacex = 3 * cdiam / 4; //space between in x direction
    var spacey = 4 * cdiam / 3; //space between in y direction
    var ox = (width - (spacex * 6))/2; //x position
    var oy1 = (height - (spacey * 3))/2; //y position for every odd column
    var oy2 = oy1 - 2 * cdiam / 3; //y position for every other column

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

        var posx = ox + x * spacex; //x position consistent

        if(x % 2 == 1){
            for(var y = 0; y < 4; y++){ //4 circles
                fill(210, 213, 221);
                strokeWeight(10);
                stroke(153, 154, 198);

                var posy1 = oy1 + y * spacey; //y position of odd columns

                ellipse(posx, posy1, cdiam, cdiam);
            }
        } else {
            for(var y = 0; y < 5; y++){ //5 circles
                fill(184, 186, 207);
                strokeWeight(10);
                stroke(153, 154, 198);

                var posy2 = oy2 + y * spacey; //y position of even columns

                ellipse(posx, posy2, cdiam, cdiam);
            }
        }
    }

    //creating line pattern
    var lineox = ox + spacex/2; //original x position of lines
    var lineoy = oy1 - spacey/4; //original y position of lines

    for(var xline = 0; xline < 6; xline++){ // 6 vertical lines
        strokeWeight(5);
        stroke(232, 235, 228);

        var posVline = lineox + spacex * xline; // position of vertical lines

        line(posVline, 0, posVline, height);
    }

    for(var yline = 0; yline < 8; yline++){ // 8 horizontal lines
        strokeWeight(5);
        stroke(232, 235, 228);

        var posHline = lineoy + spacey/2 * yline; //position of horizontal lines

        line(0, posHline, width, posHline);
    }

    //creatings dots
    for(var dotsx = 0; dotsx < 6; dotsx++){
        for(var dotsy = 0; dotsy < 8; dotsy++){

            var posxdots = lineox + spacex * dotsx; //position of dots in x direction
            var posydots = lineoy + spacey/2 * dotsy; //position of dots in y direction

            noStroke();
            fill(121, 128, 113);
            ellipse(posxdots, posydots, 15, 15);
        }
    }

    noLoop();
}

function draw(){

}

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.

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);
    }
}

ikrsek-SectionC-Project-05-Wallpaper

sketch

//Isadora Krsek 
//Section C
//IKrsek@andrew.cmu.edu
//Project 05: Wallpaper Pattern
//"Snowflakes"


function setup() {
    createCanvas(500,500)
    background(102,137,144)
}
  
  
function draw() {
    noStroke();
    push();
    scale(0.5,0.5)
    translate(450,-580);
    rotate(radians(45));
    snowflakeType2();
    pop();
    snowflakeType1();
    
    noLoop();
}

function snowflakeType1(){
    for (var row=0; row<=width*8; row=row+200) {
	  for (var col=0; col <=height*8; col=col+200) { 
    push();
    scale(0.25,0.25);
    translate(765,-1660)
    rotate(radians(45));
  //hexagon base of pattern 
    noFill();
    stroke(135,187,162,140);
    beginShape();
    strokeWeight(1);
    vertex(38+row,25+col);
    vertex(63+row,25+col);
    vertex(75+row,48+col);
    vertex(63+row,70+col);
    vertex(38+row,70+col);
    vertex(25+row,48+col);
    endShape(CLOSE);
  //circle inception
    noFill();
    strokeWeight(2);
    stroke(135,187,162,140);
    ellipse(50+row,48+col,16,16);
    fill(135,187,162);
    noStroke();
    ellipse(50+row,48+col,4,4);
  //triangles surrounding hexagon
    noStroke;
    fill(201,228,202,140);
    triangle(48+row,25+col,51+row,13+col,54+row,25+col);//top triangle
    triangle(68+row,35+col,82+row,32+col,71+row,40+col);//right  top triangle
    triangle(67.35+row,62+col,82+row,66+col,70+row,56+col);//bottom right triangle
    triangle(48+row,70+col,51+row,83+col,54+row,70+col);//bottom triangle
    triangle(20+row,68+col,34+row,62+col,30+row,56+col);//bottom left triange
    triangle(20+row,32+col,33+row,34+col,30+row,40+col);//top left triangle
  //diamonds
    fill(54,73,88,140);
    noStroke();
    ellipse(42+row,33+col,3,3);//left top dot
    ellipse(58+row,33+col,3,3);//right top dot
    ellipse(66+row,48+col,3,3);//right middle dot
    ellipse(58+row,62+col,3,3);//right bottom dot
    ellipse(42+row,62+col,3,3);//left bottom dot
    ellipse(34+row,48+col,3,3);//left middle dot
  //lines around hexagon
    noFill();
    stroke(255,140);
    strokeWeight(2);
    strokeJoin(BEVEL);
    //top left
    beginShape();
    vertex(30+row,26+col);
    vertex(34+row,20+col);
    vertex(40+row,20+col);
    endShape();
    
    //middle right
     beginShape();
     vertex(78+row,40+col);
     vertex(82+row,48+col);
     vertex(78+row,56+col);
     endShape();
    
    //top right
    beginShape();
    vertex(60+row,20+col);
    vertex(67+row,20+col);
    vertex(70+row,26+col);
    endShape();
    
    //middle left
    beginShape();
    vertex(22+row,40+col);
    vertex(17+row,48+col);
    vertex(22+row,56+col);
    endShape();
    
    //bottom left
    beginShape();
    vertex(29+row,70+col);
    vertex(34+row,78+col);
    vertex(40+row,78+col);
    endShape();
    
    //bottom right
    beginShape();
    vertex(60+row,78+col);
    vertex(67+row,78+col);
    vertex(72+row,70+col);
    endShape();
  //lines above triangles
    stroke(75,101,121,140);
    strokeWeight(1);
    beginShape();
    vertex(42+row,33+col);
    vertex(10+row,27+col);
    vertex(34+row,48+col);
    endShape();
    
    beginShape();
    vertex(58+row,33+col);
    vertex(92+row,28+col);
    vertex(66+row,48+col);
    endShape();
    
    beginShape();
    vertex(58.5+row,62+col);
    vertex(51+row,94+col);
    vertex(42+row,62+col);
    endShape();
    
    pop();
    
  }
  }
}


function snowflakeType2(){
  for (var row=0; row<=width*3; row=row+100) {
	  for (var col=0; col <=height*4; col=col+100) { 
  //hexagon base of pattern 
    noFill();
    stroke(255,80);
    beginShape();
    strokeWeight(1);
    vertex(38+row,25+col);
    vertex(63+row,25+col);
    vertex(75+row,48+col);
    vertex(63+row,70+col);
    vertex(38+row,70+col);
    vertex(25+row,48+col);
    endShape(CLOSE);
  //circle inception
    noFill();
    strokeWeight(2);
    stroke(255,80);
    ellipse(50+row,48+col,16,16);
    fill(250,80);
    noStroke();
    ellipse(50+row,48+col,4,4);
  //triangles surrounding hexagon
    noStroke;
    fill(255,80);
    triangle(48+row,25+col,51+row,13+col,54+row,25+col);//top triangle
    triangle(68+row,35+col,82+row,32+col,71+row,40+col);//right  top triangle
    triangle(67.35+row,62+col,82+row,66+col,70+row,56+col);//bottom right triangle
    triangle(48+row,70+col,51+row,83+col,54+row,70+col);//bottom triangle
    triangle(20+row,68+col,34+row,62+col,30+row,56+col);//bottom left triange
    triangle(20+row,32+col,33+row,34+col,30+row,40+col);//top left triangle
  //diamonds
    fill(255,80);
    noStroke();
    ellipse(42+row,33+col,3,3);//left top dot
    ellipse(58+row,33+col,3,3);//right top dot
    ellipse(66+row,48+col,3,3);//right middle dot
    ellipse(58+row,62+col,3,3);//right bottom dot
    ellipse(42+row,62+col,3,3);//left bottom dot
    ellipse(34+row,48+col,3,3);//left middle dot
  //lines around hexagon
    noFill();
    stroke(255,80);
    strokeWeight(2);
    strokeJoin(BEVEL);
    //top left
    beginShape();
    vertex(30+row,26+col);
    vertex(34+row,20+col);
    vertex(40+row,20+col);
    endShape();
    
    //middle right
     beginShape();
     vertex(78+row,40+col);
     vertex(82+row,48+col);
     vertex(78+row,56+col);
     endShape();
    
    //top right
    beginShape();
    vertex(60+row,20+col);
    vertex(67+row,20+col);
    vertex(70+row,26+col);
    endShape();
    
    //middle left
    beginShape();
    vertex(22+row,40+col);
    vertex(17+row,48+col);
    vertex(22+row,56+col);
    endShape();
    
    //bottom left
    beginShape();
    vertex(29+row,70+col);
    vertex(34+row,78+col);
    vertex(40+row,78+col);
    endShape();
    
    //bottom right
    beginShape();
    vertex(60+row,78+col);
    vertex(67+row,78+col);
    vertex(72+row,70+col);
    endShape();
  //lines above triangles
    stroke(255,100);
    strokeWeight(1);
    beginShape();
    vertex(42+row,33+col);
    vertex(10+row,27+col);
    vertex(34+row,48+col);
    endShape();
    
    beginShape();
    vertex(58+row,33+col);
    vertex(92+row,28+col);
    vertex(66+row,48+col);
    endShape();
    
    beginShape();
    vertex(58.5+row,62+col);
    vertex(51+row,94+col);
    vertex(42+row,62+col);
    endShape();
  }
   }
}

aerubin-LookingOutwards-05-Section-C

In many of the technology classes and programs I have attended in the past, we used computer programs to create 3D representations of what we intended on building. One of the most notable computer programs we used is Autodesk Inventor. The program allows the user to build a product utilizing 2D shapes to begin a design. Then the creator has the ability to “extrude” their design to suddenly make it appear three dimensional. The final design can then be viewed in both a 2D and 3D view and can even be 3D printed with the correct equipment. Autodesk Inventor is extremely important and helpful for creating parts, designing complex structures, and creating intricate art and sculptures.

2D and 3D views of a product generated by Autodesk Inventor

Bruce Beasley, an artist, took Autodesk Inventor to the next level. Renowned for his sculptures that have been premiered in the Guggenheim and the Museum of Modern Art, his latest project utilized Autodesk Inventor to create the “Coriolis Series.” This is a series of sculptures that were designed on the computer, then 3D printed with liquid plastic.

Coriolis XXIII – Bruce Beasley

The advantage of using Autodesk Inventor is the precision one may achieve when the design is dependent on subtle digital calibrations. Intricacy does not always occur in sculpting with other mediums such as stone or bronze, which are difficult to manipulate to a fine degree. In addition, when one makes a mistake on a computer program, it is easily fixed with a simple command to go back a step or multiple steps. When one makes a mistake with stone, there is no “control z,” and one would have to completely start over or work with the mistake to try to disguise it. It is also possible to view the final design before the printing product in a 3D rendered form to know what it will look like from every angle, which is very important for sculptures as it is desired to have the work be interesting from every possible viewing point. In conclusion, creating and viewing sculptures on the computer is helpful for artists and creatives for designing and even printing works of 3D art.

https://www.autodesk.com/gallery/exhibits/currently-on-display/the-coriolis-series

ablackbu-Project-05-Wallpaper

sketch

function setup() {
    createCanvas(400, 348);
    background(188,221,217);
    strokeWeight(0);
    var tw = 66.67; //space bettween cirbles horizontally (60)
    var th = 58; //Space between circles vertically (60 * 0.87)
    var row = 7; //number of circles in each row

    fill(234,94,83);

    //make a hexagonal grid 
    for (var y = 0; y < 7; y++) {
        for (var x = 0; x < row; x++) {
            var py = y * th;
            var px = x * tw;
            
            if(y % 2 != 0){ //for even rows
                row=6; //only make 6
                px=px+33.335; //offset row
            }else{
                row=7;
            }

            ellipse(px, py, 50, 70); // make ellipse for body
            ellipse(px+33.335,py,40,20); //make ellipse for arms
            ellipse(px,py-40,20,20); //make ellipse for head

        }
    }
    
    
    //blue circles
    fill(188,221,217);
    ellipse(width/2,height/2,150,150);
    
    ellipse(width/4,height/4,80,80);
    ellipse(width/8,height/8,40,40);
    ellipse(0,0,20,20);
    
    ellipse(3*width/4,3*height/4,80,80);
    ellipse(7*width/8,7*height/8,40,40);
    ellipse(0,height,20,20);

    ellipse(3*width/4,height/4,80,80);
    ellipse(7*width/8,height/8,40,40);
    ellipse(width,0,20,20);

    ellipse(width/4,3*height/4,80,80);
    ellipse(width/8,7*height/8,40,40);
    ellipse(width,height,20,20);

    noLoop();
}

wallpaper patterned

This project especially go the creative energy flowing. I used 2 for loops to make a hexagonal grid that I then filled with multiple shapes to create an interesting geometric pattern.

I found these colors a little bit by chance and I think they really work well together. I could really see this tiled onto a bathroom wall.

ashleyc1-SectionC-Project-05-Wallpaper

sketch

//Ashley Chan
//Secion C
//ashleyc1@andrew.cmu.edu
//Project-05-Wallpaper


var slant; //diagonal angle of line
var offsetX; //line space of x
var x; //x-value of gold lines


//setup is executed once at the launch
function setup() {
    createCanvas(400, 400);
    background(10, 51, 80);


    x = 0;
    slant = 500;
    offsetX = -800;

  
}


function draw() {
  
    drawDiagonalLines();

    drawMiddleGoldLines();

    drawTopGoldLines();

    drawBottomGoldLines();

    drawOrnaments();
  
}




function drawDiagonalLines() {
     //outer white diagonal lines going up
    for (var i = 0; i <= width; i = i + 1){

      stroke(219, 179, 2);
      line (offsetX, 0, offsetX + slant, height);
      line(offsetX, 0, offsetX - slant, height);
      offsetX += 200;

    }

}




function drawMiddleGoldLines() {

    
   for (var x = 0; x <= 50; x += 1){
      for (var y = 240; y <= height; y += 40){

      stroke(219, 179, 2);
      strokeWeight(1);
    
    //cone part of lines  
      line (x, 240, (x + slant) - 450, height/5);
      line (x, 240, (x + slant) - 550, height/5);
      line (x - 50, 240, (x + slant) - 600, height/4);
      line (x - 150, 240, (x + slant) - 600, height/4);

    //top of diamond cones
      line (x - 100, 280, (x + slant) - 550, 240);
      line (x - 100, 280, (x + slant) - 650, 240);
      line (x - 150, 240, (x + slant) - 450, height/5);
      line (x - 50, 240, (x + slant) - 750, height/5);
      
    //diamond criss-cross
      line (x, 40, (x + slant) - 450, height/5);
      line (x - 50, 80, (x + slant) - 500, height/10);
      line (x, 120, (x + slant) - 450, height/5);
      line (x, 120, (x + slant) - 550, height/5); 
   
      x += 200;

    } 
   }

}


function drawTopGoldLines() {
    push();
    translate(0, -158);
    drawMiddleGoldLines();
    pop();

}


function drawBottomGoldLines() {

  push();
  translate(0, 160);
  drawMiddleGoldLines();
  pop();

}

function drawOrnaments() {

   for (x=0; x <= width; x = x + 200){
    for (y = 0; y <= height; y = y + 160){
      fill(255);
      strokeWeight(2);
      ellipse(x, y, 10, 10);
      ellipse(x + 100, y + 80, 10, 10);

      //petals
      ellipse(x, y - 20, 10, 20);
      ellipse(x, y + 20, 10, 20);
      ellipse(x - 20, y, 20, 10);
      ellipse(x + 20, y, 20, 10);
  }
  }

}

I tend to enjoy wallpapers/designs with a subtle, floral element over a geometric background. My process for this project was fairly experimental and non-linear. I initially sketched out some diagonals for myself and then figured I’d just play with p5 until I got a floral shape that I enjoyed. In reality, I had fun altering the start and end points of the diagonal lines so much so that I was creating different layering effects with them. I decided then that the floral element that would sit on top had to be very simple otherwise the pattern would be overloaded. Overall, my final result stemmed from a lot of playing and deviating from my initial sketch. I’m content with the final design and if I were to have this printed on fabric, I would sew and wear it.

Initial Sketch

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.