Category: SectionE

sketch

//Zee Salman
//SECTION E

var red // horizantal
var blue  // vertical
var sz = 10;

function setup() {
    createCanvas(600, 400);
    noStroke();
}
 
function draw() {
    background(0);
    drawGrid();
     
}
function drawGrid() {
  for (var y = 5; y < height + 50; y += 100) {
  		var red = map(y,0,height,0,255);
        for (var x = 5; x < width + 50; x += 100) {
            //color gradient needs to be implemented
            var blue = map(x,0,width,0,255);
            noStroke();
            fill(red,0,blue);
            ellipse(x, y,20, 100);

            stroke("white");
            line(x /2, y /2, width / 2, height / 2);
            line(x *2, y *2, width / 2, height / 2);

            
        }
    }
}

I wanted to go for something a bit playful, I really enjoy gradients and I wanted to add them to this wallpaper along with lines that sprouted in different directions, I feel like it has a good contrast especially with the black background. I would like to further expand on this idea and see where I can rreally take the design, and even complicate the shapes a bit more in further explorations.

sketch

// Deklin Versace Section E
var patX = 120;
var patY = 120;

function setup() {
    createCanvas(900, 900);
    background(238, 195, 246);
    var xSpace = -30;
    var ySpace = 110;
    noStroke();

    for (var y = 0; y < 7; y++) {
      if (y % 2 === 0) {
        for (var x = 0; x < 12; x++) {
            var sety = ySpace + y * patY;
            var setx = xSpace + x * patX;
            drawHead1(setx, sety, random(1, 90));
        }
      } else {
          for (var x = 0; x < 11; x++) {
            var sety = ySpace + y * patY;
            var setx = xSpace + x * patX;
            drawHead1(setx + patX / 2, sety, random(1, 90));
          }
      }
    }
    noLoop();
}

function drawHead1(centerX, centerY, rotation) {
  fill(173, 60, 70);
  ellipseMode(CENTER);
  ellipse(centerX, centerY, patX, patY);
  ellipse(centerX, centerY - patY / 2, patX / 5, patY / 5);
  ellipse(centerX - patX / 7, centerY - patY / 2, patX / 6, patY / 6);
  ellipse(centerX + patX / 7, centerY - patY / 2, patX / 6, patY / 6);
  fill(89, 22, 22);
  triangle(centerX, centerY + patY / 3, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  fill(117, 40, 53);
  triangle(centerX, centerY - patY / 4, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  triangle(centerX, centerY + patY / 5, centerX - patX / 4, centerY + patX / 6, centerX + patX / 4, centerY + patX / 6);
  fill("white");
  ellipse(centerX - patX / 5, centerY - patY / 6, patX / 5, patY / 5);
  ellipse(centerX + patX / 5, centerY - patY / 6, patX / 5, patY / 5);
  fill("black");
  ellipse(centerX + patX / 5, centerY - patY / 6, patX / 8, patY / 8);
  ellipse(centerX - patX / 5, centerY - patY / 6, patX / 8, patY / 8);
}

mgersing-project5

// Margot Gersing - Project 5 - Section E - mgersing@andrew.cmu.edu

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

}

function draw(){
	background(249, 209, 99);

	// blue
	for (var y = height/24; y < height; y += height/6) {
        for (var x = width/24; x < width; x += width/6) {
            fill(61, 93, 112);
            noStroke();
            rect(x + 17.5, y, 15, 50);
            rect(x, y + 17.5, 50, 15);
        }
    }

    // red +
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            fill(213, 85, 39);
            noStroke();
            rect(x - 7.5, y, 15, 50);
            rect(x - 25, y + 17.5, 50, 15);
        }
    }

    // green shape
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = 25; x < width + width/6; x += width/6) {
            fill(139, 163, 126);
            noStroke();
            rect(x, y - 25, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // gray shape
    for (var y = 75; y < height + height/6; y += height/6) {
        for (var x = 75; x < width + width/6; x += width/6) {
            fill(50);
            noStroke();
            rect(x, y, 5, 25);
            rect(x, y, 25, 5);
        }
    }

    // white horizontal dots
    for (var y = 0; y < height + height/6; y += height/6) {
        for (var x = width/12; x < width + width/6; x += width/6) {
            fill(255);
            ellipse(x, y + 15, 5, 5);
            ellipse(x - 15, y + 15, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
          
        }
    }

    // white vertical dots
    for (var y = height/12; y < height + height/6; y += height/6) {
        for (var x = 0; x < width + width/6; x += width/6) {
            ellipse(x + 15, y, 5, 5);
            ellipse(x + 15, y + 15, 5, 5);
            ellipse(x + 15, y + 30, 5, 5);
            
          
        }
    }

}

For this project I wanted to create a geometric pattern. I also wanted to use festive colors. It was fun to make a playful pattern from simple shapes.