Set 03 (Due 9/17)

This set of Deliverables has an eight parts:


Technical Readings.

  • Please read:
    • Chapter 4 (pages 63-80) in GSWp5.js, with a focus on for() loops.
    • Chapter 6 (Translate/Scale/Rotate, pages 109-121)
    • Chapter 9 (Functions, page 159-171)
    • Appendices A, B, and C (Coding Tips, Order of Operations, and Variable Scope).
  • You will be reading about iteration, embedded iteration (also called nested iteration), functions, and graphical transformations. Please let your instructor know if you would like additional reading resources for this material.

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, last spring) 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 (if available).
  • Label your blog post with the Category, LookingOutwards-03.
  • Label your blog post with the Category referring to your section (e.g. GolanSection,RogerSectionARogerSectionBRogerSectionD, or RogerSectionE).

Assignment 03-A: A Mini-Calendar

Thirty days hath September,
April, June, and November.

Screen Shot 2015-09-08 at 10.17.53 PM

In this Assignment, you will use a for() loop to generate a row of 30 visual elements. These 30 elements are intended to represent the 30 days of September (the current month, as I write this). All of the elements should be drawn identically — except for the one whose index (as counted from left to right) corresponds to the current day. That one should be drawn “highlighted”.

This Assignment is to be submitted through Autolab. Its purpose is to practice your skills in combining iteration with conditional testing, while simultaneously introducing some basic timekeeping functions. 

Requirements:

  • Using our new lightweight sketch template (template-p5only.zip), create a p5.js program that displays a short, wide canvas, whose dimensions are 640×80.
  • Using a single for() loop, generate a row of 30 elements. These elements will represent the 30 days of September, which is the current month. These might be circles, rectangles, or something similarly simple.
  • All of the elements should be drawn identically — except for the one that corresponds to the current day, which should be drawn “highlighted”. For example, I’ve used circular elements in the example above. As you can see, the screenshot above was recorded on September 8th, and thus the 8th circle has been (automatically) drawn with a yellow highlight. Your program must automatically highlight the correct element, depending on whichever day of the month it is.
  • To highlight the special “today” element, you must use a conditional test, such as an if() block. You’ll also need to use p5’s day() function. To clarify: the “today” element must substitute for a regular one; you may not render the “today” element over (on top of) a regular one.
  • As a guide: your entire program should be shorter than two dozen lines of code, all told. If your code is longer than this, you’re probably not doing this the right way. (Our version is 16 lines long, or maybe 20 line including comments.) The only exception to this would be:
  • For a totally optional 5% bonus on this assignment, instrument your program so that it shows the correct number of days for whatever the current month might happen to be (e.g., September hath 30 days, but October hath 31). To reckon the length of February, use the algorithm provided here for determining Leap Years (https://en.wikipedia.org/wiki/Leap_year#Algorithm). Naturally, you’ll need to know how to obtain and use the current month() and year(). If you decide to attempt this bonus problem, please say so in a comment at the top of your code.
  • Don’t forget to comment your code, and please give attention to code style.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-03-A
  • Name your project UserID-03-a. For example, if your Andrew ID is placebo, then your project name should be placebo-03-a. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-03-a. Please be attentive to this!
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using ournew lightweight sketch template, there will be no libraries subdirectory to include.)

Assignment 03-B: A Hexagonal Grid

In this Assignment, you are asked to modify some provided code that generates a square grid, so that it generates a regular hexagonal grid instead. The purpose of this assignment is to use a simple geometric problem to reinforce your understanding of nested iteration. This Assignment is to be submitted through Autolab.

Here’s an example of embedded iteration that creates a square grid.

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

function draw() {
  background(128);
  var tw = 60;
  var th = 60;
  var oy = 50;
  var ox = 50;

  for (var y = 0; y < 6; y++) {
    for (var x = 0; x < 10; x++) {
      var py = oy + y * th;
      var px = ox + x * tw;
      ellipse(px, py, 50, 50);
    }
  }
}

