In this lesson, we will start by going over the development environment and programming language that we'll be using for this course.

Our Programming Environment

First of all, the editor we will be using is located at this link: https://editor.p5js.org/. You will want to open that link in a separate window, because we will be doing a brief tour of it.

For this course, we will be using a programming language called JavaScript. Beware, because this language is different from Java, which is another programming language that you might have heard of.

JavaScript is the main programming language that makes websites interactive. We can use it to add things like animation, audio, and games to a web page. When you see a webpage change in response to a user action, in many cases that's due to JavaScript. Another important language for developing websites is HTML5, which you might also know of. HTML5 works together with JavaScript to make many of the sites you use on the internet. I wanted to mention HTML5 because it is important, but we most likely won't cover it much, if at all, during this course.

We will also be working with p5.js, which is a special JavaScript library that makes it easy to do fun things like drawing to the screen, making animations, and other helpful features. The official website describes it as "a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!"

When working with code, a "library" is a collection of reusable code that our programs can use. The code in a library has already been written and packaged for us by other developers, so we can often save a lot of time writing our programs, because we don't have to do all of the pieces of the program from scratch.

p5.js Tour

Now that we know more about what our environment is, let's quickly take a look at how to work with and navigate through it. If you have not done so already, open the editor link in a new tab or window. You might want to also check out the video lecture to see a short walk-through.

Have a look at the screenshot above. When you visit the editor link for the first time, the page will look like the screenshot. We've added numbers to denote the major features that we'll be discussing here:

1. Preview window: Shows the results of our code when it runs. This is where our game will actually happen!
2. Editor window: The area where we actually write our code.
3. Run button: When we are ready to run our code, we can click this button.
4. Stop button: Stops the code from running. Remember that running code uses up the browser's memory and resources, so if we have a really long program, sometimes we don't want to just leave it running.
5. Program name: Here you can give the program (or "sketch," as they're called in the p5.js editor) a new name. When you first create a new sketch, the editor will assign a randomly-generated name.
6. Login/signup/user settings: When you first go to the editor page, you will have the option of logging in or signing up for a free account. Once you create an account and log in, the "Log in" and "Sign up" options will be replaced by a "Hello, [user]!" message, which drops down into an option menu when you click on it. An account allows you to do things such as:

• Saving your programs and sketches
• Accessing a list of your saved programs.
• Downloading your programs to your computer.
• Sharing projects and code with others.

You will need an email address to create an account, but if you don't have one, or are not comfortable with using it, you can still save your code by copying and pasting it to a file on your computer, or an email. Then, when you return to the editor, you can paste the code back in. But if possible, an account is a lot more convenient.

Here is what the drop-down menu looks like when you click on the "Hello, [user]!" message. You can see that the [user] portion is replaced with the username, and there are several options underneath:

There are several options available, but our main focus to start with will be the "My Sketches" option, which takes you to a list of the programs that you've saved.

Here's what the page with your saved sketches will look like:

So that's our introduction to our coding environment. Please feel free to continue with the next lesson to get a closer look at the code.