Genuary 2023 #18: Definitely not a grid

mySketch
xxxxxxxxxx
 
// by Metamere
// Genuary 18: Definitely not a grid ;)
// 1-18-2023
​
​
var blocks = []
var t = 0
var debug_mode = false
​
function setup() {
  createCanvas(W=windowWidth, H=windowHeight);
  background(150);
  w = W/2
  h = H/2
​
  sets_horizontal = 19
  sets_vertical = 19
​
  expansion = true
  
  S = 0.7
  Sx = W*S
  Sy = H*S
  sx = Sx/sets_horizontal
  sy = Sy/sets_vertical
  
  L_x = Math.floor(sets_horizontal/2)
  L_y = Math.floor(sets_vertical/2)
​
  layer_to_activate_x = L_x
  layer_to_activate_y = L_y
  t_step = 0.005
  hold_distance = min(W,H)*0.005 
​
  stroke(255)
  strokeWeight(hold_distance*3)
  fill(0)
  rectMode(CENTER)
  textAlign(CENTER,CENTER)
  text_size = min(sx,sy)*0.35 
  textSize(text_size)
  colorMode(HSB,360,100,100,100)
​
  let x_start = - Sx/2 + sx/2
  let y_start = - Sy/2 + sy/2
  for(let i = 0; i < sets_horizontal; i++){
      let x = x_start + i*sx
      for(let j = 0; j < sets_vertical; j++){
          let y = y_start + j*sy
          blocks.push(new block(x,y,sx,sy, i,j))
      }
  }
}
​
​
function draw() {
  background(0,0,100,1);
  t += t_step
​
  push()
  translate(w,h)
  if(expansion){
    layer_to_activate_x = max(0, layer_to_activate_x - t_step)
    layer_to_activate_y = max(0, layer_to_activate_y - t_step)
  }
  else{
    layer_to_activate_x = min(L_x, layer_to_activate_x + t_step)
    layer_to_activate_y = min(L_y, layer_to_activate_y + t_step)
  }
  
  
  let hold_check = true
  
  for(let block of blocks){
    if(expansion){
      if(block.layer_x >= layer_to_activate_x || block.layer_y >= layer_to_activate_y){
        if(block.anchored) block.change_target()
      }
      if(block.anchored || block.hold == false) hold_check = false
    }
    else{
      if(block.layer_x <= layer_to_activate_x && block.layer_y <= layer_to_activate_y){
        if(block.hold) block.change_target()
      } 
      if(block.anchored == false) hold_check = false
    }
    
    block.update()
    block.display()
  }
  
  if(hold_check == true){
    if(expansion){ 
      expansion = false
      activation_timer = 0
    }
    else{
      activation_timer++
      if(activation_timer > 150) expansion = true      
    }
  }
  
  // noLoop()
  if(debug_mode){
    let pos_y = sy*layer_to_activate_y
    line(-w,pos_y,w,pos_y)  
    let pos_x = sx*layer_to_activate_x
    line(pos_x,-h,pos_x,h)
  }
  pop()
  if(debug_mode){
    text(nf(layer_to_activate_x,0,3), 60, 30)
    text(expansion, 160, 30)
  }
}
​
class block{
  constructor(x,y,w,h, i, j){
    // this.pos = createVector(x + random(-w,w),y+random(-h,h))
    this.pos = createVector(x,y)
    this.pos1 = createVector(x,y)
    this.pos2 = createVector(x * 1/S, y * 1/S)
    this.w = w + 1
    this.h = h + 1
    this.i = i
    this.j = j
    this.speed = 0
    this.target_pos = this.pos2.copy()
    this.span = p5.Vector.dist(this.pos, this.target_pos)
    this.distance_to_target = 0 
    this.dist_ratio = 0
    this.vel = createVector(0,0)
    
    this.layer_x = abs(L_x - i)
    this.layer_y = abs(L_y - j)
    this.anchored = true
    this.hold = true
    this.Stroke_col = [0,0,100]
    this.Fill_col = [0,0,0]
    this.angle = 0
  }
  update(){
    this.distance_to_target = p5.Vector.dist(this.pos, this.target_pos)
    this.dist_ratio = this.distance_to_target/this.span
    if(!this.hold && !this.anchored){
      if(this.dist_ratio > 0.3 || this.distance_to_target < 3*hold_distance) this.speed += t_step
      else this.speed = max(0,this.speed - t_step*2)
      // this.vel = p5.Vector.add(this.pos, this.target_pos).normalize().mult(this.speed)
      // this.pos = p5.Vector.lerp(this.pos, this.target_pos, 0.01)
    }
    else this.speed = max(0,this.speed - t_step*2)
    this.vel = p5.Vector.sub(this.target_pos, this.pos).normalize().mult(this.speed)
    this.pos.add(this.vel)
    
    if(!this.anchored){
      let Nx = 2*noise(this.pos.x*0.002 + 3e4 + t*0.01)-1
      let Ny = 2*noise(this.pos.y*0.002 + 4e4 + t*0.01) -1
      this.angle += (Nx + Ny)*0.003
      this.Fill_col = [0,0, (Nx + Ny) * 100]
      this.pos.add(0.25*Nx,0.25*Ny)
    }
    
    if(this.distance_to_target < hold_distance){
      // this.speed = 0
      // this.vel = createVector(0,0)
      if(expansion){
        this.hold = true
        this.Stroke_col = [40,100,70]
      }else if(this.hold == false){
        this.pos = this.target_pos.copy()
        this.anchored = true
        this.angle = 0
        this.Fill_col = [0,0,0]
        this.Stroke_col = [0,0,100]
      } 
    } 
  }  
  
  change_target(){
    this.hold = false
    if(expansion){
      this.target_pos = this.pos2.copy()
      this.span = p5.Vector.dist(this.pos, this.target_pos)
      this.anchored = false
      this.Stroke_col = [0,100,70]
    }
    else{
      this.target_pos = this.pos1.copy()
      this.span = p5.Vector.dist(this.pos, this.target_pos)
      this.Stroke_col = [230,100,70]
    }
  }
    
  display(){
    fill(this.Fill_col)
    push()
    translate(this.pos.x,this.pos.y)
    push()
      rotate(this.angle)
      noStroke()
      rect(0,0,this.w,this.h)
    pop()
    if(!this.anchored){
      stroke(this.Stroke_col)
      line(0, 0, - this.vel.x * hold_distance*15, - this.vel.y * hold_distance*15)
    }
    // let COL = this.Stroke_col
    // COL.push(40+this.Fill_col[2])
    // stroke(COL)//.push(100-this.Fill_col[2]))
    // circle(this.target_pos.x,this.target_pos.y, text_size)
    // text(nf(this.dist_ratio,0,2), this.pos.x, this.pos.y)
    // text(nf(this.distance_to_target,0,0), this.pos.x, this.pos.y)
    // line(this.pos.x, this.pos.y, this.target_pos.x, this.target_pos.y)
    // text(this.i + ', ' + this.j, this.x, this.y)
    // text(int(this.x) + ', ' + int(this.y), this.x, this.y)
    //text(this.layer_x + ', ' + this.layer_y, this.x, this.y)
    // text(int(this.target_x/w*100) + ', ' + int(this.target_y/h*100), this.x, this.y)
    pop()
  } 
}