[Week04] Sprites and animations

These are some of my experiments.


I was also thinking about some fairy and star catching game…download


But eventually for arcades, I think maybe PvP would be the most fun and simple stuff.

I really wanted to try some two-player funny racing game…each player will have two buttons to hit really fast to climb the stairs, whoever faster will win the game.


Thus I made these two players.

static run static2 run2

Still not sure which would be the coolest 🙂

[Week03] Golden age of arcade video games

Three games I want to mention so far are Space Invaders, Castlevania and PunchOut!!

Space Invaders

Space Invaders is a 2D shooting game released in 1978 and is considered one of the forerunners of modern video gaming.


The layout is quite simple yet sufficient for a gameplay. Basically Score and high-scoore are shown on top of the screen, while life, credit and level are shown below.

I think the game control and mechanics are very well-designed. You need to shoot down all the enemies since they will move down a row after a certain period, and they will move faster horizontally. The closer the enemy is, the harder you can avoid the bullets they shoot. So it seems at first if you can remove the front enemies fast, then it’s really hard to get you down. Gladly since the front enemies are of high-threat, the are the biggest and easiest to be shot down, while the inner-most line enemies are the smallest and hardest, creating different levels to differentiate players based on their skills. Since it’s sort of timed, it can be really hard at end-game when all the enemies are both hard and fast to shot down.

Another interesting point is, there is a design of some sort of fort. Enemy bullets will be blocked by the fort but it can also be damaged. When player shoot the fort the bullets become more and the fort will be damaged really fast compared to when you shoot the enemies. This is an interesting design since if you want to shoot down the enemies fast, you may want to avoid damaging the fort, or you may have to destroy some of them to allow faster clean-out of the enemies.Also the fort won’t be refreshed when entering a new level, so it actually create a choice for the player , whether to save the fort to later levels or not.


Castlevania is a RPG game created in 1987. The starting page seems quite the same for the three, basically a logo, “Push” quotes, and copyright.

Screen Shot 2016-02-18 at 6.21.09 PM

Screen Shot 2016-02-18 at 6.23.33 PM

In game interface is also quite similar: Stage, life, credit. But additional Time, item are also shown above.

The game is mainly about normal rpg game when the player basically uses some sort of chained weapon to hit monsters, or hit some fireplaces and candles to gain additional life/ time/ money or item, or enter some unformidable mode.

The player can either move left and right, jump, and can also use the basic weapon or item to fight.

Interestingly the map is scroll like can you can also use stairs, thus making the game kind of labyrinth. If you get stuck you may likely get hurt more.

Something I don’t like is you can drop down from a stair if you choose don’t to use the stair, which I think is unreasonable and annoying.

Overall the game is very rich in detail and rich in mechanics. The graphics are of good detail as well.

Punch Out!!

Screen Shot 2016-02-18 at 4.36.35 PM

This is a box-fighting game made in 1984.

I really love the control mapping, so you can hit the combination of (up / down) with (left / middle / right) and you can also defend (up/down). Which I think is super cool and reasonable.

Screen Shot 2016-02-18 at 4.38.36 PM

Something bad about it is I can hardly notice the score board at top, and at first I sort of misunderstand myself to be the red one facing you. Maybe red is more attractive to me at first, I don’t want to be green.


[Week03] CNC












CAD with vectorworks

Screen Shot 2016-02-18 at 5.29.14 PM

At first I made this pattern by replicating a bordered triangle again and again.

Screen Shot 2016-02-18 at 5.23.23 PM

When it is finished I fear the CAM could not tell the difference cutting inward or outward. So I made another draft composed of 12 triangles inside and a whole star outside.


I happen to have a little problem using draft1(and maybe the process of CAM as well), cause I found CAM can only interpret the pattern as lines instead of triangles and star. So I used draft2, it still seemed cannot tell a triangle. I thought maybe because I grouped the whole figure together. When it is ungrouped into 12 triangles and a star, then the CAM can tell a whole triangle, and I continued using this draft for CNC.






I used as much screws to make it steady. Sometimes screws can’t go all the way in and I need to get it out, push hard the plywood, then drive it in again.




At last I hang it over the wall just below a light and I think the light effect super great.

FullSizeRender 3

[Week03] 13567 Pure Piano Phase


Two melodies play together, with different bpm 76 and 77.

