Inspiration

We are both new to hackathons and web development but have picked up some coding skills in Python through our mathematics degrees. We took this hackathon as an opportunity to design a basic website showcasing a topic that we think is extremely interesting. The inspiration for this website comes from our interest in Mathematics, along with our desire to learn new web development skills and reveal a side of Mathematics which can be appreciated without any technical background.

What it does

We have designed a basic educational website which includes animations of the "Chaos Game" which is a method for generating "fractals". A fractal is a self-referential pattern that looks as if it repeats forever. The Chaos Game has a set of rules that are extremely simple, yet the patterns it can produce are complex and beautiful. There are many variations of the Chaos Game and we have included some of our favourites on the webpage.

How we built it

We are completely new to JavaScript and web development so this is the first time we have used any of the technologies involved in this project. The webpage was built using html, css and JavaScript. The animations we have created were built using the JavaScript framework p5.js. This is a JavaScript library designed for artists and graphic designers, which is convenient for creating images and animations in a html canvas. We have also included DOM elements so our animations take user input, have sliders to control the frame rate and a button to reset the animations.

Challenges we ran into

As this was our very first web development project we had to learn new technologies in a short space of time which is always a challenge. When coding the animations we ran into problems with user input and event handling when building buttons to reset the animations.

Accomplishments that we're proud of

We're proud of the aesthetics of the animations we have coded and the overall look of the webpage. We are particularly impressed by the dropdown box which is used to select which script to run corresponding to the different animations. The webpage was designed with the intention of inspiring others to look further into the topic and we believe the content is interesting and intriguing.

What we learned

The main concepts we learned were: how to build a basic webpage from scratch, collaborate through Github and write JavaScript code for animations in p5.js. We also learned that we enjoy web development and participating in Hackathons!

What's next for Fractal Website

Once we have developed our skills further it would be great to add features to the website that allow for more user interactivity. This could be through the addition of a gallery, where users can upload their own code/images of fractals they have created for others to view. It would be nice to create a feature that displayed the code of a given animation via clicking a button. There are many features that we would like to include to improve UI/UX, but we have much to learn prior to this.