File size: 3,451 Bytes
c2a5d87 49855d2 c2a5d87 af1ab17 70bffa6 c2a5d87 9612cc4 eee864a c2a5d87 cb8b0a0 2a94396 b7de808 2a94396 b7de808 2a94396 c2a5d87 48e84aa c2a5d87 48e84aa c2a5d87 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
// 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 setup() {
canvas = createCanvas(512, 512);
canvas.id('canvas');
canvas.parent('canvas-ctn');
noLoop();
pixelDensity(1);
background('white');
const socket = io();
// client-side
socket.on("connect", () => {
console.log(socket.id); // x8WIv7-mJelg7on_ALbx
socket.on("hello", (arg) => {
console.log(arg[0])
space_uri = arg[0];
hf_tkn = arg[1];
grAPI = new GRAPI(space_uri, hf_tkn);
});
});
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 |