get_init_board,

  fill_numbers,

  draw_main_square,

  color_top,

  move_top,

  color_right,

  move_right,

  color_bottom,

  move_bottom,

  color_left,

  move_left,

  sleep,

  recolor_sqrs,

  // zoomin

];

​

var loop_frame_counts = [

  40, 200, 40, 40, 60, 40, 60, 40, 60, 40, 60, 40, 40

]

var loop_frame_thresh = loop_frame_counts.map((sum = 0, n => sum += n));

loop_frame_thresh.unshift(0);

​

var rects = []

​

var invalid_sqrs = []

var top_sqrs = []

var right_sqrs = []

var bottom_sqrs = []

var left_sqrs = []

​

var nsel;

var init_frame_count = 0;

​

function setup() {

  total_grid_size = min(windowWidth, windowHeight)

  createCanvas(total_grid_size, total_grid_size);

  nsel = createSelect('Required magic square size: ')

  nsel.position(20, 20);

  for (let i=3; i<=33; i+=2) {

    nsel.option(i);

  }

  nsel.selected(5);

  nsel.changed(restart);

  n = int(nsel.value());

  total_spaces = (2*n)-1;

  rect_width = width/total_spaces;

  rect_height = height/total_spaces;

  fill_rects();

}

​

function restart() {

  init_frame_count = frameCount;

  rects = []

​

  invalid_sqrs = []

  top_sqrs = []

  right_sqrs = []

  bottom_sqrs = []

  left_sqrs = []

  n = int(nsel.value());

  total_spaces = (2*n)-1;

  rect_width = width/total_spaces;

  rect_height = height/total_spaces;

  fill_rects();

  redraw();

}

​

function fill_rects() {

  let ind = 0;

  for (let i=0; i<total_spaces; i++)

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

      if ((i+j)%2)

        col = color(210,170,93);

      else

        col = color(110,61,21);

      rects.push(new squareInGrid(

          j*rect_width,

          i*rect_height,

          rect_width,

          col,

          null,

          false,

          i,

          j,

          ind

        )

      );

      ind++;

    }

  for (let i = 0; i < total_spaces/2; i++)

    for (let j = -1*i; j <= i; j++) {

      let ind = (i*total_spaces)+int(total_spaces/2)+j;

      rects[ind].is_valid = true

    }

  for (let i = 0; i < (total_spaces/2)-1; i++)

    for (let j = -1*i; j <= i; j++) {

      let ind = (i*total_spaces)+int(total_spaces/2)+j;

      rects[rects.length-ind-1].is_valid = true

    }

  for (let sqr of rects)

    if (sqr.is_valid && ((sqr.i+sqr.j)%2 == 1)) invalid_sqrs.push(sqr);

}

​

function get_init_board(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let fill_fade = lerp(0, 255, nframe/total_frames);

  for (let sqr of rects) {

    sqr.col.setAlpha(fill_fade);

  }

}

​

function fill_numbers(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let total_nums = n*n;

  let nums_to_fill = lerp(1, total_nums, nframe/total_frames);

  for (let val=0; val<nums_to_fill; val++) {

    let i = int(val/n);

    let j = val%n;

    let x = n + i - j - 1;

    let y = i + j;

    let ind = (y*total_spaces) + x;

    rects[ind].num = val+1;

  }

}

​

function draw_main_square(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) {

    nframe = total_frames;

    for (let sqr of invalid_sqrs)

      sqr.is_valid = false;

  }

  let fill_fade = lerp(0, 255, nframe/total_frames);

  push();

  extra_row_cols = int(n/2);

  noFill();

  stroke(color(245,109,2, fill_fade));

  strokeWeight(50/n);

  offset = extra_row_cols*rect_width;

  beginShape();

  vertex(offset, offset)

  vertex(width-offset, offset);

  vertex(width-offset, height-offset);

  vertex(offset, height-offset);

  endShape(CLOSE);

  pop();

  for (let sqr of invalid_sqrs)

    sqr.col = lerpColor(sqr.col, color(220), fill_fade);

}

​

