Making and Saving Canvas Images
<\/strong><\/h2>\nYou can take a screenshot of your software with an external tool, or sometimes from within the app itself. You can then use Photoshop<\/a>, Gimp<\/a>, Pixlr<\/a> (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:<\/p>\nhttp:\/\/www.take-a-screenshot.org\/<\/a><\/strong><\/p>\nBTW, in p5.js<\/a>, it’s also possible to right-click on a canvas and save that image:<\/p>\n![\"screenshot-p5js-640x160\"](\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2016\/07\/screenshot-p5js-640x160-300x75.png\")
<\/p>\n
Another method is to save a frame computationally<\/em>, directly from your software itself. In p5.js<\/a>, you would use saveCanvas<\/a>() or saveFrames<\/a>().<\/strong><\/p>\n
Making Screen-Grabbed Video<\/strong><\/h2>\nTo record video of your app running, you will need a screen recording application:<\/p>\n
- QuickTime X<\/a>: Mac (tutorial here<\/a><\/strong>)<\/li>\n
- Camtasia<\/a>: Win, Mac<\/li>\n
- ScreenFlow<\/a>: Mac<\/li>\n
- SnapZ Pro X<\/a>: Mac<\/li>\n
- ScreenFlick<\/a>: Mac<\/li>\n<\/ul>
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
\n helpful.<\/p>\n
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.<\/p>\n
Making Animated GIFs <\/strong><\/h2>\nAnimated GIFs are robust, simple, and durable ways to document moving
\n imagery. The easiest way to make one, is to screengrab directly to an
\nanimated GIF with LICEcap<\/strong>:<\/p>\nhttp:\/\/www.cockos.com\/licecap\/<\/a><\/strong><\/p>\nAnother alternative is to save out a sequence of frames, such as with the p5.js<\/a> saveFrames<\/a>() function, and compile these into an animated GIF. Here are some other techniques for doing so:<\/p>\n- Animated GIF maker<\/a> (online\/in-browser tool)<\/li>\n
- Animated GIFs using Photoshop<\/a> (tutorial)<\/li>\n<\/ul><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading “Capturing Screens”<\/span><\/a><\/p>\n","protected":false},"author":535,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/116"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/116\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/116\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
http:\/\/www.take-a-screenshot.org\/<\/a><\/strong><\/p>\n BTW, in p5.js<\/a>, it’s also possible to right-click on a canvas and save that image:<\/p>\n Another method is to save a frame computationally<\/em>, directly from your software itself. In p5.js<\/a>, you would use saveCanvas<\/a>() or saveFrames<\/a>().<\/strong><\/p>\n To record video of your app running, you will need a screen recording application:<\/p>\n 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 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.<\/p>\n Animated GIFs are robust, simple, and durable ways to document moving http:\/\/www.cockos.com\/licecap\/<\/a><\/strong><\/p>\n Another alternative is to save out a sequence of frames, such as with the p5.js<\/a> saveFrames<\/a>() function, and compile these into an animated GIF. Here are some other techniques for doing so:<\/p>\n 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 … Continue reading “Capturing Screens”<\/span><\/a><\/p>\n","protected":false},"author":535,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/116"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/535"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=116"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/116\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/pages\/116\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/p>\nMaking Screen-Grabbed Video<\/strong><\/h2>\n
\n helpful.<\/p>\nMaking Animated GIFs <\/strong><\/h2>\n
\n imagery. The easiest way to make one, is to screengrab directly to an
\nanimated GIF with LICEcap<\/strong>:<\/p>\n