- \n
- Administrative Items<\/a><\/li>\n
- Looking Outwards #01<\/a><\/li>\n
- Reading #01<\/a><\/li>\n
- Exercise:\u00a0Embedded Iteration + Randomness<\/a><\/li>\n
- Generative Map of an Imaginary Place<\/a><\/li>\n<\/ol>\n
<\/a><\/p>\n
\n1. Administrative Items.<\/h2>\n
- \n
- Please read this\u00a0FERPA Statement<\/a>\u00a0and complete the\u00a0FERPA Waiver form<\/a> here.<\/li>\n
- If you haven’t already, please finish reading and carefully reviewing the course Syllabus<\/a>.<\/li>\n
- Review our course Calendar<\/a>\u00a0and add, copy, or connect it to your own calendar.<\/li>\n
- Review the page, “Authoring on this Site<\/a>“. Log in to this course WordPress.<\/li>\n
- Create accounts for yourself on the Slack<\/a>, and also the p5.js Web Editor<\/a>\u00a0and\u00a0Glitch.com<\/a>. This semester, we will use these cloud hosting services for many of our projects. It is recommended that you choose an anonymous public identifier for yourself.<\/li>\n<\/ul>\n
<\/a><\/p>\n
\n2. Looking Outwards #01.<\/h2>\n
Topic: Some Technological Art or Design that has Inspired You.<\/strong><\/p>\n
This deliverable is your first\u00a0Looking Outwards<\/em>\u00a0report. (As a reminder about what a “Looking Outwards” report means, refer to\u00a0this\u00a0document<\/a>.) I thought it would be ideal, at this early stage, if you could briefly share a touchstone–perhaps even a project you saw that compelled you to take this class.<\/p>\n
Think about an interactive and\/or computational project (from anywhere, by anyone except yourself) that you knew about before starting this course, and which you find inspirational. It should be something that someone made with code, at least in part. In a blog post of about 100-200 words,<\/p>\n
- \n
- Please\u00a0discuss the project.<\/strong>\u00a0What do you admire about it, and why do you admire these aspects of it?<\/li>\n
- How many people were involved in making it, and how did they organize themselves to achieve it? (Any idea how long it took them to create it?)<\/li>\n
- To the best of your knowledge, did creating this project require the development of\u00a0custom software\/scripts, or did the authors create the project\u00a0using “off-the-shelf” (commercial) software? Or some combination of these approaches?<\/li>\n
- What prior works might the project’s creators have been inspired by?<\/li>\n
- To what opportunities or futures does the project point, if any?<\/li>\n
- Provide a\u00a0link<\/strong> (if possible) to the artwork, remembering to list the full author and title.<\/li>\n
- Embed<\/strong>\u00a0an image and\u00a0a\u00a0YouTube\/Vimeo video of the project (if available).<\/li>\n
- Create a brief\u00a0animated GIF<\/strong>\u00a0for the project, if a video is available. (For information on how to make an animated GIF, follow the instructions\u00a0here<\/a>.) Keep your GIF around 640 in size pixels and under 5Mb, please.<\/li>\n
- Label<\/strong>\u00a0your blog post with the Category,\u00a0LookingOutwards-01<\/em>.<\/li>\n
- Title<\/strong>\u00a0your blog post:\u00a0nickname-lookingoutwards01. <\/em>For example, if your course nickname was “derp”, the title of your blog post would be “derp-lookingoutwards01”.<\/li>\n<\/ul>\n
This first\u00a0Looking Outwards<\/em>\u00a0is unusual, in that you are asked to report on something you\u00a0already<\/em>\u00a0know about. The remaining LO’s this semester will ask you to report on projects that are\u00a0as yet unknown to you<\/em>.<\/p>\n
As you can probably tell, there’s another purpose to this Looking Outwards….which is to make sure you understand the mechanics of authoring posts on this WordPress blog.<\/p>\n
<\/a><\/p>\n
\n3. Reading #01: So You Want to Build A Generator<\/em><\/h2>\n
Read the article “So You Want to Build A Generator<\/a>” by Kate Compton (@galaxykate). This should take about 20 minutes.<\/p>\n
- \n
- In a blog post of 100-200 words,\u00a0re-explain<\/strong> Compton’s “10,000 Bowls of Oatmeal Problem” in your own words. Can you think of a scenario in which this might be a problem, and another in which it isn’t? What are some artistic or technical strategies for overcoming this problem?<\/li>\n
- Label<\/strong>\u00a0your blog post with the Category,\u00a001-Reading<\/em>.<\/li>\n<\/ul>\n
<\/a><\/p>\n
\n4. Exercise:\u00a0Embedded Iteration + Randomness<\/h2>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/molnar_computer_drawing_tallhalf-313x480.png\")
<\/a><\/p>\n(Image: computational iterative plotter artwork by Vera Moln\u00e1r<\/a>, 1974. This design contains embedded iteration<\/strong> \u2014 can you see the triple ‘for’-loop?\u00a0 It also contains randomness: of the 5x5x10 squares that would ordinarily be drawn, just a few\u201410, or about 4% \u2014 have been randomly omitted.)\u00a0<\/em><\/p>\n
The purpose of this exercise is to ensure that you understand fundamental programming concepts such as iteration and conditional testing. This exercise also serves as a quick introduction to basic graphics and interaction with\u00a0p5.js<\/a>.<\/p>\n
First, be sure to have created an account at the p5.js Web Editor!<\/p>\n
In p5.js, write a program that uses\u00a0embedded iteration<\/a>\u00a0to generate a grid of visual elements (such as squares). Write code such that, with a\u00a0small<\/em>\u00a0random probability, an alternative element (such as a circle) is occasionally drawn instead. The composition should refresh whenever the user clicks the mouse (note:<\/em>\u00a0some starter code has been provided, below, to help you with this.) Your sketch might look something like the following:<\/p>\n
\n\n
\n Are you new to JavaScript and\/or p5.js?<\/strong>\u00a0To create this app, you’ll probably find it helpful to use p5.js commands like\u00a0background<\/a>(),\u00a0line<\/a>(),\u00a0stroke<\/a>(),\u00a0strokeWeight<\/a>(), circle<\/a>(), square<\/a>(), and random<\/a>(). You may also find it helpful to examine the p5.js example for\u00a0nested iteration<\/a>, or view Dan Shiffman’s lecture about\u00a0nested loops<\/a> (9 minutes long).<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n - Label<\/strong>\u00a0your blog post with the Category,\u00a001-Reading<\/em>.<\/li>\n<\/ul>\n
- If you haven’t already, please finish reading and carefully reviewing the course Syllabus<\/a>.<\/li>\n
- Looking Outwards #01<\/a><\/li>\n
![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-212\/f2020\/wp-content\/uploads\/2020\/08\/iteration.gif\")
<\/a><\/p>\n