CS 106 Winter 2017

Assignment 02: Input and Output


Question 1 Bricolage

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 both a PNG image and a PDF illustration.

Write a sketch that creates an interesting picture in the sketch window. You must meet these minimum requirements:

  1. The sketch window must have size at least 400×400.

  2. Use at least one built-in shape (i.e., a call to line(), ellipse(), or rect(), or another comparable function).

  3. Use at least one external raster image imported using the loadImage() function and displayed using image().

  4. 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.)

  5. At least one element (shape, image, or illustration) must be drawn as multiple copies in a for or while loop.

  6. At least some part of each of the elements drawn above must be visible (but they can be partially covered up).

  7. The sketch must include a keyPressed() hook. When the user presses the 'r' key, the sketch should save the contents of the sketch window to an external image file named output.png. When the user presses the 'v' key, the sketch should save the contents of the sketch window to an external illustration named output.pdf.

Name your sketch Bricolage, and place it in a folder named A02.


Question 2 Code Against Humanity

Cards Against Humanity is a mean-spirited and sarcastic card-based party game in which players match questions and answers. In this question you will create a sketch that draws random pairs of question and answer cards, advancing to a new random pair every time the user presses the space bar.

Download the starter code CodeAgainstHumanity.zip. You will find a sketch made out of two files (shown as tabs in the Processing interface). The main sketch is in CodeAgainstHumanity.pde, and is currently (mostly) empty. That's where you will put your solution. The file Paragraph.pde contains a helper function that you will use in writing your sketch (but you do not need to understand how it works). In the data/ folder you will also find the files questions_clean.txt and answers_clean.txt, which contain a (small, mostly inoffensive!) subset of the questions and answers in the real game. Note that the creators of the original Cards Against Humanity game offer the questions and answers under a Creative Commons BY-NC-SA license.

In the file CodeAgainstHumanity.pde, implement a sketch that meets the following minimum requirements:

  1. When the sketch starts up, load in the two text files containing the questions and answers and store them in two arrays of strings. (Load the files only once in setup().)

  2. Set the sketch to have size at least 400×400. Draw all text using the font "Helvetica-Bold", and use a font size of at least 18.

  3. Draw cards using rounded rectangles (use the built-in version of the rect() function that takes five parameters as input to draw a rounded rectangle; see the online Processing documentation for more information).

  4. Render the question as white text on a black card, and render the answer as black text on a white card.

  5. Make sure that each question and answer fits completely within its card. This is where you can use the provided formatParagraph() function to insert newline characters so that the text of a question or answer fits within a prescribed width.

  6. When the sketch starts, choose a random question and a random answer. Display those cards and then pause (the easiest way to pause is by calling noLoop() at the end of draw()).

  7. When the user presses the space bar, choose a new question and answer at random (perhaps by calling loop() in a keyPressed() hook).

Those are the minimum requirements. You can add any additional details that you like. Feel free to make the cards overlap slightly, as in the example above, as long as the questions and answers are visible. You can add a fancy background, logos on the cards, drop shadows, animations, or other visual effects as you wish. You are also welcome to add your own questions and answers to the text files, but please don't use offensive language in your submission. We may award bonus marks for especially creative or ambitious implementations.

Save the CodeAgainstHumanity sketch into the A02 folder.

Submission

When you are ready to submit, please follow these steps.

  1. 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.

  2. If necessary, review the How To Submit document for a reminder on how to submit to LEARN.

  3. Make sure to include a comment at the top of all source files containing your name and student ID number.

  4. 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.

  5. Zip up the A02 folder, containing the Bricolage and CodeAgainstHumanity sketches, to create an archive called A02.zip. Do not deviate from any of these required file and folder names.

  6. Upload A02.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.