An Exhibition Of Mathematical Beauty.

Overview

πŸͺ΄ Fractal Garden πŸͺ΄

πŸ“ An Exhibition Of Mathematical Beauty πŸ“

Fractals are awesome. They look beautiful and have intricate mathematical connections between each other. And they are simply a lot of fun to play around with.

This project tries to bring cool fractals to more people. Showcasing the artistic beauty as well as the various connections between them. Check out the live version at fractal.garden!

πŸ”“ Open Source πŸ”“

The long term plan for this project is to be open source so that people can add more and more beautiful fractals to the mix. I want everybody to "grow" their own little piece of the garden. So that in the end there is a beautiful and detailed overview for the world of fractals - complete with Recursive, WebGL or Lindenmayer implementations for most, if not all, of the fractals out there.

The Fractal Garden should allow easy exploration, and showcase the connections between the different fractals. It shouldn't be too Mathematics heavy. Instead it should be rather beautiful and a little whimsical sometimes. There's still a lot of fractals missing and a lot of things to improve. You can have a look at the issues page and see if you can help out. I am very happy to accept PR's.

πŸ’» Local Development πŸ’»

This is a next.js project.

As such it should be relatively easy to setup and use. If you haven't installed node.js and npm yet, you should do that first.

πŸ”Œ Installation πŸ”Œ

Clone the repo:

via ssh:

git clone [email protected]:trebeljahr/fractal-garden.git

via https:

git clone https://github.com/trebeljahr/fractal-garden.git

After you have cloned the repo:

cd fractal-garden
npm install
npm run dev

and tada, you should have a development environment up and running. There are no .env variables to worry about, since this project is generating a completely static page.

Have a look around at some of the fractals. And enjoy. 😊

πŸ’ͺ Contribute πŸ’ͺ

There are two main ways to contribute - improving the existing fractals or adding new ones.

✨ Improving Existing Fractals ✨

Have a look at the current issues of this project -> searching for those tagged with improve-existing-fractals should give you an overview of what there is to do. Mostly it's adding better mobile support, speed improvements, and better descriptions. If you want to improve the fractal descriptions you can just edit the .md files – even directly here in the GitHub browser.

Please feel free to clarify points, add more details, or more connections or to simply fix typos where you see fit!

🌿 Adding New Fractals 🌿

If you want to contribute your own fractal, see if there is an issue for it first. You can filter the issues by new-fractal. If not, create one following the issue template.

Make sure to have a .tsx file, a .md file as well as a .jpg file. The picture should just be a screenshot of the rendered fractal canvas - try to pick a beautiful default color for your fractal. 😊

Before submitting a PR ensure that the files are correctly linked to each other. Also, don't forget to add a component in the /pages/index.tsx file and another link to the array in the /components/Navbar.tsx file.

If you need help with anything, let me know.

Happy "growing"! 🌱

🌌 Plug 🌌

The Fractal Garden originated as one of my 1-month projects. I hope to tackle more cool projects like it in the future, the idea is to limit the amount of work that I put into each one of them to exactly 1 month and see/document how far I can get.

