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)


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;

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.


PComp Week 01: Readings about Interaction


  1. Crawford, The Art of Interactive Design, chapters 1 and 2
  2. Bret Victor, A Brief Rant on the Future of Interaction Design

1. How would you define physical interaction?

My definition of physical interaction: interaction is the communication between two processors (either human or computer) that all have input and output channels, and at least one of the channel should be physical. Like in this picture:


2. What makes for good physical interaction?

A good interactivity should, by definition, not miss any of the links and processing ability in this picture. If there is a bad listener/speaker, either human or computer, then at least one of the links will break and their conversation won’t continue. If one of them can’t process or speak or listen at all, they cannot even setup a conversation, or at most, like a man reading a book, there can only be one-way communication. Besides, the interaction should be physical, meaning that activities like people watching and listening, are not physical at all.

And that’s not enough a good physical interactivity. A good interactivity between two processors should be efficient, therefore they should have proper level of listening and speaking that match each other, and both of them should be efficient thinker. Say a person is typing on a computer like what I’m doing now, a good interactivity is based on that I have good eyes and an efficient typing skills, while the computer has a good keyboard and a good screen, and we can well understand each other and both perform our work efficiently.

3.  Are there works from others that you would say are good examples of digital technology that are not interactive?

Looking at the picture above, it is easy to find some digital things that are not interactive.

  • Digital things lack of input channel: traffic light and pedestrians, screen and user.
  • Digital things lack of output channel: keyboard and user, microphone and user.
  • Digital things lack of processor (straight-forward processing): air-conditioner and user. (I should say that it barely think about us at all >_< how cold they are! Why they don’t understand and be a little nicer…)

Visual Language Week 01: Analysis of a Poster Design

poster_design_culture_by_cheren89This is a poster about design culture.


  1. The most visible text in this poster is the word Now. Along with it are some smaller white description of the location of the event.
  2. Then comes the title design culture. Along with it are some tiny green words repeatedly saying “design culture” and function as decoration.
  3. The third visually important are the four green names just below the title. Along with them are some tiny white descriptions about them, on top of each name there is a time of event, while below a name there is probably the place a person comes from.
  4. The visually least important are the four detailed descriptions about the four lecturers at the bottom of this poster.

Pros: I think the design is cool because it divides the space with some slanted lines. And it adds some details to each of the four hierarchies, making it more varied and visually interesting.

Cons: The hierarchy could be better. In my point of view, I think the importance of the title should be greater than the word “Now”. And time should be more important than the place where those lectures from, but it’s actually hard to find than the place of this event. Besides, there is some redundancy in the design because the names of the four lectures are stated twice, which in my point of view can create some confusion about the information at first glance, such as you want to find the time of event and look at the bottom because there are lecturers, and thinking they should cover everything about the lecturers and lectures, but found nothing there.



  1. Design culTure noW on the letters D, T and W.
  2. Design Culture Now horizontals
  3. The space between four names align with part of the letters of Design and Culture.
  4. Partial 4th dividings at the bottom

Color Pallete

palleteThere is actually only one tune – green, combined with gray scales. There are three variations of grayscales: dark grey, light grey and white. And there are two variations of green: light green and a slight darker green.



Arial Black


Gill Sans Light from Monotype Gill Sans


Sowhat maybe a kind of rounded font like Arial Rounded


The result says it’s FF Zwo OT Bold Italic, but not exactly.


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()


PComp Week 01: iFriend


This is the great prototype that we made at PComp week 1.

How can distant friends hug each other? We designed iFriend to realize this dream!

At first, we want to make a touchable hologram of a distant friend. But soon the question appeared: How can you hug a hologram? At best you can see his/her face and body, but we expect MORE than this 😛

So it came to our mind a real avatar to represent you to your distant friend. It is named iFriend!



It is a big white soft robot like Baymax, that you can hug and send your hug to your friend. On iFriend’s head there’s a big screen for you to see your friend’s face and make it more emotional. To recognize your gestures and transmit it to your distant friend, we have two cameras on iFriend’s head, and additional cameras can be added on the wall of a room to improve precision, too. Some more sensors can be added to the robot to send more information like how hard you hug, how warm your hug is, etc.

Designers: To be completed!