|
|
|
|
|
|
|
|
|
|
|
let canvas; |
|
let Cursor; |
|
let AS; |
|
let Draws; |
|
let Pencil; |
|
let brushesPoints = []; |
|
let show_diffused = false; |
|
|
|
|
|
|
|
|
|
|
|
function preload() { |
|
const socket = io(); |
|
|
|
socket.on("connect", () => { |
|
console.log(socket.id); |
|
socket.on("hello", (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(); |
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
function mouseDragged(){ |
|
|
|
Draws.mouseDragged(AS.frameGraphics); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
function draw() { |
|
|
|
|
|
|
|
clear(); |
|
background('white'); |
|
|
|
if(Cursor.isOnCanvas == false){ |
|
Cursor.tiltX = 0; |
|
Cursor.tiltY = 0; |
|
} |
|
|
|
|
|
Cursor.mapPressure(); |
|
|
|
Draws.get_new_current_path(); |
|
|
|
|
|
|
|
Cursor.calculateAngle() |
|
|
|
|
|
for (let i = 0; i < brushesPoints.length; i++) { |
|
brushesPoints[i] |
|
.calcPointCoordinates(mouseX, |
|
mouseY, |
|
Cursor.targetAngle, |
|
Cursor.diameter |
|
); |
|
} |
|
|
|
|
|
Draws.drawLines(0, 'black', 4, Draws.drawGraphic); |
|
|
|
|
|
|
|
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){ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |