Portfolio 1: 2D Graphics

in Assignments (list page)

For our first “portfolio” assignment, you will assemble a “web” that shows off programs that demonstrate that you can apply the ideas we learned about in class to create actual graphics programs.

The idea is that you need to create your own workbook. You decide what programs you want to write. You create the pages with boxes on them (where your programs go). You explain what you were trying to do with your program, and how they fulfill the requirements.

Your portfolio workbook needs to have:

  1. A title page (index.html) that links to all the other pages and provides a checklist of the requirements, and explains which page each requirement is done on.
  2. One or more work pages each with a “picture” (a Canvas or SVG element hat is a static picture, animation, or interactive gadget). The work page should have whatever else it takes to control the program (buttons and sliders, if necessary) and a description of what the program does. The description should have:
    1. A (brief) explanation of what you were trying to do
    2. A list of the requirements that the program satisfied, and how you know it correctly satisfies it

You should put one “box” per page. In theory, you could have all your work on 2 pages (in addition to the title page): one for the SVG requirements, and one Canvas program that satisfies all the other requirements.

You could meet the requirements the way that the students in the regular section would: you could do the fireworks from WB2, the quadcopter from WB3, the flocking from WB4, and the SVG picture from WB3. But that would be boring - you wont’ get any “points for originality” (not that we’re counting points, but if we were - see grading below).

Mechanisms, Due Date and Handin

