Blood Components Application

3D, Creative Coding

Ready for an update?!

The big challenge lately, for me, has been trying to get these red blood cells to move the way I want in the omegaDesk interactive. I am attempting to make them flow as they would through the bloodstream. Most animations, that do not directly include the heart, tend to show a stream of blood. However, I want my interactive to allude to a pulsing blood stream. First I coded the red blood cells to uniformly and randomly populate across the screen. Then I was able to make them move from left to right, while rotating along individual axis. But now I rejoice as they move across the screen in a more pulse like fashion!

Click to view video

I tested what I was building, using a Processing sketch. There are still some qualities I would like to edit, but I need to keep brushing up on my trig (for all the kids that complain in math class — you need to know the math, to make cool stuff like this happen😉 ).  Here are three screen shots from my processing sketch, showing some movement over time:

If you want to see the sketch run, download Processing and copy the code below:

rbc[] myRbc = new rbc[200];

void setup() {
size (800, 200);

for (int i = 0; i < myRbc.length; i++) {
myRbc[i] = new rbc( i % 5);
}

smooth();
noStroke();
}

void draw() {
background(255, 200, 200);

for (int i = 0; i = 30) {
myRbc[i].xAngle = 0.01;
}
else {
myRbc[i].xAngle = myRbc[i].xAngle + 0.12;
}
myRbc[i].xspeed = sin(radians(myRbc[i].xAngle)) + myRbc[i].xspeed *0.9;
*/

println ( “Angle ” + myRbc[0].angle );
println ( “0: ” + myRbc[0].xspeed );
}
}

class rbc{
color r;
float r2;
float xpos, ypos;
float angle;
float xspeed;
float yspeed;

rbc(float _angle){
r2 = random(20, 120);
r = color( 255, 0, 0, r2);
angle = _angle;
xpos = random(-20, width+20);
ypos = random(-20, height+20);
xspeed = 0.5;
yspeed = random( -0.25, 0.25);
}

rbc(){
r = color( 255, 0, 0);
angle = (random(45, 90)) % 5;
xpos = random(-20, width+20);
ypos = random(-20, height+20);
xspeed = 5.0;
yspeed = random( -0.25, 0.25);
}

void display(){

ellipseMode(CENTER);
fill(r);
ellipse(xpos, ypos, 15, 15);
noFill();
stroke(255, 150, 150);
strokeWeight(1.5);
ellipse(xpos, ypos, 8, 8);

}

void rbcFlow(){

xpos = xpos + xspeed;
ypos = ypos + yspeed;
if (xpos > width){
xpos = 0;
}
if ( ypos > height){
ypos = 0;
}

angle = angle + PI/2;

//velocity = displacement / time (sin * time )
//have them set with different periods / different phase shifts
// pulse with exponential decay
//xspeed = abs(sin(radians(angle))) ;
xspeed = abs(sin(radians(angle)) ) * 6 ;
//xspeed =2* abs(sin(radians(angle) * sin(radians(angle))) );

}

}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s