-
Notifications
You must be signed in to change notification settings - Fork 2
Home
Check out the side bar on the right if you're looking for the basic shape functions or parameter classes.
Genartlayers is an app which brings the modern digital art application experience to generative art. Genartlayers transforms your web browser into a generative art powerhouse, providing an environment for coding and manipulating your own generative art algorithms with the modern utilities of a digital art program.
Click the little [1] on the right side of the window. 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 sliders around and see what happens to the art.
Once you've had your fill of that, click on the 'Code' tab to see the code that is making this art. You'll notice that there are two code editors. The one on the top is for making parameters (the things that you can control in the Controls tab) and the one on the bottom is the "drawFunction" which is the code that tells genartlayers how to draw your art. You can edit the code in both of these editors to tweak the example algorithm or make an entirely new one.
You'll notice there are two layers in the default project: layer 0 and layer 1. Layer 0 contains a simple algorithm for drawing a background. You can change it's color. Genartlayers utilizes layering so that algorithms can be handled independently.
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.
Parameter controls (like sliders and numeric inputs) are created automatically in the Controls panel when they are defined in the Parameters editor. Parameters can then be used as variables anywhere in the drawFunction (using the same exact name you defined in the Parameters editor) and they take on the value of the control allowing you to easily manipulate your algorithms! Take note of the syntax used for the parameters in the example. Be careful and exact with the syntax. Also notice that you can create headers to help organize your control panel.
The drawFunction is the code that tells genartlayers how to draw your art. Code in genartlayers is written in javascript, but there are many simplifications and included functions provided to you in genartlayers which are discussed below.
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.
Generally speaking, you should declare local variables using var as follows. This will keep these variables exclusive to the layer they are on.
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. The browser console is awesome, and it's where everyone debugs Javascript.
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 same 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, dpi) into your browser's console and hit enter. "width" is the desired width of the image in inches and dpi is the desired resolution of the image in dots per inch. Genartlayers will infer the height of the image based on the ratio of the artboard defined in the document properties.
If you want a metric equivalent, hit me up! What do y'all use? Dots per cm?
Example (12 inch wide image at 300 DPI):
exportImg(12,300)Your browser should prompt you to download your image.
Coming soon.
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
Please feel free to DM me on @genartlayers on Instagram at any time if you have questions, you spot a bug, you have a feature request, etc. I am here to help!
-Brian