Genartlayers is an app for coding, manipulating, and exporting generative art.
Click the little [1] over there to the right. This will open up Layer 1 of the default project. This project is just an example, but it's pretty fun to mess around with! Move the controls around and see what happens.
Select a layer from the right panel (e.g. [1] or [0]), and then click the Code tab. This will open up the code editors.
The editor on the top is for Parameters which are variables you can control (like hue, width, etc), and the editor on the bottom is the Draw Function, which is the code that tells genartlayers how to draw your art.
Take note of the example codes in the default project. Observe how parameters are defined and how the code is written. Code in genartlayers is written in javascript, but there are many simplifications and included functions provided to you in genartlayers.
Poke around in the examples a bit to see how things get drawn. There's a lot of code in there, but everything comes down to drawing simple shapes including rectangles, circles, and paths.
Genartlayers provides functions for drawing these basic shapes which are as follows:
After you make changes to your code, hit the SaveCode button to implement them. Make sure you give your code a unique name in the text field above the editors. The layer that the code is on should redraw immediately unless there's an error in your code. Pro-tip: open your browser's console (ctrl+shift+i) to debug while you code.
You should also save your projects. A project is a collection of all the layers, algorithms, and parameter values that you have defined for a particular generative art piece.
To save a project, give it a name in the text field located top-left next to "Project:" and hit Save. When you return to genartlayers, type in your project's name and hit Open.
Genartlayers uses your browser's local storage, so as long as you're accessing genartlayers from the same computer and internet browser, you can return to your files and pick up where you left off.
I will add some buttons for this later, but for now, if you want to export an image of your piece type exportImg(width) into your browser's console and hit enter. "width" is the width of the image in pixels you desire.
Example: exportImg(2048)
Your browser should prompt you to download your image.
Genartlayers uses the HSL color system and the value ranges are as follows:
I will provide more documentation soon, but hopefully if you're here, this can get you started. Please feel free to DM me on @genartlayers on instagram at any time if you have any questions about how to do something in this application. I am here to answer your questions!
-Brian