effort js

/// <reference path="./lib/p5/types/global.d.ts" />
//localStorage.clear()


let storedPointer = localStorage.getItem("pointer")
let storedSeed = localStorage.getItem("seed")

/** Lista dei punti casuali da mostrare*/
let list = [0]
/** Risoluzione dell'immagine */
let res = {x:720, y:405}
let imgName = "720x405.jpg"
/** Indice dell'array di pixel  */
let pointer = 0;
let pointerTemp = storedPointer? JSON.parse(storedPointer) : 0;
/** Immagine della cappella */
let imgMain;
/** Rettangolo nero per coprire l'immagine */
let imgBlack;
/** Se il disegno è completo*/
let complete = false;
/** Contenitore dell'interval che tiene il loop principale */
let interval = -1;
/** Valore di inizio operazioni */
let startTime = 0;
let updateTime = 11.5226337449
let seed = storedSeed? JSON.parse(storedSeed) : Math.round(Math.random()*100000)



if(storedSeed == undefined)
    localStorage.setItem("seed", seed.toString())

/** setInterval migliorato e con tempi precisi */
function intervalTimer(callback, interval = 500) 
{
    let counter = 1;
    let timeoutId;
    const startTime = Date.now();
  
    function main() 
    {
      const nowTime = Date.now();
      const nextTime = startTime + counter * interval;
      timeoutId = setTimeout(main, interval - (nowTime - nextTime));

      counter += 1;
      callback();
    }
  
    timeoutId = setTimeout(main, interval);
  
    return () => 
    {
      clearTimeout(timeoutId);
    };
}

function preload()
{
    imgMain = loadImage('res/'+imgName);
    imgBlack = createImage(res.x, res.y);
}

function setup()
{ 
    let canvas = createCanvas(res.x, res.y);
    canvas.style(`width: ${res.x}px`)
    canvas.style(`height: ${res.y}px`)
    const c = document.querySelector("canvas");
    const ctx = c.getContext("2d");
    ctx.imageSmoothingEnabled = false;

    frameRate(120);

    //carica o crea la lista
    list = generate();

    //creo una immagine (rettangolo nero) da mettere sopra alla foto della cappella sistina
    imgBlack.loadPixels()

    for(let i=0; i<res.x; i++) 
      for(let j=0; j<res.y; j++) 
        imgBlack.set(i, j, color(0, 0, 0, 255));

    imgBlack.updatePixels()


    //ricolora i pixel gia disegnati precedentemente
    if(pointerTemp != 0)
    {
        makePixel(pointerTemp, false);
        console.log("loading "+pointerTemp+" pixels")
    }


    //disegna pixel apparse nel tempo in cui si era spenti
    let lastUpdate = localStorage.getItem("lastUpdate"); 
    if(lastUpdate != undefined)
    {
        let currentTime = new Date()
        let lastTime = new Date(lastUpdate)
        // @ts-ignore
        let difference = currentTime-lastTime

        if(difference > 0)
        {
            let pixelToDraw = Math.round(difference/updateTime)
            console.log("drawing "+pixelToDraw+" pixels during offline")
            makePixel(pixelToDraw, false);
        }
    }


    //avvia il timer per gli aggiornamenti
    intervalTimer(()=>
    {
        makePixel();
    }, updateTime)
}


function draw()
{
    image(imgMain, 0, 0);
    image(imgBlack, 0, 0);
   
    if(complete)
    {
        fill(0);
        rect(0, 0, res.x, res.y);
    }
}

/** Genera e ritorna una lista casuale di numeri
 * @returns {number[]}
 */
function generate()
{
    let max = res.x * res.y;
    let arrayContainer = [];

    for(let i = 0; i < max; i++) 
        arrayContainer.push(i);
    
    let casuale = shuffleSeed(arrayContainer, seed);
    return casuale;
}

/** Rimuovi il nero dal pixel alla posizione indicata */
function makePixel(repeat = 1, save = true)
{
    imgBlack.loadPixels();
    for(let i=0; i<repeat; i++)
    {
        let num = list[pointer];
        let posy = floor(num/res.x);
        let posx = num - posy * res.x;

        //rendi il pixel selezionato trasparente per far comparire l'immagine sotto
        imgBlack.set(posx, posy, color(0, 0, 0, 0));
     
        if(pointer < list.length)
        {
            pointer += 1; 
        } 
        else 
        {
            pointer=0;
            complete = true;
            clearInterval(interval)
            console.log("100% - "+((performance.now()-startTime)/1000)+"s")
        }

        if(pointer == 2916)
        {
            console.log("1% - "+((performance.now()-startTime)/1000)+"s")
        }

        if(save)
        {
            localStorage.setItem("lastUpdate", new Date().toString())
            localStorage.setItem("pointer", pointer.toString())
        }  
    }
    imgBlack.updatePixels();
}




function shuffleSeed(array, seed) 
{                // <-- ADDED ARGUMENT
    var m = array.length, t, i;

    // While there remain elements to shuffle…
    while (m) 
    {
      // Pick a remaining element…
      i = Math.floor(randomSeeded(seed) * m--);        // <-- MODIFIED LINE

      // And swap it with the current element.
      t = array[m];
      array[m] = array[i];
      array[i] = t;
      ++seed                                     // <-- ADDED LINE
    }

    return array;
}

function randomSeeded(seed) 
{
    var x = Math.sin(seed++) * 10000; 
    return x - Math.floor(x);
}