processing.js 学习（一）

来源：互联网发布：淘宝运营培训班编辑：程序博客网时间：2024/05/26 02:19

http://processingjs.org

processing (P5)是一种可视编程语言，是绘图所使用的简易的JAVA API。

processing.js能够将processing代码转换为javascript代码从而在浏览器中使用，以canvas作为画布，并在画布中声明草图文件（.pde）。

1 <script src="processing-1.3.6.min.js"></script>2 <canvas data-processing-sources="hello-web.pde"></canvas>

当加载网页时，它会被解析、转换、并在浏览器上运行草图。

因此，我们学习processing.js，说白了就是学习processing语言。

先做简单实验，运行一个helloworld。
1.html

<!DOCTYPE html><html>    <head>       <title>hello web -processing.js Test</title>        <meta charset="utf-8">        <style>        </style>    </head>    <body>        <h1>Processing.js Test</h1>        <p>This is my first Processing.js web-based sketch:</p>         <script src="processing.js"></script>       <canvas data-processing-sources="hello-web.pde"></canvas>    </body></html>

2.hello-web.pde

// 全局变量float radius = 50.0;int X, Y;int nX, nY;int delay = 16;// 初始化Processing画布void setup(){  size( 500, 500 );//画布尺寸  strokeWeight( 10 );  frameRate( 15 );  X = width / 2;//初始位置  Y = width / 2;  nX = X;  nY = Y;  }// 画图void draw(){  radius = radius + sin( frameCount / 4 );  // 追踪新的坐标位置  X+=(nX-X)/delay;  Y+=(nY-Y)/delay;  // 背景色  background( 100 );  // 圆圈色  fill( 0, 121, 184 );  // 圆圈边框色  stroke(255);   // 圆圈  ellipse( X, Y, radius, radius );                  }// 设置圆圈的下一位置void mouseMoved(){  nX = mouseX;  nY = mouseY;  }

3.processing.js

在此下载http://processingjs.org/download/

效果如下图：

这里写图片描述
它的位置是随着鼠标移动的位置进行移动的，圆圈半径是呈三角函数式变换的。

0 0