HN Explorer

Show HN: Super Snowflake Maker (supersnowflakemaker.com)

228 points by shalanah ↗ HN
Hi all! Just released Super Snowflake Maker!

Draw on the pie with freeform or polygon tools, change the number of sections, click on the large snowflake to see fold, and.... download!

Enjoy + Happy Holidays!

(tech: threejs/r3f, react, ts, useSpring, tailwind, canvas, svg, offscreen canvas, paperjs)

53 comments

[ 2.9 ms ] story [ 120 ms ] thread
bhhaskin
That was really neat. Thank you!
quirino
A few years ago I saw a talk at a Math conference about some mathematical models for how the shapes of snowflakes come to be.

I don't recall the details, but I believe one of them was even able to generate non-hexagonal snowflakes which happen under some circumstances.

I've been hoping to create a website around one of these models for some time now.

shalanah
Cool, I didn't know that could happen!

I started with 12 sections (or 6 lobes/mirrored sections) then wanted to play around with more section numbers without having to redraw.

I think 12 is for a more advanced paper snowflake maker although I think 8 can look cool too.

Wonder what number in-nature non-hexagonal number was. If you come across it, would love to include it!

If you create a snowflake site, I would love to try it!

jason_zig
This is really well made - thanks for sharing (and Merry Christmas)! Small thing: I didn't understand the difference between the white and black options at first. For some reason white was pre-selected so I got confused when nothing was cutting out while drawing for the first time. Maybe a label on hover would fix this while still keeping the clean look?
shalanah
Thanks! Yes, great idea. Definitely will want to make that clearer!
bobsroad
A label on hover would be nice — or even persistent labels to the right of the circles. I also wonder if instead of black, a dashed outline with a transparent center would make more sense, since you're cutting.

Regardless: This is lovely.

sss111
classic HN hug of death
shalanah
Hmmm odd. Works on my machine (of course!). It's a static site hosted on S3 - I'd be surprised if it is experiencing an overload issue. Will need to investigate what's happening for some visitors.
[deleted]
(comment deleted)
Sn0wCoder
Thanks for the Christmas fun! Was not going to click as thought it was like an actual snowflake maker (like you know each one is unique generator), glad I did. Could actually make a real one if I was feeling like making a mess ;)
Liftyee
Loved this project! Lots of festive fun in seeing what shapes can be made when unfolded. Just noticed that in mobile Firefox the dotted line previewing the cut seems to have a lower update rate than the actual path recorded, meaning the actual shape is much less jagged than the preview.
shalanah
Thanks @Liftyee! Yeah Firefox seems to lag behind on the site compared to WebKit or Chromium browsers. Hopefully I can optimize it more for Firefox.
shalanah
Update: Think I have found a way to speed it up for Firefox (and everyone else too!). On holiday with the fam so might take a couple days before I push a fix. I'm optimistic though!
[deleted]
(comment deleted)
shalanah
FF Update: Gecko based Firefox isn’t as performant as WebKit/Chromium on desktop/mobile devices when it comes to some canvas operations (even on offscreen!). I was able to greatly improve performance on desktop by limiting how much I drew and played with UV coords instead. That unfortunately wasn’t enough for FF on Android. Had to turn off “live” snowflake rendering for android. It does feel snappy on draw you just don’t get the “live” snowflake preview till you close a drawn shape. On FF Android the snappy draw is worth the trade off.
jader201
Very cool! It’s really easy to make something that looks like I knew what I was doing, when I don’t at all! :)

One missed opportunity that I see with sites that allow HN people to play with things and be creative (e.g. I’ve seen a bunch of sound loop makers do this): add a quick “share” link for us to show some creations. Not that I really want to share anything I did, but would love to see what others have made!

shalanah
Love this idea --- and a share link is a great place to start for it. Thanks for the suggestion!
ugh123
Really cool once I understood what was going on, it took me a real good while to figure out what to do. I guess "Draw on the pie" didn't mean anything to me.

