paint.ck: CS476A HW#4: Final Project

paint.ck

paint.ck is a pixel art drawing beat sequencer built using ChucK and ChuGL. Each note on the 12-note chromatic scale is represented by a unique color, in roughly rainbow order. The tool is fully functional both as a musical and drawing application. If you’ve ever been curious what the chuck logo sounds like in pixel notes, this is for you!

Audiovisual narrative

the death and birth of a flower

To run

• Download files as a ZIP from the code repository.
• In the project directory, run chuck go.ck
• Try clicking and dragging on the canvas to draw!

Controls

Mouse Controls

User Interface (Rightmost three buttons only)

• reset: erases all pixels on the grid
• ill: fills grid with selected color
• play/pause: stops the beat sequencer

Canvas

• on hover on the canvas: Preview the currently selected note of a pixel.
• on click or on drag on the canvas: Change the note of a pixel.

Keyboard Controls

• 1 to - represents the 12-note chromatic musical scale from C to Bb. For example, “C#” would be selected by 2 on the keyboard, and “B” would be selected by -on the keyboard.
• backspace selects the erase tool.
• r resets the canvas to the default grid.
• f fills the canvas with the selected color
• d (left) and a (right) can be pressed to quickly move through the note inventory.

Iteration History

V1: Experimentation

• Milestone 1: Project proposals
• Milestone 2: Core Mechanics
• Milestone 3: Minimal Essential System

V2: Color changing beat sequencer

I changed gears to an idea I had earlier in the quarter, a pixel art beat sequencer.

I revised the reference code to get colors working on click on the basic sequencer.

V3: Drawing working — core mechanics

I wanted to mimic how when you draw on digital drawing programs, you can click and drag rather than clicking on each individual pixel. Thus, I added a new onDrag event and customized my Mouse.ck code to differentiate between left clicking and continuous dragging. This works better with a nice mouse (unfortunately I made this whole project on my trackpad).

GIF of dragging different colors on the canvas

V4: Minimal essential system

Now that I got my basic system working, I started to add some additional options to make drawing on the canvas easier.

• Reset: clears canvas
• Fill all: fills with selected color
• Play/pause: stops the beat sequencer

sped-up demo

V5: Extra polish & UI 🥳

Once the minimal essential system was working, I set out to design the UI of my project. This is the basic layout that I drafted before I set out to hook it all up on ChuGL.

I created my own Button.ck class to handle onClickevents from the main program, in addition to a set of custom buttons & icons. This would be helpful to show people the hotbar controls that sync up the notes with your keyboard and to give clarity on what all the notes are.

buttons ON

buttons OFF

final paint.ck

Reflection

As usual, I scrapped my previous milestones in favor of building something new. The end of my senior year fall quarter was tough for me due to unforeseen challenges from my health and personal life, so tackling on this project head-on during the winter break felt daunting. I originally had wanted to finish this project using (chunreal) ChucK + the unreal engine, but I learned that my laptop is incapable of postprocessing anything because there is not enough memory. Oops!

So I had to pivot, and went back to an idea I had halfway through the quarter — creating a pixel art beat sequencer that functions both as a music making and drawing tool.

Breakthroughs

• Adding an onDrag event to make it feel like traditional digital art tools that allow you to press and hold. This is an upgrade from individually clicking on every single pixel to color it.
• Making my own class and designing a relatively efficient state machine to handle clicking and keyboard interactions (given the constraints of the ChucK language, I have like a million if statements).

Challenges

• How to integrate audio into the tool. paint.ck is fully functional just as a pixel art creator, but I wanted my utilization of ChucK to still shine through.
• Transitioning from using keyboard controls to a working graphical user interface (GUI).
• Figuring out the audiovisual narrative I wanted to share that would highlight the capability and powers of this tool.

Overall, I am very happy to now be done! 🌱

Special thanks

• To Diego, Raghav, and Louise for getting me through my final project 🦋 I appreciate you all!
• To the teaching team who showed me grace in finishing my work ❤
• To my family, who listened to my failing computer make horrible sounds for the last few weeks as I coded at home.