JSFiddle

Anthony's public fiddles

  • Raster Stuff - Just 2D Canvas - !webGL - more TBD

    Still Working on other things… Gradient Triangles from scratch = Bresenham (with modifications) + scan line (with modification) + colour LERP + a lot of tweaking… more to do, and I’ll of course have to clean it up as I go.

  • Default Math.sin vs custom Sin and Cos approx. techniques

    [note: operates better when run twice, or hit the refresh, as it takes a moment for the jit to optimize the calls]. I did this years ago in As3, so I wanted to see how well it would do in JS. I tried three custom functions: A MacLaurin/Taylor series and Bhaksara I’s approximation, and a lookup table. MacLaurin/Taylor series proved faster to be a good trade off for numeric resolution and speed, Bhaskara was fast but had the lowest resolution, and the lookup is a memory hog that can be very fast, but has limitations due to the size of the table effecting lookup, especially in js.

  • sRGB vs R’G’B’ (Move left or right to compare against different gamma)

    Testing out sRGB vs R’G’B’ transitions. sRGB is the result of distributing linear intensities over a curve, so it is perceptually linear. Linear RGB usually denoted as r’g’b’ represents the colours represented over actual linear intensities.

  • Simple Canvas Bar Graph & Wave Shake + Ghosting

    I needed a Bar Graph, so I took a few minutes and wrote a quick one. The colour palette is inspired by the Barbie movie. My gf made me watch it quite few times, and I'll admit she didn't have to twist my arm too hard. It’s bouncing through showing different sample rates after each bounce, of a generated wave I used as test data. Also added a little fadeout, ‘cause the aesthetics of old CRTs are interesting.

  • Simple Canvas Bar Graph & Wave Shake

    I needed a Bar Graph, so I took a few minutes and wrote a quick one. The colour palette is inspired by the Barbie movie. My gf made me watch it quite few times, and I'll admit she didn't have to twist my arm too hard. It’s bouncing through showing different sample rates after each bounce, of a generated wave I used as test data.

  • Project Euler 67 - Path of Greatest Value

    The site said 1 - 100 is okay to post, so, as I did a few recently in JS as practice, I figured I'd drop this one here. Such a simple problem, but this actually has all kinds of applications, and implications. An interesting way to think of it is like a bolt of lightening that is formed by the ground back to the root.

  • Dynamically adding/running/removing functions to/from a Worker

    This is a good starting point to understand how workers communicate with the main thread, and how to load functions

  • Project Euler 20 - Factorial Digit Sum

    Used this as both as a reason to do another Project Euler practice problem, and a means to show that switch case, or even If branching, is much much faster than parseInt, or using a dict/hash table. Also, posting the answers for questions 1 - 100 doesn't violate Project Euler's policy, so I'm posting my version here.

  • Fibonacci Comparisons

    Recursion O(N^2) vs iteration O(N) vs Matrix Exposition O(log n) with a cell fibonacci specific reuse optimization I noticed and implemented in my matrix squaring function m2x2PowFibOpt

  • Just JS - no GLSL : Colour Gradient Generator [update May 11 2022 ===> Testing Uint32Array version]

    [Update: New Bug makes Safari for newest IPadOs causes rendering glitch/crash when sample is too high...possible overrun? ...but works in every other browser, and the simple fix is reducing sample] Safari for IpadOS caps iframes at roughly 30 fps, if the iframe isn't in focus. Open the fiddle and tap on it, to see the Uint32Array version gets 200+ Fps (at least on my 4 year old IPAD), and 90+ fps full screen drawing all pixels. Of course, letting the GPU scale it up, although it uses a blur and doesn’t look as good, is of course much much faster. Try 2x2 or decrease the dimensions of the c.width / c.height to see what I mean. However, to get a good look and speed at the same time, just provided it enough sample to look good (10 to 20 should do it). The more sample you provide the GPU during it’s upsampling/interpolation, the better it looks. TLDR Less Sample = faster, but more sample = Better looking... happy medium is 10 to 20 px sampled

  • Hue Tints Shades, Colour Spectrum

    Used this as an example of how to use the transition RGB function in 2013, back when everyone was trying to do this with Sin/cos waves for some reason in AS3. Also, wrote it JS as doing this with css at the time was impossible, and colour math was kinda hidden from most people unless they'd done some signal/image processing. Anyways, this is the Hue, Tint and Shade spectrum, making further use of a transitionRGB function I wrote. First we get the Hue columns in the middle row, and then get the transitions from top colour to the hue, the hue to the bottom colour, and we draw each column

  • Into The Clouds : CSS Shape Drawing

    I think doing this in svg would have been a lot simpler, and reduced the css file a ton, but it was an assignment for a UI design class. Inspired by a toy/model WWII fighter plane. I did this for a pure CSS shape drawing assignment.

  • Colour Gradient & Transitions Generator 2013

    I originally wrote this in as3 in 2013 and ported it to JS to see how it would perform. As I wrote it in 2013, it works in most older browsers that at least have canvas, and it is useful when css is not being gpu accelerated and chugs. If you reduce the sample and let the browser/gpu scale the image, it goes at over 200 FPS. 2x2 doesn’t look great, but with more sample means higher fidelity when being upsampled (blurred / interpolated using a filter) by GPU during scaling, and thus it looks better. Drawing all frames is maybe 60 fps full frame samples with over a million pixels, but with low sample, and letting the gpu do most of the work, over 200fps. This was of course before editing with buffers became easier. In a fork you will see a newer version using Uint32Array that is much faster, but this, with just enough sample, also looks good and does the job pretty well.