BoomChaCha! – A physical musical decentralized RPG game

Link to updated portfolio page:


屏幕快照 2015-12-07 上午2.16.17


Team members: Wangshu Sun, FY(Fengyuan Zhu), Carrie(Yue Zhang).

My Main role: game programming, music composition and audio effects

Other work involved: play testing, video clipping, visual design and animation timing, staff design for laser cutting, soldering.


Latest Trailer:



BoomChaCha! is a physical musical role-playing game where three players will fight together against monsters.


When we were asked to generate some idea for our final, I just couldn’t stop thinking about music and game together. One day I talked to a lot of my classmates also including FY. I was chatting with him thinking about making music with some gesture made by physical tools – like waving the wand in your hand. He thought this was really interesting and we could even make a game into it, anyway there will sure be a lot of fun. Then Carrie was also thinking about some idea about music so we joined together.


——————-  Stage 1: Making music with sword and wand  —————————

At first we was trying to make music by waving the sword and this was the first prototype we made.

But at the playing test on class, most people didn’t find that make sense. They were also intended to fight each other, unless being told to follow some music, or being told to regard the sword as a wand.

Fight each other

Igoe following some pattern

Fake the sword to be a wand


———— Stage 2: Inspired by Patapon, but a lot more ——————

At that time we really needed a way to combine battle and music together. Or at least just involve a little element of rhythm. One day it reminded me a game I ever played on PSP called Patapon. It was a great RPG game that you make normal orders like forward, attack, defend, jump… but by making different drum patterns! It really make sense with drum and battle signal together because that’s what drum meant to be. And that game felt really great because you can get bonus by keeping the pace throughout one gameplay, and that just felt like you are in a bar dancing to the music, and music and dance can simply make you happy.

Patapon 3 (square:Pata / circle:Pon / cross:Don / triangle:Chaka)

The game was so amazing that we all agreed on this form of great combination of music and RPG game. I was really curious about whether we can make this into 3/4 beats, creating a dance-like feeling. Carrie was thinking about we have three people in our group, making it perfect for 3/4 beat, and also three different characters. I was inside a mage and FY a warrior, and Carrie chose to be a defender. We could also start making different orders by starting with different person and that sounded really reasonable.

Carrie then created this wonderful design. To be honest, at first I thought this was too creepy. But by changing the color a little bit, everyone in my class was so fond of that like a magic and I had to admit that Carrie is a genius.


And I also found that the player’s performance was highly relevant to how good the visual guide is designed. Blinking border was not that good as falling note since people need some time to react to a newly appeared border. When I made the blinking border appear a little earlier then that worked better.

屏幕快照 2015-12-10 上午2.39.53 leftward notes with a judging line

屏幕快照 2015-12-10 上午2.41.03

falling note with judging line and sound together

屏幕快照 2015-12-10 上午2.41.47

blinking border with text

——————- Stage 3: Keep going  ——————–

Software, hardware, communications, visual design, sound production, fabrication.

They are all a big deal when you are actually doing it.

— Game using processing –

屏幕快照 2015-12-10 上午2.36.54

I was responsible for the whole software part. Learning object oriented stuff was painful but FY was a great help, and at last the OO turned out to be really helpful.

屏幕快照 2015-11-25 下午10.13.15

Couldn’t forget the night when I finished all image slicing and made them appear in my sketch. Carrie is truly a genius and she did what we suggested – remaining her style, but at the same time express some sort of funny and happy mood.

—- Composing music using GarageBand

屏幕快照 2015-12-10 上午2.48.10

I also composed the music for the game using GarageBand. At first some music was judged to be too artistic and sad, then the second was fun but like journalism TV shows…

Thankfully, the last turned out to be really good. And everybody loved it. It was so simple and easy to remember that some boys passed by began to hymn this song. I was so proud of myself.

At first there was nothing but main melodies. I then added some drumbeat and the sound of triangle to indicate different positions of beats, making it easier for players to follow.

—- Design for laser cutting

屏幕快照 2015-12-10 上午2.52.55

I even tried designing the wand. That involved a lot of measurement. But luckily this second version worked just great. Laser cutter was so precise and powerful. And many thanks to FY’s blue LEDs!




Next Steps:

