let icon_size = 48;

let hover_t = 0

​

​

function setup() {

  createCanvas(1024, 540);

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

    icons.push({

      id: i, 

      text: `Application ${i}`,

      pos: {x:0, y:0},

      size: icon_size,

      over: false

    });

  }

  // Set initial position

  let y = height - icon_size - icon_size * 0.25;

  let x = (width / 2) - ( (icon_size) * (icons.length/2) );

  for (let icon of icons) { 

    icon.pos.x = x

    icon.pos.y = y

    x += icon_size;

  }

}

​

function getResizeFactor(icon_pos_x, mouse_x, max_icon_size, icon_size) {

  let max_mouse_distance_px = 256

  let mouse_dist_x = mouseX - (icon_pos_x + (icon_size/2)) 

  if (abs(mouse_dist_x) > max_mouse_distance_px) return 0

  let t = map(mouse_dist_x, -max_mouse_distance_px, max_mouse_distance_px, 0, 1) 

  t *= TWO_PI

​

  let cos_t = cos(t)

  return map(cos_t, 1, -1, 0, 1)

}

​

​

function updateIconSizesAndDraw(max_size, icon_size) {

  let hovering = false

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

    let icon = icons[i]

    icon.over = false

    if (mouseX > icon.pos.x && mouseX < icon.pos.x + icon.size) {

      if (mouseY > icon.pos.y && mouseY < icon.pos.y + icon.size) {

        hovering = true

        icon.over = true

      }        

    }

  }

  let hover_t_factor = 0.18

  if (hovering) {

    cursor(HAND)

    hover_t += hover_t_factor;

    if (hover_t > 1) {

      hover_t = 1

    }

  }

  else {

    cursor(ARROW)

    hover_t -= hover_t_factor/2;

    if (hover_t < 0) hover_t = 0 

  }

  let icons_width_total = 0

  for(let icon of icons) {

    let diff = max_size - icon_size

    let added_height = diff * getResizeFactor(icon.pos.x, mouseX, max_size, icon_size)

    let new_size = icon_size + ( hover_t * (added_height) )

    icon.size = new_size  

    icons_width_total += new_size

  }

​

​

​

  let x = (width/2) - (icons_width_total/2)

  let y = height - 2*icon_size

​

  for (let icon of icons) {

    icon.pos.x = x

    let diff = max_size - icon.size

    icon.pos.y = y + diff

    x += icon.size

    // Draw "icon"

    fill(40);

    if (icon.over) { 

      fill(0)

      noStroke()

      textSize(max_size / 4)

      textAlign(CENTER)

      text(icon.text, icon.pos.x + icon.size/2, icon.pos.y - 12)

    }

    stroke(255);

    rect(icon.pos.x, icon.pos.y, icon.size, icon.size);

  }

}

​

​

​

function draw() {

  background(122);

  let max_icon_size = icon_size * 1.6

  updateIconSizesAndDraw(max_icon_size, icon_size)

}