NextCS - 1

Fall 2021 -- Peter Brooks

Period 3 Minutes schedule
Period 4 Minutes schedule
Minutes - notes

Processing Cheat Sheet

Online Office Hours           Class Notes

Final Projects are due Sat, 1/22, midnight. The final project can be one of 2 types:
A) Create a smooth animation of an animal as it moves (the way it moves naturally).  You can create a hypothetical animal (not currently existing) animal for this exercise.
B) Create at least 2 image-processing pixel transformations that we have not covered (assume that we've covered edge detection).  For ideas, go to Photoshop or Gimp (free image-processing software).

Deliverables to be submitted to the homework server
1) Zip of the project directory
2) PDF of documentation and possibly instructions on how to view the project.  Comment on the problems you had in creating the project, and what you learned in the process.
No Homework yet, but we'll create a large lab containing all of these transformations after the Final Project is due.

Pixel-based tranformations
- grayscale
- horizontal shift
- fadeout
Here are some pixel-based transformations I showed in class: and
Here is my version of shift.
Slide shows - You can actually control the speed of animation -- specifically the time delay between visual changes. 
- You can do this by using the delay() function at the end of the draw() function.  delay(milliseconds) can stop the draw() function from terminating for a number of milliseconds, and therefore going on to the next executiong of draw() and the next frameCount.
Here's an example:
I am out today (Thurs). Assming that you finished the homework due Wed night, try to use the techniques you've just learned to create a more interesting animation than the one I asked for in the homework.
I'd like to take a look at what you come up with (this is the "creativity" part of the course) when I get back.
Personally, I have a lot of fun thinking up cool animation ideas and trying my hand with them.  Remind me to show a few of them.
Transformations (Processing style)

Homework, due Wed. 1/5 midnight
We'll be working with translate(), rotate() and scale()  to modify the coordinate system in use. 
And also pushMatrix()  to "bookmark" a coordinate system and popMatrix() to "restore to previous bookmark"

Transforming homework.
Mon: 12/20: I'm not in today.

Maze Solver and displayer are due Thurs, 12/23 midnight.
We'll be using a dynamic array (array-list) to hold all of the moves that our solver makes. 
Each move consists of just coloring one block.
The problem that makes this a dynamic array is that we don't know how many moves it will take to solve the maze.
However, you can put an upper limit on that number:  what is that upper limit?
Here is the code for the Move and MoveList classes... 
Take a look at them -- we'll discuss them tomorrow.

The complete Maze Solver is due on Thurs night.  Zip up the MazeSolver directory and therefore all of its subdirectories and submit them to the homework server.
In the Comments-to-Teacher, please talk to me about this assignment, how hard it was, how it could be made better for next year.
MaeDisplay code If you haven't gotten your MazeDisplay code working, use mine, so that you can proceed to creating the Solver() code and finishing the maze solution.
Here is my MazeDisplay.  Of course, you'll need a Block class and data directory with the text files for the mazes.
Fri, 12/17: I'm not in today..
Work on solving the maze, or debug the maze displayer that was due yesterday....

