Deliverable 01 - Fall 2024
Due Saturday, August 31, 2024 by 11:59PM
DO THIS FIRST: Academic Integrity Form (0 points)*
Review the academic integrity policy linked above along with the associated
University policy linked inside. Once you have done this, go to Canvas and
complete the one question quiz that indicates that you will abide by these
policies in this class, and that you understand that voilations of this policy
can result in a charge of an Academic Integrity Violation (AIV) that will
result in a course penalty and a report to the
Office of Community Responsibility
(OCR). Please take a few minutes to read through it
since students often say I didn't know you couldn't work together
or I didn't know I couldn't get answers from another student or
online source or give answers to another student (even in a
subsequent semester). This Canvas activity confirms you officially
read the policy (whether you did or not).
*Failure to complete this Canvas quiz indicates that you will not abide by
this policy and that none of your coursework will count toward your final
grade (thereby resulting in an R).
While you are reviewing the academic integrity policy, you should review
the course information on the home page (click 15-104 in the menu above),
the Grading details and the Schedule. Put important dates in your calendar!
NOW MOVING ON...
FIRST: Create a folder or subdirectory in your 15-104 working area on your computer or in your Andrew private folder for handin-01. (You will create the 15-104 folder in lab on Tuesday.) You will put all of your work inside this folder and then compress or zip it to create handin-01.zip to submit to Autolab.
Conceptual Questions (2 points)
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-01 folder with the name
andrewID-01-concepts.pdf. For example, if your andrewID
is acarnegie, then you would save the PDF under the name
acarnegie-01-concepts.pdf. Background info about PDF files is
here.
Technical Assignment 01 (3 points)
In this assignment, which will be uploaded to Autolab, you will use code to create a static image that is based on a piece of abstract art shown below.

Large Abstract Geometric Wall Art (Amazon)
Perhaps you are wondering why artists copy paintings in museums, as I am doing. The answer is to study, to learn, and to find inspiration from the great masters of the past. Copying directly from works of art gives the artists insight into the creative process — insights which cannot be learned from any other source. [From Gerald King]
Requirements
-
Download a copy of template2023-p5only.zip ONCE and unzip (uncompress) it. You should see a folder template2023-p5only that has two files inside (index.html and sketch.js). Rename this folder with your andrew ID followed by a dash followed by the week number (as two digits) followed by a dash followed by “assignment”. For this first assignment if your andrew id is acarnegie, you would rename the folder to acarnegie-01-assignment.
Then, move this renamed folder inside the handin-01 folder.
-
Using your editor, open the sketch.js file that is inside your renamed folder. This is where you will write your p5.js code.
-
Using p5.js code and simple visual primitives, reproduce the image shown below using the colors blue, cyan, yellow and magenta using a 200 X 400 canvas. You may only use the following shapes: circle (or ellipse), square (or rect). No other shapes are allowed! You will need to think about how to create the semi-circles given that you only have these two shape types to use. (HINT: There is a fifth color you can use!)
-
Tip: You might want to sketch out this picture in your sketchbook with grid lines to get a sense for the location and size of your shapes.
-
Put the following information as comments at the top of your program:
-
Your name.
-
Your class section (A, B, C, or E).
-
Your reproduction should fill the canvas, and your canvas size should be 200 pixels wide by 400 pixels high.
-
Test your program by double-clicking on the index.html file that is in the same folder as your edited sketch.js file. This will load the program into your browser and run it (if there are no syntax errors).
- Debugging Tip 1: Don't try to draw the entire picture at once. You should try to draw part of it, save and run the program to see if you have that right, then move on to add more, etc. If you try to do it all in the first run and something goes wrong, you will have a harder time trying to figure out what caused the errors.
- Debugging Tip 2: If you do not get the correct results, go back into your editor, update your p5.js code, SAVE YOUR FILE, and then go to your browswer and reload the page. (Don't forget to save the changes you made in the error, or the browser will show the old version again.)
- Debugging Tip 3: If your webpage shows nothing, then it's likely you have a syntax error, which means that you typed one of the instructions incorrectly and the p5.js interpreter could not translate it. In class, we will show you how to view the JavaScript console so you can find the error and the line number where it occurs.
Project 01: Pittsburgh, The City of Bridges (3 points)
In this Project, you’ll use p5.js to draw a simplified view of a bridge. Our objectives are to deepen our familiarity with graphical primitives in p5.js. In this project, you can use any shapes and colors in your drawing. You do not need to draw the bridge in accurate detail.
Bridges are often used in art as a metaphor of one trying to cross over an obstacle, or the act of connecting or uniting two different places or groups of people, or even as a means of connecting two musical pieces together.

Claude Monet, The Water-Lily Pond
Requirements
-
Just as with your technical assignment, download a fresh copy of the template2023-p5only.zip ONCE and unzip (uncompress) it. You should see a folder template2023-p5only that has two files inside (index.html and sketch.js). Rename this folder with your andrew ID followed by a dash followed by the week number (as two digits) followed by a dash followed by “project”. For this first assignment if your andrew id is acarnegie, you would rename this folder to acarnegie-01-project. Then, move this renamed folder inside the handin-01 folder.
-
Using your editor, open the sketch.js file in your renamed project folder.
-
Using p5.js, draw a bridge using at least 4 graphic elements, such as lines, quads, ellipses, points, etc. The bridge can either be based on a real bridge in Pittsburgh or your own design. You may use any graphical primitives you please, with the exception that you may not use drawing functions that require the loading of external assets (e.g. images, fonts). Experiment with the use of at least 4 colors in addition to the background color. Comments your code with your name and section as usual.
-
Again, to see the results, be sure your editing is saved in the editor, and then double-click on the index.html file in the same folder as your project. This should launch your browser with the program results if there are no syntax errors. Use the debugging tips again to revise your program in the editor until you are satisfied with the results.
Handing in your work
As we discussed in Lab 1, you will zip up the handin-01 folder and submit this to Autolab. Your overall folder organization should look something like this (indentation indicates subfolders):
handin-01
andrewID-01-assignment
index.html
sketch.js
andrewID-01-concepts.pdf
andrewID-01-project
index.html
sketch.js
Once you are ready to submit, zip (compress) the
handin-01 folder (which will likely be named handin-01.zip) and hand in the
ZIP FILE into the
Deliverable 01 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. Reference Lab 01 for a reminder on how to work with the p5js template, organize your files and compress your work. You may submit as many times as you’d like (in case you find inspiration and want to improve your work) up until the Saturday deadline. If you submit on Sunday (late), even if you submitted on time, you will be marked late.
We only grade the final submission you upload to us via Autolab.