Recently there was a huge cracking sound happening inside processing. I couldn’t figure out how it happened exactly but there should be some problem inside the Sound Library.

屏幕快照 2015-12-09 下午8.31.32

It just happened when playing multiple files. It can be fixed by removing the sound feedback but that’s a huge loss in user experience. We really need to figure that out, or just use another sound library instead.

Apart from sound part, the visual guidance are also important to be designed and implemented better.

Also we needed a better tutorial part, or different stages, to make sure that people enter the fight after they are fully prepared, and before that, just have fun through the tutorial.

Updates ITP Winter Show 2015:

Used Minim library to solve the problem!

Added visual guidance!

Added interactive tutorials!

Detailed introduction for ITP Winter Show 2015:

BoomChaCha! is a physical musical role-playing game where three players will fight together against monsters.

Basically there is a warrior attacking the monster, a defender defending all of the three, and a mage healing all of the three. The three characters share the same life so they will get hurt or get healed for the same amount of health.

Unlike most of the RPG games, BoomChaCha! is musical. This means it is always better to follow the rhythm while playing. There’s always a “Boom Cha Cha, boom cha cha” six-beat pattern repeating itself in the 6/8 background music, which creates a feeling of dancing party rather than a dangerous fight. During the first three “Boom Cha Cha”, you can do attacking, defending or healing by hitting the first “Boom” with the physical sword, shield or wand, and the effects will be executed in the next three “boom cha cha”. That is to say, if the warrior hits the first “Boom” beat, an attack will be executed in the next “boom cha cha”; if the defender/mage hits the first “Boom” beat, the next “boom” it will start defending/healing all the characters.

Since our aim is to invite people to play together, acting cooperatively should get better results than doing alone, so we designed an “assistance” logic with the “Cha Cha” beats. That is to day, if the warrior hits the “Boom” followed by the other two hitting the next two “Cha”, “Cha” beats, you will get a huge attack-power bonus and can kill the monster fast without getting too much damage. The same applies to the mage and the defender.The more assists, the better effects the players will get. Better results are also granted by the better timings of you three hitting the first three “Boom Cha Cha” in the six-beat patterns in the music.

At the beginning you will be in a practice mode to learn how to play. When you think your are ready, you can enter the fighting mode and the monster will start attacking you. Try to kill him fast and prepare a defend before his attack, and during the gap after you kill a monster, it’s a good time for you to get healed.

In all, if you want to survive and thrive, follow the beats and dancing together!

Updates (20160520):

New Laser Cutting for wand (moved batteries to bottom):

Top three for Best Game Design in Student Game Competition!

Attended CHI 2016!


Final Result



FY’s blogpost :

[Week 05] A great many shooting stars!

Screen Shot 2015-10-07 at 3.33.38 AM

By drawing your cursor on the screen, you can create a great many shooting stars!



How to play:

  • draw your cursor on the screen to create a lot of stars
  • one click on the screen will create a source of stars that remains on the screen, another click will cancel it
  • use scroll button to change the radius of stars created



Having learned objects and arrays, I felt really want to do something great. I got Inspired by fireworks and Yiting Liu’s great homework and decided to create my own version of shooting stars.

Since last time it got really slow when I draw a lot of flowers, I decided to create my own png files instead of drawing directly by p5, and it turned out to be really good with transparency.



Screen Shot 2015-10-07 at 4.02.44 AM

I created a single star in Illustrator and leave some transparency by the help of PNG.


I started like creating a lot of not bouncing balls and it seemed appealing.Screen Shot 2015-10-07 at 1.39.00 AM

Then I made them each rotating with different speed, and the faster it falls, the faster it rotates.

Screen Shot 2015-10-07 at 2.33.56 AM

I also made it appear within a range of the location of cursor, instead of simply appear at where you point to. It is changeable by scrolling up and down and a circle will appear shortly if some change is made.

Screen Shot 2015-10-07 at 4.21.35 AM

A last good feature is that when you click at some point, then it will automatically be a source of stars and no need to wave anymore, just relax and enjoy 😀

Play together is also full of fun~

Screen Shot 2015-10-07 at 3.33.38 AM

A magic flower (a series of animations using p5.js)


I coworked with Joy and it was really fun. One interesting idea inspired by Joy is that when clicking one of the leaf, it grows higher, and clicking another leaf to make it shorter.

