Week 3 (due Sep 19)

The readings, assignments, and projects below constitute the Week 3 Deliverables and are due by 11:59pm EDT on Saturday, September 19th:

  1. Technical Readings
  2. Looking Outwards 02 [Autolab and Blog]
  3. Assignment-03-A (Bounce) [Autolab]
  4. Project-03: (Dynamic Drawing) [Autolab and Blog]
  5. Hand in (and post) your work

1. Technical Readings

2. Looking Outwards 03: Computational Fabrication

This is to be your third Looking Outwards report. Our topic for this week is closely related to last week’s — generative art — but is specifically concerned with code that produces real physical forms. With computational digital fabrication, physical forms (such as objects, sculptures, and architectures) are generated by custom algorithms, and then realized in plastic, metal, and other materials through fabrication machinery such as 3D printers, laser cutters, CNC mills, and more.

First, please read this article by Prof. Levin (originally prepared for his advanced studio) which provides a partial overview of the field of parametric 3D fabrication. Then, some additional places to get started include (but are not limited to):

Identify a particular project or work 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?
  • What do you know (or what do you suppose) about the algorithms that generated the work?
  • It what ways are the creator’s artistic sensibilities manifest in the final form?
  • Link (if possible) to the work. To the best of your abilities, be sure to provide the creator’s name, title of the work, and year of creation.
  • Embed an image and/or a YouTube/Vimeo video of the project.
  • Add a caption to your image that explains what it is and/or where it came from.
  • Label your blog post with the Category, LookingOutwards-03 and your section, e.g. SectionB.

In addition to posting your work on WordPress, submit your blog text in your zip file handin in Autolab under the name blog.txt in the folder andrewID-03-LO.

3. Assignment-03-A (Bounce)

In this assignment, you will create a very simple game. A ball (circle) will start in the center of the canvas and move in a horizontal direction (left or right) AND vertical direction (up or down). When the ball “hits” the edge of the canvas, it will bounce back in the opposite direction, either horizontally or vertically. (If it hits a corner, then both the ball will change direction both horizontally and vertically.) The rate that the ball moves in the horizontal and vertical direction is called its h-velocity and v-velocity, and each is represented by a random number between -5 and +5. The number indicates how many pixels the ball moves in that direction between each frame of the animation.

As the ball is bouncing around the canvas, the user needs to click inside the ball. If they do, then the ball gets a new random h-velocity and v-velocity, both in the same range (-5 to +5), and they earn one good point. If they miss, they earn one bad point. If the user reaches 5 good points before reaching 10 bad points, the user wins and the game stops with a green canvas. If the user reaches 10 bad points before reaching 5 good points, the user loses and the game stops with a red canvas.

Here is what a game might look like:

The requirements you must satisfy are the following:

  • The canvas is of arbitrary size, but it is at least 200 X 200.
  • The ball bounces off the top, right, and bottom sides of the canvas.
  • The ball bounces when it first touches the side, e.g. when the right edge of the ball meets the right edge of the canvas.
  • When the ball bounces off of the left or right side, the vertical velocity remains the same.
  • When the ball bounces off the top or bottom side, the horizontal velocity stays the same.
  • When the ball is “touched” by clicking inside its bounds, it receives a new random horizontal velocity and new random vertical velocity in the same valid range.
  • The game continues until the user clicks the ball five times successfully or misses 10 times. Once this happens, the game should just stop with a green canvas or red canvas, respectively.

HINTS: You should define variables to store the x and y location of the ball, the horizontal and vertical velocity, and the number of good and bad points. You may use additional variables as needed.

Submit your sketch.js and index.html file to Autolab in your compressed zip file in a folder named andrewID-03-A.

4. Project-03: Dynamic Drawing

In this Project, which (as usual for Projects) is to be uploaded to Autolab as well as our course WordPress blog, you will create a drawing that changes when the mouse moves. Here are some examples to get you started thinking:

Animation by David Whyte
Animation by David Whyte
(Notice that these images are not controlled by the mouse, but you can imagine that many could be.)

Here is an example written in p5.js and using the mouse. It is intentionally very basic, but it conveys some elements we expect to see in your project: the dynamics of the image are at least as important as the image itself, motion is controlled directly by the human gesture of mouse movement, multiple parameters are coordinated (in this case size and position of two squares) and coupled to the mouse movement (and notice that some parameters increase while others decrease). The comments at the end of the Project 2 description regarding minimally viable solutions apply here.


function setup() {
    createCanvas(400, 400);

function draw() {
    fill(255, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    rect(10 + m * 190.0 / 400.0, 200.0,
         size, size);
    fill(0, 0, 255);
    size = 350 - size;
    rect(200 + m * 190.0 / 400.0, 200.0,
         size, size);

Finally, here are the Project-03 Requirements: 

  • Using a canvas size whose dimensions are 600×450 (or 450×600, whichever you prefer), create an interactive program in p5.js that generates a dynamic drawing controlled by the mouse.
  • You can use mouseX, mouseY or both to control your image.
  • You must control at least 4 different aspects of image elements – size, position, angle, color/shade, etc.
  • Some parameters must move in contrary motion, e.g. lighter and darker, left and right, bigger and smaller, clockwise and counter-clockwise, etc.
  • The image should not have random or non-deterministic elements. Each time the cursor moves to a particular point, the image should be the same.
  • Comment your code – it should be easy to tell how the code works, e.g. explain coordinate calculations (“increases from 10 to 30 as mouse moves down”) and describe what parts of the drawing are drawn by different parts of your code. (Note: adding comments while you are programming to document your thought process is a good idea.)
  • When you’re done:
    • Embed your p5.js sketch in a blog post on this site, using the (usual) instructions here. Make sure that your p5.js code is visible and attractively formatted in the post.
      • In your blog post, write a sentence or two reflecting on your process and product. In discussing your process, it would be nice to see any of your paper sketches from your notebook; these could be as simple as photos captured with your phone.
      • Label your project’s blog post with the Category Project-03-Dynamic-Drawing and your section, e.g. SectionA.
    • Submit your sketch.js and index.html file to Autolab in your compressed zip file in a folder named andrewID-03-Project.

5. Handin and post your work

  • Zip (compress) your handin-03 folder, which should contain folders containing your blog essay, assignment and project, and upload your zip file to Autolab, using the provided instructions..
  • Remember to post your blog and your project in two separate posts on the WordPress course website with appropriate category labels so we (and students) can find your work easily.

Your zip file handin on Autolab must be submitted by Saturday, September 19th by 11:59PM EDT to be considered on time. Your blog and project posted on WordPress should be the same or similar to what you submitted in Autolab and should also be posted by the due date. (You may make minor corrections on WordPress for formatting issues.)