#1 (Gauntlet, Due 8/28)

This set of Deliverables has the following five components, and is due at the beginning of class on Wednesday, August 28, 2019:

  1. Administrative Items
  2. Looking Outwards #01
  3. Reading #01 (Critical Engineering Manifesto)
  4. An Exercise (Embedded Iteration + Randomness)
  5. Intersections

1. Administrative Items.

  • Please read this FERPA Statement and complete the FERPA Waiver form here.
  • Finish reading and reviewing the course syllabus. Please read all pages carefully.
  • Review our course calendar and add, copy, or connect it to your own calendar.
  • Review the page, "Authoring on this Site". Log in to our course WordPress account using the instructions there. Change your password if you wish. Please, please use a robust password or passphrase.
  • Create accounts for yourself on the p5.js Editor site and Glitch.com. This semester, we will use these cloud hosting services for some of our projects. It is recommended that you choose an anonymous public identifier for yourself.

2. Looking Outwards #01.

Topic: Some Technological Art or Design that has Inspired You

This deliverable is your first Looking Outwards report. (As a reminder about what a "Looking Outwards" report means, refer to this document.) I thought it would be nice, at this early stage, if you could share a touchstone--perhaps even a project you saw that made you want to take this class.

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. In a blog post of about 100-200 words,

  • Please discuss the project. What do you admire about it, and why do you admire these aspects of it?
  • 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?)
  • To the best of your knowledge, did creating this project require the development of custom software/scripts, or did the authors create the project using "off-the-shelf" (commercial) software? Or some combination of these approaches?
  • What prior works might the project's creators have been inspired by?
  • To what opportunities or futures does the project point, if any?
  • Provide a link (if possible) to the artwork, and a full author and title reference.
  • Embed an image and a YouTube/Vimeo video of the project (if available).
  • Create a brief animated GIF for the project, if a video is available. (For information on how to make an animated GIF, follow the instructions here.) Keep your GIF around 640-480 pixels and under 5Mb, please.
  • Label your blog post with the Category, LookingOutwards-01.
  • Title your blog post: nickname-lookingoutwards01.

This Looking Outwards is unusual, in that you are asked to report on something you already know about. The remaining LO's this semester will ask you to report on projects that are as yet unknown to you.

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.

3. Reading #01: The Critical Engineering Manifesto

Read the "Critical Engineering Manifesto" by Julian Oliver et al. (2011).

  • Select one of the tenets of the manifesto that you find interesting.
  • In a blog post of 100-200 words, re-explain it in your own words, and explain what you found interesting about it.
  • Provide an example, real or hypothetical, which illustrates the proposition.
  • Label your blog post with the Category, 01-Reading.

4. A Simple Exercise: Embedded Iteration + Randomness

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 p5.js.

In p5.js, write a program that uses embedded iteration to generate a grid of visual elements (such as squares). Write code such that, with a small random probability, an alternative element (such as a circle) is occasionally drawn instead. The composition should refresh whenever the user clicks the mouse (note: some starter code has been provided, below, to help you with this.) Your sketch might look something like the following:

Now:

  • Save your app to your p5.js Editor account.
  • Create a blog post where you will publish this deliverable, and give your blog post the title nickname-IterationExercise, where "nickname" is your WordPress site nickname.
  • In your blog post, provide a link to your sketch at the online p5.js Editor.
  • Create an animated GIF of your sketch, using provided instructions. Embed this GIF into your blog post, as well.
  • Categorize your blog post with the WordPress category, 01-IterationExercise.
  • Double-check your work. Test your blog post and sketch.
// Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;

function setup() {
  createCanvas(400, 400);
  boolDoRefresh = true;
}

function draw() {
  if (boolDoRefresh) {
    // DRAW STUFF HERE....
    boolDoRefresh = false;
  }
}

function mousePressed() {
  boolDoRefresh = true;
}
Are you new to JavaScript and/or p5.js? To create this app, you'll probably find it helpful to use p5.js commands like background(), line(), stroke(), strokeWeight(), and random(). You may also find it helpful to examine the p5.js example for nested iteration, or view Dan Shiffman's lecture about nested loops (9 minutes).

5. Intersections

The purpose of this assignment is to test your abilities to solve a problem that combines graphics, interaction, geometry, and arrays, with relatively little in the way of hand-holding. This is literally a test, and yes, it's a dry-ass problem. I need to make sure you can do this kind of work. It's one of the very few assignments you'll receive this semester which is purely technical. 

Here is an animated GIF showing a recording of an interaction with an app. Your job is to reproduce this app in p5.js.

Some things you should know about how your app is expected to behave:

  • Make sure your canvas is precisely 640 x 480 pixels.
  • Every time the user clicks, the app generates a set of 12 random lines.
  • The app should compute and highlight all the intersections of these 12 lines. As you can see, some lines may not have any intersections, and some lines may have many.
  • It would be ideal if, hypothetically, a small modification to your code allowed the number of lines to be easily increased to (say) 100.
  • It's not important to reproduce the exact colors shown here. The way in which you indicate the lines' intersections is up to you, as well. I happen to have used a little pink circle.
  • I happen to have ensured that all my lines have a fixed length, but that's optional.
  • An Australian fellow named Paul Bourke has written a lot of helpful web pages about geometry, including how to calculate the intersection point of two line segments (in 2 dimensions).

Your job is to reproduce the app as described above, using p5.js. Develop your project in the online p5.js Editor.  Alternatively, you could develop the app offline (by downloading p5.js and following the instructions here) -- but be sure that it is saved in a sketch at the online editor.

Are you new to JavaScript and/or p5.js? You may find it helpful to view Dan Shiffman's lectures about p5.js arrays (13 minutes) and arrays+loops (8 minutes).

Then:

  • Upload and/or save your app to the official p5.js Editor.
  • Create a blog post, titled nickname-Intersections.
  • In your blog post, link to your project at the p5.js Editor.
  • Also create an animated GIF of your sketch. Embed this GIF into your blog post, as well.
  • Categorize your blog post with the WordPress category, 01-Intersections.
  • Test your blog post to make sure it looks good, and that the GIFs are animating correctly. (Remember, the resized thumbnail versions of your GIF, automatically generated by WordPress, will not animate.)

Here's another screen recording of my app, this time with 100 lines: