Setting Up Your Workspace

Introduction

When following these tutorials, it's best to have your own workspace. This page will show you an example of one, and how to set it up.

First Steps

The first thing you'll need to do is create a new folder in the location of your choice. This will be where all of your project files will go.

Next, create a new HTML file and add it to the new folder. You don't have to name it anything in particular,

After that, create a .js file, and add it to the folder. This is where your code will go.

When you're finished with these steps, your project folder should look somewhat like this:

project_folder/
|-- index.html
|-- main.js

Creating the Webpage

Now that you have your .html file, it's time to actually add things to it. Luckily, you won't have to do much.

First, add !DOCTYPE and html tags. After that, add a head tag and leave it empty; we'll be adding stuff to it later.

Finally, add the body tag, then add a script tag to it, with the src property set to the script you added earlier. This will allow your code to run in the webpage.

Once you're finished, the main .html file should look somewhat like this:

<!DOCTYPE html>
<html>
    <head>
        <!--You may have to put some things here to keep your browser from yelling at you.-->
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

Adding Extra Scripts

Some of the tutorials on this site require the use of functions that aren't necessarily available by default in JavaScript. For those, you'll need to either write the functions yourself or find a library with the functions you need.

Luckily, the scripts you'll need are already available on this site. Each tutorial includes a link to them when needed, but they can also be downloaded here. Unzip the files into your project folder.

Once you're finished with that, your project folder should look somewhat similar to this:

project_folder/
|-- index.html
|-- main.js
|-- ImageLoader.js
|-- ColorConverter.js

Now that the script files are in the right place, it's time to add them to the main webpage. Luckily, like last time, it's as simple as adding a script tag to the right place. Since both of the scripts you downloaded don't have code that interacts with the body directly, it's safe to put them in the head, like so:

<!DOCTYPE html>
<html>
    <head>
        <script src="ImageLoader.js"></script>
        <script src="ColorConverter.js"></script>
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

And that should be everything! Adding the new functions to your code is simple — they can be invoked the same way as any other function.

Of course, if you've come here without any idea of how functions work, W3Schools and MDN have some pretty good explanations. They're probably better than anything I could write about them.

Matt's Graphics Tutorials