Month: September 2018

sketch

/*
Mimi Jiao
wjiao@andrew.cmu.edu
Section E
Project-05
*/
var h = 5;
var w = 25;
var gap = 5;
function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(0, 0, 255);

    //adds an extra interactive element so that the wallpaper
    //changes as the mouse is held and dragged 
    if (mouseIsPressed) {
        w = mouseX / 10;
        h = mouseY / 10;
    }

    //draws vertical rectangles in the for loop
    for (var y = 0; y < 40; y ++) {
        //draws horizontal rectangles in every quarter of the canvas
        for (var x = 0; x < 4; x ++) {

            //white longer rectangles
            push();
            noStroke();
            rect(x * (width / 4), y * (h + gap), w, h);
            pop();

            //empty fill green outline longer rectangles
            push();
            noFill();
            stroke(0, 255, 0);
            rect(w + (x * width / 4), gap + (y * (h +  gap)),
                 w, h);
            pop();

            //red fill longer rectangles
            push();
            fill(255, 0, 0);
            rect((3 * w / 2) + (x * width / 4),
                 y * (h + gap), w, h);
            pop();

            //black fill shorter rectangles
            push();
            fill(0);
            rect(w * 3 + (x * width / 4), gap + (y * (h +  gap)),
                 w / 2, h);
            pop();

        }            
    }
}

This project was an extension of one of my past projects for another class I’m taking, Color for Communciations, Products, and Environments. For that project, I created a repeating grid on Adobe Illustrator and made many different versions of it with different colors to study color interactions. I wanted to apply the same idea this time using code as my medium of expression, which allows me to play with more colors using the RGB colorspace that the CMYK colorspace doesn’t cover. In addition, it lets me play around with the interactive mouse, a function I really enjoy using.

sketch

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-05-Wallpaper
*/

var citrusSize = 80;

function setup() {
    createCanvas(600, 600);
    background(176, 196, 222);
    noStroke();
}

function draw() {
	var offset = 5; // offset for fruit outlines

	// draw oranges
	for (x = 75; x < width; x += 150){ 
		for (y = 75; y < height; y += 150){
			noStroke();
			fill(244, 164, 96); 
			ellipse(x, y, citrusSize, citrusSize);

			// orange outline
			noFill();
			strokeWeight(5);
			stroke(220, 120, 30);
			ellipse(x + 5, y + 5, citrusSize, citrusSize);

			// orange dot details
			point(x + 20, y - 20);
			point(x + 15, y - 15);
			point(x + 10, y - 20);
		}
	} 
	var citrusX = 150; // width between lemon and lime
 	var citrusY = 150; // height between rows of lemon/lime
 	textStyle(ITALIC);

	// draw lemon and lime wedges
	for (x = 0; x < 6; x++) {
		for (y = 0; y < 5; y++) {
			var px = x * citrusX; // horizontal spacing between wedges
			var py = y * citrusY + 10; // vertical spacing between wedges
			
			if (x % 2 == 1) { // lemon wedges for even columns
				noStroke(); 
				fill(255, 250, 205);
				arc(px, py, citrusSize, citrusSize, 0, PI);
				
				fill(240, 230, 140); // lemon wedge shading
				triangle(px, py+5, px+5, py+30, px-10, py+30);
				triangle(px+2, py, px - 40, py + 10, px-35, py + 25);
				triangle(px+2, py, px+15, py + 30, px+30, py+10);

				text("lemon", px-10, py-50);
			}
			else { // lime wedges for odd columns
				noStroke();
				fill(154, 190, 20); 
				arc(px, py, citrusSize, citrusSize, 0, PI);
			
				fill(200, 255, 80); // lime wedge shading
				triangle(px, py+5, px+5, py+30, px-10, py+30);
				triangle(px+2, py, px - 40, py + 10, px-35, py + 25);
				triangle(px+2, py, px+15, py + 30, px+30, py+10);

				text("lime", px-10, py-50);
			}
			noFill();
			strokeWeight(5); // offset outline (citrus rind)
			stroke(255, 215, 10);
			arc(px - offset, py - offset, citrusSize, citrusSize, 0, PI);
		}
	}
	noLoop();	
}

