This is a personal blog, please observe Think Hour for ad hoc quasi-diary writings and Big Ideas for my ratified longform items. I will see you there.


2020-10-21


code

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.

code dictionary

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.

Animating on a Canvas // Javascript

laugh-o-gram studios

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.

canvas

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 .

The method tells the viewing device/browser (“window”) that there exists a function producing animated content and as such the function needs to be ran through and thus its products or variables updated before the javascript repaints the page (repaint is a more superficial version of reflow, where the page is updated to show some change, the changes will not change the fundamental layout/DOM of the page - such as an animation contained within a Canvas element). This “callback” has the animation refreshing at the same rate as the viewing displays refresh rate as given by the browser. For example 60hz or in our terms 60FPS. There is no setInterval() to alter this here.

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.

some graph regarding frames and callback

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:

I think much of my regurgitation here is probably wrong or at least useless even as reference for myself. I’ve spent the better part of an hour manifesting it though, so I will leave it. There’s some beautiful documentation provided by “javascriptkit.com” that I will be enjoying as I use this method or callback function some more.

Data Lakes & Tributaries // PageCDN

thats a network

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.

thats an old network

The answer is of course by referring to a CDN source for the library in a .js that uses it, a page or the site as a whole. This rather than a directory local to the hosted website, but I guess you could also host it, I don’t really know if thats a good idea or not. A CDN being a network distributed all over the place, offering commonly used assets and components as well as being used to deliver most parts of websites that are international in scope, sort of like the warehouses and sorting facilities Amazon has all over the world for their physical asset delivery. While it seems strange that a company might own and/or control such a large network and offer access to things like javascript libraries for free, I have to assume it can be very profitable to have many relying on your (potentially eventually paid) services and to have a bigger web of interactions. This topic is illustrated well in this 10 year old article.

This is an example of the Network effect. The more people that use a system the more valuable the system becomes… JavaScript Library CDNs seem like a performance no brainer. Use the service, your site loads faster and consumes less bandwidth.

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.