public/sketch.js

// 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; 
let grAPI;
let space_uri;
let hf_tkn;
//-----------------------------------------------------
//-----------------------------------------------------

function preload(){
  const socket = io();
  // client-side
  socket.on("connect", () => {
    console.log(socket.id); // x8WIv7-mJelg7on_ALbx
    
  });
  
  socket.on("hello", (arg) => {
    
    space_uri = arg[0];
    hf_tkn = arg[1];
    
    grAPI = new GRAPI(space_uri, hf_tkn);
     
  });
}

function setup() {
  
  canvas = createCanvas(512, 512);
  canvas.id('canvas');
  canvas.parent('canvas-ctn');
  noLoop();
  pixelDensity(1);
  background('white');

  Draws = new DrawHandler();
  AS = new AnimSys(12, 12, 30, 4);
    
  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() {
  
  //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();

  if(Draws !== undefined){
    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)

  if(grAPI !== undefined){
    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