Add Fractals Demo

[ConradSollitt]

Here is the working demo (repository link is on the page): https://conradsollitt.github.io/css-houdini-fractals/

Since fractals use recursive functions I have a safety check in place and use reasonable defaults to avoid long delays. One the demo there is a variable that allows for CSS output to the console so you can see how many functions were called and how fast it runs on your machine.

Tested browsers:

• Chrome (Latest)
• Firefox on Mac
• Safari on Mac Desktop For Safari Desktop, I find I have to change an initial value for rendering to show; it doesn't render on page load.
• Safari on iOS

For my demo I need to improve the layout for mobile browsers (likely tomorrow or later this week).

Also the current defaults may need to be adjusted for smaller size or based on need for better performance on initial page load. Here is a quick test of 240x240px using defaults that result in much less rendering and render in milliseconds. The defaults I specified can take about 20 milliseconds which may or may not be acceptable for the initial page load.

Tomorrow (actually later today - it's 2:20 AM where I live in Los Angeles 🤦‍♂️) I'm happy to help make any additional changes needed or help with more test. Or whatever time works!

Awesome site by the way!!! I have read about CSS Houdini before but wasn't sure if it was something I would ever use but after seeing https://houdini.how/ I think there is a lot of great use and options for it.

[google-cla[bot]]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

:memo: Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[ConradSollitt]

@googlebot I signed it!

[ConradSollitt]

After playing around with the demo some more I think changing the --max-draw-count from 100,000 to 10,000 (commas here for clarity) would be a good idea. It keeps the rendering much more performant when using the range controls and if the user generates large fractals it provides an interesting effect by default as half the screen can be drawn and rotate as the user drags the angle.

[ConradSollitt]

Thanks @nucliweb

[ConradSollitt]

Two minor issues I found when testing the site locally:

• I specified strings that are too long to fit nicely (screen below)
• The variable --max-draw-count uses very large numbers (currently defaults to 100_000) so it doesn't fit on screen.

I'm not sure if I can update the pull request for it or if I should wait till after this one is merged (to avoid issues I feel like I should wait). Basically I'll remove some 1 color on the default list a a few from the gray scale list and then --colors can fit to visually like up with all other items.

As I mentioned before I'll revise down the default available value for --max-draw-count and I also think it makes since to limit the range to 50_000 and use step of 1000 but I can make that later as well.

Noice on the screenshot below the input for --max-draw-count is wider than other numeric inputs.

I was able to do that through CSS alone, however it requires a known attribute value. Would this update (highlighted code below) be acceptable if I were to submit a pull request for it?

Although it would be specific to my worklet it could be easily tweaked for future worklets if any use large numbers. I am not aware of any CSS that would let me calculate the number of characters to determine what the input length should be and making the change in CSS avoids adding extra props to JSON and JSX code.

[una]

Thanks, I'll take a look at the CSS to avoid hiding this number. VERY cool worklet!

[ConradSollitt]

@una I just made the updates on this pull request and when I click the Files changed tab the fractals.json file look good.

The update points to the 1.1.0 release rather than 1.0.0 and it includes the new --shapes property I wrote about in my earlier comment. Rather than pointing the CDN link to always use the latest I point it a specific version just in case I decide to make updates one day then nothing would break on https://houdini.how/ because it will point to the correct version for the variables.

[ConradSollitt]

@una Unrelated to this but I just realized right now when I was updated my personal site earlier this year (link below) one of the things that helped me come up with a nice Text Effect for the <h1> header was one of your articles (link also below). I listed 7 helpful links in the CSS comments and put your's first. So great job on your site because I found the content to be of top quality and found I could to learn from and get ideas from as well. 😄

My personal site - one page https://conradsollitt.com/ When I submitted on awwwards I got 4 perfect 10's, many high 9's and my highest score overall compared to past sites. I think in part because of the text effect. Also got a 5 and 6 score so can't win everyone.

Your great Dynamic Color Article https://una.im/css-color-theming/

[una]

Thank you Conrad!