5-in-5_Day2_Moving Eye

By jhclaura in Blog, CommLab Web 1 Comment

eyes

(click pic to play! Using keyboard’s ↑ ↓ ← →)

JavaScript, first time! Nearly die…. I think I’m too used to Java/C++ syntax and too greedy/ambitious to try to do projects with JS… I spent whole afternoon searching on internet, and although I did found some awesome source codes, they just simply blown my mind. SO FOREIGN.

Thanks to Andy‘s suggestion, I narrowed down my goal to make a simple bouncing image in window. And it worked! After kind of (really just kind of) understanding JavaScript’s syntax and structure, I added extra functions: auto-moving and controlled by arrow keys at same time, and speed up/slow down feature.

Below are some of the resources I found:

I know right? Crazy.

ICM_ToxiclibsTest_VerletString2D

By jhclaura in Blog, ICM_Processing 0 Comment

pic3pic4

 

 

 

 

pic1

pic2

 

 

 

 

 

pic7pic6

 

 

 

 

 

 

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);
physics.removeBehavior(b);
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

PComp_UnoBurnedNO0oo…

By jhclaura in Blog, PComp_Physical Computing 0 Comment

Burned my arduino...

Inspired by the crazy servo motor workpiece by David Bowen, I tried to learned controlling DC motor rotating direction with H-bridge through this tutorial but failed to change the direction. The result was either rotated or stopped. Thinking the possibility of my motor might be broken, I borrowed other’s official stater kit’s DC motor, which was smaller than mine, and then things just went wrong…

The motor spun so fast and Uno became kind of warm. I pulled out the power supply but it was too late. I couldn’t upload any sketches anymore. Even unplugged all the wires and run the Example sketch…. NOOO000ooo….

Too frustrated to take a pic of my breadboard. Should remember to avoid emotions stopping you document next time…

ICM_ToxiclibsTest_Mushroom

By jhclaura in Blog, ICM_Processing 0 Comment

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.

CookieSpider

By jhclaura in Blog, ICM_Processing 0 Comment

HW_5_cookie

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;
      j++;
    }

    if (j==4) {
      angle += PI/3;
      j++;
    }

    if (j>4) {
      if (frameCount % 14 == 1 && j<9) {
        legs.add(new Leg(0, 0, 20*cos(angle), 20*sin(angle)));
        angle += PI/6;
        j++;
      }
    }
  }
  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

ICM_4_PatchBallsFlies

By jhclaura in Blog, ICM_Processing 0 Comment

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

Functions:
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.)

bouncing

clubbing_flies

reset

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