Created
June 8, 2024 05:56
-
-
Save n1ckfg/231e62c6a3988245663327408cdb0f30 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| background: black; | |
| } | |
| </style> | |
| <script src="https://unpkg.com/[email protected]/lib/p5.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/latk.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| let currentFrame = 0; | |
| let currentLayer = 0; | |
| let lastFrameOfAll = 0; | |
| let marktime = 0; | |
| const fps = (1.0 / 12.0) * 1000.0; | |
| let latk; | |
| let isPlaying = false; | |
| let clicked = false; | |
| let tempStroke = new LatkStroke(); | |
| function setup() { | |
| createCanvas(512, 512, WEBGL); | |
| initLatk(); | |
| noFill(); | |
| strokeWeight(4); | |
| } | |
| function initLatk() { | |
| latk = new Latk(init=true); | |
| currentFrame = 0; | |
| currentLayer = 0; | |
| setLastFrameOfAll(); | |
| } | |
| function setLastFrameOfAll() { | |
| lastFrameOfAll = 0; | |
| for (let layer of latk.layers) { | |
| if (layer.frames.length-1 > lastFrameOfAll) { | |
| lastFrameOfAll = layer.frames.length-1; | |
| } | |
| } | |
| } | |
| function deleteFromLatk() { | |
| try { | |
| latk.layers[currentLayer].frames[currentFrame].strokes.splice(latk.layers[currentLayer].frames[currentFrame].strokes.length-1, 1); | |
| if (latk.layers[currentLayer].frames[currentFrame].strokes.length < 1) { | |
| latk.layers[currentLayer].frames.splice(currentFrame, 1); | |
| changeFrame(-1); | |
| } | |
| if (latk.layers[currentLayer].frames.length < 1) { | |
| latk.layers.splice(currentLayer, 1); | |
| changeLayer(-1); | |
| } | |
| } catch (e) { | |
| initLatk(); | |
| } | |
| } | |
| function changeLayer(diff) { | |
| currentLayer += diff; | |
| if (currentLayer > latk.layers.length-1) { | |
| currentLayer = 0; | |
| } else if (currentLayer < 0) { | |
| currentLayer = latk.layers.length-1; | |
| } | |
| lastFrameOfAll | |
| } | |
| function changeFrame(diff) { | |
| currentFrame += diff; | |
| if (currentFrame > latk.layers[currentLayer].frames.length-1) { | |
| currentFrame = 0; | |
| } else if (currentFrame < 0) { | |
| currentFrame = latk.layers[currentLayer].frames.length-1; | |
| } | |
| } | |
| function mousePressed() { | |
| clicked = true; | |
| } | |
| function mouseReleased() { | |
| clicked = false | |
| console.log("@@@"); | |
| latk.layers[currentLayer].frames[currentFrame].strokes.push(tempStroke); | |
| tempStroke = new LatkStroke(); | |
| } | |
| function keyPressed() { | |
| if (latk.ready) { | |
| console.log(key); | |
| switch (key) { | |
| case "a": | |
| initLatk(); | |
| case "p": | |
| isPlaying = !isPlaying; | |
| break; | |
| case "f": | |
| latk.layers[currentLayer].frames.push(new LatkFrame(latk.layers[currentLayer].frames.length)); | |
| currentFrame = latk.layers[currentLayer].frames.length-1; | |
| setLastFrameOfAll(); | |
| break; | |
| /* | |
| case "l": | |
| latk.layers.push(new LatkLayer("layer" + latk.layers.length)); | |
| currentLayer = latk.layers.length-1; | |
| currentFrame = 0; | |
| latk.layers[currentLayer].frames.push(new LatkFrame()); | |
| break;*/ | |
| case "z": | |
| deleteFromLatk(); | |
| break; | |
| case "ArrowUp": | |
| changeLayer(1); | |
| break; | |
| case "ArrowDown": | |
| changeLayer(-1); | |
| break; | |
| case "ArrowLeft": | |
| changeFrame(-1); | |
| break; | |
| case "ArrowRight": | |
| changeFrame(1); | |
| break; | |
| } } | |
| } | |
| function draw() { | |
| background(0); | |
| if (latk.ready) { | |
| for (let layer of latk.layers) { | |
| for (let strokeObj of layer.frames[currentFrame].strokes) { | |
| stroke(255); //strokeObj.color[0] * 255, strokeObj.color[1] * 255, strokeObj.color[2] * 255); | |
| noFill(); | |
| beginShape(); | |
| for (let point of strokeObj.points) { | |
| x = point.co[0] - width/2; | |
| y = point.co[1] - height/2; | |
| z = point.co[2]; | |
| vertex(x, y, z); | |
| } | |
| endShape(); | |
| } | |
| if (layer.frames.length > lastFrameOfAll) lastFrameOfAll = layer.frames.length; | |
| } | |
| t = millis(); | |
| if (isPlaying && t > marktime + fps) { | |
| currentFrame++; | |
| if (currentFrame > lastFrameOfAll-1) currentFrame = 0 % lastFrameOfAll; | |
| marktime = t; | |
| } | |
| } | |
| if (mouseIsPressed) { | |
| tempStroke.points.push(new LatkPoint(co=[mouseX, mouseY, 0])); | |
| } | |
| stroke(255,127,0); | |
| beginShape(); | |
| for (let point of tempStroke.points) { | |
| x = point.co[0] - width/2; | |
| y = point.co[1] - height/2; | |
| z = point.co[2]; | |
| vertex(x, y, z); | |
| } | |
| endShape(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment