fffiloni/simple-animation-doodle

1class AnimSys {2   3  constructor(fps, frame_limit, onions_tint, initial_frame_nb){4    this.fps = fps;5    this.frame_limit = frame_limit;6    this.onions_tint = onions_tint;7    this.initial_frame_nb = initial_frame_nb; 8    this.framesList = [];9    10    this.frameGraphics = createGraphics(width, height);11    this.onionGraphics = createGraphics(width, height);12    13    this.UI = createDiv('');14    this.UI.id('ui-container');15    16    this.createFrame_btn = createButton('<i class="fa-solid fa-circle-plus"></i>');17    this.createFrame_btn.mousePressed(this.create_new_frame.bind(this));18    //this.createFrame_btn.parent(this.UI);19    this.createFrame_btn.parent('right-panel');20    21    this.show_onion_btn = createButton('<span class="spec-onions"><i class="fa-regular fa-circle"></i><i class="fa-solid fa-circle"></i><span>');22    this.show_onion_btn.mousePressed(this.switch_onions.bind(this));23    //this.show_onion_btn.parent(this.UI);24    this.show_onion_btn.parent('right-panel');25    26    this.hide_onion_btn = createButton('<span class="spec-onions"><i class="fa-regular fa-circle"></i><i class="fa-solid fa-circle"></i><span>').hide();27    this.hide_onion_btn.id('hide-onion-btn');28    this.hide_onion_btn.mousePressed(this.switch_onions.bind(this));29    //this.hide_onion_btn.parent(this.UI);30    this.hide_onion_btn.parent('right-panel');31    32    this.clear_frame_btn = createButton('<i class="fa-solid fa-hand-sparkles"></i>');33    this.clear_frame_btn.mousePressed(this.clear_frame.bind(this));34    //this.clear_frame_btn.parent(this.UI);35    this.clear_frame_btn.parent('left-panel');   36    37    this.play_btn = createButton('<i class="fa-solid fa-play"></i>');38    this.play_btn.id('play-btn');39    this.play_btn.mousePressed(this.play_anim.bind(this));40    //this.play_btn.parent(this.UI);41    this.play_btn.parent('right-panel');42    43    this.stop_btn = createButton('<i class="fa-solid fa-pause"></i>').hide();44    this.stop_btn.id('stop-btn');45    this.stop_btn.mousePressed(this.play_anim.bind(this));46    //this.stop_btn.parent(this.UI);47    this.stop_btn.parent('right-panel');48    49    this.timeline = createDiv('timeline');50    this.timeline.id('timeline');51    this.timeline.parent('timeline-ctn');52    53    this.frame_displayed = 0;54    55    this.isPlaying = false;56    this.play_interval = null;57    58    this.showOnions = false;59    60  }61  62  // -----------------------------------------63  // -----------------------------------------64  65  66  update_frame_list(){67    //flush timeline elements68    this.timeline.html('');69    //insert frames + new one in timeline70    for (let [i,frame] of this.framesList.entries()){71      let frameDiv = createDiv(i+1);72      frameDiv.id('frame-number-' + i);73      frameDiv.class('aframe');74      frameDiv.parent(this.timeline);75      frameDiv.mousePressed( () =>{    76        this.display_frame(i);77      })78      redraw();79    } 80  }81  82  // -----------------------------------------83  // -----------------------------------------84  85  86  create_new_frame(data){87    88    if(this.framesList.length == this.frame_limit){89      console.warn('you cannot create more than ' + this.frame_limit + ' frames for this project')90    } else {91        let image64;92        if(data){93          image64 = data.image64;94        } else {95          this.frameGraphics.clear();96          this.frameGraphics.loadPixels(); 97          image64 = this.frameGraphics.canvas.toDataURL('image/png');98        }99 100        let new_frame = {101          "img_data": image64102        };103        this.framesList.push(new_frame);104 105        this.update_frame_list();106 107        if(this.framesList.length > 0){108          this.frame_displayed = this.framesList.length -1;109        }110 111        this.display_frame(this.frame_displayed);112    }    113      114  }115  116  // -----------------------------------------117  // -----------------------------------------118  119  120  display_frame(frame_index){121    122    if(this.isPlaying == true){123      124      if(frame_index == this.framesList.length - 1){125        frame_index = 0;126      } else {       127        frame_index++;128      }129      130    }131    132    this.frame_displayed = frame_index;133    134    let getAllDiv = document.querySelectorAll('.aframe');135    getAllDiv.forEach(aframe => {  136      aframe.classList.remove('current-frame');137    });138    139    let getDiv = select('#frame-number-' + this.frame_displayed);140    getDiv.addClass('current-frame');141 142    if(this.framesList[frame_index].img_data !== undefined){143      144      let display = loadImage(this.framesList[frame_index].img_data, function(){145      146        this.frameGraphics.clear();147        this.frameGraphics.image(display, 0, 0);148 149      }.bind(this));150    151    }152    153    154    //redraw();155    // ONIONS À TRAITER DANS UNE FUNCTION À PART POUR + D'EFFICACITÉ156        157    158 159    if( (this.isPlaying == false && this.showOnions == true) || (this.isPlaying == true && this.showOnions == true) ){160      161      let onion_index;162    163      if (frame_index == 0){164 165        onion_index = this.framesList.length - 1;166 167      } else {168 169        onion_index = frame_index - 1;170 171      }172      173      let displayOnions = loadImage(this.framesList[onion_index].img_data, function(){174 175        this.onionGraphics.clear();176        this.onionGraphics.tint(255, this.onions_tint);177        this.onionGraphics.image(displayOnions, 0, 0);178        179      }.bind(this));180    }181 182    183    184    185    setTimeout(redraw, 10)186        187  }188  189  // -----------------------------------------190  // -----------------------------------------191  192  update_frame(){193      194    this.frameGraphics.loadPixels();   195    let image64 = this.frameGraphics.canvas.toDataURL('image/png');196    197    let data = {"image64": image64}198    199    if(this.framesList.length == 0){200      201      this.create_new_frame(data);202      203    } else {204      205      this.framesList[this.frame_displayed].img_data = image64;     206      207    }208    209  }210  211  // -----------------------------------------212  // -----------------------------------------213  214  clear_frame(){ 215    // add here all the graphics layer you need to clear216    this.frameGraphics.clear();217    this.update_frame();218    redraw();219  }220  221  // -----------------------------------------222  // -----------------------------------------223  224  switch_onions(){225    if(this.showOnions == false){226      227      this.showOnions = true;228      this.show_onion_btn.hide();229      this.hide_onion_btn.show();230      231    } else {232      233      this.showOnions = false;234      this.hide_onion_btn.hide();235      this.show_onion_btn.show();236    237    }238    if(this.framesList.length != 0){239      setTimeout(function(){240        this.display_frame(this.frame_displayed)241      }.bind(this), 10);242    }243    244    245  }246  247  // -----------------------------------------248  // -----------------------------------------249 250  play_anim(){251    if(this.framesList.length > 0){252      if (this.isPlaying == false){253        if(this.showOnions == true){254          this.switch_onions();255        }256        this.isPlaying = true;257        this.play_interval = setInterval(function(){258            this.display_frame(this.frame_displayed)259          }.bind(this), 1000/this.fps);260        this.play_btn.hide();261        this.stop_btn.show();262      } else {263        clearInterval(this.play_interval);264        this.isPlaying = false;265        this.stop_btn.hide();266        this.play_btn.show();267        268      }269    } else {270      console.log("Create a first capture before playing")271    }272  }273  274}