processing.js 学习（一）

最新推荐文章于 2020-06-07 23:11:29 发布

WalkingAlien

最新推荐文章于 2020-06-07 23:11:29 发布

阅读量1k

点赞数

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

版权

编程语言专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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/

效果如下图：

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

WalkingAlien

关注

0
点赞
踩
0

收藏

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

http://processingjs.orgprocessing (P5)是一种可视编程语言，是绘图所使用的简易的JAVA API。processing.js能够将processing代码转换为javascript代码从而在浏览器中使用，以canvas作为画布，并在画布中声明草图文件（.pde）。1 <script src="processing-1.3.6.min.js"></script>2
复制链接

扫一扫