You’re all aware by now, from your reading in Chapter 4 of Getting Started With p5.js (e.g. Example 4-10, Embed One for Loop in Another), that you can create a rectangular grid by nesting one for() loop inside of another. An example of this can be seen in the applet above.

If you’d like to understand this better, feel free to fiddle with this p5.js Example, or watch Dan Shiffman’s patient explanation in this Youtube video. (Please note that he’s using the sister language of p5.js — Processing (Java), but the two environments are similar enough that you should be able understand the core idea.)

But square grids aren’t the only game in town! In fact, for many purposes, hexagonal grids offer a far more economical (or even, optimal) use of material and energy. That’s why we observe hexagonal grids so frequently in nature — whether in structures like bees’ honeycombs or in the close-packed basalt column formations in the Giant’s Causeway in Northern Ireland. (Images from Jose De La Torre.)

hexagons

You should be able to make a hexagonal grid, too. In this Assignment, your task is to modify the above code so that it generates a regular hexagonal grid. When you’re done, it should look something like the following:

hexagonal-grid

The most important thing to remember about regular hexagonal grids is that, unlike square grids, the vertical spacing between elements is not the same as the horizontal spacing. This is because regular hexagonal grids are composed of equilateral triangles — and equilateral triangles are shorter than they are wide:

equilateral-triangle

How much shorter, to be precise? Well, given an equilateral triangle whose baseline is 1 unit wide, its height is roughly 87% of that — or, as Pythagoras would tell us, one-half of the square root of 3 as much, to be precise. So, here now are your…

Requirements: 

  • Using the code above as a starting point, and our new lightweight sketch template (template-p5only.zip), create a p5.js program that displays a regular hexagonal grid of visual elements. Keep your canvas dimensions under 800×400.
  • Your grid should have precisely 6 rows of elements. The number of elements per row should alternate between 10 and 9. You may find it very helpful to use the modulus (%) operator to know whether you are examining an odd or even row.
  • The vertical distance between rows should be precisely computed, according to the proportions of an equilateral triangle as discussed above. You’ll lose points if we see the constant 0.8660254… (or something similar) in your code.
  • The shapes, colors and sizes of elements are up to you, as long as you meet the requirements about how they are positioned.

As per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-03-B
  • Name your project UserID-03-b. For example, if your Andrew ID is placebo, then your project name should be placebo-03-b. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-03-b. Please be attentive to this!
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder, including the .js and .html files. (Since you’re using our new lightweight sketch.js template, there will be no libraries subdirectory to include.)

Assignment 03-C: A Geometric Progression

geometric-sequence-visualization

In this Assignment, you will use a for() loop to visualize a geometric progression. Also known as a geometric sequence, a geometric progression is a series of numbers where each term after the first is computed by multiplying the previous one by a fixed number called the common ratio.

This Assignment is to be submitted through Autolab. Its purpose is to practice your skills writing iterative computations, to introduce some commands related to displaying text onscreen, and to test your attention to visual detail. Successful solutions to this prompt will closely resemble the screenshot above. This assignment may be thought of as a possible precursor to the practice of information visualization. 

Requirements:

  • Using our new lightweight sketch template (template-p5only.zip), create a p5.js program that displays a canvas whose dimensions are precisely 800 x 200 pixels. Declare a variable that will be used to represent the width of each of the rectangles, and compute its value to be one-twentieth of the width of the canvas. Now, using this variable and a for() loop, divide the canvas horizontally into 20 equally-spaced rectangles.
  • Assign the height of the first (leftmost) rectangle to be exactly 1.0 pixels. We will use 1.333333 as our progression’s common ratio for this Assignment. Thus, the height of every subsequent rectangle should be precisely 1.333333 times as large as the one to its left. (For example, the third rectangle will be 1.0 * 1.333333 * 1.333333 ≈ 1.777777 pixels tall; and so forth.) You may find it helpful to create variables that represent the common ratio and the height of the current rectangle under consideration.
  • For full credit, render your rectangles such that they rise upward from the bottom of the canvas, rather than hanging down from above.
  • It’s now time to label your values. In the region just above each rectangle, using the text() command, display a number representing that rectangle’s height.
  • Hey: make your labels legible. Note, for example, that the numbers shown in the screenshot above represent rounded values. Below you can see some of the graphical problems you’ll need to solve. Dealing with this kind of stuff is called craft. You may find it helpful to use the textAlign() and nf() commands.
  • Don’t forget to comment your code, and please give attention to code style.

