File size: 3,545 Bytes
c2a5d87 49855d2 c2a5d87 af1ab17 70bffa6 c2a5d87 6e7533d 2a94396 e011964 67e3776 312b733 0205ab3 d8c0b14 e6e96e0 16438a9 312b733 16438a9 44904dc 5a4388e e6e96e0 c2a5d87 37febc7 44904dc 37febc7 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 159 160 161 162 163 |
// 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) => {
//console.log(arg)
space_uri = arg[0];
hf_tkn = arg[1];
console.log(space_uri)
grAPI = new GRAPI(space_uri, hf_tkn);
Draws = new DrawHandler();
AS = new AnimSys(12, 12, 30, 8);
});
}
function setup() {
canvas = createCanvas(512, 512);
canvas.id('canvas');
canvas.parent('canvas-ctn');
noLoop();
pixelDensity(1);
background('white');
canvas.mousePressed(function(){
Draws.startPath();
});
canvas.mouseReleased(function(){
Draws.endPath(Draws.drawGraphic, AS.frameGraphics);
Draws.drawings = [];
AS.update_frame();
});
Cursor = new OrientedCursor('canvas');
Cursor.catchCursor();
Pencil = new BrushPoint('pencil', 0, 0);
brushesPoints.push(Pencil);
for (let i = 0; i < AS.initial_frame_nb; i++) {
AS.create_new_frame();
AS.display_frame(0);
}
} // 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 |