HW 1: Bouncing “Hello, World!”

PAT 204/504: Creative Coding (Fall 2025)

Due at 11:59pm ET on September 8

Instructions

• Please submit both your code and your final rendering. You will receive zero credit if the code is missing.
• All assignments must be completed on your own. You are welcome to exchange ideas with your peers, but this should be in the form of concepts and discussion, not in the form of writing and code.
• Provide proper citations/references for any external resources you use in your writing and code.
• Submit your work to Gradescope.
• Late submissions will be accepted for up to a week with 1 point deducted per day.

Q1: Hello, World! (2 points)

“Hello, World!” is usually the first program we write when learning a new programming language. Although that’s not quite the case for Processing, we can do something cooler in Processing.

Let’s start from writing a Processing sketch that

• renders “Hello, World!” in the first line and “This is {YOUR NAME HERE}!” in the second line
• with a Michigan maize (#FFCB05) font color
• of a font size of 24 pixels (or smaller if your name doesn’t fit)
• with the text centrally aligned
• at the center (both horizontally and vertically) of a 400x400 canvas
• with a Michigan blue (#00274C) background

Please submit your code as a PDE file and the final rendering as a PNG file.

Q2: Bouncing “Hello, World!” (3 points)

Now, let’s make it a bouncing “Hello World!”. That is, the text box should

• move at a preset speed of speedX (defaults to 1) along the x-axis and
• move at a preset speed of speedY (defaults to 2) along the y-axis and
• bounce back when it hit the walls

Please submit your code as a PDE file and the final rendering as an animated GIF file.

Template Sketch

Here is a template sketch for you to get started with:

String msg = "Hello, World!\nThis is {YOUR NAME HERE}!";
float fontSize = 24; // font size
boolean saveFrames = false; // whether to save the frames
float speedX = 1; // speed along the x-axis
float speedY = 2; // speed along the y-axis

// DEFINE OTHER GLOBAL VARIABLES YOU NEED HERE

void setup() {
  // Set the frame rate to 30 fps
  frameRate(30)

  // YOUR CODE GOES HERE
}

void draw() {
  // YOUR CODE GOES HERE

  // Save frames for making a GIF
  if (saveFrames) {
    saveFrame("frames/###.png");
  }
}

Note that the template includes a boolean switch saveFrames that controls if the saveFrame() function at the end of the draw() function will be executed. When saveFrames is set to true, each frame generated by a call of the draw() function will be saved to the folder frames/ in the project directory. You can then use the built-in movie maker (“Tools > Movie Maker”) to create an animated GIF. Also, the GIF standard does not support 60 fps, so we need to add frameRate(30) to the setup() function to set the frame rate to 30 fps.

Hints

• To install Movie Maker,
  1. Click “Tools > Manage Tools”
  2. Click “Movie Maker II | Movie Maker for Processing 4”
  3. Click “Install”
• There’s a bug in the latest release of Movie Maker for Windows. To fix it,
  1. Download the ffmpeg executable
  2. Copy “ffmpeg.exe” (in the bin/ folder) to “C:\Users\[USERNAME]\Documents\Processing\tools\MovieMaker\tool”
• You might want to search in the documentation to find the functions that you need.

• You can use \n to start a new line when calling text(). For example,

  text("Hello, World!\nThis is ______!", height / 2, width / 2)
  

  will be rendered as

  Hello, World!
  This is ______!
  

• You can pass a second argument to textAlign() to vertically center the text.
• You might find textWidth(), textAscent() and textDecent() useful in estimating the size of the text box. Note that these functions must run after you set the desired font size. Also note that sometimes it can be tricky to get the exact size of a text box in Processing, so feel free to make manual adjustments to the estimated values.