• Login
  • Register

Work for a Member company and need a Member Portal account? Register here with your company email address.

Project

Cursor Sketches

Creative Commons

Attribution 4.0 International

Char Stiles

Groups

I have been thinking about all the time I spend on the computer and how much the interfaces that we use feel so familiar to us. I thought that I would take a small section of that and experiment with it. The cursor almost can feel like an extension of one's digital self, I wanted to play with expectations of the mouse and utilize the proprioceptive drift and sense of body ownership on the digital device to create a surprising experience!

These sketches are made with p5.js. It started with the reimagining familiar cursors as drawing tools.

It started with imagining the grabbing cursor as scratching instead!

Creative Commons

Attribution 4.0 International

I took to thinking about what marks the other cursors could leave. Like if the I-beam pointer seemed to highlight white text wherever it went. As if the white text existed there beforehand.

Creative Commons

Attribution 4.0 International

Or if a cursor was used up as you drew with it.

Creative Commons

Attribution 4.0 International

A camera cursor that took a selfie in place.

Creative Commons

Attribution 4.0 International

I then started to think about other interactions the cursor could have. Just looking at the common mac cursors, the plus sign cursor looked ready to pop...

Creative Commons

Attribution 4.0 International

and the trash cursor ready to crumple. I used a library called toxiclibs to make the cursor seems like it has physicality to it. 

Creative Commons

Attribution 4.0 International

Here I used reaction diffusion to create this smoking effect for the crosshair cursor.

Creative Commons

Attribution 4.0 International

Reaction-diffusion to create a fiery gesture. All of the cursors I used for this project except this one are from Apple's website (including hosting, I just copy the image URL and put it in the loadImage function in p5.js) that overviews pointers and their functions. This one I just made by modifying an existing pointer image.

Creative Commons

Attribution 4.0 International

More reaction-diffusion to create some unpleasant trash.

Creative Commons

Attribution 4.0 International

You can see a live demo here!

This demo is meant to be used in a non-mobile browser that allows javascript and is at 100% magnification.

Thank you for reading! If you have any comments or questions feel free to email me at ch4@mit.edu