Ahhhh failed to create the electrons flow in light bulb. Planed to

  1. add some particles around strings
  2. restrain patterns to  fit within the lightbulb, using different canvas

Things worth mentioned:

  • I  used keyPressed() to change the gravity. Kill the original gravity and use “A, W, D, S” keys to control the direction of force.
ParticleBehavior2D b = physics.behaviors.get(physics.behaviors.size()-1);
if (key == 'a') {
physics.addBehavior(new GravityBehavior(new Vec2D(random(-0.3), random(-0.05, 0.05))));
else if (key == 'w') {
physics.addBehavior(new GravityBehavior(new Vec2D(random(-0.05, 0.05), random(-0.3))));
else if (key == 'd') {
physics.addBehavior(new GravityBehavior(new Vec2D(random(0.3), random(-0.05, 0.05))));
else if (key == 's') {
physics.addBehavior(new GravityBehavior(new Vec2D(random(-0.05, 0.05), random(0.3))));
  •  Use the color function of Toxiclibs, measure the direction of the spring and then map it into 0~1, and then some crazy codes to set up the color of stroke.
for (VerletSpring2D s: strings) {
  float currHue = map(s.b.sub(s.a).heading(), -PI, PI, 0, 1);
  stroke(TColor.newHSV(currHue, 1, 1).toARGB());
  line(s.a.x, s.a.y, s.b.x, s.b.y);



Original version, without vertex to fill the mesh. Looks like seaweeds.


Looks like worms.


And here are some tutorials and examples I found useful!

  1. Nature of Code by Daniel Shiffman
  2. SpringPlay by Justin Pinkney
  3. creativeapplications


First attempt to use amazing library Toxiclibs, mushroom-like water creatures with big head and jumpy acts. Cursor is an attractor to pull them closer to each other. And it ends up with a beautiful mistake oops.

As you can see, the frame rate of it became super slow because I put addBehavior() in draw() instead of in setup(), or in the constructor of the class. If I didn’t have an office hour with Daniel Shiffman I’d never know! But after I rewrote my codes, having all of the adding-force stuff happen just once, my sketch became less interesting, as below.


Less violent and less organic : Still trying to figure out how to solve the problem –> Making the violent/organic/electric movement without dragging down the whole system.

Here’re the codes: v.1, v.2.

PComp_5_Don’t Touch My Cookie!

Fantasy kind of comes to live guys!

After the PComp class, I was inspired to do more about how the communications between Arduino and Processing. I want them to be more instinct, more meaningful, and more related to each other, not just switching on and off. And stay away using MOUSE to control/adjust my work all the time. My works should have their own behaviors patterns, without others tell them what to do. (kind of like users can only have small control/impact on them ;))

So I came out of an idea to control the chocolate spiders amount of my this week’s ICM homework! Since my intention of this project is scaring away people who try to eat it, why not building the interaction based on that? The more you come closer to the cookie(I use photosensor), the more chocolate spiders will come out alive. And the button at Top Left corner will turn red to warn!PComp_cookie_spider

And it worked! 😀 The contends and the behavior matched perfectly. First time! Exciting!! And my circuit looked simple as well.

2013-10-09 14.33.07

Come out a good/crazy idea, and then execute it well in the most instinct and simplest way. It’s my goal of life now.

Below are my To-Do-Lists that inspired through today’s PComp class:

  1. Change velocity, acceleration, changes, instead of just position and on-and-off, so when there’s no input(no one using it), animation still runs.
  2. Different modes with different compositions of inputs. (e.g. Mode A: button 1; Mode B: button 1+2 …)
  3. Let users feel they control something in an abstract way. (Wwwwooo complicated…)



Choco spider cookie– lovely product that makes you scream on the second of you opening your mouth to give it a bite! Things is that, I felt extremely hungry recently and just couldn’t help eat up all the food around me, and if this cookie existed it would do me a huge favor.

For this assignment, I practiced the usage of ArrayList and PImage, and was more comfortable with PVector. And I’ve also learned about the function lerp() and velocity.heading() of PVector through the office hour with Daniel Shiffman! Below are some bloody difficulties I came across.

  1. Button functions!!! Arrhhhhh…. Use a lot of boolean to differentiate the mouse functions, e.g mousePressed() mouseDragged(), and mouseReleased(). Try and error…
  2. lerp() <– super useful!!
    • lerp(start, stop, amt) <– The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, etc.
  3. Don’t know how to make object of ArrayList interact with its fellows until the office hour w/ Dan. Just write two “for loop”s! One for itself, one for the others.
  4. In order to create the effect of animation, I tried using frameCount and it worked!
    • void grow() {
          if (frameCount % 14 == 1 && j<4) {
            legs.add(new Leg(0, 0, 20*cos(angle), 20*sin(angle)));
            angle += PI/6;
          if (j==4) {
            angle += PI/3;
          if (j>4) {
            if (frameCount % 14 == 1 && j<9) {
              legs.add(new Leg(0, 0, 20*cos(angle), 20*sin(angle)));
              angle += PI/6;
  5. Within PVector, you can use velocity.heading() to rotate object with its moving direction(check out Nature of Code!!!). That’s how I rotated my spiders and their traces. Combined with lerp(), my spider makes its slow U-turn in the beginning of birth.

But honestly, this time I was not thrilled about my work. Especially after I connected it whit Arduino. It worked, but I just didn’t feel it interesting enough. It’s really difficult to be creative, especially when you want to be. Maybe that’s because I was hungry that time….? It’s like you make a lot of efforts to give birth a baby, but in the end you find you don’t love he/she at all    :/

Anyway, below are the codes.

Continue reading


Here’s the combination of what I’ve learned so far from Learning Processing and The Nature of Code. I call it “Patch. Balls. and Flies”. It’s kind of messy but I’m glad all the interactions with each others work! Yah! Check it out(click click )!

1) move patch to stop bouncing balls
2) press mouse to drag balls with patch
3) long-press keyboard to see flies clubbing!! B-)   (surprisingly fit this perfectly, the most EXCITING part, DANCING time!!)
4) let go keyboard(== keyReleased) to calm down the flies, and gather all the balls within the patch

(Forgive me the awful screen pics, can’t screenshot since this one involve functions of KEY.)




Here’s some struggles I’ve been through:

  1. when dragging balls, I calculated the distance with patch and ball, and then planed to add this fixed distance to the position of patch and set it as the position of balls. But since I wrote this code in void mouseDragged(), I recalculated the distance every time I dragged and that caused flickering. Thanks to the office hour w/ Daniel Shiffman, this calculation codes were moved into void mousePressed() and it worked!!! (tearing)
  2. same stupid things happened when I want to bump flies with balls: I forgot to set conditions and thus make flies be affected by every balls!
  3. Things getting complicated when I want to make the music band. In the end I successfully saved the original color, and changed the color once it’s been hit(hitGround == true &&  cubes.x < ball.x <cubes.x+w  && ball.y < (height-h)), and then restored the colors back later.

And codes time!

Continue reading

ICM_3_RainMan & Triangles

Time flies and here I am sweet ICM homework #3. It’s a collaboration work by Karam and I, and basically we just used each other’s class and try to make some interaction! I got the triangle class from Karam and background idea from Gladys, and this work was inspired by reading The Nature of Code of Daniel Shiffman. Just finished chapter 1. Super good/tough stuff!!


Here’s my new born baby(click me click me)! It’s about a person who loves being rained, just enjoys the feeling of being miserable. When rain stops, the smile stops and background went blue. You can click your mouse and make this guy happy again.

For this, I wrote 5 classes… just couldn’t stop, and hit into wall sooo many time. I was like a small rooted tree in the corner of ITP floor on Monday. And here’s are some problems(all about using class in class) and answers(except the last one) from try-and-error process of myself.

  • Where to put the moving code?
    • make sure you can control the position in the { } in which the leading moving codes(e.g. x++) settle
  • If things moves in different way?
    • put moving codes separately in its own class
  • Wants rains start from cloud
    • don’t need to declare Cloud class in Rain class!! can use it directly(tearing)
  • How to make smile affected by rain????

Still can’t solve the last problem. I guess there must be something wrong about my rain drops. I use distance between each rain drop and the man’s head to write some condition codes. The rain drops may seem to be affected well by the man, but I bet it’s actually not what we think they are, and that’s why although I could affect rain drops with the man, I failed to affect the smile with the rain drops? Too complicated. So in the end, I compromised and made the man smile when it’s raining and sad when it’s not.

Maybe it’s time to book an office hour with Dan.

And as usual, below are my baby’s bloody organs(codes).

Continue reading


This is the idea of Caitlin and I, a self-made Paint software, for ICM week_02’s homework, making something animated and designed an UI. At first, we were ambitious and made a ideal Paint with multiple function, and even a fancy UI. BUT, it’s just too hard to accomplish 😉  Process of bloody stumbling is as followed:

  1. made 3 floating cubes to choose colors from.
  2. frustrated to find out that the color of every cube’s rim changed when I choose different stroke color.
  3. same thing happened in stroke width.
  4. P A N I C .
  5. Struggling for hours.
  6. thought object-orientation program might be the answer of this puzzle, so started learning OOP from scratch.
  7. excited to have a workable class of drifting clouds.
  8. frustrated to find out that problem still existed.
  9. P A N I C .
  10. Struggling for hours.
  11. so desperate that I started googling my problem.
  12. found out the existence of pushStyle()/popStyle()!
  13. had a bitter(FXCK!)-yet-sweet(YAH!) moment for a while.
  14. added stroke width, eraser, and new paper function to finish my mini-Paint.
  15. L E A R N E D    A    L O T .

And here’s my bloody baby!(click me click me click me)

And below are my bloody baby’s organs(codes).

Continue reading