Description
Every programmer is a bit of a code thief. The practice of recycling or remixing code is a valuable way to learn from more advanced programmers, it allows you to do things you would hardly be able to do from scratch, and it also saves you a lot of time.
In this lab assignment, first, you will learn to decipher other people’s code. Visit sketch repositories and exhibitions (for example, on p5js or OpenProcessing) and select a project*. After making a copy of that project, you will use pseudocode to describe what each section of code is doing. Pseudocode is an informative text that explains what an algorithm does, it is written in natural language and should be easy to understand, precise, and concise. If you encounter structures and methods that you are unfamiliar with while reading the code from your selected project, refer to the platform’s documentation or check with classmates and the teaching team via Slack and Zoom.
After dissecting the original code, you will then transform it into something significantly new and personally meaningful. Your new code should be able to tell a different visual or multimodal story.
To transform an existing project, look again to the reference pages / documentation as well as other example projects and external libraries in order to:
- Add or modify code to allow for new interactions–respond to user inputs in different ways and/or respond to entirely new user inputs
- Extend your code to incorporate new outputs–add sound, new visuals, etc.
Deliverables
- On a Miro Card**: Post links (direct or to a google drive folder) to two code projects
- A copy of the original project with your pseudocode added in as comments
- Your new project that extends the original (with additional pseudocode highlighting your changes)
- In your Miro space, post a screen-recording*** of the original project alongside screenshots of its code and pseudocode. Also post a screen-recording of the new project alongside screenshots of your new code.
- Use post-its or comments to point to sections of the code that you don’t understand or to highlight things that you learned in the process. You can also use arrows to show how sections of the code translate into the visual outputs. Make your thinking visible.
- On a Miro Card: Reflect on
- What did you learn by writing pseudocode? How did learning happen?
- What did you learn from remixing to create something new? How?
- How did you make the original code yours? Why is it personally meaningful to you?
- What challenges did you encounter and how did you overcome them?
Assessment
| ✓+ | Meets all requirements described above and provides extensive graphic and written documentation of the design process. |
| ✓ | Meets all requirements described above. |
| ✓- | Does not meet the requirements described above. |
*Copying / forking an existing project:
Note, you must first create an account on web editors to fork, save, and share code.
**Pseudocode examples:
3D model spinner (Processing code, p5.js):
| Code | Code + Pseudo-code |
| PShape s; float boxSize = 150; boolean boxVisible = false; void setup() { size(500, 500, P3D); s = loadShape(“tinker.obj”); } void draw() { background(0); translate(mouseX, mouseY); rotateX(frameCount*0.01); rotateY(frameCount*0.01); shape(s, 0, 0); if (boxVisible == true) { stroke(215,11,140); strokeWeight(10); noFill(); box(boxSize); } } void mousePressed() { if (boxVisible == false) { boxVisible = true; } else { boxVisible = false; } } void mouseWheel(MouseEvent event) { float e = event.getCount(); if (e > 0) { s.scale(1.5); boxSize = boxSize*1.5; } if (e < 0) { s.scale(0.75); boxSize = boxSize*0.75; } } | /** * This sketch uses the loadShape function to create a simple 3D model viewer. * The model moves with your mouse and is set to constantly rotate diagonally. * Scroll up and down with your mouse to zoom in and out. * Press a mouse button to toggle on/off a pink box that encloses the 3D model and matches its rotation */ // Create global variables for the 3D model, pink box size, and box visibility PShape s; float boxSize = 150; boolean boxVisible = false; void setup() { // Setup the canvas and specify the P3D renderer size(500, 500, P3D); // Load a 3D model as a PShape object s = loadShape(“tinker.obj”); } void draw() { // set background color to black background(0); // move origin to follow the mouse translate(mouseX, mouseY); // Set the 3D model to constantly rotate diagonally rotateX(frameCount*0.01); rotateY(frameCount*0.01); // draw the 3D model at the origin shape(s, 0, 0); // if the boxVisible boolean variable is true, draw a pink box (outline) if (boxVisible == true) { stroke(215,11,140); strokeWeight(10); noFill(); box(boxSize); } } void mousePressed() { // When a mouse button is pressed, switch the boxVisible boolean variable between true and false. if (boxVisible == false) { boxVisible = true; } else { boxVisible = false; } } void mouseWheel(MouseEvent event) { // Enlarge the model when the mouse wheel scrolls up and shrink the model when the mouse wheel scrolls down float e = event.getCount(); if (e > 0) { s.scale(1.5); boxSize = boxSize*1.5; } if (e < 0) { s.scale(0.75); boxSize = boxSize*0.75; } } |
**Cards on Miro: Note that cards are different from post-its, look at the bank of resources and the first item is a Card. Note that you can enlarge the card by clicking on its upper right corner. Cards are useful to write extensive text on Miro and post links .
***Screen-recording: You can use Zoom to record a meeting with yourself. Just share your screen and start recording as you demonstrate your project. Another option is to use QuickTime Player, you can click File/New Screen Recording and will automatically start recording your screen.