Category: SectionE

sketch

var x;
var y;

function setup() {
    createCanvas(480,480);
}
 function draw (){
    background(247, 173, 209);
    drawGrid();
 }
 function drawGrid(){
     //create tile through looping x and y values no more than height and width of canvas
     for (y= -6; y<height; y+=94){
         for(x=-6; x<width ; x+=94){
             //translate the grid to the new x/y position each loop
             push();
             translate(x,y);
             drawShadowPink();
             drawWhites();
             drawShadowEgg();
             drawYolk();
             pop();
         }
     }
 }
//create egg white shape
function drawWhites(){
    fill(255);
    strokeWeight(3);
    beginShape();
    curveVertex(41.77, 38.02);
    curveVertex(82.95, 38.2);
    curveVertex(96.47, 39.8);
    curveVertex(101.98, 41.56);
    curveVertex(103.88, 46.61);
    curveVertex(97.46, 51.37);
    curveVertex(96.27, 59.94);
    curveVertex(92.47, 67.03);
    curveVertex(88.92, 66.25);
    curveVertex(72.82, 68.51);
    curveVertex(55.28, 73.71);
    curveVertex(47, 71.42);
    curveVertex(42.5, 67.12);
    curveVertex(40.78, 63.32);
    curveVertex(21.58, 53.57);
    curveVertex(20.22, 51.85);
    curveVertex(24.11, 47.02);
    curveVertex(30.22, 44.07);
    curveVertex(31.38, 41.25);
    curveVertex(35.3, 38.36);
    curveVertex(41.93, 38.2);
    curveVertex(41.77, 38.02); 
    endShape();
}
//create yolk shape
function drawYolk(){
    fill(250, 212, 25);
    strokeWeight(1);
    beginShape();
    curveVertex(41.38, 41.62);
    curveVertex(47.15, 28.01);
    curveVertex(57.11, 23.11);
    curveVertex(68.59, 23.89);
    curveVertex(79.61, 31.47);
    curveVertex(82.02, 35.39);
    curveVertex(82.61, 40.38);
    curveVertex(71.89, 47.39);
    curveVertex(57.46, 48.21);
    curveVertex(41.38, 41.62);
    curveVertex(47.15, 28.01);
    curveVertex(57.11, 23.11);
    endShape();
}
//shadow underneath whites
function drawShadowPink(){
    fill(224, 112, 168);
    strokeWeight(0);
    ellipse(66.77, 60.15, 82.86, 37.3);
}
//shadow underneath egg yolk
function drawShadowEgg(){
    fill(219, 150, 0);
    strokeWeight(0);
    ellipse(65.05, 43.14, 47.3, 18.7);
}

I used the pattern of an egg, which is a little doodle/drawing I constantly draw. I even named my website eggontoast.store because of the eggs I draw

I used this simple egg drawing and added some shadows to give it dimension and a more interesting factor.

sketch

When I first started this project, I was thinking about fruits, particularly oranges. So I created a design that had half oranges everywhere. While doing so, I played around with the color and other ellipses and tried something else.

In the end, I added on to the old design by making it seem more similar to  power buttons. In addition, the colors that I chose gives a tropical feeling that I was looking for. 

 

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-05

var x;
//random colors
var r;
var g;
var b;

function setup() {
    createCanvas(600,600);
    //light blue
    background(119, 158, 203);
}

function draw () {
    //dark green line inbetween the circles
    for (x = 0; x < 5; x ++) {
        stroke(30, 70, 45, 200);
        strokeWeight(5);
        line((x * 100) + 100, 0, (x * 100) + 100, height);
    }

    //vertical forloop for y
    for (var y = 50; y <= height; y += 70) {
        //horizantal forloop for x
        for (var x = 50; x <= width; x += 100) {
            //call drawMain shape which are the circles
            drawMain (x,y);
        }
    }
    noLoop();
}

