My holidays have started and so have my two weeks time for the Digital Ocean Hackathon. Hackathons are always fun and force me to start and finish a new project in a fixed timebox. I am glad this one was announced because in the last few weeks a topic really got me interested: Generative Art and Creative Coding.
The topic
Basicly it's about creating art sketches with the use of code, creativity and a bit of randomness. One creation of mine is this random combination of triangles:
If you want to get a quick introduction to generative art the talk generative art speedrun is a great way to start. On the speakers website you can find a few tutorials and a podcast aswell. A second (extraordinary) ressource is the Coding Train.
The idea
So while I was exploring art generated by code I said to myself: 'When I go down this rabbit hole I will need a toolbox that helps me to work on art sketches'. My plan for the next weeks is to develop exactly this. In my day job I usually build innovative web based applications therefore my platform of choice to paint my sketches will be the HTML Canvas. I tried out the p5.js Framework and while it is super easy to getting started with this abstraction layer I am not really satisfied by it. For the next weeks I will center my work around the plain HTML Canvas to explore how everything works on the most basic layer.
The tech
Recently I discovered the Framework Svelte/Sapper and it it's really easy to work with. Maybe Sapper will be a little overkill for this project but I will choose it anyway. Of course the project will be hosted on the Digital Ocean App Platform. The currently planned features for my 'Creative Coding Workbench' are the following.
Planned features:
- draw sketch on HTML canvas
- expose sketch settings to UI
- export sketch (print?)
- toggle sketch animation
- save sketch to a library
- load sketch from a library
- edit sketch from a library
- ...
Planned Technologies:
- Sapper
- Digitial Ocean App Platform
- ...
There is already a little Mock-Up created in Figma which shows how it should look like in the end:
I am sure while I am working on it there will be more ideas for features and new integrations.
Stay tuned for updates on this project as there will be posts for each part of it.
Top comments (1)
always the subject of creating art with code is on my Radar but in the end the work get into the way. great article