Deliverable 07 - Fall 2023
Due Saturday, Oct. 14, 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-07. You will put all of your work inside this folder and then compress or zip it to create handin-07.zip to submit to Autolab.
Conceptual Questions
In this part of the deliverable, you will download this Word file that contains 4 questions about concepts taught in class. You may download it anywhere on your computer. You should fill in your answers in the spaces provided, and include your name, andrewID and section letter at the top of page 1.
Once you are finished with this part of the deliverable, print/save it as a PDF and store this PDF in your handin-07 folder with the name andrewID-07-concepts.pdf. For example, if your andrewID is acarnegie, then you would save the PDF under the name acarnegie-07-concepts.pdf.
Technical Assignment 07: Planting The Flag (3 points)
In this Assignment, which should be uploaded to Autolab, you will create a random, scrolling terrain with flags at each peak.
Your job is to write code which automatically plants small flags on the hills of this landscape. Here’s an example of what your flags (or trees, street signs, cell towers, etc.) might look like:
For this Assignment, how your flags look is entirely up to you. (They can even be other objects like a cell tower, lollipop, etc.) However, what is crucially important is where they are placed. You must ensure that your "flags" are placed at the tops of the terrain’s hills. You will start by creating a stationary picture that does not scroll. Then once that works, you will try to update it so it scrolls as shown.
Here are some guidelines for your assignment:
- Use a Canvas of size 500 X 200.
- You should use the Perlin noise function to create an array of vertical (y) coordinates that will make up the terrain. The coordinates will be spaced 5 pixels apart. For example, if your canvas is 500 pixels wide, then your array should hold 101 values to hold the random heights at x = 0, 5, 10, 15, ..., 500.
- Remember when you use the noise function, you need a variable to indicate where in the Perlin noise function you want to sample. The value you get back will always be between 0 and 1. You need to scale this to a value between 0 and 200 (Hint: use the map function). Once you sample the Perlin noise function, you need to update your variable by a little bit to indicates where the next value is that you will use for your next sample. Do these operations in a loop to generate the 101 values you need and store them in an array.
- Create a green filled in shape for the mountain. To do this, you will then use beginShape, vertex and endShape to create a filled in green shape that consists of all of the (x,y) points based on the y values from the array (use a loop) along with (500, 200) and (0, 200).
- After you draw the terrain, you should iterate (loop) through the array of coordinates, and place a flag on top of each peak. Think about what condition must be true in order to see a peak on the canvas. You do not need to test for a peak on the edges of the canvas. (Be careful, your picture is upside-down so you might be looking for minimum points, not maximum points!)
- You should write a separate function to draw the flag (or whatever shape you want on each peak). You should pass into this function as arguments the x, y position of the base of the flag (or other shape).
- Use noLoop() at the end of your draw function so that the draw function does not repeat.
- Make sure that your code accesses correct indices for the array. Javascript doesn’t crash if you access an invalid location, but we will look at your code to make sure you don’t have invalid array accesses.
- Name your project folder andrewID-07-assignment. For example, if your Andrew ID is acarnegie, then your project directory (folder) name should be acarnegie-07-assignment.
- Remember to follow good coding practices in terms of indentatation, comments, variable names, etc.
Once you get to this point, you should have a picture similar to the example above, but it won't scroll. This is worth 2 points of the 3 points.
Once you feel comfortable that you have earned 2 points, you can move on to try for 3 points instead by making it scroll, similar to the picture below (but store a copy of your current program in case you get stuck.
- Once you have the terrain and flags drawn, remove the first coordinate from the array and append a new random coordinate at the end of the array. And remove the noLoop() function at the end of draw. Now, when the draw function repeats, the terrain will appear to scroll.
There is NO Open-ended Project for this week!
Handing in your work
Your handin folder handin-07 should have the one folder described above along with the pdf for your Concepts questions.
You will zip up the handin-07 folder and submit this to Autolab. Your overall folder organization should look something like this (indentation indicates subfolders):
handin-07
andrewID-07-assignment
index.html
sketch.js
andrewID-07-concepts.pdf
Once you are ready to submit, zip (compress) the handin-07 folder (which will likely be named handin-07.zip) and hand in the ZIP FILE into the Deliverable 7 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.