Creative Coding Self Generating Art with Javascript & P5js

Hey everybody!

I am David from Grayfish Design and in this course, we will code some awesome self-generating art using Javascript and the P5js library. Don’t worry: you won’t have to set up anything. It’ll be a super easy process!

I will show you what you need to get started, go over some basic coding instructions, teach you how to create generative art, and show you how to export it to creative software like Adobe Illustrator.

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! It’s free and open-source, so it will always be growing.

We will be using the P5js web editor, so you can share your code with everyone in just a few clicks.

By the end of this course, you will have the ability to create stunning art pieces with code and know how to export and edit them in creative software used by professionals around the globe.

A little warning: this course might give you a new addiction.

Let’s get started!

In this lesson, we’ll go over the basics you need to know in order to get started with creating your art. Let’s jump right in.

If you have zero knowledge of Javascript or coding in general, don’t be afraid: follow my steps and you’ll find success! So:

Variables:

Most of the time, a JavaScript application needs to work with information. Here are two examples:

An online shop – the information might include goods being sold and a shopping cart.

A chat application – the information might include users, messages, and much more.

Variables are used to store this information.

A variable is a “named storage” for data. We can use variables to store goodies, visitors, and other data.

To create a variable in JavaScript, use the let or var keyword.

With these variables, we can do a bunch of cool stuff like check if they exist, compare them, change them, and convert them to other things like colors.

If-statements

An if statement checks if something is true or not. Based on the answer you can do stuff.

For example, if my variable name is equal to yes, I could make the word Yes popup in the browser. If it’s not equal to yes, I could make the word No popup in the browser.

For loops

A for loop will loop a piece of code for a certain amount of times. For example, if I want to make a thousand squares popup on the screen, I would use a for loop that makes a square a thousand times.

Outro

That’s basically all you really need to know before we jump into P5js. Join me in the next lesson to do just that!

As said earlier, p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can easily create projects using the p5js web editor, which is exactly what we’re going to do.

If you go to editor.p5js.org, you’ll be greeted with this screen. Pause the video if you need some time to do this.

Before we start coding, be sure to make an account and/or login to be able to save your work on the way. However, if you don’t want to do this, I’ll put the links to all the projects in the description!

There are two main functions you will use in your program. The setup() block runs once and is typically used for initialization, or for creating a program that does not need a loop running code repeatedly. The draw() block runs repeatedly and is used for animation.

There is a full set of 2D drawing methods, to create and style graphics, text, and images. To load p5 onto the page, either setup() or draw() is required (but not both).

createCanvas() will create a new drawing canvas in the size specified and append it to the HTML page you are working with. If there is other content in the body of your HTML page, it will add on to the page after that, so you may not see it at the top of the window.

Are you ready to type along?