From 00322dad0a2ae0ae7a54a1540ca9c31006d253cd Mon Sep 17 00:00:00 2001 From: Shiyamaladevi R S <143835823+Shiyx27@users.noreply.github.com> Date: Thu, 9 Jul 2026 23:44:17 +0530 Subject: [PATCH] Enhance dance choreography and add floating hearts Updated text to include floating hearts and improved dance choreography explanation. --- .../build-a-pocket-rave-with-arduino.mdx | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/projects/build-a-pocket-rave-with-arduino/build-a-pocket-rave-with-arduino.mdx b/projects/build-a-pocket-rave-with-arduino/build-a-pocket-rave-with-arduino.mdx index f3e54ebd..b01c279f 100644 --- a/projects/build-a-pocket-rave-with-arduino/build-a-pocket-rave-with-arduino.mdx +++ b/projects/build-a-pocket-rave-with-arduino/build-a-pocket-rave-with-arduino.mdx @@ -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 = { @@ -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. + +```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! + +```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: