Infinart

• 

  Example infinart

Inspiration

There's a YouTube channel called ViHart that uploads videos about math and doodling in math class. After watching those videos, I started doodling in math class, and coming up with my own set of rules for an infinite drawing. Then, I thought to myself: Why not make a program to generate the drawings so that I can play around with different rules without spending huge amounts of time (and paper) on each one?

What it does

When the webpage is opened, the default drawing is already generating. If the user wants to play with some values, they can press the space bar to pause the drawing, change the values of the boxes to any value above zero, hit the reset button to clear the drawing, and press the space bar again to begin drawing once more!

How I built it

I made a canvas, a button, and several inputs in HTML, formatting them with CSS. Then, in Javascript, I used a setInterval() to call the function that draws the drawing every half second. The drawing function runs a for loop (using values from the inputs), procedurally drawing clockwise and counterclockwise turns. If the clear button is pressed, it stops the function from writing temporarily, resets all values that were incrementing in the loop, clears the canvas, and allows the drawing to continue.

Challenges I ran into

This was my first project using HTML, CSS, or Javascript, so a good deal of the time was spent figuring out the languages. Otherwise, one major issue I ran into was that some values needed to be floored to compute the correct drawing, which was not obvious to me at all until I figured it out.

Accomplishments that I'm proud of

I am proud that I have made a program in HTML, CSS, and Javascript.

What I learned

I learned the basics of HTML, CSS, and Javascript.

What's next for Infinart

I want to add the option to draw infinite drawings with different sets of rules, possibly even adding the ability to modularize the drawing of the infinite art.

Built With

• css
• html
• javascript