function color_top(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let col = color(237,33,13);

  for (let sqr of rects)

    if (sqr.is_valid && (sqr.i<(n/2)-1)) top_sqrs.push(sqr);

  for (let sqr of top_sqrs) {

    let new_col = lerpColor(sqr.col, col, nframe/total_frames);

    sqr.col = new_col;

  }

}

​

function move_top(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  for (let sqr of top_sqrs) {

    let init_loc = sqr.i*rect_height;

    let target_loc = (sqr.i+n)*rect_height;

    sqr.y = lerp(init_loc, target_loc, nframe/total_frames)

  }

}

​

function color_right(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let col = color(42,169,22);

  for (let sqr of rects)

    if (sqr.is_valid && (sqr.j>total_spaces-(n/2))) right_sqrs.push(sqr);

  for (let sqr of right_sqrs) {

    let new_col = lerpColor(sqr.col, col, nframe/total_frames);

    sqr.col = new_col;

  }

}

​

function move_right(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  for (let sqr of right_sqrs) {

    let init_loc = sqr.j*rect_width;

    let target_loc = (sqr.j-n)*rect_width;

    sqr.x = lerp(init_loc, target_loc, nframe/total_frames)

  }

}

​

function color_bottom(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let col = color(42,128,192);

  for (let sqr of rects)

    if (sqr.is_valid && (sqr.i>total_spaces-(n/2))) bottom_sqrs.push(sqr);

  for (let sqr of bottom_sqrs) {

    let new_col = lerpColor(sqr.col, col, nframe/total_frames);

    sqr.col = new_col;

  }

}

​

function move_bottom(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  for (let sqr of bottom_sqrs) {

    let init_loc = sqr.i*rect_height;

    let target_loc = (sqr.i-n)*rect_height;

    sqr.y = lerp(init_loc, target_loc, nframe/total_frames)

  }

}

​

function color_left(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let col = color(254,66,163);

  for (let sqr of rects)

    if (sqr.is_valid && (sqr.j<(n/2)-1)) left_sqrs.push(sqr);

  for (let sqr of left_sqrs) {

    let new_col = lerpColor(sqr.col, col, nframe/total_frames);

    sqr.col = new_col;

  }

}

​

function move_left(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  for (let sqr of left_sqrs) {

    let init_loc = sqr.j*rect_width;

    let target_loc = (sqr.j+n)*rect_width;

    sqr.x = lerp(init_loc, target_loc, nframe/total_frames)

  }

}

​

function sleep(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

}

​

function recolor_sqrs(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  col = color(177,131,46);

  for (let sqr of top_sqrs)

    sqr.col = lerpColor(sqr.col, col, nframe/total_frames);

  for (let sqr of right_sqrs)

    sqr.col = lerpColor(sqr.col, col, nframe/total_frames);

  for (let sqr of bottom_sqrs)

    sqr.col = lerpColor(sqr.col, col, nframe/total_frames);

  for (let sqr of left_sqrs)

    sqr.col = lerpColor(sqr.col, col, nframe/total_frames);

}

​

function zoomin(nframe, total_frames) {

  if (nframe < 0) return;

  if (nframe > total_frames) nframe = total_frames;

  let fill_fade = Math.pow(total_spaces/n, 1/total_frames);

  translate(width/2, height/2);

  scale(fill_fade);

  translate(-width/2, height/2);

}

​

function draw() {

  background(220);

  draw_framecount = frameCount-init_frame_count

  for (let i=0; i<loop_frame_thresh.length; i++) {

    if (draw_framecount > loop_frame_thresh[2])

      loops[2](draw_framecount-loop_frame_thresh[i], loop_frame_counts[i]);

    if ((draw_framecount >= loop_frame_thresh[i])

        & (draw_framecount <= loop_frame_thresh[i+1])) {

      fn = loops[i]

      fn(draw_framecount-loop_frame_thresh[i], loop_frame_counts[i]);

    }

  }

  for (let sqr of rects) sqr.display();

  if (draw_framecount > loop_frame_thresh[loop_frame_thresh-1])

    noLoop();

}

​