Tee Topor & Sloane Dove
a blurry photograph of a rat desperately clutching a large slice of cheese pizza and scurrying down the stairs of the subway.
In this tutorial, we’ll go over the basics of mouse interactions in p5.js. We’ll show you how to load images in p5.js, make the images follow your cursor, and how to use an image as paint and your mouse as a brush.
The screen and mouse are modes of seeing, created specifically to make things easier handling a computer. The mouse both simplified and complicated matters, making assumptions about the ways in which people see and erasing the possibilities of deeper understanding of the machines individuals are using every day, sacrificing autonomy. Doug Engelbart invented the computer mouse in 1961, not even knowing how to use a keyboard as that task was delegated to women. This placed women “close to the metal” as defined by Emma Rae Brumml Norton as a means of getting into the hardware, being able to get into the chip and understand its switches before layers of abstraction start to cover its mechanics. In the 1970’s it was women who were typing into computers when they were the size of desks.”
This is a workshop meant for beginners and a means of getting closer to the metal.
What is a function again?
In p5, there are two functions we always use in our sketches. These functions are setup() and draw() and we’ll return to the specifics of both a little later, but I just wanted to start off by defining a function.
We write functions as a set of instructions that we tell our computer to follow. A computer goes through these instructions line by line. In this case, in the setup, we’re creating the canvas, and then after running the code in the setup function, we jump down to the draw function and draw the background color. Functions are always written with the function name and parenthesis followed by curly brackets. Within the curly brackets is where we tell our function what to do.
To add images we need a new function called preload() this will make sure we have access to the media we want to add to our sketches before we draw them onto the canvas. Other examples of media you might add to the preload function include sound files, video files, or font files.
video of the uploading images to the p5.js editor
video of the uploading images to the p5.js editor