processing.js 学习（四）

最新推荐文章于 2017-01-10 19:22:59 发布

WalkingAlien

最新推荐文章于 2017-01-10 19:22:59 发布

阅读量1k

点赞数

分类专栏：编程语言文章标签： prcessing

本文链接：https://blog.csdn.net/WalkingAlien/article/details/53438886

版权

编程语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

三个跳

这里写图片描述

why.pde

Bouncer[] bouncer = new Bouncer[3];

     void setup() {
       size(200,200);
       frameRate(24);
       stroke(#cce833);
     fill(#43cee0);
       bouncer[0] = new Ball(width/3-20,20,20);
       bouncer[1] = new Box(width/2-10,20,20,20);
      bouncer[2] = new Ball((2*width/3)+20,20,20);
    }

    void draw() {
      for(int b=0, end=bouncer.length; b<end;b++) {
        bouncer[b].computeNextStep(width, height, frameRate);
      }
      background(#f7c6ed);
      for(int b=0, end=bouncer.length; b<end;b++) {
        bouncer[b].draw();
      }
    }

    void mousePressed() {
     for(int b=0, end=bouncer.length; b<end;b++) {
        if(bouncer[b].mouseOver(mouseX, mouseY)) {
         bouncer[b].mousePressed();
        }
      }
    }

    void mouseReleased() {
      for(int b=0, end=bouncer.length; b<end;b++) {
        bouncer[b].mouseReleased();
      }
    }

    void mouseDragged() {
      for(int b=0, end=bouncer.length; b<end;b++) {
        bouncer[b].mouseDragged(mouseX, mouseY);
      }
    }

    abstract class Bouncer
    {
      int x, y;
      boolean canmove = true;
      int step = 0;
      int xoffset = 0;
      int yoffset = 0;

      void computeNextStep(int width, int height, float framerate) {
        if(canmove) {
          reallyComputeNextStep(width, height, framerate);
        }
      }

      abstract void reallyComputeNextStep(int width, int height, float framerate);

      abstract void draw();

      abstract boolean mouseOver(int mx, int my);

      void mousePressed() {
        canmove = false;
      }

      void mouseReleased() {
        canmove = true;
        x += xoffset;
        y += yoffset;
        xoffset = 0;
        yoffset = 0;
      }

      void mouseDragged(int mx, int my) {
        if(!canmove) {
          xoffset = mx-x;
          yoffset = my-y;
        }
      }
    }

    class Ball extends Bouncer
    {
      int radius;

      Ball(int x, int y, int r) {
        this.x = x;
        this.y = y;
        this.radius = r;
      }

      void reallyComputeNextStep(int sketch_width, int sketch_height, float frame_rate) {
        step = (int)((step+1) % frame_rate);
        float sin_value = abs(sin(PI*step/(float)frame_rate));
        float bounce_height = sketch_height/2 * sin_value;
        float ball_height = sketch_height - (bounce_height + radius);
        y = (int) (ball_height);
      }

     void draw() { ellipse(x+xoffset,y+yoffset,radius,radius); }

     boolean mouseOver(int mx, int my) {
       return sqrt((x-mx)*(x-mx) + (y-my)*(y-my)) <= radius;
     }
   }

   class Box extends Bouncer
   {
     int w,h;
     int step=0;

     Box(int x, int y, int w, int h) {
       this.x = x;
       this.y = y;
       this.w = w;
       this.h = h;
     }

     void reallyComputeNextStep(int sketch_width, int sketch_height, float frame_rate) {
       step = (int)((step+1) % frame_rate);
       float sin_value = abs(sin(PI/2.0 + (PI*step/(float)frame_rate)));
       float bounce_height = sketch_height/2 * sin_value;
       float ball_height = sketch_height - (bounce_height + h);
       y = (int) (ball_height);
    }

     void draw() { rect(x+xoffset,(y-h/2)+yoffset,w,h); }

     boolean mouseOver(int mx, int my) {
       return x<=mx && mx<=x+w && (y-h/2)<=my && my<=(y+h/2);
     }
   }

th.html

<!DOCTYPE html>
<html>
    <head>
       <title>hello processing</title>
        <meta charset="utf-8">
        <style>
        </style>
    </head>
    <body>

       <script src="processing.js"></script>
       <canvas data-processing-sources="why.pde"></canvas>

    </body>
</html>

processing.js http://processingjs.org/download/ 下载

当然也可以内联

 1   <!DOCTYPE html>
 2   <html>
 3     <head>
 4       <meta charset="utf-8">
 5       <title>My Processing Page</title>
 6       <script type="text/javascript" src="processing.js"></script>
 7     </head>
 8     <body>
 9       <script type="application/processing" target="mysketch">
10       void setup() { ... }
11       void draw() { ... }
12       class SomeClass {
13         ...
14       }
15       </script>
16       <canvas id="mysketch"></canvas>
17     </body>
18   </html>

但这些并不是什么好用的方法，因为如果你的草图有bug，甚至都不知道要怎么改，因为调试器不会指出你的草图哪里代码有问题，只会说processing.js哪里有问题。如果一定要用这种方法，可以现在processing IDE中调好了再拿过来。

让你的草图和页面能互相“看见”

也就是上篇所说的混用。
先看看如何实现。
最关键的是“草图函数”。

var mysketch = Processing.getInstanceById('mysketchid');
灰常关键的一步，有了它就可以直接访问草图。

1、让javascript“看见”草图

seeu.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My Processing Page</title>
        <script type="text/javascript" src="processing.js"></script>
        <script type="text/javascript">
        function drawSomeText(id) {
          var pjs = Processing.getInstanceById(id);
         var text = document.getElementById('inputtext').value;
         pjs.drawText(text); }
       </script>
     </head>
     <body>
       <canvas id="mysketch" data-processing-sources="seeme.pde"></canvas>
       <input type="textfield" value="see you" id="inputtext">
       <button type="button" onclick="drawSomeText('mysketch')">place</button>
     </body>
   </html>

see me.pde

void setup() {
      size(200,200);
      noLoop();                     // 关掉动画，不需要！
      stroke(#e439f2);
      fill(#FFEE88);
      background(#000033);
      text("",0,0);                 // 强制processing加载一些字
      textSize(24);                 // 字体大小
    }

   void draw() { }

   void drawText(String t)
   {
     background(#000033);
     // 获取文本宽度
     float twidth = textWidth(t);
     // 文本居中
     text(t, (width - twidth)/2, height/2);
   }

processing.js …
这里写图片描述
图有点小。。。但足以说明效果，网页上我们添加的文本到了草图上，说明js访问P5成功了！

2、让草图“看见”javascript

最好的混用就是把所有要实现的功能都封装到函数中。
seeuagain.html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My Processing Page</title>
        <script type="text/javascript" src="processing.js"></script>
        <script type="text/javascript">
        var bound = false;

       function bindJavascript() {
         var pjs = Processing.getInstanceById('mysketch');
         if(pjs!=null) {
           pjs.bindJavascript(this);
           bound = true; }
         if(!bound) setTimeout(bindJavascript, 250);
       }
       bindJavascript();
        function showXYCoordinates(x, y) {
         document.getElementById('xcoord').value = x;
         document.getElementById('ycoord').value = y;
       }
       </script>
     </head>
     <body>
       <canvas id="mysketch" data-processing-sources="seemeagain.pde"></canvas>
       <div id="coordinates">
         x/y: <input type="textfield" id="xcoord">/<input type="textfield" id="ycoord">
       </div>
     </body>
   </html>

seemeagain.pde

 interface JavaScript {
      void showXYCoordinates(int x, int y);
    }

    void bindJavascript(JavaScript js) {
      javascript = js;
    }

    JavaScript javascript;
    void setup() {
      size(500,500);
      stroke(255);
      background(0);
      noLoop();
    }

    void draw() {
      fill(0,0,0,40);
      rect(-1,-1,width+2,height+2);
   }
   void mouseMoved() {
     line(mouseX,0,mouseX,height);
     line(0,mouseY,width,mouseY);
     redraw();
     if(javascript!=null){
       javascript.showXYCoordinates(mouseX, mouseY);
     }
   }

processing.js …
效果：
这里写图片描述
草图访问js的鼠标坐标捕捉函数了，但是前提就是我们先要“告诉”它。

WalkingAlien

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
processing.js 学习（四）

三个跳why.pdeBouncer[] bouncer = new Bouncer[3]; void setup() { size(200,200); frameRate(24); stroke(#cce833); fill(#43cee0); bouncer[0] = new Ball(width/3-20,20,20);
复制链接

扫一扫

专栏目录