added anim sys files

public/AnimSys.js

@@ -0,0 +1,295 @@
+class AnimSys {
+   
+    constructor(fps, frame_limit, onions_tint, initial_frame_nb){
+      this.fps = fps;
+      this.frame_limit = frame_limit;
+      this.onions_tint = onions_tint;
+      this.initial_frame_nb = initial_frame_nb; 
+      this.framesList = [];
+      
+      this.frameGraphics = createGraphics(width, height);
+      this.onionGraphics = createGraphics(width, height);
+      
+      this.UI = createDiv('');
+      this.UI.id('ui-container');
+      
+      this.createFrame_btn = createButton('<i class="fa-solid fa-circle-plus"></i>');
+      this.createFrame_btn.mousePressed(this.create_new_frame.bind(this));
+      //this.createFrame_btn.parent(this.UI);
+      this.createFrame_btn.parent('right-panel');
+      
+      this.show_onion_btn = createButton('<span class="spec-onions"><i class="fa-regular fa-circle"></i><i class="fa-solid fa-circle"></i><span>');
+      this.show_onion_btn.mousePressed(this.switch_onions.bind(this));
+      //this.show_onion_btn.parent(this.UI);
+      this.show_onion_btn.parent('right-panel');
+      
+      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();
+      this.hide_onion_btn.id('hide-onion-btn');
+      this.hide_onion_btn.mousePressed(this.switch_onions.bind(this));
+      //this.hide_onion_btn.parent(this.UI);
+      this.hide_onion_btn.parent('right-panel');
+      
+      this.clear_frame_btn = createButton('<i class="fa-solid fa-hand-sparkles"></i>');
+      this.clear_frame_btn.mousePressed(this.clear_frame.bind(this));
+      //this.clear_frame_btn.parent(this.UI);
+      this.clear_frame_btn.parent('left-panel');   
+      
+      this.play_btn = createButton('<i class="fa-solid fa-play"></i>');
+      this.play_btn.id('play-btn');
+      this.play_btn.mousePressed(this.play_anim.bind(this));
+      //this.play_btn.parent(this.UI);
+      this.play_btn.parent('right-panel');
+      
+      this.stop_btn = createButton('<i class="fa-solid fa-pause"></i>').hide();
+      this.stop_btn.id('stop-btn');
+      this.stop_btn.mousePressed(this.play_anim.bind(this));
+      //this.stop_btn.parent(this.UI);
+      this.stop_btn.parent('right-panel');
+      
+      this.timeline = createDiv('timeline');
+      this.timeline.id('timeline');
+      this.timeline.parent('timeline-ctn');
+      
+      this.frame_displayed = 0;
+      
+      this.isPlaying = false;
+      this.play_interval = null;
+      
+      this.showOnions = false;
+      
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    update_frame_list(){
+      //flush timeline elements
+      this.timeline.html('');
+      //insert frames + new one in timeline
+      for (let [i,frame] of this.framesList.entries()){
+        let frameDiv = createDiv(i+1);
+        frameDiv.id('frame-number-' + i);
+        frameDiv.class('aframe');
+        frameDiv.parent(this.timeline);
+        frameDiv.mousePressed( () =>{    
+          this.display_frame(i);
+        })
+        redraw();
+      } 
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    create_new_frame(data){
+      
+      if(this.framesList.length == this.frame_limit){
+        console.warn('you cannot create more than ' + this.frame_limit + ' frames for this project')
+      } else {
+          let image64;
+          let diff64;  
+          if(data){
+            image64 = data.image64;
+          } else {
+            this.frameGraphics.clear();
+            this.frameGraphics.loadPixels(); 
+            image64 = this.frameGraphics.canvas.toDataURL('image/png');
+          }
+  
+          let new_frame = {
+            "img_data": image64,
+            "diffused_data": diff64
+          };
+          this.framesList.push(new_frame);
+  
+          this.update_frame_list();
+  
+          if(this.framesList.length > 0){
+            this.frame_displayed = this.framesList.length -1;
+          }
+  
+          this.display_frame(this.frame_displayed);
+      }    
+        
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    display_frame(frame_index){
+      
+      if(this.isPlaying == true){
+        
+        if(frame_index == this.framesList.length - 1){
+          frame_index = 0;
+        } else {       
+          frame_index++;
+        }
+        
+      }
+      
+      this.frame_displayed = frame_index;
+      
+      let getAllDiv = document.querySelectorAll('.aframe');
+      getAllDiv.forEach(aframe => {  
+        aframe.classList.remove('current-frame');
+      });
+      
+      let getDiv = select('#frame-number-' + this.frame_displayed);
+      getDiv.addClass('current-frame');
+  
+      if(this.framesList[frame_index].img_data !== undefined){
+        
+        let display = loadImage(this.framesList[frame_index].img_data, function(){
+        
+          this.frameGraphics.clear();
+          this.frameGraphics.image(display, 0, 0);
+  
+        }.bind(this));
+      
+      }
+      
+      
+      if(grAPI.show_diffused == true){
+        
+        grAPI.diffusedGraphics.clear();
+        
+        if(this.framesList[frame_index].diffused_data !== undefined ){
+          
+          let diff_data = this.framesList[this.frame_displayed].diffused_data;
+          
+          grAPI.diffusedGraphics.image(diff_data, 0, 0);
+          
+        }   
+      
+      }
+      
+      
+      //redraw();
+      // ONIONS À TRAITER DANS UNE FUNCTION À PART POUR + D'EFFICACITÉ
+          
+      
+  
+      if( (this.isPlaying == false && this.showOnions == true) || (this.isPlaying == true && this.showOnions == true) ){
+        
+        let onion_index;
+      
+        if (frame_index == 0){
+  
+          onion_index = this.framesList.length - 1;
+  
+        } else {
+  
+          onion_index = frame_index - 1;
+  
+        }
+        
+        let displayOnions = loadImage(this.framesList[onion_index].img_data, function(){
+  
+          this.onionGraphics.clear();
+          this.onionGraphics.tint(255, this.onions_tint);
+          this.onionGraphics.image(displayOnions, 0, 0);
+          
+        }.bind(this));
+      }
+  
+      
+      
+      
+      setTimeout(redraw, 10)
+          
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    update_frame(){
+        
+      this.frameGraphics.loadPixels();   
+      let image64 = this.frameGraphics.canvas.toDataURL('image/png');
+      
+      let data = {"image64": image64}
+      
+      if(this.framesList.length == 0){
+        
+        this.create_new_frame(data);
+        
+      } else {
+        
+        this.framesList[this.frame_displayed].img_data = image64;
+        
+        
+      }
+      
+      setTimeout(redraw, 10)
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    clear_frame(){ 
+      // add here all the graphics layer you need to clear
+      grAPI.diffusedGraphics.clear();
+      this.framesList[this.frame_displayed].diffused_data = undefined;
+      this.frameGraphics.clear();
+      this.update_frame();
+      //redraw();
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    switch_onions(){
+      if(this.showOnions == false){
+        
+        this.showOnions = true;
+        this.show_onion_btn.hide();
+        this.hide_onion_btn.show();
+        
+      } else {
+        
+        this.showOnions = false;
+        this.hide_onion_btn.hide();
+        this.show_onion_btn.show();
+      
+      }
+      if(this.framesList.length != 0){
+        setTimeout(function(){
+          this.display_frame(this.frame_displayed)
+        }.bind(this), 10);
+      }
+      
+      
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+  
+    play_anim(){
+      if(this.framesList.length > 0){
+        if (this.isPlaying == false){
+          if(this.showOnions == true){
+            this.switch_onions();
+          }
+          this.isPlaying = true;
+          this.play_interval = setInterval(function(){
+              this.display_frame(this.frame_displayed)
+            }.bind(this), 1000/this.fps);
+          this.play_btn.hide();
+          this.stop_btn.show();
+        } else {
+          clearInterval(this.play_interval);
+          this.isPlaying = false;
+          this.stop_btn.hide();
+          this.play_btn.show();
+          
+        }
+      } else {
+        console.log("Create a first capture before playing")
+      }
+    }
+    
+  }

public/DrawHandler.js

@@ -0,0 +1,232 @@
+class DrawHandler {
+  
+    constructor(){
+      
+      // create a layer that will handle drawing phase
+      this.drawGraphic = createGraphics(width, height);
+      
+      // create an array to store all paths
+      this.drawings = [];
+      
+      // create an array to store path's points being produced
+      this.currentPath = [];
+      
+      // bool to check if user is drawing, pencil touching and dragged on the canvas
+      this.isDrawing = false;
+      
+      // bool to check if user is using eraser instead
+      this.isErasing = false;
+      
+      // set the eraser radius
+      this.eraserRadius = 10;
+      
+      this.pencil_btn = createButton('<i class="fa-solid fa-pencil"></i>');
+      this.pencil_btn.mousePressed(this.pickPencil.bind(this));
+      this.pencil_btn.parent('left-panel');
+      this.pencil_active = true;
+      this.pencil_btn.addClass('tool-active');
+      
+      this.eraser_btn = createButton('<i class="fa-solid fa-eraser"></i>');
+      this.eraser_btn.mousePressed(this.pickEraser.bind(this));
+      this.eraser_btn.parent('left-panel');
+      this.eraser_active = false;
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    pickPencil(){
+      this.isErasing = false;
+      if(this.pencil_active == false){
+        this.pencil_active = true;
+        this.pencil_btn.addClass('tool-active');
+        this.eraser_active = false;
+        this.eraser_btn.removeClass('tool-active');
+      } 
+    }
+    
+    pickEraser(){
+      this.isErasing = true;
+      if(this.eraser_active == false){
+        this.eraser_active = true;
+        this.eraser_btn.addClass('tool-active');
+        this.pencil_active = false;
+        this.pencil_btn.removeClass('tool-active');
+        
+      } 
+      
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    // this function calls the trueErase() method applied on the targeted layer
+    mouseDragged(target_graphics){
+    
+      if(Draws.isDrawing && Draws.isErasing){
+        
+        this.trueErase(this.eraserRadius, target_graphics); 
+        
+      }
+      
+      redraw();
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    // this function checks if a key is down, 
+    // if so do corresponding task
+    keydown_check(){
+      
+      // checks if the "E" key is down, 
+      // if so set isErasing bool to true while "E" key is down
+      if (keyIsDown(69)){ // KEY E
+        this.pickEraser();
+        this.isErasing = true;
+        
+      } else {
+        this.pickPencil();
+        this.isErasing = false;
+        
+      } 
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    startPath() {
+    
+      Cursor.calculateAngle();
+  
+      for (let i = 0; i < brushesPoints.length; i++) {
+        
+          brushesPoints[i]
+            .calcPointCoordinates(mouseX, 
+                                  mouseY,
+                                  Cursor.targeAngle,
+                                  Cursor.diameter
+                                 );
+      
+      }
+  
+  
+      for (let i = 0; i < brushesPoints.length; i++) {
+          brushesPoints[i].resetPointOrigin();
+      }
+  
+      this.isDrawing = true;
+      this.currentPath = [];
+  
+      //console.log("——");
+      //console.log("You started a new path!");
+      this.drawings.push(this.currentPath);
+      //console.log("A new array of points is pushed in 'drawings'");
+  
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    endPath(source_graphics, target_graphics) {
+      this.isDrawing = false;
+  
+      // on affiche le nouveau drawings sur la target 
+      target_graphics.image(source_graphics, 0, 0);
+      // on vide le drawings array
+      //this.drawings = [];
+      // on clear le drawGraphic
+      source_graphics.clear();  
+      //on redraw
+      redraw();
+    }
+    
+    trueErase(r, target){
+      // target is the graphics you want to erase on | e.g: className.frameGraphics
+      target.loadPixels();
+  
+      for (let x = mouseX - r; x < mouseX + r; x++) {
+        for (let y = mouseY - r; y < mouseY + r; y++) {
+          if ((dist(x,y, mouseX, mouseY) < r) && x > 0 && x <= width) {
+  
+            target.set(x,y,color(0,0));
+  
+          }
+        }
+      }
+  
+      target.updatePixels();
+      
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    get_new_current_path(){
+      if (this.isDrawing == true && this.isErasing == false) {
+      
+        this.drawGraphic.clear();
+  
+        let point = {
+          x1: [],
+          y1: [],
+          x2: [],
+          y2: [],
+          x3: [],
+          y3: [],
+          x4: [],
+          y4: []
+        }
+        this.currentPath.push(point);
+  
+        for (let i = 0; i < brushesPoints.length; i++) {
+          brushesPoints[i].shiftPointVertex()
+          brushesPoints[i].pushPoints(point);   
+        }
+  
+      }
+  
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    drawLines(index, color, size, graphics){
+      //Shows the current drawing if there any data in drawing array
+  
+      if(this.isDrawing == true && this.isErasing == false){
+  
+        for (let i = 0; i < this.drawings.length; i++) {
+  
+          let path = this.drawings[i];
+  
+          if (path.length != 0) {
+            noFill();
+  
+            for (let j = 0; j < path.length; j++) {
+  
+  
+              push();
+  
+                graphics.beginShape();
+                graphics.strokeWeight(size);
+                graphics.noFill();
+                graphics.stroke(color); // A     
+  
+                graphics.curveVertex(path[j].x1[index], path[j].y1[index]);
+                graphics.curveVertex(path[j].x2[index], path[j].y2[index]);
+                graphics.curveVertex(path[j].x3[index], path[j].y3[index]);
+                graphics.curveVertex(path[j].x4[index], path[j].y4[index]);
+  
+                graphics.endShape();
+  
+              pop();
+  
+  
+            }
+          } 
+        }
+      } 
+    }
+    
+  }

public/OrientedCursor.js

@@ -0,0 +1,164 @@
+class OrientedCursor{
+ 
+    constructor(elementID){
+      
+      this.elementID = elementID;
+      this.tiltX = 0;
+      this.tiltY = 0;
+      this.pressure = 0;
+      this.diameter = 0;
+      
+      this.targetAngle = 0;
+      
+      this.isOnCanvas = false;
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    catchCursor(){
+      let getCanvas = document.getElementById(this.elementID);
+      
+      getCanvas.addEventListener("pointermove", (e) => {
+        //console.log("pointerMove");
+    
+        if (this.isOnCanvas) {
+          this.tiltX = e.tiltX;
+          this.tiltY = e.tiltY;
+          this.pressure = e.pressure;
+        
+          //console.log(inclinationX + ' ' + inclinationY + ' ' + pressure);
+        }
+      }, false);
+  
+      getCanvas.addEventListener("pointerdown", (e) => {
+        //console.log("pointerDown");
+        getCanvas.setPointerCapture(e.pointerId);
+        this.isOnCanvas = true;
+    
+        this.tiltX = e.tiltX;
+        this.tiltY = e.tiltY;
+        this.pressure = e.pressure;
+      
+      }, false);
+  
+      getCanvas.addEventListener("pointerup", (e) => {
+        //console.log("pointerUp");
+      
+        if (this.isOnCanvas) {
+          getCanvas.releasePointerCapture(e.pointerId);
+          this.isOnCanvas = false;
+      
+          this.tiltX = e.tiltX;
+          this.tiltY = e.tiltY;
+          this.pressure = e.pressure;
+      
+          //console.log(inclinationX + ' ' + inclinationY + ' ' + pressure);
+        
+        }
+      }, false);
+    }
+    
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    calculateAngle(){
+      this.targetAngle = atan2(this.tiltY, this.tiltX);
+    }
+    
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    showData(){
+    // LIVE COORDINATES
+    push();
+      noFill();
+      stroke('#fff')
+      text('pressure: ' + this.pressure, 10, 30);
+      text('tilt_X: ' + this.tiltX, 10, 50);
+      text('tilt_Y: ' + this.tiltY, 10, 70);
+      text('angle arctan: ' + this.targetAngle, 10, 90);
+    pop();
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    mapPressure(){
+      this.diameter = map(this.pressure, 0, 1, 1, 3);
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    process_rotate(){
+      translate(mouseX, mouseY); //mouseX & mouseY
+      rotate(this.targetAngle);
+      translate(-mouseX, -mouseY); // -mouseX & -mouseY
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    
+    showCursor(mouseX, mouseY){
+      // POINTER CENTER   
+      push();
+        noStroke();
+        fill(0, 0, 0);
+        circle(mouseX, mouseY, 20);
+      pop();
+      
+      // RECTANGLE SHAPE
+      push();
+        this.process_rotate()
+  
+        noFill();
+        stroke(2)
+        rectMode(CENTER)
+        rect(mouseX, mouseY, this.diameter, 30); // reacts to pen pressure value
+      
+        noStroke();
+        fill('yellow');
+        circle(mouseX, mouseY, 10); // shows the pivot point 
+      pop();
+     
+      // POINTS FROM STYLUS AT GOOD INCLINATION & PRESSURE VALUE
+      push();
+        this.process_rotate();
+        noFill();
+        stroke(1);
+        ellipseMode(CENTER);
+        circle(mouseX, mouseY + this.diameter, 10); // LEFT  || WEST
+        circle(mouseX + this.diameter, mouseY, 10);// DOWN  || SOUTH
+        circle(mouseX, mouseY - this.diameter, 10); // RIGHT || EAST
+        circle(mouseX - this.diameter, mouseY, 10); // UP    || NORTH
+      
+      
+      pop();
+    
+      circle(mouseX + this.diameter/4 * cos(this.targetAngle), mouseY + this.diameter/4 * sin(this.targetAngle), 1)
+      circle(mouseX + this.diameter/4 * cos(this.targetAngle + PI), mouseY + this.diameter/4 * sin(this.targetAngle+ PI), 1)
+    
+   
+    // TILT AXIS & LENGTH
+    push();
+      fill('red');
+      circle(mouseX + this.tiltX, mouseY + this.tiltY, 10);
+    
+    pop();
+    
+    push();
+      fill('blue'); 
+      circle(mouseX - this.tiltX, mouseY - this.tiltY, 10);
+    pop();
+    }
+    
+  }

public/apiCall.js

@@ -0,0 +1,137 @@
+class GRAPI {
+  
+    constructor(URI, token){
+      this.URI_endpoint = URI; 
+      this.token = token;
+      this.prompt_value = '';
+      this.prompt_input = select('#prompt-inp')
+        .attribute('placeholder', 'PROMPT')
+        .input(this.set_prompt_value.bind(this));
+      
+      this.neg_prompt_value = '';
+      this.neg_prompt_input = select('#neg-prompt-inp')
+        .attribute('placeholder', 'NEGATIVE PROMPT')
+        .input(this.set_neg_prompt_value.bind(this));
+      
+      this.call_API_btn = createButton('<i class="fa-solid fa-wand-magic-sparkles"></i>');
+      this.call_API_btn.mousePressed(this.call_API.bind(this));
+      this.call_API_btn.id('api-btn');
+      this.call_API_btn.parent('#inner-right')
+      
+      this.running_API_btn = createButton('<i class="fa-solid fa-spinner"></i>');
+      this.running_API_btn.id('running-api-btn');
+      this.running_API_btn.parent('#inner-right');
+      this.running_API_btn.addClass('hide');
+      
+      this.show_diffused = false;
+      this.showHide_diff_btn = createButton('<i class="fa-solid fa-eye-slash"></i>');
+      this.showHide_diff_btn.mousePressed(this.showHide_diff.bind(this));
+      this.showHide_diff_btn.id('show-hide-diff-btn');
+      this.showHide_diff_btn.parent('#inner-left');
+      
+      this.API_log_txt = createDiv('logs')
+      this.API_log_txt.id('api-logs')
+      
+      this.hiddenScribbleGraphics = createGraphics(width, height);
+      this.diffusedGraphics = createGraphics(width, height);
+    }
+    
+    set_prompt_value(){
+      this.prompt_value = this.prompt_input.value();
+    }
+    
+    set_neg_prompt_value(){
+      this.neg_prompt_value = this.neg_prompt_input.value();
+    }
+    
+    fakeCall(){
+      this.running_API_btn.removeClass('hide');
+      this.call_API_btn.addClass('hide');
+      setTimeout(function(){
+        this.call_API_btn.removeClass('hide');
+        this.running_API_btn.addClass('hide');
+      }.bind(this), 3000)
+      
+    }
+    
+    call_API(){
+      
+      this.running_API_btn.removeClass('hide');
+      this.call_API_btn.addClass('hide');
+      
+      if(AS.framesList.length != 0) {
+        
+        console.log(AS.frame_displayed)
+        
+        this.hiddenScribbleGraphics.loadPixels(); 
+        let frame1_data = this.hiddenScribbleGraphics.canvas.toDataURL('image/png');
+                
+        let inputs =  [
+            this.prompt_value,
+            frame1_data
+          ];
+  
+        this.query(inputs);
+  
+        console.log("API CALLED • Waiting for a response ... ")
+        console.log("PROMPT: " + this.prompt_value)
+        //this.API_log_txt.html('API CALLED • Waiting for a response ... ')
+      }
+      
+    }
+    
+    async query(data) {
+         
+      const response = await fetch(this.URI_endpoint, { 
+        method: "POST", 
+        body: JSON.stringify(
+          { "data": data } // data images to send
+        ), 
+        headers: { "Content-Type": "application/json",
+                   "Authorization": "Bearer " + this.token + "" } 
+      })
+      
+        .then(function(response) { return response.json(); })
+          
+          .then(function(json_response){ 
+            
+            console.log("got results");
+            
+            //this.API_log_txt.html('got results • hit Play Anim button !')
+            //console.log(json_response.data);
+            
+            setTimeout(function(){AS.display_frame(AS.frame_displayed)}, 100);
+            
+            loadImage(json_response.data[0], function(diff_img){
+              AS.framesList[AS.frame_displayed].diffused_data = diff_img;
+            });
+           
+            console.log('stored');
+            this.call_API_btn.removeClass('hide');
+            this.running_API_btn.addClass('hide');
+            if(this.show_diffused == false){
+              this.showHide_diff()
+            }
+                     
+          }.bind(this));   
+    }
+    
+    showHide_diff(){
+      
+      if(this.show_diffused == false){
+        
+        this.show_diffused = true;
+        this.showHide_diff_btn.html('<i class="fa-solid fa-eye"></i>');
+        
+      } else if(this.show_diffused == true){
+        
+        this.show_diffused = false;
+        this.showHide_diff_btn.html('<i class="fa-solid fa-eye-slash"></i>');
+        
+      }
+      
+      setTimeout(AS.display_frame(AS.frame_displayed), 1000);
+      
+    }
+    
+  }

public/brushpoint.js

@@ -0,0 +1,66 @@
+class BrushPoint{
+  
+    constructor(name, dist, piPosition) {
+      this.name = name;
+      this.dist = dist;
+      this.piPosition = piPosition
+      
+      this.px;
+      this.py;
+      this.ppx;
+      this.ppy;
+      this.sx;
+      this.sy;
+      this.pointerX;
+      this.pointerY;
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    calcPointCoordinates(mouseX, mouseY, angle, pressure){
+      this.pointerX = mouseX + (this.dist * pressure) * cos(angle + this.piPosition);
+      this.pointerY = mouseY + (this.dist * pressure) * sin(angle + this.piPosition);
+      //console.log('class: ' + this.pointerX + ' ' + this.pointerY)
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    resetPointOrigin(){
+      this.sx = this.pointerX;
+      this.sy = this.pointerY;
+      this.px = this.pointerX;
+      this.py = this.pointerY;
+      this.ppx = this.pointerX;
+      this.ppy = this.pointerY;
+      //console.log(this.sx, this.sy, this.px, this.py, this.ppx, this.ppy)
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    shiftPointVertex(){
+      this.sx = this.ppx;
+      this.sy = this.ppy;
+      this.ppx = this.px;
+      this.ppy = this.py;
+      this.px = this.pointerX;  
+      this.py = this.pointerY;
+    }
+    
+    // -----------------------------------------
+    // -----------------------------------------
+    
+    pushPoints(point){
+      point.x1.push(this.sx)
+        point.y1.push(this.sy)
+        point.x2.push(this.ppx)
+        point.y2.push(this.ppy)
+        point.x3.push(this.px)
+        point.y3.push(this.py)
+        point.x4.push(this.pointerX)
+        point.y4.push(this.pointerY)
+    }
+    
+  }

public/index.html

@@ -1,14 +1,39 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
 
-<head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
-    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js" integrity="sha384-/KNQL8Nu5gCHLqwqfQjA689Hhoqgi2S84SNUxC3roTe4EhJ9AfLkp8QiQcU8AMzI" crossorigin="anonymous"></script>
-</head>
-<body>
-  Hello World ! 
-  <script src="sketch.js"></script>
-</body>
+  </head>
+  <body>
+    <div class="main-container">
+      <div id="left-panel"></div>
+      <div id="center-panel">
+        <h1>Simple Animation Doodle</h1>
+        <div id="canvas-ctn"></div>
+        <div id="timeline-ctn"></div>
+      </div>   
+      <div id="right-panel"></div>
+    </div>
+    <div class="main-container">
+      <div id="ml-config-ctn">
+        <div id="inner-left"></div>
+        <div id="prompts-ctn">
+          <textarea id="prompt-inp" rows="2"></textarea>
+          <textarea id="neg-prompt-inp" rows="2"></textarea>
+        </div>
+        <div id="inner-right"></div>
+      </div>
+    </div>
+    <script src="apiCall.js"></script>
+    <script src="OrientedCursor.js"></script>
+    <script src="brushpoint.js"></script>  
+    <script src="DrawHandler.js"></script>
+    <script src="AnimSys.js"></script>
+    
+    <script src="sketch.js"></script>
+  </body>
+</html>

public/sketch.js

@@ -1,4 +1,20 @@
-let secret;
+// WORKING VERSION OF ANIMATION SYSTEM
+// ERASER is binded to the frameGraphics, and all the drawings operations works on the drawGraphic
+// Each path is displayed on the frameGraphics before being deleted to make the eraser working properly
+//Systeme à reproduire pour les autres projet, c'est le plus efficace, et le plus maniable ;)
+
+let canvas;
+let Cursor;
+let AS;
+let Draws;
+let Pencil;
+let brushesPoints = [];
+let show_diffused = false; 
+
+
+//-----------------------------------------------------
+//-----------------------------------------------------
+
 function preload() {
   const socket = io();
   // client-side
@@ -6,19 +22,133 @@ function preload() {
     console.log(socket.id); // x8WIv7-mJelg7on_ALbx
     socket.on("hello", (arg) => {
       //console.log(arg)
-      secret = arg;
-      console.log(secret)
+      const space_uri = arg[0];
+      const hf_tkn = arg[1];
     });
   });
 }
 
 function setup() {
-  createCanvas(400, 400);
+  
+  canvas = createCanvas(512, 512);
+  canvas.id('canvas');
+  canvas.parent('canvas-ctn');
+  noLoop();
+  pixelDensity(1);
+  background('white');
+  grAPI = new GRAPI(space_uri, hf_token)
+  Draws = new DrawHandler();
+  AS = new AnimSys(12, 12, 30, 8);
+  
+  for (let i = 0; i < AS.initial_frame_nb; i++) {
+    AS.create_new_frame();
+    AS.display_frame(0);
+  }
+  
+  Cursor = new OrientedCursor('canvas');
+  Cursor.catchCursor();
+  
+  Pencil = new BrushPoint('pencil', 0, 0); 
+  brushesPoints.push(Pencil);
+  
+  
+  
+  canvas.mousePressed(function(){
+    Draws.startPath();
+  });
+  canvas.mouseReleased(function(){
+    Draws.endPath(Draws.drawGraphic, AS.frameGraphics);
+    Draws.drawings = [];
+    AS.update_frame();
+  });
+    
+} // END SETUP
+
+
+//-----------------------------------------------------
+//-----------------------------------------------------
+
+
+function mouseDragged(){
+  
+  Draws.mouseDragged(AS.frameGraphics);
+  
 }
 
+
+//-----------------------------------------------------
+//-----------------------------------------------------
+
+
 function draw() {
-  background(220);
-  textSize(32);
-  text(secret, 10, 30);
   
-}
+  //Draws.keydown_check();
+  
+  clear(); // clear the whole canvas
+  background('white'); // set main canvas background to 'white'
+    
+  if(Cursor.isOnCanvas == false){
+    Cursor.tiltX = 0;
+    Cursor.tiltY = 0;
+  }
+  
+  //MAP THE PRESSURE VALUE TO VISIBLE ONES
+  Cursor.mapPressure();
+    
+  Draws.get_new_current_path();
+
+  
+  // ANGLE WE ARE LOOKING FOR TO KEEP TRACK OF THE STYLUS TILT
+  Cursor.calculateAngle()
+        
+  
+  for (let i = 0; i < brushesPoints.length; i++) {
+      brushesPoints[i]
+        .calcPointCoordinates(mouseX, 
+                              mouseY, 
+                              Cursor.targetAngle, 
+                              Cursor.diameter
+                             );
+  }
+   
+  // DRAWS CURRENT PATH 
+  Draws.drawLines(0, 'black', 4, Draws.drawGraphic); // pencil
+  
+  //------------
+  
+  if(AS.isPlaying == false){
+    
+    if(AS.showOnions == true){
+   
+      image(AS.onionGraphics, 0, 0);  
+
+    }
+    
+  }
+  
+  image(AS.frameGraphics, 0, 0)
+  image(Draws.drawGraphic, 0, 0)
+  
+  push();
+    grAPI.hiddenScribbleGraphics.clear();
+    grAPI.hiddenScribbleGraphics.background('white');
+    grAPI.hiddenScribbleGraphics.image(AS.frameGraphics, 0, 0);
+    grAPI.hiddenScribbleGraphics.filter(INVERT)
+  pop();
+  
+  if(grAPI.show_diffused == true){
+    
+    image(grAPI.diffusedGraphics, 0, 0);
+  }
+  
+  if(Draws.isDrawing){
+  
+    //Cursor.showCursor(mouseX, mouseY);
+    
+  }
+  
+  // DISPLAY TECHNICAL DATA ABOUT THE CURSOR
+  //Cursor.showData();
+  
+
+} // END DRAW

public/style.css

@@ -0,0 +1,197 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    color: white;
+    font-family: monospace;
+  }
+  h1{
+    color: white;
+    font-family: monospace;
+    text-align: center;
+  }
+  
+  textarea{
+    resize: none;
+    outline: none;
+    overflow: auto;
+    border: none;
+    padding: 10px;
+    width: 408px;
+  }
+  textarea#prompt-inp {
+      /*border-top-left-radius: 6px;*/
+      /*border-top-right-radius: 6px;*/
+  }
+  
+  textarea#neg-prompt-inp {
+      /*border-bottom-left-radius: 6px;*/
+      /*border-bottom-right-radius: 6px;*/
+  }
+  button#show-hide-diff-btn {
+      border: 4px solid white;
+      color: white;
+      cursor: pointer;
+      background: none;
+      border-top-left-radius: 10px;
+      border-bottom-left-radius: 10px;
+      text-align: center;
+      height: 105px;
+      width: 105px;
+      margin-right: 3px;
+  }
+  button#api-btn, button#running-api-btn {
+      border: 4px solid white;
+      color: white;
+      cursor: pointer;
+      background: none;
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
+      text-align: center;
+      height: 105px;
+      width: 105px;
+      margin-left: 3px;
+  }
+  div.main-container{
+    display: flex;
+    justify-content: center;
+  }
+  div#left-panel, div#right-panel{
+    /*border: 1px solid white;*/
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    margin: 20px;
+    width: 100px;
+  }
+  i{
+    font-size: 30px;
+  }
+  span.spec-onions {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  span.spec-onions > i.fa-solid.fa-circle {
+    margin-left: -14px; 
+  }
+  button#hide-onion-btn {
+    border-color: #ef70ff !important;
+    color: #ef70ff !important;
+  }
+  button.tool-active {
+    border-color: #70c9ff !important;
+    color: #70c9ff !important;
+  }
+  
+  div#right-panel > button, div#left-panel > button{
+    background: none;
+    border: 4px solid rgb(181,181,181);
+    border-radius: 10px;
+    color: rgb(181,181,181);
+    cursor: pointer;
+    height: 70px;
+    margin-bottom: 10px;
+    text-align: center;
+    width: 70px;
+  }
+  
+  div#right-panel > button:hover, div#left-panel > button:hover{
+    color:white;
+    border-color:white;
+  }
+  
+  button#play-btn{
+    border: 4px solid #6bff6f !important;
+    color: #6bff6f !important;
+  }
+  button#stop-btn {
+    border: 4px solid #ff303b !important;
+    color: #ff303b !important;
+  }
+  div#timeline-ctn{
+    align-items: center;
+    /*border: 1px dashed white;*/
+    border-radius: 10px;
+    display: flex;
+    height: 60px;
+    justify-content: center;
+    margin: 4px 0;
+  }
+  div#canvas-ctn{
+    /*background: white;*/
+    /*border: 1px solid white;*/
+    /*border-radius : 10px;*/
+    /*padding: 20px;*/
+    /*width: 512px;*/
+  }
+  
+  canvas {
+    cursor: crosshair;
+    display: block;
+    border: 1px solid #dbdbdb;
+    border-radius: 6px;
+  }
+  
+  .aframe{
+    display: flex;
+    align-items: center;
+    color: black;
+    font-family: monospace;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    background: white;
+    border: 2px solid #ffffff;
+    border-radius: 20px;
+    cursor: pointer;
+    margin: 0 2px;
+  }
+  
+  .current-frame{
+    background: #ffcf1e;
+    border: 2px solid #ff9d0c;
+    color: #422700;
+    font-weight: bold;
+  }
+  
+  #timeline, #ui-container{
+    display: flex;
+  }
+  
+  div#ml-config-ctn{
+    display: flex;
+    width: 512px;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  
+  button#show-hide-diff-btn {
+      /*display: none;*/
+  }
+  
+  div#prompts-ctn {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+  }
+  
+  .hide{
+    display: none;
+  }
+  
+  i.fa-solid.fa-spinner{
+    animation: rotation .8s infinite linear;
+  }
+  
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }