[Tutorial] Making Generative Art with my new JavaScript Library!

valgo
tutorial

#1

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

Snowflake Generator

… 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! :slight_smile:


#2

Here’s some snowflakes that I got with the snowflake example:


#3

Valgo it’s you!


#4

Great job!


#5

That is more for advanced users than me


#6

That is really cool! I wonder if somebody have done the same with Python. If not, I might try actually.


#7

Go ahead! I really only did this is JS because 1. JS has built in UI, in the form of HTML, and 2. the web is pretty accessible to most people.


#8

Yeah. If the library would be made in Python, it would probably only be for offline usage via the interfaces “turtle” or “tkinter” (if not sure if you are familiar with those or not). Your library can still be used alongside Python if you are making web applications using an external library called Flas k (which I use really often).

Well, I need to learn about this concept a little bit more before I can make a package/library for Python, but I will probably try to do it! :slight_smile:


#9

Okay, @William04GamerA