Category: Section A

amui1-p5

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-05


var x = 50;
var y = 50;


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

function draw() {
    background(187,0,0)
    stroke(234,247,206);
    strokeWeight(1);
    //flower design
    for (xPosition = 40; xPosition < width - 20; xPosition += 100) {
      //don't make lines through middle
      if (xPosition <= 150 || xPosition > 300) {
        line(xPosition,0,xPosition,height);
        var y = 20;
        //loops for height of canvas - 100 arbitrary number
        for (i = 0; i < 100; i++) {
          //checks if odd or even tick
          if (i%2==0) {
            fill(234,247,206);
            //flower shape
            ellipse(xPosition-10,y-10,5,5);
            arc(xPosition-10,y-10,5,15,PI,0);
            arc(xPosition-10,y-10,15,5,HALF_PI,3*HALF_PI);
            //flower stem
            line(xPosition,y,xPosition-10,y-10);
            y+= 30;
          } else {
            //flower stem
            line(xPosition,y-15,xPosition+10,y-25);
            //flower shape
            ellipse(xPosition+10,y-25,5,5);
            arc(xPosition+10,y-25,5,15,PI,0);
            arc(xPosition+10,y-25,15,5,3*HALF_PI,HALF_PI);
          }

        }
      }
    }

    //middle line

    line(width/2,0,width/2,height/2-75);
    line(width/2,height/2+75,width/2,height);
    //middle beads design
    //top half
    ellipse(width/2,50,10,10);
    ellipse(width/2,60,7,7);
    ellipse(width/2,67,5,5);
    //bottom half
    ellipse(width/2,height-67,5,5);
    ellipse(width/2,height-60,7,7);
    ellipse(width/2,height-50,10,10);


    //chinese oriental symbol
    noFill();
    stroke(218,0,0);
    strokeWeight(5);
    ellipse(width/2,height/2,125,125);
    ellipse(width/2,height/2,50,50);
    ellipse(width/2,height/2,20,20)


    //inside of middle symbol
    //rotate 8 times
    for (var i = 0; i <8; i++) {
      push();
      //move to center of canvas
      translate(width/2,height/2);
      //rotate 8 times
      rotate(TWO_PI * i/8);
      strokeWeight(2);
      //design
      line(30,28,35,33);
      line(35,33,40,28);
      line(40,28,30,18);
      line(30,18,20,30);
      line(20,30,35,42);
      line(35,42,55,15);
      line(55,15,35,12);
      line(35,12,33,15);
      line(33,15,44,23);
      pop();
    }

    noLoop();
}

Again, I really enjoyed this project and how challenging it was. Using loops is extremely efficient, however, I found it hard to conceptualize. For my project this week, I wanted to connect it with my culture. I am satisfied with my final product. However, originally, I wanted to draw a dragon. But, it was too hard to figure out curves, quadratic curves, bezier curves, etc. In the future, I’d like to expand upon that and how I can utilize loops to make it easier to draw. I started with sketching and as you can see see from my attached pictures, my wallpaper changed many times throughout the iterations.

Above is my original sketch.

Above is what I used to figure out and conceptualize how to do the for loops with the middle oriental symbol.

sketch

// Heidi Chung
// Section A
// hschung@andrew.cmu.edu
// Project-05

// (245, 185, 140) peach
// (200, 90, 90)


function setup() {
    createCanvas(400, 400);
    background(172, 234, 245);
}

function draw() {
    spaceBunnies();
}

function spaceBunnies() {
    var tw = 60;
    var th = 75;
    var oy = 50;
    var ox = 50;
    var amt = 10;

    for (var rows = 0; rows < 5; rows++) {
        for (var col = 0; col < amt; col++) {
            var py = 10 + oy + rows * th;
            var px = ox + col * tw; //th and tw = bounding box of circles
            noStroke();
            fill(255); //bun face // 255, 200, 200 medium pink
            ellipse(px-90, py + 5, 55, 50);

            fill(0); // both eyes
            ellipse(px-105, py +5, 7, 5);
            ellipse(px-140, py, 7, 5);

            fill(245, 185, 140); //nose
            ellipse(px-154, py, 7, 5);

            fill(255, 200, 200 ); // mouth
            ellipse(px-152, py + 12, 13, 15);

            fill(255); // both ears
            ellipse(px-105, py-25, 13, 25);
            ellipse(px-140, py-25, 13, 25);

            fill(255, 200, 200); // ear insides
            ellipse(px-105, py -25, 8, 18);
            ellipse(px-140, py-25, 8, 18);

        }
    }
}

I started out by sketching some doodles, and I thought I might do a pattern involving bunnies or space, and moon/star shapes. I decided to go with the bunnies because I thought it was cute and work well if it was repeated as a motif. I went for a simple, cute wallpaper, one that I could see being used for a phone background. If I were to do this again, I would like to try making some of the bunnies with different expressions for points of interest. Doing this project helped me strengthen my familiarity with for loops again- but I would like to solidly understand it inside and out, so I can manipulate them with more finesse.

Leaves!

I spent most of my time getting the construction of the leaf right, but after that, it was just making a simple alternating grid of them, like we’ve done in class before.

sketch

//Maxwell Mirho
//Section A
//mmirho@andrew.cmu.edu
//Project 5

function setup() {
    createCanvas(400, 400);
    background(10, 170, 260);
}

