Background Info
First of all, what is Generative Art?
Generative art is something that mixes computer science and art. It’s writing a program that will give you some form of randomly generated art. In other words, you’re giving the computer loose guidelines for what to make, and then letting it pick the rest.
Sounds cool! So how do I make it?
Generative art can be made in any language or programming environment that supports graphics! This means that you can make generative art in Hopscotch, Python, JavaScript, and most other programming languages. This tutorial will be focused on JavaScript, though, so it helps to know that.
What do I need to follow this tutorial?
Since my library I will be referencing is written in JavaScript, you’ll need to know a bit of JS, at least. If you don’t know any JavaScript, you can go to Codecademy or SoloLearn to learn it. You’ll also need some sort of way to edit and run your code. If you don’t already have a code editor, you can download VSCode, and the Live Server extension to run your code.
Getting Started
Downloading the library, and other setup
In order for you to be able to use the features of the library I wrote, you’ll need to download it from here. Download the latest version of the library from the “src” folder on the webpage. To do this, locate the file on the webpage, open it, click on “Raw” at the top of the text window, right click anywhere, and click “Save as…”. Now, save the file to a new folder on your computer, and make sure the file is called “GenArt.js”. Now, in that folder, create 2 new files called “index.html” and “art.js”. In your
“index.html” file, copy-paste this code:
<html>
<head>
<title>My cool art!</title>
</head>
<body>
<script src="GenArt.js"></script>
<script src="art.js"></script>
</body>
</html>
And in your art.js file, copy-paste this code:
let canv = GA.canvas(512, 384);
canv.global();
function generate() {
// Your code goes here...
}
Now, use whatever editor/extension you have to run your webpage. You should get something that looks like this:
If you didn’t get this, feel free to ask me for help!
Where to write your code
You should be writing your code in the “art.js” file. Write it below the text that says “Your code goes here…”, like this:
function generate() {
// Your code goes here...
circle(200, 100, 75);
square(400, 200, 100);
}
The Basics
Basic Shapes
There are a few functions (commands) you can use to draw basic shapes. First of all, you can use the circle() function. Try writing this line of code: circle(200, 100, 75). Now, when you run your html file, you should see this:
The circle() function drew a circle! More specifically, it drew the circle’s center 200 pixels from the left edge of the panel, 100 pixels from the top, and with a radius of 75 pixels.
You can also draw squares, with the square() function. Write this code below the circle code: square(400, 200, 100). When you run your code, you should now see a square near the circle, like this:
You just drew a square too! The square() function drew a square, with its center at the position (400, 200), and with a side length of 100.
Here’s some other functions you might want to play around with:
ellipse(x, y, xRadius, yRadius) // Draws an ellipse (stretched circle) at (x, y) with an x radius of xRadius and a y radius of yRadius.
rect(x, y, width, height) // Draws a rectangle at (x, y) with the specified with and height.
line(x1, y1, x2, y2) // Draws a line from (x1, y1) to (x2, y2).
Coloring Your Shapes
I think we all can agree that gray shapes with black outlines are a bit boring. Let’s change the coloring up a bit!
In order to change the color of a shape, you’ll need to use the fill() function. Above your circle and square code, write this: fill("#f2812b"). When your code is run, you should see that your shapes are now orange!
In other words, the fill() function will change the color of the shapes. Also, the text “#f2812b” corresponds to a specific shade of the color orange. If you want to use another color, google “color picker”, pick a color, and copy the hex (hashtag) code.
You can also remove the fill of a shape, leaving only the outline. You can do this by putting noFill() in your code.
You can also change the outline color by using the function stroke(), in the same way you used fill(). You can also call noStroke() to remove the outline. To change the thickness of the outline, use strokeWeight(thickness).
Other stuff
Further Steps
If you already know a large amount of JS, feel free to play around with things like loops, if statements, and randomness (Hint - The GA.random() function might be useful to you). Feel free to go to here, and look at some of the functions I didn’t mention here. If you know little to no JavaScript, it’s probably a good idea to learn some more, by going to one of the websites I mentioned earlier.
Saving Your Art/Images
I’ve also included a handy feature to download your images in the library. At the bottom of the panel, you’ll see two buttons: “Download (SVG)” and “Download (PNG)”. Use the SVG downloader if you want to bring your art into a program like Adobe Illustrator. Otherwise, download the PNG format, so it can be viewed easier.
Example Programs
… That’s all the examples I have for now. If you make anything cool, feel free to let me know about it, and I might make it an example!
Footnotes
Feel free to use this topic for asking questions, discussing this tutorial, or sharing your art! 