Maybe add a short playable gif explainer showing a snowflake being made quickly.

shalanah
100%! Some onboarding could definitely help!
otteromkram
Did you see the information 'i' button on the top right? It has some basic info along with keyboard shortcuts.

If not, they may have added it later after reading some comments.

JKCalhoun
It's a little counter-intuitive for me to see results on the left when editing on right. Took me a bit to figure that out.

I would suggest you swap the left and right of the site.

Diti
Why is it restricted to Safari on iOS? I’m using Orion, which is Webkit-based too.
rasso
It complains in Arc on iOS, too. It‘s such a bad joke that browsers on iOS are still only a wrapper around WebKit…
shalanah
I'll take a look, thanks for the heads-up!
shalanah
Hi Diti, are you talking about the inapp link to Safari? If so - it's the only reliable escape link for ios. It should work on other WebKit browsers as well but no reliable inapp escape link is available for the default browser on ios anymore. There use to be another ios workaround but they closed it. Basically downloads don't work on inapp browsers and I need some way to get you out of them.
shalanah
I'll take a look. Perhaps my inapp detection is throwing false positives. I also detect for SFSafariViewController because of the bad UX downloading experience there. Maybe it is catching your browser as well.
shalanah
Oh wow both Orion + Arc on iOS have the same UA as Safari and are testing positive for SFSafariViewController (an experimental test).

I'll look into other ways to not confuse SFSVC with these browsers.

Interestingly - downloads on Arc work really well but they are poorly done in Orion (open in a new window without clear option to download).

I use inappdebugger.com for testing exit links, UA, downloads etc.

monocularvision
I am curious: what about SFSVC interferes with the functionality of the site?
WillAdams
While I asked: Possible to add export as an SVG?

noting: That would make it useful for using a design on a CNC or lasercutter.

That feature, as noted below is present --- click on the [>] button to go to a second page where these features are present.

shalanah
You can download as SVG! There is a screenshot JPG, fold + cut template PDF, and simple shape SVG download on the site.
WillAdams
My apologies, I missed that --- edited my post above to reflect your explanation.
sillyboi
I just wanted to say how delighted I am with your web app! This is fantastic idea, and the execution is top-notch. It is incredibly user-friendly and intuitive. It has all the essential features needed to create beautiful and unique snowflakes. This really helps and makes the process of creating snowflakes easy and enjoyable. Your app is a wonderful way to lift spirits and get into the holiday mood!

Thank you for creating such a delightful tool. Wishing you and everyone a festive season!

shalanah
So glad you enjoy it! And yes, I love web apps too!

Happy holidays + New Year!

[dead] deskr
[flagged]
tenuousemphasis
This reads 100% like some ChatGPT output.
noitpmeder
So does the top comment ... Something about the repeated use of "snowflake" really set off some alarms.
millipede
Hm, cool idea but ran into a glitch. Cutting 3 elongated ovals, end to end and forming a triangle, didn't remove the center piece.
jonplackett
I wish there was a better user experience when downloading an image a user creates on a website like this on iPhone - it’s really weird that you can’t save it to your camera roll. It goes into downloads and confuses everyone.
hluska
The eight year old and I hanging out on this. She is a huge fan. The moment she saw it, she said “I want to use this.” And now we’re both making snowflakes on our devices.

I can’t name many apps that provide equal entertainment to my kid and I. You’ve done very well. As a bonus, the eight year old seems particularly motivated to learn JavaScript and start working on this kind of stuff herself.

Nice work and excellent share. Thanks so much for this!

shalanah
Aw! Fills my heart with joy that she's inspired to code and you both enjoy it!
empressplay
Cute! A couple thoughts:

- shouldn't use 100% of a core just sitting there, might want to check for busy looping and / or put in a sleep here and there

- if I disconnect a bit of paper it should go, rather than just sit there disconnected

Great work so far though! Thank you for the amusement :)

maalber
I spent way to long playing with this. Very simple and intuitive. Nice work!