kreier / circle_k

Replicate the Circle K generative art pattern in p5js.org

Generative Art Pattern at Circle K

This is part of Unit 3: Collaborative Code of the Advanced Automation course at SSIS.

Replicate the Circle K generative art pattern in p5js.org.

It's not the first solution, several students tried this:

• William - Circle K
• Dan - Circle K
• Dongjae - Circle K
• Khang - Circle K

I should note that most copied the code from this video of Mr. Weinberg and changed the colors.

Code

let CELL_HEIGHT = 40  // width will be the same since its a square
let ROW_COUNT = 12    // we have 12 distinctable rows of alternating patterns
let COLUMN_COUNT = 20

function setup() {
  createCanvas(COLUMN_COUNT * CELL_HEIGHT, ROW_COUNT * CELL_HEIGHT);
  background(50);
  noStroke()
  for(var x = 0; x < COLUMN_COUNT; x++) {
    for(var y = 0; y < ROW_COUNT; y++) {
      shade = 150 * sin(PI * y / 12)
      fill(random(shade,shade + 105), 0, 0)
      x1 = x * CELL_HEIGHT
      y1 = y * CELL_HEIGHT
      square(x1, y1, CELL_HEIGHT)
      fill(random(shade,shade + 105), 0, 0)
      x2 = x1
      if(y % 2 == 0) {
        x2 += CELL_HEIGHT
      }
      triangle(x1, y1, x1 + CELL_HEIGHT, y1, x2, y1 + CELL_HEIGHT)
    }
  }
}

function draw() {

}

Student work