GEN25-19/24: Lakalaka

/*

Genuary 2025 day 19, prompt: Op Art

Genuary 2025 day 24, prompt: Geometric art

by Metamere

​

Instructions: 

- click and drag left mouse, middle mouse, or right mouse buttons 

to change one parameter for each axis

- press 'b' to toggle blur

- While blur is on, hold shift and left mouse button, 

then drag to change blur amount and threshold

- press 's' to save image

- press 'f' to toggle fullscreen

​

There are definitely some optical llusions that can be found within this system. 

I'll leave that up the the user to discover.

​

Join the Birb's Nest Discord for friendly creative coding community

and future challenges and contributions: https://discord.gg/S8c7qcjw2b

WCCC-Contributions: https://openprocessing.org/curation/78544

*/

const name_str = 'GEN25-19-24,'

let iOSiPadOS // check for ios to avoid fullscreen errors

​

function setup(init=true,randomize = true) {

  S = min(W=windowWidth,H=windowHeight)

  s = S/2

  w = W/2

  h = H/2

  margin = S/20

  // noise_scale = 0.005 * 1000 / S

​

  if(init){

    createCanvas(W, H)

    // pg1 = createGraphics(W, H)

    noStroke()

    rectMode(CENTER)

    iOSiPadOS = (/^iP/.test(navigator.platform) || /^Mac/.test(navigator.platform) && navigator.maxTouchPoints > 4)

  } 

  else{

    resizeCanvas(W, H)

    // pg1.resizeCanvas(W,H)

  } 

  // if(randomize) seed = ~~random(87654321)

  // randomSeed(seed)

  // noiseSeed(seed)

​

  rad_limit = S * 0.02

  rad_start = sqrt(sq(w) + sq(h))

​

  blur_factor = S / 1440

  blur_amount = 12 * blur_factor

  final_render = true

  loop()

}

​

let mX = 0.258

let mY = 0.0

let mX2 = 0.676

let mY2 = 0.496

let mX3 = 0.179

let mY3 = 0.833

let blur_on = false

let num_rays

let threshold_ratio = 0.5

​

function draw() {

  if(mouseIsPressed){

    if(mouseButton === LEFT){

      if(blur_on && keyIsDown(SHIFT)){

        threshold_ratio = constrain(mouseX/W, 0, 1)

        blur_amount = (4 + 12 * mouseY/H) * blur_factor

      }    

      else{

        mX = mouseX/W

        mY = mouseY/H

      }

    }

    else if(mouseButton === RIGHT){ 

      mX2 = mouseX/W

      mY2 = mouseY/H

    }

    else if(mouseButton === CENTER){ 

      mX3 = mouseX/W

      mY3 = mouseY/H

    }

  }

  blendMode(BLEND)

  background(255)

  blendMode(DIFFERENCE)

  rad_limit2 = final_render ? 5 : rad_limit

  translate(w,h)

  const angle_shift = -HALF_PI * constrain(map(mX,0.05,0.95,0,1),0,1)

  num_rays = constrain(round(4 + 20 * sq(mX2)), 2, 24)

  const angle_inc = TAU / num_rays

  let rad = rad_start// * 0.85

  const d2_factor = (0.1 + mY2)

  const d2 = rad * d2_factor

  const d_factor = constrain(0.4 + 0.55 * mX3, 0.3, 0.9)

  let diam_limit2 = s * constrain(map(mX3,1,0,0.025,d2_factor * 1.2),0.05,d2)

  const rad_factor = constrain(0.55 + 0.4 * mY, 0.6, 0.9)

  while(rad > rad_limit2){

    for(let angle = 0; angle < 6.2; angle += angle_inc){

      const ratio = rad / rad_start

      let d = d2 * ratio

      diam_limit = diam_limit2 * ratio

      push()

      rotate(angle)

      translate(0, rad)

      rotate(angle_shift)

      while (d > diam_limit) {

        // square(0, 0, d)

        rect(0, 0, d / (0.1 + mY3), d * mY3)

        d *= d_factor

        // d -= d * d_factor

      }

      pop()

    }

    rad *= rad_factor

  }

  if(blur_on){

    filter(BLUR, blur_amount)

    filter(THRESHOLD, threshold_ratio)

  } 

  final_render = false

  noLoop()

}

​

function mouseDragged(){

  loop()

}

function mouseReleased(){

  final_render = true

  loop()

}

​

​

function signature(){

  const ts = margin / 3

  push()

  fill(255)

  noStroke()

  rect(0,H - ts * 1.15, W,H)

  fill(30)

  textSize(ts)

  textAlign(LEFT, TOP)

  text(name_str + seed, margin/2, H - ts)

  textAlign(RIGHT, TOP)

  text('Metamere', W - margin/2, H - ts)

  pop()

}

​

function keyPressed(){

  const key_L = key.toLowerCase()

  if(key_L === 'f'){

    if(fullscreen()) fullscreen(false)

    else go_fullscreen()

  }

  else if(key_L === 's') save_img()

  else if(key_L === 'b'){

    blur_on = !blur_on

    final_render = true

    loop()

  } 

}

​

let touch_mode

function touchStarted(){ touch_mode = touches.length }

function touchEnded(){

  if(touch_mode){

    setup(false, true)

    if(!iOSiPadOS){

      go_fullscreen()

      touch_mode = 0

    }

  }

  return false

}

​

function go_fullscreen(){

  if(fullscreen()) return

  fullscreen(true)

}

​

function save_img(){

  let save_name = `${name_str} ${round(mX,3) + ', ' + round(mY,3) + ', ' + num_rays + ', ' + round(mY2,3) + ', ' + round(mX3,3) + ', ' + round(mY3,3)}, ${blur_on? 'B, ':''}${W}x${H}, by Metamere`

  saveCanvas(save_name, "png")

}

​

function windowResized(){ setup(false, false) }

​

document.addEventListener("contextmenu", (event) => event.preventDefault(), "true")

​

document.body.onmousedown = function(e) {

    if(e.button == 1) {

        e.preventDefault();

        return false;

    }

}