Category: Section D

sketch

//Jenny Zhang
//Section D
//jennyzha@andrew.cmu.edu
//Project 05: Wallpaper

var tw = 0;
var th = 0;
var oy = 0;
var ox = 0;

function setup() {
	createCanvas(480,480);
	background(179, 217, 255);
}	

function draw() {
	background(180, 215, 255);
	var tw = 55;
	var th = 55;
	var oy = 45;
	var ox = 45;
	
	for (var x = 0; x < width; x = x + 1) {
		for (var y = 0; y < 8; y += 1) {
		stroke(255);
		point(x, (y * 100) + 60 - 50 * sin(radians(x)));
		stroke(255, 255, 0);
		point(x, (y * 100) + 60 - 50 * cos(radians(x)));
		}
	}

	for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value 
		for (var x = 0; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			fill(185,145,255);
			noStroke();
			rect(px, py, 50, 50);
			noStroke();
			rect(px, py, 60, 60);
		}
	}
	for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value 
		for (var x = 0; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			fill(255);
			noStroke();
			rectMode(RADIUS);
			rect(px, py, 25, 25);
			rectMode(RADIUS);
			noStroke();
			rect(px, py, 25, 25);
		}
	}
	for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
		for (var x = 1; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			noStroke();
			fill(255, 255, 225);
			ellipse(px, py, 30, 30);
		}
	}
		for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
		for (var x = 1; x < 7; x+= 1.5) {
			var py = oy +y *th;
			var px = ox +x *tw;
			noStroke();
			fill(255);
			ellipse(px, py, 15, 15);
		}
	}
	noLoop();
}

For this project, I was inspired by assignment 05B for this week’s deliverables. I wanted to gain a deeper understanding of how the program worked and added a couple more shapes, lines, and colors to make it my own and make it into a more aesthetically pleasing wallpaper.

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 05 A

//globals
//rectangles
var lx = 60;
var ly = 40;
var rx;
var ry;
//diagonals
var dx = 0;
var dy = 0;
var dyn = 0;


function setup(){
    createCanvas(600,600);
    background (255);
    angleMode(DEGREES);
}

function draw(){
    for (var y = 0; y < height/ly; y++) {
        for (var x = 0; x < width/lx; x++) {
            //local variable (needs to change w each square);
            //circles
            var sizes = [0,0,0,lx,lx*2,lx*3];
            var csize = random(sizes);
            //transparency
            var tran1 = random(20,100);
            //lineweight
            var linew = random(0.1,1);
            var cirw = random();
            
            //colour
            var colr = randomGaussian(200,20);
            var colg = randomGaussian(200,20);
            var colb = randomGaussian(200,20);
            
            //rectangles
            noStroke();
            rx = x * lx;
            ry = y * ly;
            fill(colr,colg,250,tran1);
            rect(rx,ry,lx,ly);            
            
            //circles
            strokeWeight(linew);
            stroke(255);
            fill(250,colg,colb,tran1);
            ellipse(rx,ry,csize);
        }
    }
    
    for (var y = -2; y < height/ly; y++) {
        for (var x = -2; x < width/lx; x++) {
            var linew = random(0.5,1);
            //rect strokes
            rx = x * lx;
            ry = y * ly;
            stroke(255);
            strokeWeight(2);
            noFill();
            rect(rx,ry,lx,ly);
            
            //diagonals
            dx = (x + 1) * lx;
            dy = (y + 1) * ly;
            strokeWeight(linew);
            //lines crossing rectangle
            line(rx,ry,dx,dy);
            line(dx,ry,rx,dy);
            //lines crossing each 3 rectangles
            dyn = (y + 3) * ly;
            line(rx,ry,dx,dyn);
            line(dx,ry,rx,dyn);
            
        }
    }
    noLoop()
}

I wanted to create a wallpaper more suited to be a wallpaper for a phone or an iPad. Based on that, I wanted to make something more geometric. I used a Gaussian randomizer to more easily make it look more naturally generated.

jiheek1_project5

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project5 WallPaper
//section D

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

