This set of deliverables has 3 parts, and is due Wednesday 9/9 at the beginning of class:
- An optional fun reading about loops;
- A brief reading-response;
- A brief Looking Outwards
- A looping GIF using arcs.
0. Optional Fun Reading about Loops
Check out the article “On Repeat: How to Use Loops to Explain Anything” by Lena V. Groeger, a journalist/developer/information-designer at ProPublica. This article is purely for your edification/entertainment; there’s no deliverable. It should take about 10-15 minutes to view this elegant stack.
1. Looking Outwards #02: Generative Art Deep Dive
For each of the following 4 computational artists, spend a solid 5 minutes (each) looking at their generative projects:
- Helena Sarin, instagram • twitter
- Zachary Lieberman, instagram
- Manolo Gamboa Naon, behance
- Sofia Crespo, instagram
- Create a blog post titled nickname-LookingOutwards02
- Select one artwork by one of the above three artists that you find appealing or intriguing.
- Grab an image of the artwork (use a screengrab if necessary); embed this image in the post.
- Write a sentence about why you selected this project.
- Include a link to the project’s URL.
- Categorize your blog post LookingOutwards-02
2. Reading #02: First Word Art, Last Word Art
Please read the one-page essay, “First Word Art / Last Word Art” by Michael Naimark. A backup PDF of this article can be found here. You are asked to write a brief (two-paragraph) response to this essay.
Please contemplate technical novelty in relation to the arts. The author of this reading, Michael Naimark, is a new-media artist who has been active in experimental cinema and virtual reality since the mid-1970s. The duality Naimark describes is one attempt to understand how culture accommodates new technologies, delineating a spectrum from the well-understood to the utterly novel.
Make a new blog post in this WordPress site. In your blog post, please write about 150-200 words reflecting on Naimark’s article. Some possible starting points for your reflection could include (but are not limited to):
- Where do you locate your interests along this spectrum?
- What are some ways in which new technologies shape culture?
- What are some ways in which culture shapes technological development?
- We might aspire to make stuff of lasting importance, but when our work is technologically novel, it doesn’t always age well. Discuss.
When you are done, please give your blog post the title: nickname-Reading02, and categorize your blog post with the WordPress category, 02-Reading.
3. Living Wallpaper: A Looping, Animated Environment for Zoom.
This is the “main” part of Deliverables #2, and will be the only part of this week’s assignment which is critiqued in class. In this project, you will create a looping, animated graphic, and produce this in two versions:
- An animated GIF, uploaded to this site
- A video loop which will be used as your background in Zoom during Wednesday’s class
Your GIF must be uploaded to this site before the beginning of class Wednesday, 9/9. So:
- SKETCH FIRST! Before doing anything, make some (real) sketches in your notebook. Try to develop a graphic concept.
- Your canvas must have 16:9 dimensions. It is recommended that your canvas be 1280×720. Be aware that Zoom has a minimum background size of 640×360.
- Write code which generates a (seamlessly) looping animation. You may use the code template below to get started.
- It is recommended that you restrict yourself to just a few, well-chosen colors. Remember, an animated GIF must represent all of its frames with a single a palette of just 256 colors. You may find this resource helpful: tips for making animated GIFs.
- Limit the duration of your GIF to approximately 30-300 frames long (~1-10 seconds).
- Export your animation frames from your code computationally (i.e. from code), and then use a tool (such as one of these) to assemble the animated GIF from the frames. It is strongly recommended that you NOT use a screencapture program to make your GIF! Also:
- be sure to design your GIF so that it loops infinitely, with a duration of forever. Make sure it loops without a “hiccup”. Please note: If your loop has a hiccup, you will get an “F”. Did you read that?
- be sure to create your GIF so that it plays back at least 20 frames per second (preferably 30 FPS). These are options you can set with proper GIF creation tools. You may need to specify the frame rate using milliseconds per frame (e.g. 30 FPS = 33 ms/f).
- be sure your GIF is under 10MB in filesize, preferably under 5MB. You can optimize (compress) your GIF with a tool like https://ezgif.com/.
- In a blog post, upload and embed your animated GIF. Important: Embed the GIF at its original resolution. Be sure not to embed any version that has been automatically resized by WordPress; it will not be animated! Also important: please upload your GIF directly to this WordPress site. GIFs embedded from Giphy or elsewhere in the cloud are not acceptable and will receive zero credit.
- Write a paragraph about the experience of creating the piece. Which easing function did you select, and why? Critique your work: where you feel you succeeded, where you feel you fell short of what you’d hoped to achieve.
- Make sure your project is uploaded to the online editor.p5js.org.
- Include a scan or photo of your pen-and-paper sketches.
- Label your blog post with the Category, 02-LivingWallpaper.
- Title your blog post, nickname-LivingWallpaper.
Below is a p5.js template for exporting frames to make an animated GIF loop. If you decide to use the template code, you’ll need to rewrite the renderMyDesign() method, which takes a percentage from 0..1 (NOTE: this is not a frame number!) as its argument.
The template below exports individual frames. You will need to be resourceful about finding a way to convert these frames into a GIF and into a video for Zoom. EZGif.com has tools to help, such as an image-batch-to-GIF maker, and a GIF-to-MP4 converter.
Here is an animated GIF, and the code template (in JS and Java) that produced it. Observe how the small pink square is moving nonlinearly, using one of the Pattern_Master functions. It has some character!
To get this working, you may find the following video helpful: