Show HN: Make a video of any word forming out of candy | Hacker News Reader

Show HN: Make a video of any word forming out of candy

customanim.com

101 pointsbemmu44 comments

Thanks to Captain Disillusion I know how this is done (obvious in hind sight, but cool to learn):

The movement of the marbles is pre-rendered and you can color the marbles in the end result right so at the beginning the distribution looks random, but everything falls perfectly into place.

Ah, the whole work backwards trick.

For those not aware Captain Disillusion is an impressively well produced youtube series mimicking the vibe of 90's kids TV, but for an adult audience. The Captain uses Blender for the 3D effects in his videos, and did a great presentation at the Blender conference last year [0].

The type of effect used to create these candy words is covered in the "Marble Sorting Machine" video https://www.youtube.com/watch?v=em-pVICrnqM

[0] https://www.youtube.com/watch?v=1qSTcxt2t74

I would cache the default animation. You’re doubtlessly getting hammered by folks just running it (like me) to see what it looks like, only to get stuck waiting for a GPU slot to render the same word again and again.

Yes. 90% of people are going to render Hello without changing text.

Click on "example animation" to get this https://www.youtube.com/watch?v=AyWqcY_oyo4

Right, but that doesn't solve the UX problem. If you try to render hello, it should just go to that video.

Thanks, I added that in.

I love that not only does it work with emoji, but it gets the colors of the emoji correct.

From "There are 16 jobs ahead of yours", to (eventually)

"There is 1 job ahead of yours"

"Lost connection to server, please try again in a bit."

Ouch.

I'm sorry.

I was running out of memory on the queue server, so had to restart the server many times while fixing it.

Instead of caching all the render results in memory, they are now being served from disk instead, which should solve the issue.

>> I'm sorry.

No need to be sorry, believe me I understand how hard it is to build something like this. You are to be applauded for doing something both fun and hard.

Super excited to see results but reporting same issue just now...

And fixed, thank you this is great fun! Font choice possible?

Nicely done, but getting stuck at

    Waiting for GPU server slot, there are None 
    jobs ahead of yours...

with a progress bar not longer even crawling.

From the console:

    websocket open                                                                                    app.js:189:14
    Got text message: progress: GPU render server received target image...                            app.js:203:12
    Got text message: your ticket is xxx                                                              app.js:203:12
    Got text message: progress: Waiting for GPU server slot, there is one job ahead of yours...     4 app.js:203:12
    Got text message: progress: Waiting for GPU server slot, there are None jobs ahead of yours... 61 app.js:203:12
    onclose

Thanks, took me a while to find the issue.

I had a feature where if the same client (by IP address) starts another job, their previous jobs are deleted. But after I added secure websockets support by proxying through nginx, all IP addresses from the server's point of view became "127.0.0.1" and every job would just be deleted when a new one came in, because they all had the same IP.

I keep getting countdowns from 8 or 15 to 1 [or partway there], and then "onclose", with the UI saying "Lost connection to server, please try again in a bit". For variety now and then I get a 502 somewhere in websocket setup.

When it is counting down, it takes 100+% CPU.

The sample render looks really cool, though. Nice project; thanks for sharing it.

Cheers, thanks a bunch.

“Designed while making love to a bunch of old men”, what is that supposed to mean?

Edit: I guess it’s some kind of frivolous random quote generator. Confusing and awkward.

Probably just humor for the sake of being humorous.

The nerve of some people!

Yes, it's a random byline generator. I had fun with it while making this, getting a new byline every time I tested the site.

I replaced it with a real byline now.

I think it’s just that the one I got was attention grabbing in the wrong way, enough that it was hard not to interpret it as being somehow significant for the whole site.

I think the whimsy/random thing can work, but putting sexual references in there just makes it feel immature.

Ha, I got something about making love with monkeys and thought that sentence was lost in translation.

> getting a new byline every time I tested the site.

Did you make sure that it is new every time? I'd say a simple timestamp would be a better choice.

This is really well done. I was wondering if it is open source or if it ever may become open source? I would love to see how it all comes together.

Given that comparing multiple previews, the locations of the pieces doesn't change, I'd guess the animation data is saved or reproducible. Given an input text, the text is turned to an image, overlaid, the pieces are colored matching the image/the colors matched to piece IDs, and then the animation is rendered with the colors applied to the pieces from the start.

I might have broken it by adding an emoji heart ️ into my message! If so, apologies.

I removed the emoji heart and rendered the message successfully. :) Thanks! The recipient was happy to get it.

How does this work behind the scenes?

Seems rather alot of work to put text on candy - can you explain the purpose of it more please?

Presumably it is made with Blender at the back end judging from the random quote generator "Created while running away from a squad of offensive drunk guys who are fans of the black skills of Blender."

UPDATE:

This looks like an interesting thing - I'd like to hear more about it - but I've tried several times to render and it always eventually loses connection to the server.

It looks like it was too early for it to hit the front page of HN, some more scaling testing was needed.

> can you explain the purpose of it more please?

Look carefully at the bottom line of the home page and all will be revealed

I have no clue how it works, but I know how I'd do it:

1. render the animation a bunch of blobs falling and coming to rest, once

2. save a mask for the pixels each blob occupies on each particular frame

3. note the position of each blob in the final image.

4. pick a color for each of the blobs according to their position in the final image and the text (or image) you you want to display on the blobs

5. go through all frames of the animation and color each blob

I got it to work and my grand child liked the "Haunted M&M's" that make their name

Thanks!

Pretty fun doing this with unusual unicode characters, like the various emojis.

Very cool.

It would be nice, if you could add a behind the scenes page on how you did it.

I'd say it's nearly guaranteed to be just a ray tracer.

You can even see gray candies on the borders of the letters, due to anti-aliasing.

This part of Blender's physics animation is deterministic, so you can get this effect by running the physics animation forward to the last frame; recolor the target candy; then go back to the start again. All Blender functions are exposed by a Python API.

> there are None jobs ahead of yours...

Sounds like I'll be getting it soon then :)

Very nice! I've just made a birthday "card" out of it ;)

Have you looked at the possibility of doing it client-side ?

I'm a video maker and this is very cool! Good job

That was fun. Thanks for sharing.

Super cool. How's it work?

How long did that take you to make, ballpark?

I'd estimate 2-3 weeks of actual rendering and coding, plus 2 years of having "I wonder how you could make a rendering such that..." bugging me at the back of my mind.

Reply on news.ycombinator.com