Maze solving:
Remember how we got from one block (that we're on) to the next block:
pseudo-code of recusive Solver() function:

call Solver(row, col):
  // we're on the current block
  if this block is End: return true
  if this block is bad (Wall, Path or Visited), then return false
  set this block to Path
  // call solver with block to the north:
  if solver(row-1,col) == true: return true
  //otherwise call solver to the east
  if solver(row,col+1) == true: return true
  // etc for south and west:
  if solver(row+1,col) == true: return true
  if solver(row,col-1) == true: return true
  // all right, if we've gotten this far, then there is no going further, so
  set this block to VISITED
  return false

Mazes - Phase 1, due Thurs, 12/16 midnight Here are the pictures and the layouts of 3 mazes.

MazePhase1: read the layout text file and display the starting state of the maze
Create the sketch MazeSolver and put the Block class into a separate code file, creating the following directory structure:

--- MazeSolver.pde
--- Block.pde
--- data
     ---- simple-dw.txt
     ---- medium-dw.txt
     ---- hard-dw.txt

For homework, Zip your MazeSolver directory and submit it.
Working with 2-dimensional arrays
Due, Tues 12/14 midnight
Here's a quick guide to creating and navigating 2D arrays
Here's a short exercise on 2D arrays...
Upload your .PDE file to the homework server
Selection sort, and other sorts due, Sat. 12/11 midnight. I'm not in today...
The next (and last, for now) sort algorithm that you'll code is the Selection sort.  It's very similar to the Insertion sort.
Here's a quick tutorial on Selection sort.

Remember, the target is to integrate both sorts (Insertion and Selection) into the Sorting sketch, so the user can select which algorithm to invoke at any time. 

Once you're done and it all works in the Sorting sketch, Zip the Sorting directory and submit it to the homework server.  Write any comments about the difficult of creating these sorting algorithms into the Comments-to-Teacher.
Sorting homework, due date not set - Unzip this file:  It contains two sketches: SortDisplay and Sorting.
- Sorting will create data files and submit them to one of your sorting algorithms (BubbleSort, InsertionSort or SelectionSort), which will manufacture the right type of output data file for use as input into SortDisplay, and even place it into SortDisplay's data directory.
- the BubbleSort algorithm is already coded.
- your job is to code and debug the Insertion and Selection sort algorithms.

Here's documentation on the intermediate files created by the Sorting sketch for digestion by the SortDisplay sketch.

There are already a couple of files (ins-10-random.txt  and sel-10-random.txt) in the SortDisplay data folder that you can view through SortDisplay showing Insertion and Selection sorts.

- Insertion Sort: here's video from GeeksforGeeks
Here are sample files, ready for SortDisplay Unzip and copy into the SortDisplay's data folder:  (BTW, if you use SortDisplay to animate the file bubble30.txt, you can see, toward the end, the BubbleSort algorithm terminate early because it detects that there's nothing left to do.)
Simple demo code on writing files
/* Demo code to create a file called "george.txt" in the current directory 
(the same directory as this sketch) containing the two lines:

First line
Second line


PrintWriter harry;

harry = createWriter("george.txt");
harry.println("First line");
harry.println("Second line");
Now we start on sorting.... Here is a Processing directory: (right-click and download and unzip).
It contains a displayer of sorting algorithms in action.  And shows the format of the data files that the displayer can digest (in its data subdirectory).  These particular files were created using a (slightly incorrect) BubbleSort algorithm.
ParsingText homework, due Wed, 12/1, 8:00a We're now going to start working with formatted text: reading, digesting and regurgitating it in a useful form.
BRC demo, due Wed night, 11/24 - Solo or duo. 
- If duo, put the names of the both authors into the Comments-to-Teacher.  Both authors must submit to the homework server.
- This will consist of a sketch and webpage(s) describing the sketch and how to use the controls (if not obvious).
- You'll have a folder with the processing sketch file, the template (text) file, the BRC_Utilities.pde file and the webpages.  ZIP the actual directory (not just it's contents) and upload that to the homework server.
- I'm interested in your experience with working with BRC --put your comments about it into the Comments-to-Teacher while you are uploading the ZIP file.
- Creativity will be a criterion in grading.
A quick BRC trial. Let's start with this sketch.  And add the BRC functions in class.
The BRC Project, due (TBA) You'll be creating something cool.  Description here.
Browser-Based-Controls (brc)
This is the facility to allow easy creation of controls (buttons, sliders, etc.) to interact with Processing sketches.
Please see all 3 videos on this site. 
And provide feedback about how well this website introduces the capabilities to add controls to Processing, and how well it teaches the introductory user to use it successfully.
Please email me if you'd be willing to beta test this product.
Drawing exercise, due Fri, 11/12, 8:00 Here's the video
You should have a class called "Palette" that will draw the color box and will have a method which will detect whether the mouse is inside it.
Also, here is my way of listing the colors that the Palettes should contain:
String[] colorStrings = {"R","G","B","RG","Rg","RB","Rb","rG","GB","Gb","rB","gB",""};
...where R = Red at 255, and "r" is red at 180, etc.

Here is my answer code.
2nd Test answers  
Exploding Targets Here's the task.
Here's my answer code.
A new cribsheet.  
A little game (ah, finally...) Download and unzip (use the unzip command in the Terminal).  Add some good code and play...
Special talk on college CS experiences: Tues or Wed next week Mike Zamansky, former head of Stuy CS, and current head of Hunter College's CS honors program, has offered to give a talk about general college CS experiences, and also the Hunter Honors program. If you are interested in attending, please fill out this form.

Mike is able to come on Tuesday or Wednesday of next week. He can do an after school presentation starting at 3:45pm and/or one during 8th period on either day. The 8th period talk would have to be shorter.
Wed: out again. Introducing State Variables, an important programming technique in animation.
Try out the sketch in the link above, and understand the code that runs it.
Tues, 10/26: I'm out again today.
Work with the Ball code provided and I'll take a look at it on Wed. in class.
Here's the Ball class, used to create the same kind of bouncing ball demo that we did before, but now with an array of balls.  Paste this into a sketch and make sure that you understand all of its parts.
Then fill in the move() and display() methods.
Change the constructors to add color to the balls' interiors.
Fri. 10/22: I'm out today, so it's time to watch VIDEOS! I'm going to introduce you to (or inflict upon you) Daniel Shiffman -- he's a professor at NYU and an online teacher of Processing and a Character.  And he's going to introduce you to Object-Oriented Programming.

Watch the following YouTube videos in class, by
a) turning on Closed Captioning (CC at the bottom of the window) and turning off the sound, or
b) if you have headphones, try to see if you can plug them into the class machines and listen. 
c) No, you can't use your smartphones (sorry), although you can use your own laptop if you have one.

8.1: What is Object-Oriented Programming in Processing:
8.2: Defining a Class Part I - Processing Tutorial
8.3: Defining a Class Part II - Processing Tutorial
8.4: Constructor Arguments - Processing Tutorial
Arrays to store sequential information.
Homework due Mon, 10/25, 8:00a
Use your new-found knowledge of arrays (in particular integer arrays) to record the movements of the user moving the mouse for 2 seconds (120 frames) and than play that recording back, going forwards and backwards.
Here are portions of the code.
Bouncing ball with gravity, due Wed, 10/20, 8:00a This is an exercise in using normal math coordinates (and later switching to Processing coordinates only when necessary), and using vectors for x-velocity and y-velocity, and finally, bouncing with gravity.
Here's the beginning of the code...
Here's what it should look like...
Nested for-loops exercise, due Mon, 10/18, 8:00a Here's the description
Analog clock lab, due Wed, 10/13, 8:00a

Note: 1) Upload your .pde file to the homework server (don't copy the code into the Comments-to-Teacher).
2) In the Comments-to-Teacher, indicate whether or not you'd like it shown to the class (we'll have a show-all if we get a working projector).  If you don't reply, I'll assume that you want it shown.

Create a working analog clock that displays the current time, like or better than this: analog_clock.mp4

This is a graded assignment.  If you create a clock that looks and works like this, the grade is 88. 
If you make more attractive and/or a fancier clock, your grade will rise. 
Among other things, you can add markers around the circumference to mark the hour positions. You can make fancier hands.  If you want a challenge, make a rectangular or elliptical clock, with hands that stretch.  Use your imagination.

Upload your .pde file (do not copy the code into the Comments-to-Teacher).

Radius of clock face: 150

1. Look at the docs for the functions hour(), minute() and second().

2. Work on the tricky code first: controlling the hands correctly.

There will be a number of angle transformations you'll need to get right. 
You might want to do your work in degrees, and then, at the last minute, convert to radians when inserting the angle into the sin() or cos() functions. 
This way, you can use println() to check the angles that you've calculated incorrectly, and you'll see them in degrees, and hopefully recognize how to correct them.
Classwork for Wed. 10/6 Make this rotating circle...

Here is my answer...
MIT opportunity for girls. Check out the MIT Beaver Works program for the fall.  Registration is SOON!
First animation homework, due Thurs, 10/7, 8:00a HW is here.

My answer is here.
Richard Lee's answer is here.
Answers to test #1 These are my answers, among many variations which are correct.
Looping problems.  Due Thurs, 9/30, 8:00a Here are 3 Looping problems.  Paste the code and the answers in the Comments-to-Teacher.
Here are the answers to the Looping Exercises.

Here is the (still developing) Processing Cribsheet.
CodingBat problems:  due Mon, 9/27, 8:00a

Do the following CodingBat problems:

  1. sleepIn
  2. diff21
  3. nearHundred
  4. hasTeen
  5. close10
  6. monkeyTrouble
  7. parrotTrouble
Register at CodingBat

Instructions -- please follow these exactly:

  1. Go to
  2. At the top-right: Create an Account (if you already have one from last year, skip this step)
  3. After creating the account, log out and log back in, to make sure that you can.
  4. At the top-right, click on Prefs, then fill in the "Share to" box with  and press Share
  5. Go back to Prefs and fill in the "Memo" box with: f2021, your period #, last name, first name.  Sample:  f2021,3,Brooks,Peter. Make sure there are commas and no spaces.  Press Update Memo
Homework, due Fri, 9/24, 8:00am Here 'tis.
Classwork: Wed 9/22 Create this image
Use variables for the center of the targets, and for the small. medium and large circles' colors.  Do not write your own functions.
First homework!
Drawing of a person.
Due Tues morning 8:00a
Create an interesting drawing of a person (at least a little more than a stick figure).  You must use the following functions at least once: background(), line(), circle() and/or ellipse(), rect(), stroke(), strokeweight() and fill().  You may use any other Processing functions.
 Upload your .pde file to the homework server.
Download and install version 3.x (not 4.x beta) of the Processing program.  
First day survey due by Wed. midnight.  
First task: fill out your Profile on the Homework server.
  1. Go to the main class link page (
  2. Click on the Homework/Grade server link (or use the one at the bottom of this webpage)
  3. Choose the Profile menu item
  4. Choose your period and name
  5. Log in with your OSIS number as your password
  6. Fill out your email address and preferred first name only, DO NOT CHANGE YOUR PASSWORD YET.
  7. Save: (press Change Profile button)...
  8. (optional, but recommended): now you should change your password for this Homework server:
  9.  Go back to the Profile page, create a password and press the Change Password button.
  10. REMEMBER this password!
Help from Mr. Brooks In school, I live in the CS nest (room 301). I'm free periods 6,7,8.  Come on in, no appointment necessary.  If I'm busy, we'll work out a time.  If I'm not there, ask someone when I'll be back and/or try reaching me telepathically.
Sending email to Mr. Brooks:
Send mail to:

You MUST include your name in the subject line or body of the message, otherwise I won't know who it's from.
Stuyvesant bell schedule  
Homework/grade server  
Mr. Brooks MicroMind, Inc.
Support Wikipedia