You will create your portfolio as a “mini website” just like a workbook. We will use the same mechanism to do it. You will use the GitHub Classroom link (links on Canvas that will create a repository for you. You will clone this repository, put your work into it, commit it, and push it so we can see what you’ve done.

Note: we will grade your workbook by cloning it sometime after Sunday, February 23rd (probably on Monday morning - but it could be 12:01am). Make sure your final version is pushed correctly by then. We will grade whatever version we get when we clone the workbook. If you need an extension, you can ask (send a message to the course staff on Piazza) - but we discourage it (you need to move on to the 3D workbooks!).

The official due date (in Canvas) is Portfolio 1: 2D Graphics (due Fri, Feb 21). There is a no cost extension until Sunday, February 23rd (Sunday means not Monday) because, realistically, we aren’t going to grade things before Monday. We encourage you to wrap things up on time so you can move on to the next assignments (3D Graphics!).

All the work of the portfolio goes into a workbook that you turn in via GitHub.

The “starter code” for the repository contains:

  1. an index.html page - you should keep this page and edit it. Keep the checklist (mark the checkmarks for the things you did - it should be all of them). Update the links to other pages (only link to the pages you have)
  2. some resource directories (libs, css, js) - please keep these as they are needed for the workbook structure. You are welcome to use them (especially the libs).
  3. some “blank pages” in the docs directory. you are welcome to use these as a start, or to delete them. make sure that the index.html page only links to the pages you intent to use.

Be sure to make sure that your portfolio “works” - you should try cloning it yourself (to make sure that it has all the files necessary to run). You should make sure that all the programs run correctly.

Requirements (Checklist)

Here is a checklist of the things your portfolio must show:

  1. A sample checkbox to show what it looks like checked
  2. A title page that has this checklist, links to all other pages, and explanations of how each requirement was met.
  3. Graphics that respond to click events
  4. Actions that take time to unfold
  5. Many objects moving at once
  6. Sets of graphical objects that come and go
  7. Non-trivial 2D Canvas animation
  8. Multiple animated hierarchical objects (parts moving relative to other parts)
  9. Use of basic transformations (scale, rotate, translate)
  10. An SVG that uses instancing (<use> tags), and arc, and curves (cubic or quadratic Beziers)
  11. A complex curve through multiple points
  12. An object that moves along the complex curve and orients itself appropriately
  13. Something that indicates that you have arc-length parameterization implemented correctly (e.g. train has constant speed or track has properly spaced rail ties)

This is a minimum. Good regular assignments add extra bells and whistles. There are ideas in the assignments (like B-Splines, scenery, and smoke from the train) - but we hope students are more creative.

Some ideas…

I hesitate to give ideas, since my experience is that students come up with great ideas, but…

  • To show something going around a curve… Rather than a train going around a train track, you might have cars going around a race track (drawn with lane markers, …). You could have cars changing lanes as the pass each other, …

  • For hierarchical objects… Rather than a quadcopter you could have a walking robot or animal or a tree that rustles in the wind (with fruit that falls off and grows into a new tree…)

How will we evaluate this?

We will assess the following:

  1. Completeness - do your collective programs cover all the (minimum) points you are expected to show us?
  2. Advanced features - do you have things beyond the basics? (please list them so we know to appreciate them)
  3. Creativity/Originality - are these different than the standard assignments the regular class does?
  4. Quality - do they work better than just the basics? (either artistically, or in terms of performance or implementation)
  5. Documentation - did you tell us why your assignment does 1-4? It is up to you to convince us!

To give you a sense… if you just did the assignments from the workbooks in a way that got all of the “advanced points”, your assignment would be complete, and have some advanced features, but not be creative. Really nice fireworks (like we looked at in class), might be high quality (and advanced if they have parabolic arcs, for example), but not original. There are creative things you might do with fireworks. (e.g., have them make pictures/words when they explode)

It may be possible to make up for originality through quality. (e.g., a truly amazing train).

How will you know that what you have is good enough?

If it’s the best you can do in the time alotted, then it’s enough.

More realistically, you probably want to know “what are the standards for an A”. This is kind of hard to say in advance since the assignment is so open ended.

One first piece: make sure that everything on the checklist is checked, and that your documentation makes it clear why your program checks the checkboxes.

If there is something about your work that you think deserves special notice for quality or creativity be sure to tell us. “You might not notice, but the animated stick figure on the deck of my boat is using the flags to give the semaphores for 559.” Or, if there is something interesting “under the hood.”

And finally, we will provide opportunities for feedback:

  1. In class on Thursday, Feb 13th, we’ll take some time for brainstorming - you can bring your ideas and get some feedback from your classmates and course staff.
  2. In class on Tuesday, Feb 18th, we’ll have a “workshop” for people to give feedback on each others ideas.
  3. You will be asked to turn in a “rough draft” that allows the course staff to give some feedback. (see below)
  4. In class on Thursday, Feb 20th, we’ll have a workshop for students to show off their work in progress and get feedback from each other.

Rough Drafts

Normally, I discourage students from asking about rough drafts - we grade things when we grade them. However, given the hazy idea of “good enough”, we will provide an opportunity for early feedback.

For the “rough draft” deadline, you will turn in a “rough draft” of your portfolio with a description of what you plan for the final one. It might be a hand-drawn sketch, or just a description. You might have some pieces in place and describe what you will improve/add.

You will turn in the rough draft by pushing a version to your Portfolio repository, and filling out the form on Canvas Portfolio 1 Rough Draft (due Tue, Feb 18). Be sure to provide the link to your repository. You can describe what you intend to do in Canvas, or on the web pages of the draft portfolio. (please make it clear where we should be looking). If you turn things in on time (Monday night) we will provide feedback by Wednesday night. (we cannot promise feedback for late assignments).

We will try to predict what your assignment will look like from your description, and estimate how it might be received. The better you describe what you expect to have, the better we can predict, and the more useful the feedback we can provide.

Note: filling out the rough draft assignment Portfolio 1 Rough Draft (due Tue, Feb 18) is a requirement. Even if you say “don’t bother to look at my portfolio because I haven’t done much yet.”

More Feedback / Office Hours

Talking about ideas with Prof. Gleicher or Alex is encouraged. You can chat before/after class, or come to office hours, or schedule another appointment.

You can send messages with questions.

However, Prof. Gleicher will be out of town the week of the assignment (Feb 14-21). He will try to be responsive to messages (expect a 24 hour delay).

Collaboration

Everyone must turn in their own portfolio that they have done substantially by themselves.

We encourage you to discuss the assignment with others! Bounce ideas around with each other (give attribution if you get an idea from someone). Ask classmates for help figuring things out. Use Piazza for discussions (there’s a portfolio1 folder). I was going to experiment with using Canvas groups to make online small group discussions - but I didn’t want to add another course mechanism.

Portfolio Workbook Structure

The requirements for the “structure” of the portfolio:

  • Your portfolio must have a index.html page
  • Everything must work from a local web server (make sure to test - it’s easy to forget to include a file, or have a bad link)
  • Your index.html page needs to have the checklist on it (with things appropriately checked off)
  • Your index.html page needs to have links to all of the other pages we need to look at

Other than the index.html page, you can name your files any way you like. We prefer that you make it easy for us (for example, naming pages 1.html and its program 1.js). But as long as things are correctly linked, we should be able to find things.

The “starter code” for the work book (the thing you get when you first clone the empty portfolio) has an initial index.html that includes the checklist. It also includes a few blank pages (that you can put things on). You don’t have to use these blank pages (you can delete them). But make sure that things are linked together correctly.

Because of how we make workbooks, the pages in the workbook are in the docs sub-directory.

Reminder…

There are two “deadlines”:

  1. Portfolio 1 Rough Draft (due Tue, Feb 18) - you must turn this in on Canvas (and possibly push your intermediate results to GitHub)
  2. Portfolio 1: 2D Graphics (due Fri, Feb 21) - Canvas is just a placeholder. You will turn your assignment in by pushing it to GitHub. We will clone whatever is there after Sunday, Feb 23 (don’t expect to turn things in after that).

And the main requirement is to have an index.html that includes the checklist and links.