60-233 Intro to Physical Computing - Andy Mann Domain II OLED

Andy Mann Creative Skill II: OLED Screen

What I wanted to learn, and why it interested me:

The reason I want to learn more about the pixel display so that in future projects, specifically project 2, I can implement it. The idea of displaying actual images is quite appealing to me, as I may want to make something to help me learn the guitar, as I am actively doing that. So being able to display images and chord charts, or something of the like, could be useful. Even in diorama settings, I could make scrolling billboards in scenarios where that could be cool.

I intended to build a pixel display with a button that, when pressed, shows the chord chart of a chord on a guitar I am struggling with getting fully. Additionally, when the button is not pressed, it will display another chord

Final outcome: In this code, I have it alternate between two different bitmap drawings of 2 guitar chords. Normally, the OLED Screen will display the chord chart of an E minor chord, but when the tactile button is pressed, it will switch to displaying a Cadd9 chord.

Images of final creative/exploratory output

Here is the image of the Chord Board with the E minor chord on the OLED Screen

Here is the final imge of how the screen looks when the E minor chord is present

IMG_5516.MOV

Here is the final video of the OLED Screen project. This had to be in landscape and oriented like this, unfortunately, to get the screen to be visible

Process images from development towards creative/exploratory output

Here is an image of my screen formatting the chord chart weird, ultimately showing just a weird slanted black box. I found this out to be a code error, but I am still unsure exactly what happened, but I rewrote the code and it worked.

This is an image where the screen was being weird and not displaying what I wanted. I found out it was due to a weird code error, that I am still not super sure of.

Here is an image of me trying to fix the chord chart as I initially flipped it wrong, and the formatting was weird. This was when I started to learn GIMP

Image of the Chord Chart before I went in and had to learn super fundamentals of Gimp to make the chart look better

Process and reflection:

Overall, the OLED Screen Domain 2 project went quite well. I feel that, particularly with the soldering, I was much more confident the second time around, while still being quite nervous. In particular, I was worried I did not put enough solder on the actual connection between the pins and the OLED Screen, but I did.

The hardest part of this project was by far creating the custom bitmap images. I had zero idea how to use GIMP, and had to learn some basics for this project in that application, as I was not willing to spend a ton of money on Photoshop for this project alone. I was struggling particularly with getting certain pixels to pop up and work, and had to consult YouTube tutorials and Google Gemini (as it allows images). Finally, I was able to find a way to manually go in and edit the weird/wrong pixels and got it to look like a chord chart. With wiring, this time I did it correct first try (which for me was very impressive and surprising), so hopefully with wiring, I am learning and generally will struggle less with it on future projects.

Technical details

This is the electrical schematic for this project

Above is an electrical schematic where the button controls the image on the OLED Screen.

//60-223 Intro to Physical Computing, Spring 2026

//Domain-specific Skill Building exercise: OLED Screen: Andy Mann

// In this code, I have it so that when I press the Tactile Pushbutton, the image on the screen shifts.

//The image is normally a chord chart of an E minor Chord,

//but when the button is pressed, the chord chart changes and now shows a Cadd9 chord

//Pin mapping:

//Arduino pin | role | details

// ------------------------------

// 4 output Tactile Pushbutton

// A4 communication SDA OLED Screen Pin

// A5 communication SCL OLED Screen Pin

//general stuff I need to include

#include <Wire.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128

#define SCREEN_HEIGHT 64 // Full height for your 128x64 hardware

#define OLED_RESET -1

#define BUTTON_PIN 4

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// --- BITMAP 1: E Minor ---

const unsigned char epd_bitmap_E_minor[] PROGMEM = {

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0x80, 0xff, 0x80, 0x7f, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff

};

//--- BITMAP 2: Cadd9 ---

const unsigned char epd_bitmap_Cadd9[] PROGMEM = {

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0x80, 0x7f, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0x80, 0x7f, 0xf3, 0xff, 0xf3, 0xff, 0x80, 0x7f, 0x80, 0x7f, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xf3, 0xff, 0xff, 0xff,

0xff, 0xff, 0xf0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,

0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff

};

// chord listing for clarity

const unsigned char* chord_list[] = {

epd_bitmap_E_minor,

epd_bitmap_Cadd9

};

const int total_chords = 2;

int current_chord_index = 0;

bool last_button_state = HIGH;

//setting default values

void setup() {

pinMode(BUTTON_PIN, INPUT_PULLUP);

//initializing display

if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

for (;;); // Halt if screen is not connected

}

//displaying display

display.clearDisplay();

display.display();

}

//looping structure

void loop() {

bool current_button_state = digitalRead(BUTTON_PIN);

// Detect a "falling edge" (button press)

if (last_button_state == HIGH && current_button_state == LOW) {

current_chord_index++; // Move to next chord

// Reset to start if we go past the end of the list

if (current_chord_index >= total_chords) {

current_chord_index = 0;

}

delay(200); // Debounce to prevent double-skipping

}

last_button_state = current_button_state;

display.clearDisplay();

// Draw the current bitmap from the list

display.drawBitmap(0, 0, chord_list[current_chord_index], 128, 64, SSD1306_WHITE);

display.display();

}