geometric-sequence

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-03-C
  • Name your project UserID-03-c. For example, if your Andrew ID is placebo, then your project name should be placebo-03-c. You can save your project from p5.js to this name using “Save as ..”, or you can simply rename the project directory to placebo-03-c. Please be attentive to this!
  • Zip and upload your code to Autolab, using the provided instructions. Zip your entire sketch folder. (Since you’re using our new lightweight sketch.js template, there will be no libraries subdirectory to include.)

Assignment 03-D. A Color Gradient

Screen Shot 2015-09-08 at 4.34.22 AM

In this Assignment, you will write p5.js code to generate a horizontal gradient that interpolates between two colors across 17 rectangles.

This Assignment is to be submitted through Autolab. Its purpose is to practice your skills in combining iteration with arithmetic. It introduces the concept of linear interpolation.

Requirements:

  • Using our new lightweight sketch template (template-p5only.zip), in a canvas whose dimensions are precisely 600 x 80 pixels, write code to display a horizontal color gradient, such that two colors are automatically interpolated across exactly 17 rectangles. The 17 rectangles must precisely fill the width of the canYou may use any two RGB colors you please, so long as they are sufficiently different from each other. Please do not use grayscale (single-channel) colors.
  • The 17 rectangles must be precisely adjacent, equally spaced, and equally sized.
  • Store the number of rectangles in your gradient in a variable called nRectangles. Yes, it really must be called nRectangles. Furthermore, the number to which this variable is assigned, 17, may only appear once in your entire program.
  • Engineer your code such that, if the value of the nRectangles variable were to be initialized to some other positive integer, your program would accommodate this by displaying the revised number of rectangles, and re-computing the intermediate colors. For example, there’s a picture below of how your program might appear if the value of nRectangles were set to 9.
  • You must use a for() loop to calculate the positions and fill-colors of the 17 rectangles. In other words, the sizes and positions of the rectangles must be computed in a for loop, based on information like nRectangles and the for() loop’s counting variable. Zero credit will be awarded for solutions which do otherwise.
  • Optionally, you are invited to explore how certain p5.js functions, such as map(), lerp(), and/or lerpColor(), could potentially be quite helpful for this Assignment.
  • Finally, implement some code for the mousePressed() function that randomizes the two colors whenever the user clicks the mouse. You can study the template we provided for Project-02 to understand how you might do this.

Here’s how your program ought to behave if you were to change the value of nRectangles to 9 (not that we want 9 rectangles, but):

Screen Shot 2015-09-08 at 5.04.40 PM

And here’s how your program might behave if you successfully implement the requested mousePressed() functionality. New pairs of random colors are generated each time the user clicks:

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-03-D
  • Name your project UserID-03-d. For example, if your Andrew ID is placebo, then your project name should be placebo-03-d.
  • Zip and upload your entire sketch folder to Autolab. There should be no libraries subdirectory to include.

Assignment 03-E. A Counting Button

Buttons are elementary and ubiquitous interface controls. As a creative technologist, you need to know how to make them.

oshea-rocket

In this Assignment, you will make a interactive button that maintains some state information about itself (i.e. on or off), and keeps track of how many times it has been clicked, in order to know whether to switch from white to black, or from black to white.

