Sylvain Filoni
added anim sys files
c2a5d87
raw
history blame
3.44 kB
// 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
socket.on("connect", () => {
console.log(socket.id); // x8WIv7-mJelg7on_ALbx
socket.on("hello", (arg) => {
//console.log(arg)
const space_uri = arg[0];
const hf_tkn = arg[1];
});
});
}
function setup() {
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() {
//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