15-104: Introduction to Computing for Creative Practice

Deliverable 05 - Fall 2025

SPECIAL DUE DATE: Due Sunday, Sept. 28, 2024 by 11:59PM

PREPARING YOUR HANDIN FOLDER...

FIRST: Create a folder or subdirectory in your 15-104 working area on your computer or in your Andrew private folder for handin-05. You will put all of your work inside this folder and then compress or zip it to create handin-05.zip to submit to Autolab.

Conceptual Questions

THERE ARE NO CONCEPTUAL QUESTIONS TO ANSWER FOR THIS DELIVERABLE DUE TO THE WRITTEN EXAM

Technical Assignment 05: Octagons (3 points)

In this Assignment, you are asked to generate a regular grid of touching octagons. The purpose of this assignment is to use a simple geometric problem to reinforce your understanding of nested iteration and the use of a user-defined function to draw a single octagon using triangles. This Assignment is to be submitted through Autolab.

Photo of octagons forming a tile floor, with square tiles inserted \
Image of a tile floor made up of touching octagons with additional small square tile inserts.

Octagonal grids create pleasing, interesting patterns when laid out in a staggered manner with octagons touching on their diagonal sides, forming small squares in between.

You should be able to make an octagonal grid, too. In this Assignment, your task is to write a p5.js program that generates a regular octagonal grid on a canvas of size 600 X 600. When you’re done, it should look something like the following:

Grid of nested color octagons

In order to create an octagon, you will draw eight triangles that touch in the center:

an octagon made up of triangles

A sample octagon made up of eight triangles is shown above, in a grid that is 90 X 90. Each square grid section is 30 X 30. The triangle borders are shown so you can see the triangles, but when the octagon is drawn you should not draw borders, nor the grid.

Program requirements:

Create a p5.js program (starting with our usual template) that displays a regular octagonal grid as shown above. Your canvas size should be 600 X 600 pixels.
First, write a separate function with two parameters, x and y that draws one octagon centered at (x,y) using eight triangles (without borders). Use the sample octagon above to help you with the coordinates needed for each triangle call. Test your function first by translating the origin to the center of the canvas and call the function to draw the octagon (in any color). Make sure this works before moving on. Do not use the beginShape, vertex, and endShape functions at this time.
Next, draw a grid of touching octagons using a single color. In the draw function, use a pair of nested loops, controlling x and y, to draw the rows with 5 octagons first, as shown below, where the center of the top left octagon is at (60, 60). You will need to call the separate function you wrote to draw a octagon at each x,y pair given by the loops.
Then use another pair of nested loops to draw the rows with 4 octagons, as shown below (in a different color). Make sure this works before moving on.
Finally, once you have the grid set up, now add color so that the top left octagon is red, the colors used are red, green, and blue (alternating), and that no two octagons of the same color touch each other. HINT: Set up a variable to hold a number representing the color (e.g. 0 for red, 1 for green and 2 for blue). Set the fill color just before you call your octagon function based on this number value. (You can use another user-defined function to do this!) After you return from the octagon function, update the color number value to the “next” color. (Think about the traffic light!) For the rows with 5 octagons, start with the color red. For the rows with 4 octagons, start with the color blue. This will meet the constraint that no two touching octagons have the same color!

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 andrewID,
Add comments to your code that specifies what each section is doing.
Name your project folder andrewID-05-assignment. For example, if your Andrew ID is acarnegie, then your project directory (folder) name should be acarnegie-05-assignment. Please be attentive to this!

Open-ended Project 05: Wallpaper (3 points)

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

First example of wallpaper

Second example of wallpaper

Before you begin, take a moment 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 (scroll down page), as written by wallpaper expert, Richard Nylander.)

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

Wallpaper patterns made up of text from spam email

Program 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, starting with a fresh template, 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 600 pixels.
Your design should be rendered as a 2-dimensional repeating pattern, not just a single “tile.”
Your design should not always start at the same place in the pattern for each row, column, etc. See the second example given above.
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 place a noLoop() function call at the end of the draw function of your final submission.
Consider using additional user-defined functions to draw different parts of your design, rather than putting everything inside the draw function.

Put the following information into comments at the top of your code: Your name; Your class section; Your Andrew ID
Name your project folder AndrewID-05-project. For example, if your Andrew ID is acarnegie, then your project directory (folder) name should be acarnegie-05-project. Please be attentive to this!

Handing in your work

Your handin folder handin-05 should have the two folders described above.

You will zip up the handin-05 folder and submit this to Autolab. Your overall folder organization should look something like this (indentation indicates subfolders):

  handin-05
    andrewID-05-assignment
      index.html
      sketch.js
    andrewID-05-project
      index.html
      sketch.js

Once you are ready to submit, zip (compress) the handin-05 folder (which will likely be named handin-05.zip) and hand in the ZIP FILE into the Deliverable 5 submission area on Autolab. Once you handin, check your handin history and click on the magnifying glass to look at what you submitted to make sure it looks right. IF YOU SUBMIT THE WRONG ZIP FILE, YOU RISK GETTTING A 0 ON THIS DELIVERABLE!

You may submit as many times as you’d like (in case you find inspiration and want to improve your work) up until the deadline. If you submit up to one day late, even if you submitted on time, you will be marked late. We only grade the final submission you upload to us via Autolab.