File size: 3,539 Bytes
c2a5d87 49855d2 c2a5d87 af1ab17 70bffa6 c2a5d87 6e7533d 2a94396 e011964 a74a68a e011964 a74a68a 67e3776 1306634 04dbc07 85ae5b0 0205ab3 d8c0b14 04dbc07 7299658 28c468b 44904dc a74a68a 0d486c9 a74a68a 5a4388e 04dbc07 a74a68a 04dbc07 c2a5d87 48e84aa c2a5d87 48e84aa c2a5d87 db63cf0 c2a5d87 04dbc07 c2a5d87 04dbc07 c2a5d87 04dbc07 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 159 160 161 162 163 164 165 166 167 168 |
// 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 |