Project-05

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-05-Wallpaper

var ellipseSize = 8;
var rectSize = 8;
var R = 120;
var G = 50;

function setup() {
    createCanvas(392, 500);
    noLoop();
}

function draw() {
	background(191, 166, 149);
	for (var y = height / 2.4; y < height; y+=35) {
		for (var x = 20; x < width; x += 50) {

			// rectangles
			fill (R, G, 50);
			noStroke();
			rectMode(CENTER);
			rect(x, y, rectSize, rectSize);

			// circles
			fill(230, 212, 200);
			stroke(R, 52, 52);
			strokeWeight(2);
			ellipse(x, y, ellipseSize, ellipseSize);

			// lines
			stroke(255);
			strokeWeight(0.5);
			line(x, 0, x, height);

			stroke(255);
			strokeWeight(0.5);
			line(x - 3, 0, x - 3, height);

			stroke(255);
			strokeWeight(0.5);
			line(x + 3, 0, x + 3, height);

			ellipseSize += 0.15;
			rectSize += 0.3;
			R -= 0.7;
			G += 0.8;
		}
	}
}

I was looking at the plain, default curtains in my dorm room and was inspired to create this design. I used the original taupe color as the base and tried to make it more interesting by adding geometric shapes (circles and squares) with gradient color changes. I tried to prevent making the design seem too congested so I started the shapes from around mid-height. I stuck with a more, toned down, deep color palette to match with the upcoming fall season. Throughout this process, I thought it was really difficult to create a design that I would actually purchase. Even though my intention was to amp up my plain curtains, I’m unsure whether I would choose this over the original. Perhaps this will be more suitable for another purpose, not curtains.

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 05

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

function draw() {
	background(184,233,230);
	// passion fruits
	for (var i=50; i<width-10; i+=100) {
		for (var j=50; j<width-10; j+=100) {
			noStroke();
			fill(27,179,111);
			ellipse(i, j, 70, 70);
			fill(122,196,36);
			ellipse(i, j, 60, 60);
			fill(234,40,95);
			ellipse(i, j, 55, 55);

			// seeds
			stroke(88,88,90);
			strokeWeight(4);
			point(i-13,j-3);
			point(i+5,j-8);
			point(i,j-13);
			point(i-10,j+9);
			point(i+1,j+10);
			point(i+13,j+4)
			point(i+1,j+1)
		}
	}

	//eaten parts
	for (var y=0; y<7; y+=1) {
		
		if (y%2==0 & y!==0) { // only on even rows
			for (var x=0; x<7; x+=1) {
				if (x%2==0) { //only on even columns
				noStroke();
				fill(184,233,230);
				rect(x*100+100, y*100-100, 50, 50, 5);
				}
			}
		}
	}

	noLoop();
}

Watermelon is my favorite fruit. It was fun to make a wallpaper full of watermelons. To add more variations, I covered up some parts of the watermelons on a few locations. Overall, I found this project very helpful for practicing nested loops.

my-sketch.js
>sketch

/* Lan Wei
Section D
lanw@andrew.cmu.edu
Project 05
*/

function setup(){
    createCanvas(600, 600);
    background(0);
}

var gap = 20; //vertical distance between two waves
var dens = 20; //horizontal density of the waves
var waveRev = 4; // control how big the wave is

function draw(){
    //draw ocean
    var i = 0;
    for (var y = -gap; y < height - gap; y += gap){
        noFill();
        stroke(255);
        beginShape();
        i ++; //will be used for color setting
        for (var x = -50; x < width + 50; x += dens){
            y += random(-gap/waveRev , gap/waveRev );//wave
            curveVertex(x, y);
        }
        curveVertex(width, height);
        curveVertex(0, height);
        curveVertex(0, y - gap/waveRev);//just to find a point to close the shape
        var blue = map(y, 0, height, 255, 30);
        var green = map(y, 0, height, 220, 10);
        fill(50, green, blue);
        noStroke();
        endShape();
    }
    noLoop();
    drawFish();
}

//draw fish pattern
function drawFish(){
    var dist = 100; //horizontal distance between fish
    var level = 70; //vertical distance between fish
    i = 0;
    for (var x = dist; x < width; x += dist){
        i ++;
        if (i % 2 == 0){
            for (var y = level; y < height; y += level){
                fish(x, y);
            }
        }
        else{
            for (var y = level * 1/2; y < height; y += level){
                fish(x, y);
            }
        }
    }
}

//how the fish looks like
function fish(x, y){
    var fishW = 30;
    var fishH = 10;
    var tailL = 10;
    fill(240, 230, 140);
    ellipse(x, y, fishW, fishH);//body
    fill(0);
    ellipse(x-10, y, 5, 5);//eye-black part
    fill(255);
    ellipse(x - 9, y, 1.5, 1.5);//eye-white part
    fill(255, 215, 0);
    triangle(x + fishW/2, y, x + fishW/2 + tailL, y + 5, x + fishW/2 + tailL, y - 5);
    //tail
}

My initial idea was to create a scene of different depth of the ocean. I want to make the waves of some randomness and change the color to show depth difference. After I finished the waves, I added some fish to fulfill the project requirement, and surprisingly the effect is very good. What I feel the most helpful through the project is that I get  familiar with ‘helper functions’ and practiced to create shape with irregular curves.

sketch

function setup() {
    createCanvas(400, 600);
    background(0);

}
var squareSize = 80

var bSO = squareSize * (1/8)
var wLO = squareSize * (3/8)
var cr = squareSize * (2/10)
var obl = 5

function TSquare(x,y,w,h) {
    // Red Squares background of grid
    fill(148,3,3)
    stroke(0)
    strokeWeight(4)
    rect(x,y,w,h)

    // White line back 
    stroke(255)
    strokeWeight(5)
    line(x-obl, y-obl, x+w, y+h)

    // Blue square rounded corner transparent
    noStroke()
    fill(0, 0, 100, 200)
    //tint(255,127)
    rect(x+ bSO, y + bSO, w-(2 * bSO), h-(2 * bSO), cr, 0, cr, 0)

    // White line foreground   
    stroke(255)
    strokeWeight(5)
    line(x+30, y+30, x+w-30, y+h-30)

    //foreground black grid
    noFill()
    stroke(0)
    strokeWeight(4)
    //rect(x,y,w,h)

}

function draw() {
    for(xi=0; xi<width; xi = xi + squareSize){
        for(yj=0; yj<height; yj = yj + squareSize){
           
           TSquare(xi, yj, squareSize, squareSize)
        }
    } 

}

My inspiration for the start of this project was a plaid pattern. As I set out to attempt to recreate it, I made an error that ended up creating a very interesting novel pattern. I then riffed off of this new creation messing around with the alpha function which controls transparency. The pattern is a square of width and height 80 pixels iterated over x and y using for loops.