Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ The `#define` lines are just us giving the computer some simple nicknames. Inste

### 2. Drawing with 1s and 0s

If you squint your eyes and look at the 1s in that block of code, you can actually see the shape of a heart! A 1 tells the screen to turn a tiny lightbulb on, and a 0 tells it to leave it dark. We save this picture under the name heart_bmp so we can stamp it on the screen later.
If you squint your eyes and look at the 1s in that block of code, you can actually see the shape of a heart! A 1 tells the screen to turn a tiny lightbulb on, and a 0 tells it to leave it dark. We save this picture under the name heart_bmp so we can stamp it on the screen later

```cpp
const unsigned char heart_bmp[] PROGMEM = {
Expand All @@ -138,26 +138,53 @@ Usually, when beginners want a computer to wait before doing the next thing, the

To fix this, we use `millis()`. Instead of going to sleep, `millis()` tells the Arduino to constantly check a stopwatch. It says, "Keep looking at your watch! When 1.8 seconds pass, change the lyrics. When 230 milliseconds pass, make the guy dance!" This is called non-blocking code, and it lets our stick figure dance smoothly while the song lyrics scroll by!

### 4. Choreographing the Dance
### 4. The Floating Particle Effects (The Hearts)
To make the background look like a real party, we stamp our heart_bmp onto the screen. But we want them to float upwards!
On our screen, a Y-coordinate of 64 is the very bottom, and 0 is the very top.
Comment thread
Shiyx27 marked this conversation as resolved.

```cpp
int heart1_Y = 64 - ((timeNow / 40) % 70);
display.drawBitmap(120, heart1_Y, heart_bmp, 5, 5, SSD1306_WHITE);
```
GIF OF FLOATING HEARTS IN OLED GOES HERE

### 5. Choreographing the Dance

When people see the little guy dancing on the screen, they usually think it's a tiny video or a GIF. Nope! We are literally drawing him from scratch, 60 times a second, using a digital Etch-A-Sketch.

Snippets on how you can construct your own cutee Stick Man, Woman or even tun tun tun tun tun sahur ;-)

```cpp
display.drawCircle();
display.drawLine();
```
GIF OF STICK MAN DANCING w HEARTS GOES HERE

Instead of an image, we use math to draw shapes. How does he move? Remember our `millis()` stopwatch? Every 230 milliseconds, a variable called `danceBeat` flips between 0 and 1.

```cpp
int danceBeat = (timeNow / 230) % 2;
int guyY = 25 + (danceBeat == 1 ? -4 : 0);
```
```

I love choreographing dances, so I had to make my stick figure bounce to the exact rhythm of the song. The song is 130 Beats Per Minute (BPM). Doing a little bit of math, that means every 230 milliseconds, a fast, club-style eighth-note beat hits!

Every time the stopwatch hits that 230ms mark, we tell the stick figure to throw his arms up and bounce his Y-coordinate up by 4 pixels.

### 6. The Digital Teleprompter :
Now for the final piece....drumrollls...the lyrics! This is where you get to customize the code to match your own favorite song.

We use an `if / else if` statement like a movie script. The Arduino checks our millis() stopwatch to see what "phase" of the song we are in, and prints the correct lyrics to the screen!
Comment on lines +174 to +177

```cpp
if (phase == 0) {
display.setCursor(0, 8);
display.println("If you"); display.println("go hard"); display.println("you gotta");
} else if (phase == 1) {
display.setCursor(0, 8);
display.println("get on"); display.println("the"); display.println("floor");
}
```

Prefer to watch the whole thing come together? Here's the full walkthrough:

Expand Down