Comments
  • Add a simple link to a Buddhabrot render

    Add a simple link to a Buddhabrot render

    If you're interested in links from the Garden to other images elsewhere online, then this here's a link to my Buddhabrot render. It's a direct link to the an external page, so it will present in a similar fashion to other fractals, though it will act differently, of course.

    Your call, if you want to stay within the "look and feel" of your pages, let me know, and I'll tinker some more and see what I can come up with.

    hacktoberfest-accepted Hacktoberfest 
    opened by seligman 4
  • Scaling the fractal canopy

    Scaling the fractal canopy

    Hey @trebeljahr

    I looked more closely into the code and found a way how to scale the canopy. Unfortunately, i could not reuse my previous scaling logic as I hoped to do haha

    Please check it out!

    I now determine the max rootLength possible assuming the max possible growth in the iterations. This makes sure that when animating he angles, we stay at the same size (looking at you hTree).

    Cheers!

    hacktoberfest-accepted Hacktoberfest 
    opened by npx 2
  • Outsourcing of the scaling utility

    Outsourcing of the scaling utility

    As mentioned in issue #18 I have outsourced my scaling work into a utils file. These changes would allow to piece by piece make some of the fractals scale appropriately.

    Also, I found an existing remap function, which I then deprecated. If you feel that it does not belong into this PR I can drop some commits!

    Let me know what you think!

    hacktoberfest-accepted Hacktoberfest 
    opened by npx 2
  • Fix link to 1-month projects on the website

    Fix link to 1-month projects on the website

    The original link was missing the protocol https:// so it was pointing to a file in the repo, which doesn't exist. Also, the /now page only mentions 1-month projects, but there's now a dedicated page for this on the website.

    Since this change isn't modifying code, we can [skip ci].

    hacktoberfest-accepted Hacktoberfest 
    opened by mbrukman 2
  • Add Buddhabrot Fractal

    Add Buddhabrot Fractal

    Description

    Referencing this PR from @seligman #23

    It would be super cool to dig into the connection with #3 the logistic map

    Inspiration

    http://nebula.scottandmichelle.net/nebula/index.html

    https://en.wikipedia.org/wiki/Buddhabrot https://donghaoren.org/buddhabrot/ https://donghaoren.org/blog/2018/buddhabrot https://github.com/donghaoren/buddhabrot-renderer

    Type

    WebGL

    Difficulties

    This seems to be computationally expensive to do. Getting this to work nicely in realtime might be a bit of a pain.

    new-fractal 
    opened by trebeljahr 0
  • Add Burning Ship Fractal

    Add Burning Ship Fractal

    opened by greenfan 2
  • Zoom In/Out of Existing Fractals

    Zoom In/Out of Existing Fractals

    Find and implement a way to zoom in/out of existing L-System Fractals as Zhyl on hackernews suggested:

    image

    This would involve setting up a way of tracking where each part of the string of the fractal is on the screen and only subdividing those parts which would be visible. I honestly have absolutely no idea how to do that – but it would be freaking awesome if it were implemented.

    improve-existing-fractals 
    opened by trebeljahr 0
  • 1-st iteration of some L-Systems is broken

    1-st iteration of some L-Systems is broken

    image

    Affected Fractals:

    • Hilbert Curve
    • Fern 1
    • Fern 2
    • Fern 4

    Reason: L-Systems Axiom doesn't contain Draw Forward Calls.

    Possible Solution: -> Change Axiom to the 2nd Iteration manually.

    improve-existing-fractals good-first-issue 
    opened by trebeljahr 0
  • Fractal-Tree broken on mobile

    Fractal-Tree broken on mobile

    image

    The Fractal-Tree / Fractal-Canopy doesn't show nicely on mobile. Needs some calculations to figure out the maximum Root Length based on the current settings, to stay within the bounds of the screen.

    improve-existing-fractals good-first-issue 
    opened by trebeljahr 3
  • Add Pythagoras Tree

    Add Pythagoras Tree

    Description

    Add an implementation of the Pythagoras Tree. Show connections to LΓ©vy Curve and Fractal Tree/Canopy. Angle should be variable -> Symmetry should be variable.

    Inspiration

    Wikipedia - Pythagoras Tree Larry Riddle - Pythagorean Tree

    Type

    Recursive / Canvas

    Difficulties

    None really.

    new-fractal 
    opened by trebeljahr 1
Owner
rico
programmer, traveler, photographer. not necessarily in that order.
rico
A curated list of tools that can be used for creating interactive mathematical explorables.

A curated list of tools that can be used for creating interactive mathematical explorables.

Nikola Ubavić 75 Dec 22, 2022
Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mathematical properties.

Math-Calc Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mat

CoderX07 1 Dec 25, 2021