6 ms·

Show HN: Super Snowflake Maker

228 points by shalanah 2y ago

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)

bhhaskin 2y ago
That was really neat. Thank you!
hexnuts 2y ago
Hugged to death.
quirino 2y ago
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 2y ago
  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 2y ago
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?
- bobsroad 2y ago
  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.
- shalanah 2y ago
  Thanks! Yes, great idea. Definitely will want to make that clearer!
sss111 2y ago
classic HN hug of death
- shalanah 2y ago
  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 2y ago
    [deleted]
  - sss111 2y ago
    seems to be up now!
    - shalanah 2y ago
      Whew! :)
Sn0wCoder 2y ago
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 2y ago
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.
- deleted 2y ago
  [deleted]
- shalanah 2y ago
  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.
- shalanah 2y ago
  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 2y ago
    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!
CarpetBombGaza 2y ago
[dead]
CarpetBombGaza 2y ago
[dead]
jader201 2y ago
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 2y ago
  Love this idea --- and a share link is a great place to start for it. Thanks for the suggestion!
- joshmarinacci 2y ago
  For my own projects I created a bespoke data system that exports its values as URL parameters so you can always just share the current browser location. Ex: a 3d box STL generator https://apps.josh.earth/boxbuilder/ https://apps.josh.earth/boxbuilder/
ugh123 2y ago
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.
- otteromkram 2y ago
  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.
- shalanah 2y ago
  100%! Some onboarding could definitely help!
- JKCalhoun 2y ago
  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 2y ago
Why is it restricted to Safari on iOS? I’m using Orion, which is Webkit-based too.
- rasso 2y ago
  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 2y ago
    I'll take a look, thanks for the heads-up!
- shalanah 2y ago
  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 2y ago
    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 2y ago
  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.
  - 2y ago
WillAdams 2y ago
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 2y ago
  You can download as SVG! There is a screenshot JPG, fold + cut template PDF, and simple shape SVG download on the site.
  - WillAdams 2y ago
    My apologies, I missed that --- edited my post above to reflect your explanation.
sillyboi 2y ago
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 2y ago
  So glad you enjoy it! And yes, I love web apps too! Happy holidays + New Year!
- deskr 2y ago
  [flagged]
  - tenuousemphasis 2y ago
    This reads 100% like some ChatGPT output.
    - noitpmeder 2y ago
      So does the top comment ... Something about the repeated use of "snowflake" really set off some alarms.
lovegrenoble 2y ago
well made!!
millipede 2y ago
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 2y ago
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 2y ago
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 2y ago
  Aw! Fills my heart with joy that she's inspired to code and you both enjoy it!
empressplay 2y ago
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 2y ago
I spent way to long playing with this. Very simple and intuitive. Nice work!

228 points by shalanah 2y ago

bhhaskin 2y ago

That was really neat. Thank you!

hexnuts 2y ago

Hugged to death.

quirino 2y ago

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 2y ago
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 2y ago

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?

bobsroad 2y ago
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.
shalanah 2y ago
Thanks! Yes, great idea. Definitely will want to make that clearer!

sss111 2y ago

classic HN hug of death

shalanah 2y ago
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 2y ago
  [deleted]
- sss111 2y ago
  seems to be up now!
  - shalanah 2y ago
    Whew! :)

Sn0wCoder 2y ago

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 2y ago

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.

deleted 2y ago
[deleted]
shalanah 2y ago
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.
shalanah 2y ago
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 2y ago
  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!

CarpetBombGaza 2y ago

[dead]

CarpetBombGaza 2y ago

[dead]

jader201 2y ago

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 2y ago
Love this idea --- and a share link is a great place to start for it. Thanks for the suggestion!
joshmarinacci 2y ago
For my own projects I created a bespoke data system that exports its values as URL parameters so you can always just share the current browser location. Ex: a 3d box STL generator https://apps.josh.earth/boxbuilder/ https://apps.josh.earth/boxbuilder/

ugh123 2y ago

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.

otteromkram 2y ago
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.
shalanah 2y ago
100%! Some onboarding could definitely help!
JKCalhoun 2y ago
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 2y ago

Why is it restricted to Safari on iOS? I’m using Orion, which is Webkit-based too.

rasso 2y ago
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 2y ago
  I'll take a look, thanks for the heads-up!
shalanah 2y ago
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 2y ago
  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 2y ago
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.
- 2y ago

WillAdams 2y ago

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 2y ago
You can download as SVG! There is a screenshot JPG, fold + cut template PDF, and simple shape SVG download on the site.
- WillAdams 2y ago
  My apologies, I missed that --- edited my post above to reflect your explanation.

sillyboi 2y ago

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 2y ago
So glad you enjoy it! And yes, I love web apps too! Happy holidays + New Year!
deskr 2y ago
[flagged]
- tenuousemphasis 2y ago
  This reads 100% like some ChatGPT output.
  - noitpmeder 2y ago
    So does the top comment ... Something about the repeated use of "snowflake" really set off some alarms.

lovegrenoble 2y ago

well made!!

millipede 2y ago

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 2y ago

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 2y ago

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 2y ago
Aw! Fills my heart with joy that she's inspired to code and you both enjoy it!

empressplay 2y ago

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 2y ago

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