March 2009 Archives

Test of projection of a three-dimensional object to two-dimensional space using Utils3D.projectVectors method.

See 'Utils3D - Adobe ActionScript 3.0 Language and Components reference' for details.


sample movie and scripts

UV mapping is a method for texturing objects.

See 'Adobe ActionScript 3.0 * UV mapping' for details.


sample movie and scripts

Cross product of two 3D vectors returns another vecter that is perpendicular to both the original vecters.

In this example vector A and B are indicated by blue line and green line, respectively, and their product is shown with red line.

Cross Product

A × B = [(a2 * b3 - a3 * b2) (a3 * b1 - a1 * b3) (a1 * b2 - a2 * b1)]
  • for any two vectors A = [a1 a2 a3] and B = [b1 b2 b3].

sample movie and scripts

(Processing) Skating at Rockefeller Center

| No Comments | No TrackBacks
The ice rink at the Rockefeller Center is my favorite place although I've never really skated there.
I like watching people gliding on the ice cheerfully on a sunny day in winter. Thanks to the refrections of ice and skyscrapers around, the atmosphere looks bright and gay.

I took a 30-seconds short video and over-dubbed it three times with different playback speeds. It's fuuny to look at a same guy repeats stumbling at a same place.



Skating at Rockefeller Center from kynd on Vimeo.

(Processing) Processing.js sample

| No Comments | No TrackBacks
I tried Processing.js and uploaded a sample file here.
Processing.js is an emulator of Processing written by John Resig who is also an author of Jquery, and it can run in an environment like iPhone that doesn't support JAVA.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>touch</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/processing.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var codeElm = document.getElementById('processing-code');
var code = codeElm.textContent || codeElm.innerText;
Processing(canvas, code);
};
</script>
<script id="processing-code" type="application/processing">
int count = 0;
Particle[] particles;
int numParticle = 10;

void setup() {
  background(0);
  size(320, 480);
  noStroke();
  frameRate(30);
  particles = new Particle[numParticle];
  for (int i = 0; i < numParticle; i ++) {
    particles[i] = new Particle(160,240);
  }
}

void draw() {
  background(0);
  for (int i = 0; i < numParticle; i ++) {
    particles[i].update();
  }
  float di,mp;
  Particle p1, p2;
  for (int i = 0; i < numParticle; i ++) {  
    for (int j = i; j < numParticle; j ++) {

      p1 = particles[i];
      p2 = particles[j];
      if (p1.life !=0 && p2.life != 0) {
        di = sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
        p1.vx = (p1.vx + (p2.x - p1.x) / 1000);
        p1.vy = (p1.vy + (p2.y - p1.y) / 1000);
        p2.vx = (p2.vx + (p1.x - p2.x) / 1000);
        p2.vy = (p2.vy + (p1.y - p2.y) / 1000);
      }
    }
  }



}

void initParticle(int x, int y) {
  for (int i = 0; i < 5; i ++) {
    particles[count] = new Particle(x,y);
    count = (count + 1) % numParticle;
  }
}

void mousePressed() {
  initParticle(mouseX, mouseY);
}

class Particle {
  float x,y,r,s,spd;
  float vx,vy;
  int life = 50;
  int r = (int) random(255);
  int g = (int) random(255);
  int b = (int) random(255);
 
  Particle(float _x,float _y) {
    x = _x;
    y = _y;
    ra = random(2 * PI);
    s = random(50) + 4;
    spd = random(10) + 2;
    vx = cos(ra) * spd;
    vy = sin(ra) * spd;
  }

  void update() {
    if (life <= 0) {
      return;
    }
    x += vx;
    y += vy;
    if (x > width) {
      x -= width;
    }
    if (x < 0) {
      x += width;
    }
    if (y > height) {
      y -= height;
    }
    if (y < 0) {
      y += height;
    }

    fill(r, g, b, 255 / 50 * life);
    ellipse(x, y, s, s);
    life --;
  }
}</script>
</head>
<body>
<canvas width="400" height="400"></canvas>
</body>
</html>
 

(Processing) Additive blending

| No Comments | No TrackBacks
This is a test of additive blending and the code is basically a copy from flight404.com.
The first small step in the world of openGL.




import processing.opengl.*;
import javax.media.opengl.*;

PGraphicsOpenGL pgl;
GL gl;
PImage pimage;

void setup() {
   size(400, 400, OPENGL);
   background(0);
   pimage = loadImage("img.png");
}

void draw() {
  pgl = (PGraphicsOpenGL) g;
  gl = pgl.beginGL();
  gl.glDisable(GL.GL_DEPTH_TEST);
  gl.glEnable(GL.GL_BLEND);
  gl.glBlendFunc(GL.GL_SRC_ALPHA,GL.GL_ONE);
  pgl.endGL();
  image(pimage,random(400),random(400));
}