いつかギャフンと言わせたい

平凡な企業研究員が、いつか周りをギャフンと言わせるための野心的かもしれないゆるい記録

【processing】はてなブログでプロセシングを動かしてみる

プロセシングをはてなブログで動かしたい!
そう思って調べてみたら、結構いけるんですね!!

naoyat.hatenablog.jp

ここの記事にあるコードを、そのままコピペで動いちゃったよー。
とりあえず実践から入るタイプです!



ソースはこちら

<script src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="pjs" >//
// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
// Global variables for the ball
float ball_x; //
float ball_y; //
float ball_dir = 1; //
float ball_size = 5;  // Radius
float dy = 0;  // Direction
//
// Global variables for the paddle
int paddle_width = 5; //
int paddle_height = 20; //
//
int dist_wall = 15; //
//
void setup() //
{ //
  size(200, 200); //
  rectMode(CENTER_RADIUS); //
  ellipseMode(CENTER_RADIUS); //
  noStroke(); //
  smooth(); //
  ball_y = height/2; //
  ball_x = 1; //
} //
//
void draw()  //
{ //
  background(51); //
   //
  ball_x += ball_dir * 1.0; //
  ball_y += dy; //
  if(ball_x > width+ball_size) { //
    ball_x = -width/2 - ball_size; //
    ball_y = random(0, height); //
    dy = 0; //
  } //
//
  // Constrain paddle to screen
  float paddle_y = constrain(mouseY, paddle_height, height-paddle_height); //
//
  // Test to see if the ball is touching the paddle
  float py = width-dist_wall-paddle_width-ball_size; //
  if(ball_x == py  //
     && ball_y > paddle_y - paddle_height - ball_size  //
     && ball_y < paddle_y + paddle_height + ball_size) { //
    ball_dir *= -1; //
    if(mouseY != pmouseY) { //
      dy = (mouseY-pmouseY)/2.0; //
      if(dy >  5) { dy =  5; } //
      if(dy < -5) { dy = -5; } //
    } //
  }  //
//
  // If ball hits paddle or back wall, reverse direction
  if(ball_x < ball_size && ball_dir == -1) { //
    ball_dir *= -1; //
  } //
//
  // If the ball is touching top or bottom edge, reverse direction
  if(ball_y > height-ball_size) { //
    dy = dy * -1; //
  } //
  if(ball_y < ball_size) { //
    dy = dy * -1; //
  } //
 //
  // Draw ball //
  fill(255); //
  ellipse(ball_x, ball_y, ball_size, ball_size); //
//
  // Draw the paddle
  fill(153); //
  rect(width-dist_wall, paddle_y, paddle_width, paddle_height);   //
} //
</script><canvas id="pjs"/>

これ、どんな仕組みで動いているのか?なんかサーバー負荷があるのかどうかわかりませんが、とりあえずこのまま置いてみます。