![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
//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!
