Show HN: Bitwise Liminal – A Short Film in 256 Bytes of Code

(killedbyapixel.github.io)

450 points | by KilledByAPixel 13 days ago

30 comments

  • clemiclemen 12 days ago
    This is impressive and actually looks like a real movie scene. And to think this only fits in 256 bytes makes you rethink how bloated the things we are using everyday are and also how powerful current browsers are.

    I am however more impressed by the 8K demos such as "the Sheep and the Flower" [1] which was shared on HN recently or "One of those days" [2] which is a remake of an actual Youtube video [3] (granted not exactly the same video by the second but the style is immediately recognizable). They are way bigger than this 256 bytes movie but convey a lot more graphics and story.

    [1]: https://news.ycombinator.com/item?id=39121101

    [2]: https://www.pouet.net/prod.php?which=75790 and YouTube video: https://youtu.be/8T_Um-cw0Wc

    [3]: https://www.youtube.com/watch?v=R1NagZN2kjY

  • phs318u 12 days ago
    Is there an annotated version breaking down each part of this for us lesser mortals?
    • cal85 12 days ago
      I've had a stab at decompressing the code by hand, adding comments and meaningful var names where possible. I still don't understand the maths in it...

      https://github.com/callumlocke/bitwise-liminal-expanded

      • gigabates 12 days ago
        Looks like the maths is a kind of raymarching loop if you want to read up on it.
      • junon 12 days ago
        Just a guess, the speedup is probably due to you caching the 2d context.
  • dang 13 days ago
    Recent and related:

    Cross My Heart – A Frogger Demake in 256 Bytes of HTML/JS - https://news.ycombinator.com/item?id=39336677 - Feb 2024 (44 comments)

    Normally we downweight follow-up submissions (see https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...) but since (a) the submitter is the author in this case, and (b) the work is amazing, I've made it a Show HN instead (per https://news.ycombinator.com/showhn.html) and left it up.

  • imaginationra 12 days ago
    If this is a "short film" then you just read my new novel.
    • bsza 12 days ago
      You could replace "t+=.1" with "t+=.01" and 9986 with 9e3, then you'll have a ~45 second loop still within 256 bytes, though a bit of the bottom part of the screen will be cut off.
  • javajosh 13 days ago
    A minor note: this is the first time I've seen an svg embedded in a canvas purely for it's onload event. Within this context the canvas is referred to by its (bare) id. How strange and wonderful!
    • KilledByAPixel 13 days ago
      It turns out that packing it into an svg onload is a tiny bit smaller then using a script tag!

      It is possible to save a little more space by putting it in the canvas onclick event.

    • cdelsolar 13 days ago
      Why is that allowed? I didn’t realize one could do that in js.
      • cal85 12 days ago
        If you nest any valid elements inside an unknown element like <asdf>...</asdf>, browsers just ignore the invalid wrapper element but still display the nested children. This fact is exploited by spec authors when introducing new tags to allow backwards compatibility: elements like canvas, video and audio all specifically allow optional children that are automatically hidden - but they won't be hidden in older browsers that don't know about the new elements. This allows you to easily define arbitrary fallback content for older browsers that don't support the new elements, just by nesting children in them.
    • kilroy123 13 days ago
      I noticed and thought the same! Pretty cool.
  • zeroq 13 days ago
    I can't stress enough how much I admire that it is true 256 bytes, instead of usual 1k game jams, where submissions are presented as zipped, gzipped, and postfixed, and not including assets to fit the criteria.

    Hats off.

    • Hikikomori 13 days ago
    • KilledByAPixel 13 days ago
      thank you! it is a crazy challenge that is just shy of being impossible that seems like magic when it actually works.
    • lifthrasiir 12 days ago
      > [...] where submissions are presented as zipped, gzipped, and postfixed, [...]

      Well, you can always include a decompressor in your entry. PNG bootstrap has been popular enough in the JS demoscene for a long time and it starts to be effective for 1K or larger demos. There are other alternatives for smaller sizes, and 256B demos just happen to be too small to put any kind of decompressor in general.

      > [...] and not including assets to fit the criteria.

      I do agree on this aspect though.

    • rvba 13 days ago
      Is "import gameassets" allowed in those competitions?

      On a side note "import GOTO" works in python :)

      • selcuka 13 days ago
        > On a side note "import GOTO" works in python :)

        Never heard of this, and it doesn't work on my interpreter (tested with both 2.7 and 3.11). Are you sure it's not a third party package?

  • john-tells-all 13 days ago
    Their work is always jaw-dropping. Here is some explanation of the tools they use: https://frankforce.com/tools/

    And here's their work on the micro animation blog Dwitter: https://www.dwitter.net/u/KilledByAPixel

    Youtube explanation: https://www.youtube.com/watch?v=HV7Dmo277Rs

    • Timwi 12 days ago
      That “YouTube explanation” doesn't actually explain how any of the Dweets work. Don't get me wrong, his work is amazing, I loved seeing it and I'm excited to listen to him show it off; I'm just saying that anyone looking for a detailed walkthrough of how any of it works, that video will disappoint.
  • sowbug 13 days ago
    Stuff like this makes me believe that the entirety of life really could be encoded in DNA. I've read that if you gzipped the human genome, the file would be about 4MB, which intuitively seems too small to represent a human. But if this behavior can emerge from 256 bytes, then clearly my intuition is off.
    • ToValueFunfetti 12 days ago
      4MB are enough to discriminate between 2^(3.2 * 10^7) possible states. Suppose you have a decompressor that can interpret a percent of a percent of a percent of a percent of those states as functional lifeforms. There are about a trillion species on the planet[1]; let's say there are a trillion times as many potential species that don't currently exist and a trillion variations within each. And then let's multiply by another trillion for good measure. Wolfram Alpha tells me[2] we've left a margin of error of roughly* ten to the ten million.

      [1]https://www.nsf.gov/news/news_summ.jsp?cntn_id=138446

      [2]https://www.wolframalpha.com/input?i2d=true&i=Divide%5BPower...

      *'roughly' in the sense that a mountain range is roughly coarse sandpaper, but too round not to round to

      • adtac 12 days ago
        Even a SHA-256 hash would leave 10^31 margin of error. The "percent of a percent of a percent of a percent" part is sweeping a lot under the proverbial rug here ;)
    • ivan_ar 13 days ago
      Is a misconception that DNA is enough by itself to replicate a living being, there are biological bases in the embryon that need to be pass down from the parent as biological infraestructure for the new being to form.
      • sowbug 13 days ago
        You're absolutely correct, just as you'd be correct to observe that these 256 bytes require a fairly complex software platform running on fairly complex hardware.

        And all these things, including us, operate within the fabric of the universe, whose complexity is only beginning to be understood.

      • GuB-42 12 days ago
        But in theory, would it be possible to genetically engineer a simple life form, like a bacteria, to eventually produce a human, in a process similar to the kind of metamorphosis you see in insects. Of course, this the bootstrapping code would take quite some space, but if we could do that (at least in theory), it essentially means that all you need to make practically any living being is a single generic cell and a few megabytes worth of data encoded as DNA.

        I mean, when we get infected by a virus, our cells are able to produce a completely different life form (if you consider viruses life forms), so why not going from a bacteria (which can also be infected by viruses) to a mammal. It will obviously take a lot more code, and evolution can't get us there, but the idea is similar.

    • kweingar 12 days ago
      You may be interested in an article posted to HN a few days ago that argues against the conception of DNA as code and of cells as computers or machines.

      https://www.nature.com/articles/d41586-024-00327-x

    • smokel 12 days ago
      Life generated from DNA in a vacuum would probably be pretty boring. The entirety of life requires some surroundings to interact with, and as it stands there is but one of those, and singular things don't compress well.

      Also, have a look at the Mandelbrot set again. There's quite a lot of information in, arguably, a very modest process.

      And finally, to suggest that these 256 bytes are less impressive than they are, consider what hardware and software is needed to support it. These 256 bytes would not lead to the same illusion on a C64.

      • teddyh 12 days ago
        > There's quite a lot of information in, arguably, a very modest process.

        But quite low in Kolmogorov complexity.

    • Aspos 13 days ago
      It could be a 4 megabyte-long seed for a random generator.
  • iszomer 12 days ago
    This made my 5560U ramp it's sysfan up 100%. :-)
  • mapreduce 12 days ago
    Can someone explain to me what are we seeing in the short film? I see some black and white animation with boxes moving and some noisy lines on it. But I'm not sure I understand what it means. Anyone can help me understand?
    • spartanatreyu 11 days ago
      That IS the film.

      What's remarkable about it is how small the file size is.

      It's 256 bytes!

      To explain how impressive that is, the entire film itself is about 58 times smaller than a screenshot of the film's first frame. You could fit the entire film on a 1.44mb floppy disk over 5000 times and still have some space left over.

      How?

      Normally, videos are made up of a series of images with some information in between that says which part of an image goes where.

      But this film contains no image data. It only has some math for drawing boxes at different brightnesses at different times.

      • adammarples 11 days ago
        And if you want boxes of different brightnesses then boy is it a good movie
  • sebastianconcpt 13 days ago
    Cyber-hallucinogenic cryptopoetry.
  • gpderetta 13 days ago
    Fantastic.

    Also this would be perfect as an SCP.

  • zokier 13 days ago
    Reminds me a bit of Megapole (another 256b demo) https://www.youtube.com/watch?v=Z8Av7Sc7yGY
  • zokier 13 days ago
    You'll want to put the code in code block (prefix line with spaces) so asterisks don't get mangled
  • asadhaider 13 days ago
    The author has more content at https://killedbyapixel.github.io/TinyCode/
  • naniwaduni 13 days ago
    TIL that elements with ids are exposed as global variables in JS.
  • lingeringdoubts 13 days ago
    You can add image-rendering: pixelated on the canvas element to remove the blurring. Mind you, that may be an intentional effect.
  • layer8 12 days ago
    I wonder how small the SVG spec could be golfed for this program to still work.
  • swayvil 12 days ago
    The first interdimensional probe returned. The universe next door is minecraft.
  • actionfromafar 13 days ago
    Thank you, I lost it in a move ages ago!
  • nickdothutton 12 days ago
    Very J G Ballard. Nice work.
  • riidom 13 days ago
    Nice visual style!
  • cal85 13 days ago
    What the fuck. How?
    • Retr0id 13 days ago
      Ray marching, most likely.
      • KilledByAPixel 13 days ago
        Yes, this raymarching, though the vhs effect was really the trickiest part.
    • notso411 13 days ago
      [dead]
  • lxe 12 days ago
    Love seeing demoscene on HN. Excellent work.
  • bloqs 13 days ago
    Neat
  • Linda231 12 days ago
    [dead]
  • Donaldbendo 12 days ago
    [flagged]
  • Williams77 12 days ago
    [flagged]