Screen Shot 2016-02-17 at 6.30.07 PM

var sampleURL = "http://scarlettsan.me/resources/Dream_high.mp3";
var sampleURL2 = "http://scarlettsan.me/resources/Dream_high_76.mp3";

var player = new Tone.Player(sampleURL).toMaster();
var player2 = new Tone.Player(sampleURL2).toMaster();

//trigger the start of the sample once its loaded
Tone.Buffer.on("load", function(){
	player.loop = true;
  player2.loop = true;

I tried some different combinations, different piece with one octative difference. And I think the same piece play with itself works the best.



Realization of notes:

Wind part chord: http://jsfiddle.net/sunwangshu/43wfqha0/2/

Piano part: http://jsfiddle.net/sunwangshu/rbnxe9s6/

[Week03] Assignment: Final Day!

Portal to the game:


If you have some f**king days back dealing with your finals, here is your chance to make some changes.

—————————-spoiler ALERT————————–

Screen Shot 2016-02-17 at 1.52.52 AM

World Design

It is basically a world of students fighting their final tests. Students need to survive in the test due to their social pressure to get a good job in the future; peer pressure and family causes. It can also be personal impulses, the harvest of a whole semester’s study, their desire to show off and impress the girls they love, or to boast in front of parents and friends, or simply out of fear and just want to survive and have a nice vacation.

Teachers make tests to get students evaluated and that’s a discipline cause the more effort you put into, the higher score you will get. If no score is being given students won’t study very hard. Also final test is for some students a chance to cover up the stuff they haven’t done for a whole semester. Some of them don’t pay attention to classes but manage to pass the test just after several days of preparation. Some just never fail because they have a good habit during the semester. Some unfortunately can’t catch up and are not likely to survive unless they devote a lot of effort in the final week.

Besides these hidden presumptions, the conflicts of the world are simplified to the conflict between workload and health, because chances are you need to do a lot of unhealthy deed to save time, stay up to gain more time, in order to finish what you ought to do and survive the test.

Workload & Health

This is a simple narrative choice game design. Basically, you need to make some choices to balance between the intimidating workload with body fitness.

The core concept of this game is, you need to keep a healthy lifestyle during normal days, then no matter what happens you will perform well at last. One or two unhealthy deeds can be acceptable, sometimes harmless, but three would be devastating.

Role of Luck

Apart from choices, I’m interested in the uncertanty of life.

Chances are there could be some uncovered workload, but to maximize the dramatical effect in a single gameplay, I set this chance to be always true, and then the only difference is whether you will realize it during the test, or manage to find it the night before.

The rest part of luck is simple – the healthier you are, the better luck you will have; if you’re very bad conditioned you can have some very bad luck.

Below is the score table for all possible results:

Screen Shot 2016-02-11 at 11.20.26 AM

[Week 01] Nordrassil

Portal: https://sunwangshu.com/projects/spring-2016/arcade/week01/

Inspired by Nordrassil from World of Warcraft, I made this simple version of Mount Hyjal and this World Tree.



To build the scene, I greatly scaled up the terrain (around 100x) and scaled up all the other trees (making into a prefab) so they look giant. Water material is added to resemble the magic lake (well of eternity). Also I increased several light sources so all the trees look shiny.

Of course the world tree should be soooo big that even from distant it looks great.

Screen Shot 2016-02-11 at 6.14.00 PM

Looking closer you’ll be amazed how big the root is.

Screen Shot 2016-02-16 at 5.40.06 PM

Looking from bottom to top seems never ending.

Screen Shot 2016-02-16 at 5.42.05 PM

All the other trees around are wonderful as well.

Screen Shot 2016-02-16 at 5.37.54 PM

Better if I can edit the skybox later on. Add the two moons and stars and purplish sky.

[Week02] Icy13567

Screen Shot 2016-02-10 at 6.30.04 PM Screen Shot 2016-02-10 at 6.29.58 PM

The effects I added are something like room size and filters, so they sound distant maybe a little cold here.

Similar effects are achieved through this preset:

Random: http://jsfiddle.net/sunwangshu/43wfqha0/1/

Duo: http://jsfiddle.net/sunwangshu/gbnbnx85/

Code of Duo:

var freeverb = new Tone.Freeverb().toMaster();
freeverb.dampening.value = 2000;
freeverb.roomSize.value = 0.9;
freeverb.wet.value = 1;

// note part
var synth1 = new Tone.SimpleSynth( {
	oscillator : {
  	type : "sine"
  envelope : {
  	attack : 0.02,
    decay : 0.8,
    sustain : 0.7,
    release : 2

var synth2 = new Tone.SimpleSynth( {
	oscillator : {
  	type : "sine"
  envelope : {
  	attack : 0.02,
    decay : 0.8,
    sustain : 0.7,
    release : 2

var dream_random = ["C4","E4","G4","A4","B4","C5","E5","G5","A5","B5","C6"];
var dream13567 = ["C4","E4","G4","A4","B4",0,"C4","E4","G4","A4","B4",0,"C4","E4","G4","A4","B4",0,"B4","C5","B4","G4","E4",0,];

for (var i = 0; i < 1000; i++) { var index = Math.floor(Math.random() * dream_random.length); var tone = dream_random[index]; if (i % 6 == 5) { var chance = Math.random(); if (chance > 0.5) {
    	tone = 0;
  synth1.triggerAttackRelease(tone, "4n", i * 0.4);
  var index2 = i % dream13567.length;
  var tone2 = dream13567[index2];
  synth2.triggerAttackRelease(tone2, "4n", i * 0.4);

[Week 01] Dream13567, and notes

Basically, it is inspired by the five notes: 13567 (C3 E3 G3 A3 B3)

Then comes melody #1: 13567- 13567- 13567- 78753

Then comes melody #2: 7—– 717531 5

Then comes melody #3: 71 5–715 715715 3–21

Then comes melody #4: 71 5–135 7–357 1-7135 6-….

#1 forms something like a piano phase.

#2,#3,#4 each echoed once.

Then some decoration.





——————— update Mar.23, 2016 ——————–

I love nature, I always wanted to create a clean feeling with my music.

Another music I made by now is:

For my music of nature, I would like to use traditional note like the piano and wind concept, to create the feeling of harmony and mist. Maybe some more glassy and high-pitched note for my little fairies, and some deep drum as the representation of the earth.

I really love the freeverb effect from Preset:

var freeverb = new Tone.Freeverb().toMaster();
freeverb.dampening.value = 2000;
freeverb.roomSize.value = 0.9;
freeverb.wet.value = 1;


// note part
var synth1 = new Tone.SimpleSynth( {
oscillator : {
type : "sine"
envelope : {
attack : 0.02,
decay : 0.8,
sustain : 0.7,
release : 2

“wind part”:

var synth2 = new Tone.SimpleSynth( {
	portamento: 0,
  oscillator : {
  	type : "square4"
  envelope : {
  	attack : 2,
    decay : 1,
    sustain : 0.2,
    release : 2

I’m trying to add PolySynth effects to the windpart so I can play multiple notes at the same time.

F for Fake

That’s kind of overwhelming. As an honest female, this at first sounds quite crazy to me like, someone can sell something fake but they don’t feel guilty at all. Gradually I feel then kind of interesting, they are sort of making people happy although it is against common sense but at least people are happy about these…They say, there’s market, otherwise how could fake tellers exist? Forget about the fake and legal things, just think about those fictions, games, movies…and how people actually enjoy these fake stories so much and can’t resist the imagination within…how true.

I love a lot of the tricky sayings inside. “You can’t trust those experts, there shouldn’t be someone who decide something is good or bad”. It’s a lot of fun seeing how the fake painting are authenticated, seeing how assertive people are, it can be mind-blowing that even they are trained experts, they can be unreliable at all. Thinking about how you believe things, it can be true that something you believed for years right now, can be actually fake as well, you just don’t know it yet.

The movie also revealed a possibility when there could be conspiracy between the art forger and art dealers…They are making money just out of nothing, or only a little things. But how about art? It would also seem like they are doing magic, making a lot of money out of some paint and canvas, just because some people believe in them. I remember the time when I first went to MOMA with some of my friends, when we were at an exhibition of the cubic works of Picasso, we find hardly any relation to our concept of art. It can be something like the Emperor’s New Clothes, when you admit that you can’t appreciate it make you feel like a fool so you just stop making any remark and the state keep the same. But I don’t know, I’m not an expert.

Personally I still can’t cheat people myself, I think there should be some moral bottom line. When people found that they are betrayed because they once believed it and they suffered a great loss of money or mental health, it could bad, even though you made them happy once. What I think acceptable is some more balanced exchange…that you trick them and make them happy, and you get paid because of it for the right amount. I don’t know.


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 :http://itpzhufy.com/2015/11/10/the-concert-of-sword-and-magic/

The Gentrification of Williamsburg – a short documentation

My role

  • shooting footages according to the voiceover with teammates
  • video editing using Premiere with teammates, aligning content with the pace of voiceover
  • color and brightness correction


Regina Vetka, Wangshu Sun, Nicola Carpeggiani


This is an assignment for class Video and Sound, when brainstorming about ideas, we thought this could be an interesting adventure to make a documentation about Williamsburg, which is a cool place in Brooklyn, NY. It is ongoing a big change throughout the years, which process is called – gentrification.



Week 3: story boards


IMG_1459 IMG_1460 IMG_1457

Week 4 – 5: preparing footages

We went around Bedford Ave a couple of times to find some typical places for the gentrification phenomenon. Basically we were looking around for old and new buildings.

It was so nice to know that we could borrow 5Ds and tripods from our E.R. It felt really magical starting to make them work and looking around through these great tools.

Regina wrote the great script and had the voiceover by her boyfriend.

The thing is when we came to think about the script, we found some of the scenes missing. And also we needed to interview some locals for their opinions.

Week 6: the magical week

This time we didn’t hang around aimlessly at all. We gathered each of the missing footage according to the script.

As for the interviewing part, things started really hard. We were around the Bedford Ave metro station, started nervously finding someone that seemed not that in a hurry. But whoever we asked all kindly said, “Sorry”, because they all had something to do, waiting for someone, heading to someplace… We were a little discouraged.

But then we thought about the park we went weeks before, where there were some tall and new buildings in construction. It’s a new and clean park at the riverside, people there felt quite relaxed. People there should be not that busy and maybe more open to talk. We were right. It turned out that people there were so kind and so willing to talk. They provided us a lot of interesting sayings that fits in to our script perfectly. We felt quite relieved, feeling like everything that seemed so hard is not that hard when you find the right way to open it.

Another magical thing is, Williamsburg seen from Manhattan, and seen at night, were so different from our inside view during daytime. Standing around Stuyvesant Town, not only can we see the whole Williamsburg bridge, something interesting is clear to your eyes like, the Domino Sugar Factory standing side by side together with the tall and luxury building named the Edge 11211. With the old building under deconstruction, the new building thrives. What a typical depiction of the gentrification phenomenon.

屏幕快照 2015-12-15 上午10.44.05 copy

Walking around there at Saturday night, the Williamsburg suddenly became so trendy and popular. You’ll never know what’s inside and old and shabby house, unless you come near the door and surprisingly hear the exciting music and find a bunch of cool young guys playing DJ, and your view of the old house changed forever. Every block there was a bar, and every bar was so bright and full of people drinking and laughing together. On the streets there were lines of young people chatting around walking to their destination. Suddenly some drunk girls walked in front of my camera started making funny poses. What a wonderful place! I could hardly believe this was the old and lonely Williamsburg I knew during daytime.

When doing the editing, I was a little disappointed for there could be some great footage at some time but I couldn’t remember where. So instead of seeking luck I looked at all of the footages and marked down each in sequence. Sarah was right as for naming each sequence could be of great help.

The final cut worked so hilariously together with Nicola’s music, less strict as without the music, and introduced some more optimistic and playful attitude toward life.


According to Sarah’s comment and classmates’ feedback, our first version of video contains some scenes too quick for the audiences. I should know that the feeling was different from mine as I have already seen my footages hundreds of times, but my audience was new to that and needed more time to understand. Also some classmates told me it was great to match the visual to the voiceover, but it could feel quite intense to do that for always. We neutralized these effects thereafter in our final video.

屏幕快照 2015-12-15 上午10.44.45 copy

Many thanks to Regina and Nicola for our work together. Special thanks to Regina’s boyfriend who offered this great voiceover in our video.


An experience design – phone your home

My role:

  • work together with PHP programmer
  • grab the paths of all images uploaded to server from their mobile phones
  • made a visualization feeling like all images fleeting in the space, with the help of p5.js.

Portal to the sketch:


You can fake sending them by hitting ‘\’ on your keyboard.



from Carter Emhart, TED

Watching Carter’s great visualization of the universe, when the Earth is too tiny to be seen even in the solar system, not to mention the Milky Way, not to mention the vast universe that consists of at least a hundred billion galaxies, it really makes you wonder –  where is our mother Earth? It really makes you homesick.

Are we alone in the universe? Will they understand our feelings about home?


Idea – Phone Your Home

As the technology evolves, interstellar transmission is no longer the privilege of the authorities. So why don’t we make our own version of the Golden Record, and phone our notion of home to the space?

Thus, we designed this experience for our classmates.



Students are allowed to upload an image that could invoke their feeling of home by accessing a webpage through their mobile phone.

屏幕快照 2015-12-15 下午1.11.35

Once an image was received, it would automatically be added on the screen and start sailing around with random size and speed, and the newest image will appear on the topmost layer.

屏幕快照 2015-12-15 下午1.10.34

Once everyone was ready, we started count down and invited our professor Nancy to hit on the Big Red button, then all the images flied up into the universe, and disappeared.

Not long later, all the images were actually sent into space via an interstellar transmission service.

Everyone was so excited to make their pictures show up and be seen. Overall it created a good experience for everyone to think about their treasured memories.



This presentation is the great outcome of teamwork. Everyone was interested and had a share of contribution.

Naichen and Jordan developed the idea of home and Golden Record, and wrote our great script,

Rebecca designed the presentation slides,

Dhruv made the shiny big red button,

I borrowed some PHP code that enabled image uploading and processing, then wrote the p5.js code to animate all the images on screen.



You can still see the presentation below, and fake sending them by hitting ‘\’ on your keyboard:


This is our ITP 2017 Golden Record.

A music box that can help you improvise with random melodies

We designed this music box that can give you inspiration by generating random melodies, and also allow you to play as you wish. In this video, I combined the random melodies with improvised melodies to make a whole music piece.

My role:

  • acquired data from a soft pot and a force sensor, and send then via serial communication with Arduino
  • developed a program that can map the input to melodies using p5.js, a touch event from force sensor is mapped to random tones, and a touch event from soft pot is mapped to a tone with certain frequency according to where you touch it (like a piano).
  • made a visualization of the frequencies and intensity of each tone using p5.js


[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!

Portal: https://sunwangshu.com/projects/fall-2015/icm/week05/


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

Creative word design


expressive words-01

Movieexpressive words-02


expressive words-03



My name is Wangshu Sun, though we usually call our last name first so I write these as Sun Wangshu.

Sun Wangshu-01 Sun Wangshu-02 Sun Wangshu-03 Sun Wangshu-04 Sun Wangshu-05 Sun Wangshu-06 Sun Wangshu-07

Can you tell something from these fonts?

Actually the story is, I was a visual girl (Athela), who turned geeky (Courier) afterwards, but I wanted to be stylish again and even more (Didot) !

I want to learn design (Gill Sans)  since I was archaic (Papyrus) , and I WANT design (Kannada).

I’m kind of a Regular and straight-forward girl, however I tried to be.

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

Link: https://www.sunwangshu.com/projects/fall-2015/icm/week03/

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 (event.delta > 0) { //rolling up
if (sBack < 100){ sBack += event.delta*2; //restrict range if (sBack > 100) {sBack = 100;}
} else { //rolling down
if (sBack <= 100 && sBack > 43) {
sBack += event.delta * 2;
//restrict range
if (sBack < 43) {sBack = 43;} } else if (sBack === 43){ bBack += event.delta; } } } else if (bBack > 0 && bBack < 100) { bBack += event.delta*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(event.delta > 0) {
bBack += event.delta * 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;

Bike Alarm – a simple application of LED

Stay away guy! I didn’t want my bike be stolen anymore, so I made this alarm circuit.


Just wind a thin conductive string around the wheels. If the bike is moved, this string will break up and the alarm light will turn on and send out a message that your bike is moved.


Below is a video about how it works.


The logic behind is a simple Not logic, thus when the string is good, the electric current is drawn to the ground so that no current flows into the LED; otherwise when it breaks, the LED turns on.


Some progress:


It was fun cutting paper into a shape. Haven’t done it since long ago.