Generative System

const CRYSTAL_SIZE = 100

const SIDES = 8

​

​

// layout

const MARGIN = CRYSTAL_SIZE / 2

const COLUMNS = 5

const ROWS = 7

const PADDING = CRYSTAL_SIZE * 0.15

const GRIDBOX = CRYSTAL_SIZE + PADDING

const START = (CRYSTAL_SIZE / 2) + MARGIN

​

let PALETTE = []

let ALL_CRYSTALS = []

​

function setup() {

  const totalX = START + GRIDBOX * COLUMNS

  const totalY = START + GRIDBOX * ROWS

  createCanvas(totalX, totalY)

​

  PALETTE = [

    color(2, 200, 200), // pinkish

    color(0, 254, 4) // red

  ]

  angleMode(DEGREES)

  rectMode(CENTER)

  generate()

​

}

​

function draw() {

  if(mouseIsPressed){

    generate()

  }

  if (keyIsPressed == true) {

    saveFrames("screen-####.jpg");

  }

  else {

  }

}

​

function generate(){

// go to a point on the screen and draw a crystal

  // continue to do this until we run out of room

  for (let x = 0; x < COLUMNS; x++) {

    for (let y = 0; y < ROWS; y++) {

      const posX = START + (x * GRIDBOX)

      const posY = START + (y * GRIDBOX)

      ALL_CRYSTALS.push(new Crystal(posX, posY))

    }

  }

​

  ALL_CRYSTALS.forEach(crystal => {

    crystal.render()

  })

}

​

​

​

​