// cirlces, x y variable coordinates to be called in for loop
function drawMain ( x, y) {
    //r is a random number between 0 - 255
    r = random(255);
    //g is a random number betwen 100 - 200
    g = random(100,200);
    //b is a random number between 0 - 100
    b = random(100);
    //main circles
    noStroke();
    fill(r, g, b);
    ellipse(x, y, 60, 60);
    fill(255);
    ellipse(x, y, 45, 45);
    strokeWeight(3);
    stroke(r, g, b);
    line(x, y - 25, x, y + 25);
    line(x - 20, y - 20, x + 20, y + 20);
    line(x - 20, y + 20, x + 20, y - 20);
    //circles inside the bigger one
    noStroke();
    fill(r, g, b);
    ellipse(x, y, 30, 30);
    //dots on the line
    for (var x = 50; x <= 500; x += 100) {
        noStroke();
        fill(r, g, b);
        ellipse(x + 50, y + 30, 25, 25);
    }
}

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 5 Wallpaper
 */

// spacing between circles
var spacing = 200;

function setup() {
    createCanvas(600, 600);
    var orangeBack = color(241, 94, 39); // orange color
    var blueBack = color(69, 95, 172); // blue color
    setGradient(orangeBack, blueBack); // background gradient
}

function draw() {
    // y position for loop
    for (var y = 50; y <= height - 50; y += spacing) {
        // x position for loop
        for (var x = 50; x <= width - 50; x += spacing) {
            // calling the two functions for drawing the circles
            orangeCircles(x, y);
            blueCircles(x, y);
        }
    }
}

// Function for creating my gradient background
function setGradient(color1, color2) {
    for(var a = 0; a <= height; a++) {
      var amount = map(a, 0, height, 0, 1);
      var back = lerpColor(color1, color2, amount);
      stroke(back);
      line(0, a, width, a);
    }
}

// Orange circle function
function orangeCircles(x, y) {
    noStroke();
    //outer circle
    fill(241, 94, 39);
    ellipse(x, y, 100, 100);

    // second-most outer circle
    fill(243, 109, 66);
    ellipse(x, y, 75, 75);

    // third-most outer circle
    fill(241, 135, 101);
    ellipse(x, y, 50, 50);

    // inner circle
    fill(248, 161, 117);
    ellipse(x, y, 25, 25);
}

// Blue circle function
function blueCircles(x, y) {
    noStroke();
    // blue circles are shifted right and down
    x = x + 100;
    y = y + 100;

    //outer circle
    fill(69, 95, 172);
    ellipse(x, y, 100, 100);

    // second-most outer circle
    fill(87, 114, 183);
    ellipse(x, y, 75, 75);

    // third-most outer circle
    fill(114, 141, 199);
    ellipse(x, y, 50, 50);

    // inner circle
    fill(147, 173, 218);
    ellipse(x, y, 25, 25);
}

I personally love playing with complementary colors, so I wanted to experiment more with complementary contrasts in the wallpaper. In my initial plan, I sketched out semicircles, but I didn’t like how they created harsh edges in the composition. I chose the colors blue and orange and created circular patterns with them. I also wanted to try playing with gradients, so for the background, I created a smooth gradient and for the circles, I created gradient intervals of colors. I alternated between orange and circle to create a balance of colors.

sketch

//Caroline Song
//chsong@andrew.cmu.edu
//Section E
//Project 05 - Wallpaper

var color1; 
var color2;

function setup() {
    createCanvas(600, 600);
    //Defining colors
    color1 = color(159, 233, 255);
    color2 = color(1, 95, 124);
    setGradient(color1, color2);
}


function draw() {
    noFill();
    stroke(255);
    strokeWeight(1);
    for (var y = 0; y <= 12; y++) {
        if (y % 2 == 0) {
            for(var x = 0; x <= width; x += 50) {
                triangle(0 + x, 50+(y*50), 25 + x, 0+(y*50), 50 + x, 50+(y*50));
            }
        }
        else {
            for(var x = 0; x <= width; x += 50) {
                triangle(-25 + x, 100+((y-1)*50), 0 + x, 50+((y-1)*50), 25 + x, 100+((y-1)*50));
            }
        }
    }
}

function setGradient(c1, c2) {
    //Creating blue gradient
    for(var i = 0; i <= height; i++) {
      var x1 = map(i, 0, height, 0, 1);
      var c3 = lerpColor(color1, color2, x1);
      stroke(c3);
      line(0, i, width, i);
    }

}

For this wallpaper, I wanted to play around with colors so that my finished product would resemble something from the ocean or the beach. And so, I created a soft blue gradient. Overlaying that, I made a repeating pattern of triangles in a white color in order to keep the soft color palette I was aiming for.

