Deliverable 05 - Fall 2023
SPECIAL DUE DATE: Due Sunday, Oct. 1, 2023 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: Hexagons (3 points)
In this Assignment, you are asked to generate a regular hexagonal grid of hexagons. 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.
\
Images of hexagonal grids in nature from Jose De La Torre.
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.
You should be able to make a hexagonal grid, too. In this Assignment, your task is to write a p5.js program that generates a regular hexagonal grid. When you’re done, it should look something like the following:
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:
How much shorter? 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 a hexagon centered at (0,0) with side length s would be made up of six triangles with the following points:
Program requirements:
- Create a p5.js program (starting with our usual template) that displays a regular hexagonal grid as shown above. Your canvas width should be 750 pixels. Set the height so that you can draw all of the required hexagons. Each of the six sides of a hexagon should be 50 pixels in length. (Note that some sides are on an angle so 50 pixels is the diagonal length in this case.)
- Write a separate function that draws one hexagon centered at (x,y) using six triangles (without borders) and then six lines along the outside of the triangles.
- The hexagons should be colored red, green and blue such that no two hexagons that are touching have the same color. (Start with them all being white first until you can draw the picture, then think about how to add the color. See color hint below.)
- In the draw function, use a pair of nested loops to draw the columns with 6 hexagons, then use another pair of nested loops to draw the columns with 5 hexagons. (Which coordinate will be controlled by the outer loop and which by the inner loop if you’re drawing hexagons from top to bottom?)
- COLOR 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 hexagon function based on this number value. After you return from the hexagon function, update the color number value to the “next” color. (Think about the traffic light!) For the columns with 6 hexagons, start the color with red. For the columns with 5 hexagons, start the color with blue. This will meet the constraint that no two touching hexagons have the same color!
- If you find it too hard to get the hexagons to interleave together tightly like in the picture, you can draw a regular grid of hexagons spaces apart, neatly in rows and columns, for a maximum of 2 points.
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.
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.)
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.