What I built

A small website/tool centered around the HTML Canvas. The workbench assists you in creating generative art with JavaScript by exposing the drawings settings to the UI.

Category Submission:

Built for Business

Read more in Additional Info.

App Link

Play around with the live version on workbench.generativepieces.com.

Screenshots

Description

Ever wanted to create a digitial art sketch?
This workbench is aimed to support you in your creative work on the HTML Canvas.

Write a function that draws on the canvas. Create a settings object which will automatically be exposed to the UI. Use the function template and add your own settings interfaces to make your development easier. Add your coded sketch to the workbench and view a visualisation. Change the settings in the UI and see the result instantly. Tweak it to your liking and download it when you are finished.

Current Features

• drawing function tied to the canvas
• apply settings automatically from the UI
• export drawing as png with a set resolution
• export settings as JSON
• load settings from JSON
• In-browser code editor in the development environment
• start/stop canvas animation
• set animations fps

Link to Source Code

All source code is available on GitHub.

Permissive License

MIT

Background

While I was gathering inspiration for a personal portfolio most of the really experimentive websites had one thing in common. They all were 'Creative Developer', 'Creative Designer' or something along these lines. So I wanted to know what this is all about and whatched two TED talks that really inspired me to start with something called 'Generative Art'. So I built my first small sketches and wanted a little more support from a self written environment. And exactly this was my project for the Hackathon.

How I built it

A live version of the current workbench is hosted on the App Platform. The latest version is always deployed from GitHub. It was my first time working with one of Digital Ocean’s services. I really liked the smooth and easy setup of a new hosted repository on the App Platform. This will not be the last time I used this simple platform. I also played around with the 'DO Space' as a file storage solution but apparently I did not have enough time to implement it in my project. But in a future version I will definitly add a bucket and a database to the workbench.

For the coding part I learned a lot. I did write tutorials about the things worth sharing in my article series for the Hackathon. But I also used Sapper for the second time and found new things about the framework and have to say it was a huge overkill for the workbench as it is. And of course I learned to build the art sketches which are currently used in the workbench. Last thing I picked up was blogging. The Hackathon motivated me to publish my first articles and I really like it. I thought about starting to write earlier and was glad the Hackathon gave me a reason to do it. Writing will be something I plan on keep doing in 2021.

Additional Info

I plan to use the Creative Coding Workbench to share my work. It is able to generate art sketches that can be printed on clothing, mugs, pillows or wall art. My next project will be little webshop where you can use a smaller version of the workbench to generate a unique design and purchase it on your item of choice. So each customer will get a unique product delivered.

View the store on generativepieces.com.

Thank you for reading this far. I hope you enjoy my project as much as I enjoyed building it and writing about it. Stay tuned for new articles of my next projects.