Legacy content

jQuery

jQuery is a JavaScript plugin that allows more effortless interactivity between the user and different HTML elements. After importing jQuery in your HTML head, you can then treat any HTML elements as a pseudo-JS variable. To do this, you can reference an element by id:

let Length = $(“#lengthslider”);

where the id is “lengthslider” in this case. Or by class:

let Length = $(“.slider”);

where the class is “slider” in this case. Generally, it is very good practice to use ID, NOT class, when specifying any one element. When a HTML element is defined in JS, jQuery can then call several different functions on that element. One of the most important functions we use is the value function, which can either return the value of a HTML element:

let value_of_element = Length.val();

Or can set the value of the HTML element:

Length.val(“Hello Mars!”);

For more on jQuery, visit https://www.w3schools.com/jQuery/.

p5.js

p5.js is a drawing tool that allows developers to create non-plot graphics (such as a mass and spring) with heavy mouse interactivity. It does this by repeatedly drawing objects on a canvas at a rate equal to 1/framerate. After p5 is imported in your HTML header, the first step you will want to take is creating setup and draw functions in your JS file:

function setup() {let canvas = createCanvas(500,400);canvas.parent(‘canvas’);frameRate(60);};function draw() {clear();background('#ffffff');noStroke();fill("#A51900");rect(mouseX, mouseY, 75,75);};

P5 automatically recognises these two functions. Setup defines all the essential meta-variables for p5’s drawing, variables such as frame rate and canvas size (specified in pixels). The Draw function is then carried out every [1/framerate] seconds. Good practice for p5 is first to clear any previous drawings, then draw your background. After that, you can draw your objects. In the example above, a brick red square is drawn at the mouse position with length and width equal to 75px.

For more on p5.JS visit https://p5js.org/.