processing.js 学习（五）

最新推荐文章于 2018-08-25 16:07:43 发布

WalkingAlien

最新推荐文章于 2018-08-25 16:07:43 发布

阅读量1.6k

点赞数

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

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

版权

编程语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

把更复杂的对象从js传递给草图

这件事是十分重要的，因为很常用。比如我们用AJAX获得了数据，并要在草图上使用。

事实上，我们可以在草图上用js定义对象，并传递给草图做处理。举例来说，我们给出了下面的这个草图，它可以实现用鼠标点击画点，并把画的点连成线。

1206.html

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

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

    </body>
</html>

click.pde

ArrayList points;

    ArrayList getPoints() { return points; }

    void setup() {
      size(200,200);
      points = new ArrayList();
      noLoop();
      stroke(255,0,0);
     fill(255);
   }

   void draw() {
     background(200,200,255);
     for(int p=0, end=points.size(); p < end; p++) {
       Point pt = (Point) points.get(p);
       if(p < end-1) {
       Point next = (Point) points.get(p+1);
       line(pt.x,pt.y,next.x,next.y); }
       pt.draw(); }
   }

   void mouseClicked() {
     points.add(new Point(mouseX,mouseY));
     redraw();
   }

   class Point {
     int x,y;
     Point(int x, int y) { this.x=x; this.y=y; }
     void draw() { ellipse(x,y,10,10); }
   }

processing.js 省略

效果如下：
这里写图片描述

加入一些预先定义好的点:
把上面的1206.html加一些东西：

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

       <script src="processing.js"></script>
       <script type="text/javascript">
    function loadPoints(id, button) {
     var pjs = Processing.getInstanceById(id);
     var points = pjs.getPoints();
     points.add(new pjs.Point(10,10));
     points.add(new pjs.Point(10,190));
     points.add(new pjs.Point(190,190));
     points.add(new pjs.Point(190,10));
     pjs.draw();
   }
        </script>
       <canvas id="sss" data-processing-sources="click.pde"></canvas>
       <button type="button" onclick="loadPoints('sss',true)">load</button>
    </body>
</html>

效果如下
这里写图片描述

JSON

另一种常用的通过js获取数据的的方式就是读取JSON脚本。依旧按照上面的例子，我们把点数据从json中获取。

12060.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 drawPoints(id,button) {
            var pjs = Processing.getInstanceById(id);
            var json = "{'points' : [{'x': 10, 'y': 10}, {'x': 190, 'y': 10}, {'x': 190, 'y': 190}, {'x': 10, 'y': 190}]}";//$.getJSON("ttt.json");

            var data = eval("(" + json + ")");
            console.log(data);
            if (data) {
                for (p = 0, end = data.points.length; p < end; p++) {
                    var point = data.points[p];
                    pjs.addPoint(point.x, point.y);
                }
            }

        }

    </script>
</head>

<body>
    <canvas id="aaa" data-processing-sources="jsont.pde"></canvas>
    <button type="button" id="drawPoints" onclick="drawPoints('aaa',true)">load</button>

</body>

</html>

jsont.pde

void setup() {
      size(200,200);
      points = new ArrayList();
    }

    void draw() {
      background(200,200,255);
     for(int p=0, end=points.size(); p<end; p++) {
       Point pt = (Point) points.get(p);
       if(p<end-1) {
         Point next = (Point) points.get(p+1);
         line(pt.x,pt.y,next.x,next.y); }
       pt.draw(); }
   }

   void mouseClicked() {
     addPoint(mouseX,mouseY);
   }

   Point addPoint(int x, int y) {
     Point pt = new Point(x,y);
     points.add(pt);
     return pt;
   }

   class Point {
     int x,y;
     Point(int x, int y) { this.x=x; this.y=y; }
     void draw() {
       stroke(255,0,0);
       fill(255);
       ellipse(x,y,10,10);
     }
   }

效果：
这里写图片描述

同理XML也OK，这里就不举例了。

WalkingAlien

关注

0
点赞
踩
0

收藏

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

把更复杂的对象从js传递给草图这件事是十分重要的，因为很常用。比如我们用AJAX获得了数据，并要在草图上使用。事实上，我们可以在草图上用js定义对象，并传递给草图做处理。举例来说，我们给出了下面的这个草图，它可以实现用鼠标点击画点，并把画的点连成线。1206.html<!DOCTYPE html><html> <head> <title>more</title>
复制链接

扫一扫