[HN Gopher] The DDA Algorithm, explained interactively
___________________________________________________________________
The DDA Algorithm, explained interactively
Author : ibobev
Score : 90 points
Date : 2025-04-01 04:59 UTC (4 days ago)
(HTM) web link (aaaa.sh)
(TXT) w3m dump (aaaa.sh)
| amjoshuamichael wrote:
| Original author here. I've been reading this website for years.
| Imagine my shock when I saw my own article on the front page! I'm
| glad people are enjoying it.
|
| Quick fact about the way the interactivity is done, all of the
| code for it is in this blogpost.js file:
| https://aaaa.sh/creatures/blogpost.js, which is only about 100
| lines long. Each block has a list of scripts that it pulls from
| like so:
|
| <div class="code-example" scripts="grid-sm 2d-vector-gfx-lib
| draw-grid full-algo-intro feather-canvas-edges"></div>
|
| and then there's a set of script tags with those ids. I figured
| it was a nice solution!
| dndn1 wrote:
| Really pretty outputs! And impressive that the code is shown so
| elegantly and also interactive.
|
| This algorithm is one I use to demo some features in a language
| I'm making called calculang [0][1] I like the way you step
| through the logic.
|
| My only suggestion would be to include a raycasted scene
| because you can really grab a wide(r) audience (and I'd love to
| see how you get to voxel scenes!).
|
| Either way - thanks for adding a neat new resource for this
| algorithm and I'm definitely taking notes Re your clean
| presentation of the details!
|
| [0] https://next-calculang-gallery.netlify.app/raycasting
|
| [1] https://www.youtube.com/watch?v=hKVXRACCnqU
| amjoshuamichael wrote:
| Haha, I don't know why I didn't think to include a raycast
| scene, especially since that's what I was using the algorithm
| for!! Glad you liked it.
| davidanekstein wrote:
| Great job, thanks for breaking it down the way you did
| MrMcCall wrote:
| That's just really fantastic. Well done, indeed.
| jasonjmcghee wrote:
| This is great. You should add an og:image / social image using
| one of the interactive bits to help with sharing on other
| platforms / discord etc!
| Surac wrote:
| What language is the sample written in? It is really hard to read
| for a C guy like me
| amjoshuamichael wrote:
| JavaScript! It's not perfect, but it's the easiest language to
| run in the browser :)
| Surac wrote:
| Ok I see. Making it work in a browser sure is a benefit
| magicalhippo wrote:
| The color scheme didn't help for me, some really low contrast
| colors like for parentheses.
|
| But nice otherwise, interactivity is great.
| grg0 wrote:
| Good website/visualization, but I think the implementation can be
| improved. If I remember correctly, one of the strengths of DDA is
| that it works out entirely with integer math. I think you get
| there by multiplying out the denominators. Seeing that this
| implementation involves sqrt(), it probably has room for
| improvement.
| jrdres wrote:
| Oh, this is DDA, not Bresenham, for lines.
|
| An interesting point about Bresenham's algorithm is made by David
| Schmenk (dschmenk) on his "Bresen-Span" page:
|
| "Take note that the algorithm can be viewed as the long division
| of delta-major/delta-minor. The error term is really the running
| remainder, and every step results in a pixel along the major axis
| until the division completes with a remainder. The division
| restarts by moving along the minor axis and adding the dividend
| back in to the running remainder (error term). This is a bit of a
| simplification, but the concept is that the long division will
| only result in two integral spans of pixels, depending on the
| value of the running remainder (error term). We will take this in
| to account to write a routine that outputs spans based on the two
| span lengths: a short-span and a long-span."
|
| In other code, dschmenk does use DDA for anti-aliased lines.
|
| https://github.com/dschmenk/Bresen-Span
___________________________________________________________________
(page generated 2025-04-05 23:01 UTC)