Creative Code Remix

Description

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. With the advances in Generative AI, there are now new tools at your disposal to prototype and develop coding projects that are meaningful to you. 

In this lab assignment, you will learn to decipher other people’s code and extend that code towards your own vision, using Gemini as a resource. You will also learn about pseudocode and how to use it in your work. Pseudocode is a form of documentation that explains what an algorithm does. It should be written in natural language, easy to understand, precise, and concise. Throughout this project, document your interactions with the Gemini chatbot. You can do this by taking screenshots of your chat history or copying and pasting it into a Google Doc.

Part I: 

  1. Visit sketch repositories and exhibitions (e.g., on p5js or OpenProcessing) and select a project. 
  2. Make a copy of that project so that you can annotate and modify it
  3. Copy and paste your project’s code into a chat with Gemini (using your TC account) and ask Gemini to explain how the code works to you using pseudocode: “I am new to programming. Can you explain how this program works to me, using some pseudocode to help me understand?”
    • If you encounter structures and methods that you are unfamiliar with while reading the explanation of your selected project, ask Gemini to explain them to you and/or refer to the platform’s documentation or check with classmates and the teaching team via Slack and Zoom.
  4. Write your high-level interpretation of how your project’s program works back to Gemini and ask it to check your understanding. You may need to go back to step #3 and ask for further clarification on any parts of the project’s code you still do not understand.

Part II:

After dissecting the original code, you will then transform it into something significantly new and personally meaningful in collaboration with Gemini. Your new code should be able to tell a different visual or multimodal story. 

  1. Brainstorm ways you would like to change the project. Write or draw sketches of these ideas to include in your post. For example:
    • Would you like 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?
    • Do you want to extend your code to incorporate new outputs–add sound, new visuals, etc.?
  2. Create a “remix” copy of your chosen project that you will make your changes in.
  3. Ask Gemini to help you make the change(s) you brainstormed to the project’s code.
  4. Work back and forth with Gemini to change the project’s code until you are satisfied with the final project.

Final Deliverables (on Miro)

  1. On your section of the Collective Lab Journal: Post links to:
    • A copy of the original project with your high-level explanation of how it works added in as a comment at the top of the document (this can be directly copied and pasted from what you wrote to the Gemini chatbot in Part I, step #4)
    • Your new project that extends the original
    • A Google document with screenshots (or copied and pasted text) of your conversations with Gemini about your code. Make sure to include your prompts.
  2. On your Miro Card, 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.
  3. On a Miro Card: Post your reflections on:
    • Mention 2-3 important technical things (programming concepts, ways to code, new ways of programming) that you learned from remixing to create something new, and how you learned them.
    • What were the two main challenges that you encountered, and how did you overcome them? 
    • What did you learn by collaborating with Gemini to make this project?
      • What was made easier? What was made more difficult? Did it make any aspects of coding more confusing? Would you use Gemini again?

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: 

p5.js – Duplicate
Processing – Save As
OpenProcessing – Fork

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):

CodeCode + 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;
  }
}

Another pseudocode example

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