function drawLeaf(tipX, tipY) {

    fill(150,250,150);

    fill(10, 170, 260);
    arc(tipX + 30, tipY + 95, 60, 60, 1.5708 + 0.2, 3.14159, OPEN);
    fill(150, 250, 150);
    //Stem

    //Leaf tip
    triangle(tipX, tipY, tipX + 30, tipY + 70, tipX - 30, tipY + 70);

    //Leaf butt
    arc(tipX, tipY + 75, 60, 55, -0.3, 3.14159 + 0.3, OPEN);

    stroke(100,200,100);

    //1st (Top) leaf contour)
    arc(tipX, tipY + 51, 60, 60, 0.83, 2.3, OPEN);

    //2nd
    arc(tipX, tipY + 40, 50, 50, 0.83, 2.3, OPEN);

    //3rd
    arc(tipX, tipY + 29, 40, 40, 0.83, 2.3, OPEN);

    line(tipX, tipY + 88, tipX, tipY + 20);
    line(tipX - 1, tipY + 88, tipX - 1, tipY + 20);
    stroke(0);
    //Center leaf contour
    
}

function draw() {
    
    for (var x = 0 ; x < 6 ; x += 1) {
        for (var y = 0 ; y < 6 ; y += 1) {
            //Creates a grid

            push();
            translate(x*100, y*100);
            //Move the tip of the leaf to the grid

            if ((y%2) == 0) {
                rotate(-0.5);
            } else {
                rotate(0.5);
            }
            //Twists the leaf the opposite way if the row is an even number
            
            drawLeaf(0,0);
            //Draws an entire leaf!
            pop();

        }

    }
}

I wanted to create a pond-like wallpaper with fish and water ripples. At first, I had my fish going straight to the right, horizontally, but decided it looked too static. I rotated/translated instead, to make it seem like the fish were following each other in a stream.

sketch

// Tiffany Lai
// 15-104, Section A
// thlai@andrew.cmu.edu
// Project 05 - Wallpaper

function setup() {
    createCanvas(480, 480);
    noLoop();
    angleMode(DEGREES);
    ellipseMode(CENTER);
}

function draw() {
    background(245, 241, 219);

    var fx = 25;
    var fy = 10;
    var num = 7; // number of fish in each row
    var offset = 10;

    // CREATE ROWS OF FISH
    for (var y= 0; y < 9; y ++){
        for (var x = 0; x < num; x ++) {
            if(y%2==1){ // every other  row
                num = 3;
                offset = 100;
            } else {
                num = 4;
                offset = 10;   
        }
            translate(5, 0);
            rotate(x);
            fish(fx*5*x + offset, fy+60*y-20); // draw the fishes
        }
    }   

    // CREATE WATER DROPS
    var droplet = 100;
    for(var i = 0; i < 6; i++){
        push();
        stroke(255, 190);
        strokeWeight(2);
        noFill();
        ellipse(400, 10, 10+i*(5+i*10), 10+i*(5+i*10)); // right ripples
        ellipse(150, 200, i*40, i*40); // middle ripples
        ellipse(0, 50, droplet-i*20, droplet-i*20); // top ripples
        pop();
    }
}

// FISH FUNCTION
function fish(fx, fy) {

    push();
    translate(fx, fy);
    rotate(30);
    noStroke();

    fill(random(210, 255), 110, 74); // fill with random orange
    quad(20, 27, 38, 39, 28, 52, 53, 37); // tail
    triangle(71, 22, 78, 21, 83, 27); // top fin
    triangle(68, 51, 82, 42, 79, 49); // bottom fin

    fill(random(50,100), random(90,150), random(130,180)); // fill with random blue
    beginShape(); // body
        vertex(53, 37);
        vertex(78, 27);
        vertex(92, 29);
        vertex(100, 37);
        vertex(95, 43);
        vertex(77, 43);
    endShape();
    pop();
}

mjnewman-wallpaper

//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-05 Wallpaper

function setup() {
    createCanvas(470, 470);
}

function draw() {
    background(100, 200, 205);
    for (var y = 0; y < height+50; y += 120) {
        for (var x = 0; x < width+50; x += 120) {

        	//Top Half-Head
        	noStroke();
            fill(290, 130, 200);//pink
            ellipse(x + 50, y + 50, 50, 50);
            //cover up for bottom half of circle
            fill(100, 200, 205);
            rect(x + 25, y + 50, 50, 25);

            //Tentacles
            stroke(290, 130, 200);
            strokeWeight(4);
            line(x + 30, y + 50, x + 35, y + 80);
            line(x + 42, y + 50, x + 48, y + 90);
            line(x + 54, y + 50, x + 57, y + 72);
            line(x + 66, y + 50, x + 71, y + 82);

            //Head Circle
            noStroke();
            fill(240, 80, 150);//slightly darker pink
            ellipse(x + 56, y + 33, 15, 8);//oblong circle

            //Bubbles
            fill(120, 220, 225)//slightly lighter blue
            ellipse(x + 90, y + 55, 10, 10);//medium bubble
            ellipse(x + 78, y + 20, 20, 20);//big top bubble
            ellipse(x + 20, y + 90, 8, 8);//small bottom left bubble
            ellipse(x + 33, y + 100, 5, 5);//tiny bubble
        }
    }
    noLoop(); 
}

I first had the idea to do a pattern of jellyfish. While, sketching actual jellyfish, I couldn’t stop thinking about Spongebob Squarepants and when he would go jelly fishing. So that definitely informed my color choice and somewhat of the graphic translation.