This Assignment is to be submitted through Autolab. Its purpose is to reinforce your skills in combining conditional testing with the maintenance of state in variables. 

boxclick

Carefully study the animated GIF, above. You will be re-creating the behavior of the square button shown here, as follows:

  • Three clicks are required for the square to flip from white to black.
  • Four clicks are required for the square to flip from black to white.
  • The user must click inside the square in order for their click to make a difference. Clicking outside the square is not counted, and has no effect on the system.
  • We drew a little number in the top left (to indicate the current click-count), but you don’t have to.

Requirements: 

  • Using our new lightweight sketch template (template-p5only.zip), in a gray p5.js canvas whose dimensions are 200 x 200, render a square. This square will be drawn with either a white fill or a black fill.
  • Use some global variables to govern the square’s size and location. In the example shown here, we made our square 100 x 100 pixels and centered. But your code should accommodate other possibilities.
  • Create and initialize a globally-scoped variable, called count, which stores how many times the user has clicked inside the square since the last time it flipped.
  • Create and initialize a globally-scoped variable, called state, which stores whether or not the square is white or black. Using an if/else block, allow that variable to govern whether or not the square is drawn white or black.
  • In the mousePressed() function, write code to test whether or not the user has clicked inside the square. (Be sure to test their click coordinates against the variables which store the size and location of the square.) If the user has clicked in the square, increment the count variable, and update the state variable accordingly.

Then, as per usual for all Assignments uploaded to Autolab:

  • Put the following information into comments at the top of your code: Your name; Your class section or time; Your email address, including @andrew.cmu.edu; and Assignment-03-E
  • Name your project UserID-03-e.
  • Zip and upload your entire sketch folder to Autolab. There should be no libraries subdirectory to include.

Project 03-Wallpaper

In this Project, you’re asked to use iterative techniques to generate a repeating pattern, such as for wallpaper or fabric.

This Project is to be submitted through the WordPress site. Its purpose is to allow you to explore generative aesthetics through iterative computation. 

wallpaper1 wallpaper2

Before you begin, take a moment (or lose an afternoon) to check out this mind-boggling archive of more than 6000 antique wallpapers, dating from the 18th and 19th centuries, all scanned at high resolution. (You can also learn more than you ever thought there was to know about the history of wallpaper in New England, as written by wallpaper expert, Richard Nylander.)

Requirements: 

  • Sketch first on paper to design a repeating pattern which would make (for example) an attractive wallpaper wallpaper pattern or textile design. Give consideration to aesthetic issues like symmetry, rhythm, color; details at multiple scales; and a balance between organic and geometric forms.
  • Write code, using p5.js, that generates this attractive visual rhythm. Please limit the dimensions of your work so that the largest side of your canvas is no greater than 800 pixels.
  • Make something you could imagine yourself actually wearing. Because that’s easier than ever, with “fabrication-on-demand services” such as:
  • Per your artistic inclination, you may include subtle randomness for added visual interest.
  • You are asked to produce a static (rather than dynamic, interactive or time-based) design. We therefore recommend you use place a noLoop() command in the setup block of your final submission.

And, as usual,

  • Embed your p5.js sketch in a blog post on this site. Make sure that your code is visible in the post and attractively formatted/commented.
  • In your blog post, write a couple of sentences (perhaps 100 words) reflecting on your process and product.
  • Please include a scan or photo of some of your paper sketches from your notebook, if possible.
  • Label your project’s blog post with the Category, Project-03-Wallpaper.
  • Label your project’s blog post with the Category referring to your section (e.g. GolanSection, RogerSectionA, etc.

Incidentally, wallpaper can be interesting as well as beautiful. For example, here’s some recent computational wallpaper by the Italian group ToDo: Spamghetto Wallpaper. (Examine it closely and you’ll see it’s full of text from junk mail.)

3430219632_b2cd3e8dbd_b