Capturing Screens

For some assignments you will be asked to document your work with screengrabbed images and/or videos. Such media are likely to remain viewable for many more years than the software remains functionally executable. This page lists 3 techniques, for preparing:

  • Screenshot images
  • Screengrabbed videos
  • Animated GIFs

Making and Saving Canvas Images

You can take a screenshot of your software with an external tool, or sometimes from within the app itself. You can then use Photoshop, Gimp, Pixlr (in a browser) or any number of utilities to crop and adjust the image. All operating systems have a native screenshot function. Go here to learn how:

http://www.take-a-screenshot.org/

BTW, in p5.js, it’s also possible to right-click on a canvas and save that image:

screenshot-p5js-640x160

Another method is to save a frame computationally, directly from your software itself. In p5.js, you would use saveCanvas() or saveFrames().

Making Screen-Grabbed Video

To record video of your app running, you will need a screen recording application:

After you have recorded your video, it might be nice to do some editing. Consider using Premiere, AfterEffects, FinalCut, iMovie, Windows Movie Maker, etc. A voiceover and/or subtitles can be especially
helpful.

Once you have made a screen-grabbed video, consider adding a soundtrack, or a narration in which you are explaining what’s going on. You will then need to upload it to a host such as YouTube or Vimeo.

Making Animated GIFs 

Animated GIFs are robust, simple, and durable ways to document moving
imagery. The easiest way to make one, is to screengrab directly to an
animated GIF with LICEcap:

http://www.cockos.com/licecap/

Another alternative is to save out a sequence of frames, such as with the p5.js saveFrames() function, and compile these into an animated GIF. Here are some other techniques for doing so: