I knew I wanted to created an application for users to be able to use to de-stress before an interview or an important activity. I brainstormed game ideas or various simulation ideas, but I wanted a relaxing, interactive activity. So, I decided on a drawing application.

What it does

In this application, you can change the size of gridlines to help you draw an image. The user can select which color they want to use and which square they want to fill. By selecting the number on their keyboard or using their up and down arrow keys, the user can manipulate the number of squares. If the user wants to see the final product, they can hit "0" on their keyboard to get rid of the squares. Then, they can save their image.

How I built it

I used Glitch to run my site on and p5.js to code my site. I used javascript to add interactivity to my site. I used HTML to organize the context on my website. And, I used CSS to change the style of my content.

Challenges I ran into

One challenge I ran into was selecting the color without changing the square that the selection bar runs over. I fixed this by adding more conditions to the if statement that is needed in order to change the color of the square.

Accomplishments that I'm proud of

I am proud of applying my knowledge in a new environment. This is my second hackathon, and it is the first hackathon I have completed solo.

What I learned

I learned about connecting the files in order to run the site with each element (layout, style, and interactivity).

What's next for Jack's Hack

The next step is allowing the user to import an image they want to draw. Then, the user will see the image tinted beside the gridlines. This way, the user can replicate images into drawings.

Built With

Share this project: