Week 8 : Intro to JS

In-Class Goals:
• Say hello and check-in
• Take attendance
• Introduction to p5*js
• Instructor Artist Talk (if there is time)

Homework

Getting Started

Getting p5*js working on your website in VS code

Make a JS file

Make a file called sketch.js (it can be called however you like, but this is a p5 convention for getting started).

You should populate the file with some test p5 code, so that when we run things, we see that it's working. For example:

let x = 0;

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background("#1B998B");
    circle(x,200,30);
    text("testing",x,200);
    x++;
    if (x>width+15){
        x = -15;
    }
}

Point to p5*js

Add the following HTML element the head of the HTML page where you want to use p5*js. This is a large file that contains all the code needed to run p5.

Notice the new script tag.

<script> src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"><script>

Point to your JS file

In the body of your HTML code, add the following reference to your sketch.js file.

<script> src="sketch.js"><script>

Conclusion

If everything is working, you should have a colored rectangle with a moving circle on your webpage!

Other Materials