Hacker Newsnew | past | comments | ask | show | jobs | submit | ianthehenry's commentslogin

The next chapter is about SDFs, but it is not available yet.

https://www.makingsoftware.com/chapters/rays-and-sdfs


Bonsai is a frontend framework that models data as an explicit graph, separate from any “component hierarchy” or DOM structure. State can live anywhere in the application graph, whether or not it’s associated with DOM nodes, and you eliminate all of the “move this state to the parent to share it” ceremony by just having “components” return their views and “outputs” at the same time (if they want).

It’s pretty great and hard to imagine going back to a React-like component hierarchy.


Oh nice, it's ML style, like elm.


I'm working on adding something like https://graphtoy.com/ to my lisp-based 3D art tool https://bauble.studio/. It's really useful to visualize functions like this, especially when writing animation curves that vary over time.

It's easy to add it as a plain overlay over the screen if you're graphing a function, but I really want it to be able to plot arbitrary expressions with free variables where it just infers the axes, so you can just see values overload in the orthographic view (press alt-q to see that). That way you can just write something like (ss p.x 0 10 | graph) on any expression and visualize it as you go. I haven't quite figured out how to make it seamless though...


I've seen Bauble before, although not sure where. Love your work


If this kinda thing piqued your interest and you want to play around with this idea, paste the following code into https://bauble.studio/:

    (def octaves 4)
    (def lacunarity 2.00)
    (def persistence 0.50)
    (def period 100)
    (def height 40)
    (plane y (fbm octaves :f lacunarity :gain persistence perlin p.xz period * height)
    # try s/color/shade on the line below
    | color (ss p.y -20 0 blue (ss p.y 0 20 green white))
    | slow (20 / height)
    | intersect (sphere 200))
(Using the terms from the article.) You can right-click and drag those numbers to see how the parameters affect the result in realtime. Also an easy way to compare perlin and simplex noise. Procedural terrain is fun!

Also while this uses 2D perlin noise -- you're just changing the height of a plane -- you can create some pretty detailed neat "rocky" terrain effects by using 3D perlin noise instead. Change "p.xz" to "p.xyz" to see what that looks like.


huh, that's no good. it works fine for me on safari 18.1. would you share the line that it's raising on? no other errors before that one?


No usable line, only a URL: https://ianthehenry.com/posts/bauble/building-bauble/bauble....

After that, is shows line number 1 and a column number in the millions, so seems to be megabytes of code in that JS file.

For each code box, I get two errors with the same URL, just different column numbers:

- TypeError: undefined is not an object (evaluating 'renderer.draw')

- Unhandled Promise Rejection: Error: failed to create webgl2 context

This is Safari 18.2 on Ventura (Intel), which seems to be a buggy release all around. Even the scroll bars are broken.


okay, that's helpful. the "undefined is not an object" bit is definitely a function of the "failed to create webgl2 context" error -- it tries to reference it unconditionally. no idea why it can't create the graphics context in the first place, though (and not much to do without one)


I ordered them from sculpteo — the only service I could find that would do it. Very happy with everything I’ve gotten from them. It is very very expensive if you want to make anything large, but for small jewelry-scale stuff it’s not too crazy. The balloon is seven custom parts so that was pricey ($250 total?), but the other two models were around $50 each.


That's surprisingly cheap for a one-off. Thanks, I will have to check them out.


It's complicated; Calvin Rose was the original creator of Fennel ("fnl"), but I understand it was just a little side project that he made over the course of a week or so in college. Phil Hagelberg found the project years later and thought it was cool, took over as its maintainer, and basically turned it into the Fennel you know today. So it's like, kind of, I dunno, both things are kinda true.


That's even more funny in the end, I thought GP was referring to Phil Hagelberg as creator of both, but they were referring to Calvin Rose as creator of both. Oops. Mystery solved.

Anyway - Fennel and Janet look very interesting, and a large thank you to everyone involved!