Screen Shot 2015-09-22 at 10.50.18 PM


First of all I did a lot of mathematics, to make my two leaves some kind of button. Basically I used two rectangle to represent my leaves.

FullSizeRender 2

When you click the left leaf, it grows higher. And the faster you click, the faster it moves.Screen Shot 2015-09-22 at 10.50.22 PM

When you click the right leaf it becomes shorter.

Screen Shot 2015-09-22 at 10.50.25 PM



When the mouse is over either the flower or the leaves, the color changes faster.


When you scroll the background changes from dark to bright.


Screen Shot 2015-09-22 at 10.50.18 PMScreen Shot 2015-09-22 at 10.50.33 PM

Screen Shot 2015-09-22 at 10.50.36 PMScreen Shot 2015-09-22 at 10.50.40 PM


You can notice that I made some other effect to let it swing back and forth. The curve of this stick is drawn by bezier, and the displacement of the flower is determined by a sine function, namely

xShift = amplitude * sin(2*PI*time/period).


Below is my code:

//This is going to be a beautiful flower: stick, petals, center, leaves.
//It automatically changes its color. If you press the center of it, it will change faster.
//You can click the leaves to make it grow higher or shorter. (smoothly)
var hTrue;
var h,s,b; //of petals. Max 255 for all.
var hBack, sBack, bBack; //of background. Max 360,100,100 for hue, saturation and brightness.
var rStroke, gStroke, bStroke; //if it's too bright then swtich the stroke to gold, else white.

var xShift, yShift; //x shift of flower, positive means left, negative means right
var yCenter; //y coordinate of center
var yStick; //y coordinate of stick
var growValue;//pixels for the flower to move upward (negative means downward)

var phase; //frames over time
var period; //count of frames in a period

var mouseOverFlower;
var mouseOverLeft;
var mouseOverRight;

function setup() {
h = floor(hTrue);

hBack = 260;
sBack = 100;
bBack = 20;

rStroke = 255;
gStroke = 255;
bStroke = 255;

xShift = 0;
yShift = 0;
yStick = 350;
yCenter = 660 - yStick;
growValue = 0;

phase = 0;
period = 360; //6s * 60frames/s

function draw() {
//refresh background

/*----------- translate to the center of petals -------*/
xShift = 50*sin(2*PI*phase/period); //amplitude = 200pxs, 4s a round
yShift = 2*(1 + cos(4*PI*phase/period)); //imitate some up and down
phase ++;
if (phase === period) {
phase = 0;
translate(300 - xShift, yCenter - yShift);
var e=7;//number of petals

//draw stick
bezier(0,0,0,0,xShift,yStick/3 + yShift,xShift,yStick + yShift);
var tx = bezierTangent(0,0,xShift,xShift,0.5);
var ty = bezierTangent(0,0,yStick/3 + yShift,yStick + yShift,0.5);

var angle = atan2(ty,tx);
angle -= PI/2;

rotate(angle); //rotate the whole flower as the stick slants

//draw petals
for(var i=1;i<=e;i++){ fill(h,s,b); //use (1,0) or (-1,0) instead of (0,0) as starting point to close the figure bezier(1,0,-47,-80,-47,-120,0,-175); bezier(0,-175,47,-120,47,-80,-1,0); rotate(2*PI/e); h = h + 255/7; if (h>255) {h = h - 255;}

//draw center

//decide whether the cursor is within the reach or petals
if (dist(mouseX,mouseY,300,yCenter-yShift) < 175) {
mouseOverFlower = true;
} else {
mouseOverFlower = false;

/*------- translate to the bottom of stick ------*/
rotate(-angle); //back to normal direction to draw leaves

//draw left leaf

//decide whether the cursor is over left leaf (the outer rect of left leaf)
var xLeft1 = mouseX - 300;
var yLeft1 = mouseY - yCenter - yStick;
var xLeft2 = xLeft1*cos(PI/4) - yLeft1*sin(PI/4);
var yLeft2 = xLeft1*sin(PI/4) + yLeft1*cos(PI/4);
if (xLeft2<=30 && xLeft2>=-30 && yLeft2<=0 && yLeft2>=-240) {
mouseOverLeft = true;
mouseOverFlower = false; //disambigulation
} else {
mouseOverLeft = false;

//draw right leaf

//decide whether the cursor is over right leaf (the outer rect of right leaf)
var xRight1 = mouseX - 300;
var yRight1 = mouseY - yCenter - yStick;
var xRight2 = xRight1*cos(-PI/4) - yRight1*sin(-PI/4);
var yRight2 = xRight1*sin(-PI/4) + yRight1*cos(-PI/4);
if (xRight2<=30 && xRight2>=-30 && yRight2<=0 && yRight2>=-240) {
mouseOverRight = true;
mouseOverFlower = false; //disambigulation
} else {
mouseOverRight = false;

/*---------- end of drawing ---------*/

/*------------------ Functions ----------------------*/

//growing function: the greater the growValue, the faster it moves.
if (growValue >= 10) {
yStick += growValue/20;
yCenter -= growValue/20;
growValue -= growValue/20;
else if (growValue > 0) {
yStick += 0.5;
yCenter -= 0.5;
growValue -= 0.5;
} else if (growValue === 0){
} else if (growValue >= -10) {
yStick -= 0.5;
yCenter += 0.5;
growValue += 0.5;
} else {
yStick += growValue/20;
yCenter -= growValue/20;
growValue -= growValue/20;

//changing color of petals
if (mouseOverFlower) {
hTrue = hTrue - 2*255/period; //make it integer times the normal condition, consistent in frequency
} else if (mouseOverLeft) {
hTrue = hTrue - 7*255/period;
} else if (mouseOverRight) {
hTrue = hTrue + 7*255/period; //make it integer times the normal condition, consistent in frequency
else {
hTrue = hTrue - 255/period;

if (hTrue > 255) {
hTrue = hTrue - 255;
} else if (hTrue < 0) { hTrue = hTrue + 255; } h = floor(hTrue); } //scroll over and the background changes its color function mouseWheel(event) { if (bBack === 100){ if ( > 0) { //rolling up
if (sBack < 100){ sBack +=*2; //restrict range if (sBack > 100) {sBack = 100;}
} else { //rolling down
if (sBack <= 100 && sBack > 43) {
sBack += * 2;
//restrict range
if (sBack < 43) {sBack = 43;} } else if (sBack === 43){ bBack +=; } } } else if (bBack > 0 && bBack < 100) { bBack +=*2; //restrict range if (bBack > 100) {bBack = 100;}
if (bBack < 0) {bBack = 0;}

if (bBack < 24) {
bStroke = 255;
hBack = 260;
sBack = 100;
} else if (bBack < 49) {
bStroke = 255;
hBack = 215;
sBack = 100;
} else if (bBack <= 64) {
bStroke = 255;
hBack = 210;
sBack = 99 - 4*(bBack - 49);
} else if (bBack <= 80) { bStroke = 255; hBack = 220; sBack = 39 - (bBack - 64); } else { bStroke = 0; hBack = 24 + 0.75*(bBack - 80); sBack = 23 + (bBack - 80); } } else if (bBack === 0) { if( > 0) {
bBack += * 2;
console.log(hBack + "/" + sBack + "/" + bBack);
return false;

//click the left leaf it will draw left, click the right leaf it will draw right
function mouseClicked() {
if (mouseOverLeft === true){
growValue += 40;
//xShift += 10;
if (mouseOverRight) {
growValue -= 40;
//xShift -= 10;

ICM week 01 – seven petal flower

I love the number seven, I love stars, I love symmetric patterns.

flowerIMG_1130Symmetry is all about calculation, though. I went through the references and found what I need to do things quick and need. Just started from the logo of p5 and more angles, and I played so high.Screen Shot 2015-09-08 at 1.17.13 PMThen I thought about the seven-petal flower that I used to draw in my childhood, I was so eager to draw it out and found that closed curves can be filled as well, so cool.IMG_1129 2With a little calculation, it turned out to be good, but still a little disappointing.Screen Shot 2015-09-08 at 9.36.24 PMA little stray-away, though 😛Screen Shot 2015-09-08 at 9.20.14 PMAlmost there.Screen Shot 2015-09-08 at 9.46.27 PMFinish.Screen Shot 2015-09-08 at 10.10.19 PM

Portal to see it online

Screen Shot 2015-09-09 at 9.23.39 AM

Another version replacing bezier() with arc()