Learn programming in Processing with this tutorial series for beginners. In this series I recreate the classic Simon Says game, step by step. It’s a great way to learn to create a small but complete digital product (in this case a game) from scratch.
We start with reverse engineering the Simon game. In the introduction video I show how we can reverse engineer the game (thanks to Simon Inn for his in-depth article on reverse engineering the electronic Simon Game) and break down a programming problem in different steps. Breaking apart a bigger problem in multiple smaller steps is one of the most important skills a developer should master.
This tutorial series is suited for beginning/intermediate programmers. In the list below you can read what you’ll learn in each video. The code for each programming in Processing video is available on Github.
Introduction (12 minutes)
Reverse Engineering the MB Simon Says game.
- Inspecting the original game.
- Breaking apart the functionality of the game in small development steps.
Illuminated buttons (33 minutes)
Creating four buttons that light up on a mouse-click.
- Drawing in Processing (fill, rect, width, height).
- Using the Processing Reference.
- Creating a button object (class, void).
- Displaying four buttons (for-loop, [] array).
- Illuminated buttons (lerpColor).
- Handle mouse clicks (if, && logical operator, else, mousePressed, mouseReleased, println).
Tone Generator (25 minutes)
Generate tones with the Processing Sound library and trigger the notes with the buttons.
- Using the Sound library.
- Creating a Simon Tone Generator object.
- Use the Square Wave Oscillator (SqrOsc, play, amp).
- Generate a unique tone for each button (freq).
- Program a timer that controls the note duration (millis).
Simon Speaks (21 minutes)
Let Simon say a sentence of random words.
- Light up the buttons based on the tone length.
- Play random notes (random, int() typecasting).
- Play random notes with a pause in between (millis).
- Let Simon generate a sentence.
- Let Simon play the sentence word by word (int, [] array).
- Deal with an ArrayOutOfBoundsException error.
- Join an array (sentence) and print it to the console (join(), printArray).
User talks, Simon checks (12 minutes)
The user “talks” and Simon checks if the user said the correct sentence. If not Simon generates a new sentence.
- Check if the button matches the current word in mousePressed (!= inequality relational operator).
- Advance in the sentence when the button matches the word in mouseReleased.
- Start over when the button doesn’t match the word in mouseReleased (boolean variable).
- Debugging. Reset the position in the sentence to the start.
Wrap up everything in one final game (30 minutes)
Create the turn based game (Simon, User, Simon, User, etc.) and the difficulty curve.
- Implement the difficulty curve.
- Each time you repeated the correct word, Simon makes the sentence one word longer.
- Give feedback to the users if they won or not.
- Debugging sentence length (println) and find I forgot to reset the sentence length.
- Make Simon talk faster with longer sentences.
- Create a dialog and show it on screen (text, textSize, textAlign).
- Game states introduction and ideas.
Check out the whole programming Simon Says in Processing playlist on YouTube. The whole series, with 6 videos, will take you about 135 minutes to watch.