With this project, I wanted to create a pattern that had a cooking element to it as if the design could be placed on an apron. I choose to use a sunflower yellow color pallette for a pleasant tone. A coffee bean, straw, and cup are present.

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section E
//Project-05-Wallpaper 

function setup() {
    createCanvas(600, 600);

}
function draw() {
    background(0);
    // nested loop for x + y rows
    for (var x = 0; x < width / 3; x+=1) {
        for (var y = 0; y < height / 8; y+=1) {
            // var bay and bax made to adjust function b coordinates
            var bay = y * 100; // adjustment to space squares evenly 
            var bax = x * 200; // adjustment to space squares evenly
            ba(bax, bay);
            // subtracting 50px to create alternating design
            b(bax, bay - 50);
        }
    }
}
// dark yellow background
function ba(x, y) {
    push();
    translate(x, y);
    fill(221, 178, 16);
    noStroke();
    rect(0, 0, 100, 100);
    fill(253, 215, 70);
    ellipse(50, 50, 80, 80);
    fill(221, 178, 16);
    ellipse(50, 50, 70, 70);
    //coffee
    fill(136, 97, 13);
    ellipse(50, 50, 70, 70);
    //straw above mouseIsPressed to appear
    stroke(253, 215, 70);
    strokeWeight(5);
    line(50, 50, 10, 10);
    pop();
}
// coffee bean tile
function b(x,y) {
    push();
    translate(x, y);
    fill(0);
    textSize(32);
    noStroke();
    fill(253, 215, 70);
    rect(100, 0, 100, 100);
    fill(221, 178, 16);
    ellipse(150, 50, 80, 90);
    fill(253, 215, 70);
    rect(140, 0, 20, 100);
    pop();
}

This is my original sketch. I wanted to make a bubbly wallpaper with baby light tones like blue and poink ( didn’t have copics that color). To do this I first created a draw bubbles function that made layers of circles, and then in the draw function I called for loops to make a grid. I decided to add pink lines across the circles to make it more visually interesting and also it now looks like tiles.

sketch

//Alice Cai
//alcai
//week5 Project
//Section E

//pink background
function setup() {
    createCanvas(600,600);
    background('pink')
}

function draw () {
//vertical forloop for y
    for (var y = 25; y <= height; y += 50) {

//horizantal forloop for x
        for (var x = 25; x <= width; x += 50) {

//call drawbubble shape
           drawBubble (x,y);
           
//pink lines over blue bubbles to create tile effect
           strokeWeight(10);
           stroke('pink');
           line(x, y, x, y + x);
           line(x, y, x, y - x);
           line(x, y, x + 30, y);
           line(x - 30, y, x, y);
        }
        
    }   
    noLoop(); 
//so that draw is only called once
}

//bubble shape, x y variable coordinates to be called in for loop
function drawBubble ( x, y) {
            fill(209,242,255);
            strokeWeight(0);
            ellipse(x, y, 50, 50);
        
            fill(100,200,230);
            ellipse(x, y, 35, 35);
        
            fill(118,230,250);
            ellipse(x, y, 20, 20);
        
           
}

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-05: Wallpaper

function setup() {
    createCanvas(600,600);
    background('green');
}

// ellipse diam
var diam = 70;
  
function draw() {
    noStroke();
    // creates grid system
    for (x = 0; x < width/30; x+=1) {
        for ( y = 0; y < height/30; y += 1) {
                bigCircle(30 +  60 * x, 30 + 60 * y);
                smallCircleRect(30 +  60 * x, 30 + 60 * y);
        }
    }
    noLoop();
}

// creates the black portion
function bigCircle(xPos,yPos) {
    fill('black');
    ellipse(xPos, yPos, diam , diam)
}

// creates the white portion
function smallCircleRect(xPos,yPos) {
    fill('white');
    rectMode(CENTER);
    rect(xPos, yPos, diam / 1.3, diam / 1.3);
    ellipse(xPos, yPos, diam - 7, diam - 7);
}

For this project, I pulled a lot of inspiration from the Tartan plaid pattern that’s often associated with Carnegie Mellon. That’s why I went with the grid-like pattern and the black green color scheme.