Off top there’s something I have to discuss with myself. I decided, impulsively, to switch to using VS Code to write my posts. There will be further documentation of my thinking in subsequent Long-Posts a.k.a Big Ideas, but it’s worth noting that I just wasted 50 minutes trying to figure out almost solely how to get a preview of markdown writings going that utilizes a custom CSS.
The root of my problems ended up being that I keep my work in progress posts and other auxiliary files related to the blog outside of the working directory, and VS Code does not allow your custom CSS being utilized if it’s stored outside of the working directory of the project you have open. Everything else was fine (using sass to convert the CSS, reading through the docs on using VS Code for markdown etc). I guess this will all tie into the eventual consolidation of the entire process of web-log update: scripting transfer of completed posts and assets, generating tags and committing to gitHub.
I have just installed a spell checker. This is quite poorly implemented and I have to wonder if I am making a mistake in using VS Code to type up posts. Maybe I shouldn’t do this or maybe there’s something I’m missing, but the spell check (something I definitely need) extension seems poorly implemented (can’t right click and select a correction, can’t add to dictionary). Hold on, are you seeing this? I have changed to an extension that’s actually much better. Continue.
I am flexing my muscles with the programming by making a discord chat bot that has some fun commands. For one set I am making use of Canvas, a very powerful tool for harnessing JS to draw graphics. You can do so much with it I don’t know where to even start and so I’m just not going to.
It is basically a given that there’s going to be delay and frustration in testing a discord bot in-context. You provide a command, the bot processes it and returns something. Once you factor in use of Canvas and especially utilization of encoding to .gif files to be able to return animated Canvas creations in a discord chat, you are looking at significant delays and off-screen (this is all happening in the node.js void rather than drawn to a HTML website) unknowns. Long story short I wanted to take the script and put it into a web format for much quicker testing, modification, improvement and overall creation of these animation presets.
I tried a few different ways of doing this, eventually deciding to try it through SoloLearn in their beautiful code playground. The main issue I came across is that as part of the nature of the discord code, there is an offset/interval brought about (happily and accounted for within the animation) by gifencoder whereas on the web, the modern and efficient “Window.requestAnimationFrame()” method does not immediately present a time interval control like this, as it is by design looking to run through the and update the animation as fast as it can, serving the drawing as smoothly as possible and will simply drop frames rather that force through them or compensate, so controlling how it runs is a bit more .
In translating my animation into this web environment, I re-arranged a forloop into an incrementing if statement and changed the magnitude of the variable that was formerly the control of the for loop, and was thus incorporated throughout the animation itself. Originally my animation was running at 20fps, so I divided the variable by three and everything worked nicely. At this point I’ve forgotten exactly what the point of typing out this inane process was, but I know I’m interested in this request animation frame method.
I had found a very verbose and cool post on stackoverflow and I’d like to parse it. The author, Mr. Blindman67, covers more than a few things that help elucidate the nature of the method:
- The function offers a very accurate time argument for use when animating, at a much higher resolution than traditional Date time.
- Animating based on time passing, “delta time”, is bad when you bring varying processing times and unreliable delivery into play causing frame rate changes rather than lower frame rate.
- To achieve a perfectly smooth animation it needs to render frames in under 16ms, and rather than using change of time to effect the animation itself to achieve smoothness, use it to drop frames.
- Something about “animation noise”, which I interpret as introducing extra influences in the animation and changing the result, the road to a messy animation being paved with smooth intentions.
Data Lakes & Tributaries // PageCDN
In looking at this canvas animation stuff, as well as creative coding, I had to fulfill my task of looking into how including such things inside blog posts on this site might work. Using some simple JS is easy enough by including the .js assets in the directory and calling them up inside the HTML, but what about more advanced and sizable libraries? I am really excited to use p5.js in recent days.
There’s many libraries offered for free by Page CDN including Bootstrap and many extensions thereof. It looks like they offer p5.js too, so that’s great. Very interesting stuff here, lots of cool things that you could access without worrying about hosting.