CS 106 Winter 2018
Lab 02: Input and output
Question 1 Mixed Media
This is an open-ended question in which you can draw whatever you want (satisfying a few basic requirements). You must then support saving the contents of the sketch window to a PNG image.
Write a sketch that creates an interesting picture in the sketch window. You must meet these minimum requirements:
The sketch window must have size at least 400×400.
Use at least one built-in shape (i.e., a call to line(), ellipse(), or rect(), or another comparable function).
Use at least one external raster image imported using the loadImage() function and displayed using image().
Use at least one external SVG illustration imported using the loadShape() function and displayed using shape(). (You can create SVGs, or convert other illustrations into SVGs, using drawing tools like Adobe Illustrator or Inkscape. You can also find SVGs online via Google image search.)
At least one element (shape, image, or illustration) must be drawn as multiple copies in a for or while loop. You are allowed to inject some variation or randomness in the individual copies of the element if you want.
At least some part of each of the elements drawn above must be visible (but they can be partially covered up).
The sketch must include a keyPressed() hook. When the user presses the 's' key, the sketch should save the contents of the sketch window to an external image file named output.png. (You can also experiment with saving the sketch window to a PDF named output.pdf when the user presses another key like 'p', but this is not required.)
It's perfectly fine to use images and illustrations that you didn't create. Just make sure to include a comment in your sketch to say where you got these files from.
Name your sketch MixedMedia, and place it your L02 folder.
Question 2 Distribute
When we talk about a function producing "output", we could mean a few different things. The function might use a return statement to send a value back to whoever called it; it might draw something in the sketch window; it might print text in the console at the bottom of the Processing window; or it might store information in an external file. In this question you will practice all of these forms of output. You will write a function that processes a set of one-word "commands" read from an external text file. Each command has three numbers after it, and the command itself tells you what to do with those numbers. The annotated screenshot above shows the input file commands.txt. You can see information from the input file drawn to the sketch window, printed to the console, returned from the function, and stored in the external file output.txt. (Click on the image to see a full-resolution PDF.)
Here are suggested steps to follow to complete this question:
In the provided starter code, open the sketch Distribute. You'll see a very simple sketch with two TODO comments.
Write an initial, "dummy" version of the function processFile(). That is, write a function that has the right types for its argument(s) and return values, but doesn't do anything yet. That should be enough to allow you to uncomment the code in setup().
As suggested by the code in setup(), processFile() should take a file name (i.e., a string) as an argument and return an array of floats. Your dummy function still has to return something; have it return the dummy value null.
Uncomment the code in setup() and verify that the sketch runs, even if it doesn't do much.
Start fleshing out your implementation of processFile(). Use the passed-in file name to read the lines of text in that file into an array of lines. Write a loop that iterates over those lines. For each line, extract out the command name and the three numbers. Store this information in local variables inside the function. From here on, you probably need material from Wednesday's lecture, or you can look ahead in the lecture notes.
In the loop, add code to detect if the command is "draw". If it is, treat the next three numbers as the x and y coordinates of the centre of a circle, and the radius of that circle. Draw the circle in the sketch window. Given the provided file commands.txt, you should already see something like the sketch window above (with one extra circle!).
Add code to detect if the command is "print". If it is, write the three numbers to the console, separated by spaces, and shown above.
Add code to detect if the command is "return". If it is, return immediately from the processFile() function, and provide an array of the three numbers associated with the "return" command as the return value of the function.
Note that "return" immediately stops processing the commands in the file; anything afterwards is skipped. If you're following the steps laid out so far, this will cause one of the circles not to be drawn in the sketch window, because it appears in commands.txt after "return".
Add code to detect if the command is "save". If it is, write the three numbers that follow the comamnd to an external file called output.txt. Put the three numbers on a single line, separated by spaces. You'll also need to add code to the top of processFile() to declare and initialize a local variable that lets you write to the external file, and code at the end to flush and close the file.
There are two additional subtleties that you need to address in the code developed above:
What happens if you get to the end of reading in the input file, but you never saw the "return" command? Your function needs to return something, but the file never gave you the numbers to use. In that case, just return null, as established in Step 2.
When you encounter the "return" command you leave the function immediately, but you don't want to skip the steps above that flush and close the output file first (otherwise you might jump out of processFile() before all of output.txt gets written). So, just before the return statement in the place in your code where you deal with the "return" command, put a copy of the code that flushes and closes the output file.
Note that we may test your code with multiple different command files. You should endeavour to test your sketch with a few different files. We provide some samples in the data/ directory of the sketch folder.
Submission
When you are ready to submit, please follow these steps.
Please ensure that any sketches you submit compile and run. It's better to submit a sketch that runs smoothly but implements fewer required features than one that has broken code for all features. If you get partway into a feature but can't make it work, comment it out so that the sketch works correctly without it.
If necessary, review the Code Style Guide and use Processing's built-in auto format tool. You do not need to use the precise coding style outlined in the guide, but whatever style you use, your code must be clear, concise, consistent, and commented.
If necessary, review the How To Submit document for a reminder on how to submit to LEARN.
Make sure to include a comment at the top of all source files containing your name and student ID number.
Create a zip file called L02.zip containing the entire L02 folder and its subfolders Distribute and MixedMedia.
Upload L02.zip to LEARN. Remember that you can (and should!) submit as many times as you like. That way, if there's a catastrophe, you and the course staff will still have access to a recent version of your code.
If LEARN isn't working, and only if LEARN isn't working, please email your ZIP file to the course account (see the course home page for the address). In this case, you must mail your ZIP file before the deadline. Please use this only for emergencies, not "just in case". Submissions received after the deadline may receive feedback, but their marks will not count.