function draw() {

    background(0);
    // make a grid of colorful ellipses
    //draw small ellipses on top of grid to make crescent shapes
    //the position of smaller ellipses changes the orientation of the crescent
    //form a heart shape with the crescents in the middle of canvas
    //other black voids should look like fish
    drawGrid();

    // form crescents on left half of canvas
    // draw smaller circles that cover up bottom right of the bigger circles
    for (var y = 25; y < height+40; y += 40) { // offset center by 5
        for (var x = 25; x < width/2; x += 40) {
            fill (0);
            ellipse(x, y, 30, 30); // draw smaller circles
        }
    }
   // draw rectangles that look like eyes for the fish on left
    for (var y = 20; y < height+40; y += 40) { // offset center by 5
        for (var x = 20; x < width/2-40; x += 40) {
            fill (255);
            rect(x, y, 3, 3); // draw rectangles
        }
    }
    // form crescents on right half of canvas
    // draw smaller circles that cover up bottom left of the bigger circles
    for (var y = 25; y < height+40; y += 40) { //offset center by -5
        for (var x = width/2 + 15; x < width+40; x += 40) {
            fill (0);
            ellipse(x, y, 30, 30); // draw smaller circles
        }
    }
    // draw rectangles that look like eyes for the fish on right
    for (var y = 20; y < height+40; y += 40) { // offset center by 5
        for (var x = width/2 + 60; x < width; x += 40) {
            fill (255);
            rect(x, y, 3, 3); // draw rectangles
        }
    }

    // each heart is where fish lay eggs. draw arrays of dots
    // if needed divide up the line and treat the heart as item with two sides
    // arrays converge in the middle
    for (var y = 13; y < height + 30; y += 40) {
        // line 1 (left)
        for (var x = width/2 - 19; x < width/2 - 10; x += 6) {
            fill(255); //white dots
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 13; y < height + 30; y += 40) {
        // line 1 (right)
        for (var x = width/2 + 12; x < width/2 + 19; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 16; y < height + 30; y += 40) {
        // line 2 (left)
        for (var x = width/2 - 25; x < width/2 - 3; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 16; y < height + 30; y += 40) {
        // line 2 (right)
        for (var x = width/2 + 6; x < width/2 + 27; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 19; y < height + 30; y += 40) {
        // line 3 (left)
        for (var x = width/2 - 25; x < width/2 -1; x += 6) {
            fill(255); //white dots
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 19; y < height + 30; y += 40) {
        // line 3 (right)
        for (var x = width/2 + 6; x < width/2 + 26; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 22; y < height + 30; y += 40) {
        // line 4 (left)
        for (var x = width/2 - 24; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 22; y < height + 30; y += 40) {
        // line 4 (right)
        for (var x = width/2 + 5.5; x < width/2 + 26; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 25; y < height + 30; y += 40) {
        // line 5 (left)
        for (var x = width/2 - 29; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 25; y < height + 30; y += 40) {
        // line 5 (right)
        for (var x = width/2 + 4.5; x < width/2 + 31; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 28; y < height + 30; y += 40) {
        // line 6 (left)
        for (var x = width/2 - 28; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 28; y < height + 30; y += 40) {
        // line 6 (right)
        for (var x = width/2 + 3.5; x < width/2 + 32; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 31; y < height + 30; y += 40) {
        // line 7 (left)
        for (var x = width/2 - 26; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 31; y < height + 30; y += 40) {
        // line 7 (right)
        for (var x = width/2 + 2; x < width/2 + 29; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 34; y < height + 30; y += 40) {
        // line 8
        for (var x = width/2 - 24; x < width/2 + 26; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 37; y < height + 30; y += 40) {
        // line 9
        for (var x = width/2 - 21; x < width/2 + 24; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 40; y < height + 30; y += 40) {
        // line 10
        for (var x = width/2 - 12; x < width/2 + 17; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 43; y < height + 30; y += 40) {
        // line 11
        for (var x = width/2 - 8; x < width/2 + 10; x += 5) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 46; y < height + 30; y += 40) {
        // line 12
        for (var x = width/2 - 4; x < width/2 + 7; x += 4) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 49; y < height + 30; y += 40) {
        // line 13
        for (var x = width/2 - 2; x < width/2 + 4; x += 4) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 52; y < height + 30; y += 40) {
        // line 14
        for (var x = width/2; x < width/2 + 2; x += 2) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 55; y < height + 30; y += 40) {
        // line 15
        for (var x = width/2; x < width/2 + 2; x += 2) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    noLoop();
}

function drawGrid() {
    //cover canvas with grid of ellipses
    for (var y = 20; y < height+40; y += 40) {
        for (var x = 20; x < width + 40; x += 40) {
            fill(249 - x/2, 145, 145); // apply a color gradient to the circles
            ellipse(x, y, 40, 40);
        }
    }
}

For this project, I wanted to apply learned concepts and use grids and loops. Using the same shape(ellipses) at different scales and varying the position of them, I created a flowing pattern that takes advantage of both positive and negative spaces. I basically created crescents by using two different ellipses and by putting them in a grid, I made it so that the negative space( in black) would read as fish shapes and hearts. The heart-shaped spaces in the middle are filled with fish eggs!