This was inspired by a pajama set that I own, and my own affinity for citrus prints (I also own a tshirt that has a different style of citrus illustration). For some reason, I’m drawn to these fruits, and I thought it would be an interesting way to combine the two different citrus clothing that I own. It was definitely good practice in nested loops, and getting more familiar with the % operator, since I wrote the lemons and limes separately before deciding to combine them into a nested for loop.

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-05
}
*/

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

function draw() {
    background("pink");

//draws background lines (light pink)
    for(var i=-20; i<width; i+=30){
      rect(i,0,20,height);
      fill(250,171,206);
    }

    //draws circles (dough)
    for (var y = 20; y < height; y += 80) {
        for (var x = 20; x < width; x += 70) {
            fill(200,164,118);
            ellipse(x, y, 60, 60);
        }
    }
//draws icing (chocolate)
    for (var y=20;y<height;y+=80){
      for (var x = 10;x<width;x+=70){
        fill(126,87,49);
        ellipse(x+10, y, 48, 48);
      }
    }

//draws donut hole
    for (var y=20;y<height;y+=80){
      for (var x = 10;x<width;x+=70){
        fill("pink");
        ellipse(x+10, y, 15, 15);
      }
    }
//sprinkles (yellow and blue)
    for(var y=10;y<height;y+=80){
    for(var x=10;x<width;x+=70){
      stroke("yellow");
      strokeWeight(2.5);
      line(x,y,x+3,y+3);
      line(x+5,y+20,x,y+23);
      line(x+25,y+10,x+28,y+14);
      line(x+10,y-5,x+14,y-2);
      stroke(126,211,247);
      line(x+22,y+2,x+19,y+6);
      line(x-9,y+13,x-5,y+15);
      line(x+14,y+22,x+20,y+25);

    }
    }
    noLoop();
}

I’m not completely satisfied with this iteration but I’m proud of the overall visual result. As you can see in my sketchbook (will upload soon), I originally wanted to attempt a more complex shape, however after trying multiple times to create Shrek, I was unable to get it to how I wanted it to look, so I changed my idea.

Out of all the projects we’ve done thus far, I am not as proud of this assignment compared to the other ones, I hope in the future I can improve on the skills that can be used through nested functions. I hope by the end of this class I will be able to create Shrek.

sketch

/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project 05
*/

function setup() {
    createCanvas(600, 500);
    background(103, 196, 92);

    //ladybug placement
    for (y = -5; y < height; y+=35) {
        //even rows
        if (y%2 == 0) { 
            for (x = 15; x < width; x+=30) {
                ladybug(x, y);
            }
        }
        //odd rows
        else {
            for (x = 15; x < width; x+=30) {
                ladybug(x - 15, y);
            } 
        }
    }
    noLoop();
   }

//draws ladybug
function ladybug(x, y) {
    push();
    translate(x, y);

    var headW = 30; //size of head
    var bodyY = y + 20; //body origin
    var bodyW = 50; //size of body

    //head and antenna
    noFill();
    strokeWeight(2);
    arc(x, y - headW*(2/3), headW, headW, 0, PI);
    fill(0);
    ellipse(x, y, headW, headW);

    //body
    noStroke();
    fill(255, 0, 0);
    ellipse(x, bodyY, bodyW, bodyW);

    //wing line
    stroke(0);
    strokeWeight(2);
    line(x, bodyY - bodyW/2, x, bodyY + bodyW/2);
    
   //spots 
    fill(0);
    ellipse(x - 15, bodyY, 8, 8);
    ellipse(x - 10, bodyY - 15, 8, 8);
    ellipse(x - 8, bodyY + 15, 8, 8);
    ellipse(x + 15, bodyY, 8, 8);
    ellipse(x + 10, bodyY - 15, 8, 8);
    ellipse(x + 8, bodyY + 15, 8, 8);

    pop();

}

This was the first time I’ve created a function to help with my code! I was trying to find a way to have the individual ladybugs rotate at random angles, but I got too confused. I probably wouldn’t put this wallpaper in my house, but maybe it would make a nice paper napkin print?

Early sketches: