Getting a simple page working.

  1. Download and install VS Code.

  2. Use the Extensions sidebar to install the Live Server extension.

  3. Create a folder on your computer.

    Choose a good place where you keep a folder for each project you are working on.

  4. Use VS Code to open the folder you created. File → Open Folder...

    Your sidebar should look something like this

Untitled

  1. Create a new file in the folder by pressing the little document-plus icon.

  2. Name it index.html

  3. Put this in there

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello World!
</body>
</html>

  4. Press the “Go Live” button.

    Untitled

  5. Hopefully, the go live extension will start up and serve your index.html file via a local server.

    1. It should open http://127.0.0.1:5500/index.html in a browser for you.
    2. If the “Go Live” button isn’t there, you can also start Live Server from the command menu. Command-Shift-P → Open With Live Server
    3. If Live Server isn’t showing up there, make sure you installed the extension and restart VS Code.

<aside> 🧟 At this point you should have an html file that you can edit locally and preview in a browser using VS Code and Live Server. Great! Let’s add some paper.js into it.

</aside>

Adding paper.js

We’ll use paper.js with JavaScript.

<aside> 🧟 You can use paper.js with JavaScript and with PaperScript. I’ll use Javascript for this demo, and I’m working from this tutorial on the paper.js site. The very first tutorial on the paper.js site can help if you want to use PaperScript.

</aside>

  1. Add a few things to index.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</ttle>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    Hello World!
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js>"></script>
    <script src="sketch.js"></script>
  </body>
</html>

    This adds a little style tag to put a border on the canvas, so we can see it easier.

    It adds a canvas tag. This will be the canvas that paper.js uses.

    It adds a script tag to load paper.js from a CDN.

    It adds a script tag to load sketch.js which we’ll create next.

  2. Click the document-plus icon again to create a new file. Name it sketch.js