hi, i am the author of this book and i agree with you. it's not a good connotation. i chose it because: 1. it is kinda memorable (look there are so many programming books with exactly the same name) 2. the language is named after an immortal being who guides mortals through the afterlife in the fictional property the good place, so there's some kinda connection. but i agree the implication that janet is somehow "hard" to learn or that the author is somehow "on a higher plane" is bad. i waffled on this a lot but never came up with another title i could stand and ultimately just pulled the trigger. (but note that i left myself some wiggle room with a neutral domain name.) i hope the tone of the book itself helps to counteract the title, but ya know who knows


This isn't really a specific complaint about this book. Just triggered my thoughts on a general theme. Thanks for writing the book. I might look into it, as I'm generally interested in Lisp/Scheme-likes.


delete the contents of the script and then refresh — you’ve loaded an old version of bauble before and have the old tutorial cached in localStorage :/


Thanks! That did it.


https://bauble.studio/ is a programmatic 3D art playground that I've been working on for a while now, and I'm pretty excited about it! It's based around signed distance functions, which are a way to represent 3D shapes as, well, functions, and you can do a lot of like weird mathematical distortions and operations that give you cool new shapes. Like average two shapes together, or take the modulo of space to infinitely repeat something... it's a really fun and powerful way to make certain kinds of shapes.

SDFs are very cool in general, and widely used in the generative art communities, but kinda hard to wrangle when you're writing shader code directly. They really are functions, but GLSL doesn't support first-class functions, so if you want to compose shapes you have to manually plumb a bunch of arguments around. So Bauble is essentially a high-level GLSL compiler that lets you model SDFs as first-class values, and as a result you can make a pretty cool 3D shape in just a few lines of code. And then 3D print them!

I need to do some actual work to promote and publicize it once I'm done with the documentation and implement a few more primitives, but it's very close!

The docs have lots of examples of the sorts of things you can do with SDFs: https://bauble.studio/help/

And for examples of some "art" that I've made with it recently:

https://x.com/ianthehenry/status/1839061056301445451 https://x.com/ianthehenry/status/1839649510597013592 https://x.com/ianthehenry/status/1827461714524434883


I really want to look at your art but it’s on twitter so I can’t!


oh yeah good point. i probably shouldn't link to that anymore. it's all on mastodon too! https://mastodon.social/@ianthehenry


Thank you, I really like the default tutorial how one can play with it. Is it possible to visualize data with this?


Depending on the data, maybe? SDFs aren't great at rendering large numbers of enumerated objects -- something like a point cloud would be prohibitively expensive, so I wouldn't think to use them for like traditional graphing.


this is really great: https://mastodon.social/@ianthehenry/113223607547344491

How did you do it? Whats the shading factor?


Thanks! Here's the source:

    (color r2 (vec3
      (fbm 8 :f (fn [q] (rotate (q * 2) (pi * sin (t / 100)) + [t 0]))
        (fn [q] (cos q.x + sin q.y /)) q (osc t 30 30 10) | remap+)))
Basically taking the function (1 / (cos(x) + sin(y))) and adding it to itself 8 times, each time scaling and rotating the input a little more (:f).

I'm curious if it looks the same on all GPUs because it kinda relies on floating point precision errors to give it that film-grainy textured effect. And it definitely divides by zero sometimes.


I think this is awesome and have already sent to a few people


hey thanks!


FYI, the default file errors out!


So if you've ever loaded Bauble before you might have a stale and no-longer-working version of the tutorial cached in localStorage -- if you just clear out the script and refresh it will restore the default one. If that's still erroring, please let me know!


Not OP, but I've aso loaded Bauble before, and clearing localStorage didn't help (Firefox, macOS)...

(torus :z 60 30 | twist :y 0.07 | rotate :pi :y t :z 0.05 | move :x 50 | mirror :r 10 :x | fresnel | slow 0.25)

error: script:16:1: compile error: unknown symbol twist

  in evaluate [lib/evaluator.janet] on line 81, column 7

  in bauble-evaluator/evaluate [lib/init.janet] on line 8, column 12


Oh yeah if you clear localStorage like from dev tools, Bauble will re-save the script before refresh, putting it right back where it was. But if you like cmd-a backspace to empty the contents of the script and then refresh it’ll load the default.


Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: