cdejs
Version:
CanvasDotEffect is a lightweight JS library that helps create customizable and interactive dot-based effects using the Canvas API
2 lines • 4.88 kB
JavaScript
#!/usr/bin/env node
import{mkdirSync,copyFileSync,writeFileSync}from"fs";import{join,dirname}from"path";import{fileURLToPath}from"url";import{createInterface}from"readline";import{exec}from"child_process";const destination=join(process.cwd(),process.argv[2]||""),mediaDest=join(destination,"medias"),libPath=join(dirname(fileURLToPath(import.meta.url)),"../canvasDotEffect.min.js");try{mkdirSync(destination,{recursive:!0}),mkdirSync(mediaDest)}catch{}copyFileSync(libPath,join(destination,"canvasDotEffect.min.js")),writeFileSync(join(destination,"index.html"),'\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Template</title>\n <link rel="stylesheet" href="index.css">\n</head>\n<body>\n \n <div class="canvasHolder">\n <canvas id="canvasId"></canvas>\n </div>\n\n <div class="debug">\n <span id="fpsDisplay"></span>\n <span id="mouseInfo"></span>\n <span id="mouseSpeed"></span>\n <span id="mouseAngle"></span>\n </div>\n \n <script src="canvasDotEffect.min.js"><\/script>\n <script async src="index.js"><\/script>\n</body>\n</html>'),writeFileSync(join(destination,"index.css"),"html, body {\n background-color: black;\n overflow: hidden;\n color: aliceblue;\n margin: 0;\n width: 100%;\n height: 100%;\n}\n\n.canvasHolder {\n width: 98%;\n height: 88%;\n border: 2px solid aliceblue;\n user-select: none;\n}"),writeFileSync(join(destination,"index.js"),'const {CDEUtils,FPSCounter,CanvasUtils,Color,Render,TextStyles,RenderStyles,Canvas,Anim,AudioDisplay,ImageDisplay,TextDisplay,Pattern,Shape,Gradient,FilledShape,Grid,Dot} = CDE\n\nconst _ = null, fpsCounter = new FPSCounter(), CVS = new Canvas(document.getElementById("canvasId"), \n ()=>{// loopingCB\n\n // Debug infos\n const fpsValue = fpsCounter.getFps()+" "+fpsCounter.fpsRaw\n if (fpsDisplay.textContent !== fpsValue) fpsDisplay.textContent = fpsValue\n mouseSpeed.textContent = CVS.mouse.speed?.toFixed(2)+" px/sec"\n mouseAngle.textContent = CVS.mouse.dir?.toFixed(2)+" deg"\n }\n)\n\n// Canvas objects declarations \nconst demoShape = new Shape(CVS.getCenter(), [new Dot([-50, -50]),new Dot([-50, 0]),new Dot([-50, 50]),new Dot([0, -50]),new Dot([0, 50]),new Dot([50, -50]),new Dot([50, 0]),new Dot([50, 50])], _, _, 100,\n (render, dot, ratio)=>{// drawEffectCB\n \n // Changing the dot\'s radius from 50px down to 80% of 50px (range of 50px..10px), according to the mouse distance\n dot.radius = CDEUtils.mod(50, ratio, 50*0.8)\n \n // Drawing a ring around the dot\n CanvasUtils.drawOuterRing(dot, [255,255,255,0.25], 1)\n\n }, _, (shape)=>{// setupCB\n\n // Adding a rotation and scale animation\n shape.playAnim(new Anim((prog, i)=>{\n const adjustedProgress = i%2 ? prog : 1-prog\n \n shape.rotateAt(360*prog)\n shape.scaleAt([1+adjustedProgress*2, 1+adjustedProgress*2])\n }, -7500, Anim.easeInOutQuad))\n\n // Creating a pattern that will get duplicated for each dot of demoShape ((↓) set the "positions" parameter to the area containing all the dots)\n new Pattern(CVS.render, "./medias/coolBackground.mp4", demoShape.getBounds(50, 0, [3, 3]), _, true, true, _, \n ()=>{// errorCB\n // If there is an error loading the file, set color to grey\n demoShape.setColor([255,255,255,0.25])\n },\n (pattern)=>{// readyCB\n // Once the video is loaded, set the shape2\'s color to the value of the pattern\n demoShape.setColor(pattern)\n \n // Speed up the video to 3x speed\n pattern.playbackRate = 3\n }\n )\n })\n\nCVS.add(demoShape)\n\n\n// Event listeners\nlet mouseMoveEvent=(mouse)=>mouseInfo.textContent = "("+mouse.x+", "+mouse.y+")" // debug info\nCVS.setMouseMove(mouseMoveEvent)\nCVS.setMouseLeave(mouseMoveEvent)\nCVS.setMouseDown()\nCVS.setMouseUp()\nCVS.setKeyDown(_, true)\nCVS.setKeyUp(_, true)\n\n// Start drawing loop\nCVS.start()'),fetch("https://file-examples.com/storage/fe9a194958686838db9645f/2017/04/file_example_MP4_480_1_5MG.mp4").then((e=>e.ok&&e.arrayBuffer())).then((e=>e&&writeFileSync(join(mediaDest,"coolBackground.mp4"),Buffer.from(e)))),console.log("CDEJS browser project template successfully created at '"+destination+"'!\n");const cli=createInterface({input:process.stdin,output:process.stdout});function close(e){e.close(),console.log("")}cli.question("Open in explorer [Y/N]? ",(e=>{const n=e?.toLowerCase()?.trim();"code"==n?exec("code --new-window "+destination):n&&!["y","yes","ye","ok","for sure"].includes(n)||exec("explorer "+destination),close(cli)})),process.stdin.on("keypress",((e,n)=>{"escape"==n.name&&close(cli)}));