crazy tiles

let palettes = {

    darks: [

        ['#6a105e', '#fa0939', '#0C2F4B', '#ed2b92'],

        ['#0e1428', '#5D2A42', '#3f612d', '#1d201f', '#414066'],

        ['#D01FD0', '#25A2DB', '#02BA36', '#BB1B4E'],

        ['#281951', '#4A64BF', '#E32033', '#FA5621'],

    ],

    lights: [

        ['#f6b02c', '#f24333', '#ff7a27', '#058ed9', '#5bc4f1', '#FC6C9C'],

        ['#f0a202', '#f18805', '#d95d39', '#d1dede', '#C8F917'],

        ['#50b2d3', '#FF9F31', '#3CBC50', '#81d560'],

    ],

}

​

let colors

let colorsLight

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CENTER)

  noLoop()

}

​

function draw() {

  colors = [...random(palettes.darks), ...random(palettes.lights)]

  tiles({

    x: width / 2,

    y: height / 2,

    w: width, 

    h: height, 

    iterations: 8, 

    minSize: 20,

    fn: pattern

  })

}

​

function mouseClicked() {

  redraw()

}

​

const tiles = ({ x, y, w, h, iterations = 6, fn, minSize = -1 }) => {

  iterations--

  if (iterations === 0 || w < minSize || h < minSize) {

    fn(x, y, w, h)

    return 

  }

  if (w > h) {

    let w1, w2 

    w1 = w / random([2, 3, 4])

​

    if (random() < 0.5) {

      w2 = w - w1

    } else {

      w2 = w1

      w1 = w - w2

    }

    let x1 = x - w / 2 + w1 / 2 

    let x2 = x + w / 2 - w2 / 2

    tiles({ x: x1, y, w: w1, h, iterations, fn, minSize }) 

    tiles({ x: x2, y, w: w2, h, iterations, fn, minSize })

  } else {

    let h1, h2 

    h1 = h / random([2, 3, 4])

    if (random() < 0.5) {

      h2 = h - h1

    } else {

      h2 = h1 

      h1 = h - h2

    }

    let y1 = y - h / 2 + h1 / 2

    let y2 = y + h / 2 - h2 / 2

    tiles({ x, y: y1, w, h: h1, iterations, fn, minSize })

    tiles({ x, y: y2, w, h: h2, iterations, fn, minSize })

  }

}

​

​

function pattern(cx, cy, w, h) {

  let cols = shuffle(colors)

  let m = min(w, h)

  let ctx = drawingContext

​

  let x = cx - w / 2

  let y = cy - h / 2

  noStroke()

  push()

  fill(cols[0])

  rect(cx, cy, w, h)

​

  beginClip()

  rect(cx, cy, w, h)

  endClip()

​

  let n = floor(random(8))

​

  if (n === 0) {

    // circles

    let r = (w + h) * random(0.35, 1) 

    let step = r * random(0.05, 0.15) 

    let xx = cx + random(-m / 2, m / 2)

    let yy = cy + random(-m / 2, m / 2) 

    fill(cols[1])

​

    let i = 0

    while (r - i * step > 10) {

      circle(xx, yy, r - i * step)

      fill(cols[i % 2 === 0 ? 1 : 0])

      i++

    }

  } else if (n === 1) {

    // triangles

    let num = w > h ? floor(random(1, 5)) : 1 

    let step = w / num 

    let radius = min(step * 0.45, m * 0.4)

    fill(cols[1])

    for (let i = 0; i < num; i++) {

      polygon({ 

        cx: x + step * i + step / 2,

        cy, 

        radius,

        sides: 3, 

        rotation: -PI * 0.5

      })

    }

  } else if (n === 2) {

    // burst

    fill(cols[2])

    burst({ 

      cx, 

      cy,

      radius: min(w, h) * 0.35,

      nodes: floor(random(5, 9)),

      vary: min(w, h) * 0.1

    })

  } else if (n === 3) {

    // outline rects

    let size = random() < 0.5 ? w : h 

    let wid = size * 0.08

    let step = size * 0.13

    let xx = cx + random(-m / 2, m / 2) 

    let yy = cy + random(-m / 2, m / 2)

    noFill()

    stroke(cols[1])

    strokeWeight(wid)

    for (let i = 0; i < 3; i++) {

      let x1 = xx - size / 2 + step * i

      let x2 = xx + size / 2 - step * i 

      let y1 = yy - size / 2 + step * i 

      let y2 = yy + size / 2 - step * i 

      beginShape()

      vertex(x1, y1)

      vertex(x2, y1)

      vertex(x2, y2)

      vertex(x1, y2)

      vertex(x1, y1)

      endShape(CLOSE)

​

    }

  } else if (n === 4) {

    // zigzag 

    let step = random(m * 0.1, m * 0.35)

    let zig = step * 0.35

    strokeWeight(zig * random(0.5, 1))

    stroke(cols[2]) 

    zigzag({

      x: cx - w,

      y: cy - h,

      w: w * 2,

      h: h * 2,

      step,

      zig,

      dir: random(['horizontal', 'vertical']) 

    })

  } else if (n === 5) {

    // diamonds

    fill(cols[1])

    let [nx, ny] = [random([1, 2, 3, 4]), floor(random(3, 10))]

    if (random() < 0.5) [nx, ny] = [ny, nx]

    let stepx = w / nx

    let stepy = h / ny

    let square = min(stepx, stepy) * 0.4

​

    for (let xi = 0; xi < w / stepx; xi++) {

      for (let yi = 0; yi < h / stepy; yi++) {

        polygon({

          cx: x + stepx * xi + stepx / 2,

          cy: y + stepy * yi + stepy / 2,

          radius: square,

          sides: 4,

​

        })

      }

    }

  } else if (n === 6) {

    // plus

    strokeWeight(m * 0.15)

    stroke(cols[1]) 

    strokeCap(SQUARE)

    noFill()

    let side = m * 0.35 

    let b = 0

    if (random() < 0.5) b = side // rotation

    line(cx - side, cy - b, cx + side, cy + b)

    line(cx + b, cy - side, cx - b, cy + side)

  } else if (n === 7) {

    fill(cols[1])

    let radius = min(w, h) * 0.35

    let nodes = floor(random(3, 9))

    burstSquare({ 

      cx, 

      cy,

      radius,

      radius2: nodes < 5 ? radius * random(0.2, 0.35) : radius * random(0.3, 0.8),

      nodes,

    })

  }

​

  pop()

​

}

​

function polygon({cx, cy, radius, sides, rotation = 0}) {

  let step = (PI * 2) / sides 

  beginShape() 

  for (let i = 0; i < sides; i++) {

    vertex(cx + cos(i * step + rotation) * radius, cy + sin(i * step + rotation) * radius)

  }

  endShape()

}

​

function burst({ cx, cy, radius, nodes, vary = 10 }) {

  beginShape() 

  for (let i = 0; i < 2 * PI; i += 0.01) {

    let ri = radius + sin(i * nodes) * vary

    let x1 = cx + cos(i) * ri

    let y1 = cy + sin(i) * ri

    vertex(x1, y1)

  }

  endShape()

}

​

function burstSquare({ cx, cy, radius, nodes, radius2 }) {

  if (!radius2) radius2 = radius * 0.5

  let step = (PI * 2) / (nodes * 2)

  beginShape() 

  for (let i = 0; i < nodes * 2; i++) {

    let ri = i % 2 === 0 ? radius : radius2

    let x1 = cx + cos(i * step) * ri

    let y1 = cy + sin(i * step) * ri

    vertex(x1, y1)

  }

  endShape()

}

​

function zigzag({ x, y, w, h, step, zig, dir = 'horizontal' }) {

  let ni = (dir === 'horizontal' ? h : w) / step 

  let nj = (dir === 'horizontal' ? w : h) / step

  for (let i = 0; i < ni; i++) {

    beginShape()

    for (let j = 0; j < nj; j++) {

      let xx = x 

      let yy = y 

      if (dir === 'horizontal') {

        xx += j * step 

        yy += i * step + (j % 2 === 0 ? zig : -zig) 

      } else {

        xx += i * step + (j % 2 === 0 ? zig : -zig)

        yy += j * step

      }

      vertex(xx, yy)

    }

    endShape()

  }

}

​

​