ProcessingJS介绍

最近由于工作的关系，好好研究了一下ProcessingJS。Processing是一门可视化编程语言，ProcessingJS是它的JavaScript实现，使用HTML5的canvas，配合现代浏览器来实现web客户端的可视化技术。（不得不说，John Resig真是个高产的作者，jQuery、Sizzle、ProcessingJS）

ProcessingJS做了这两件事：

1.把基于Java的Processing表述，转化为JavaScript代码

2.利用HTML5的canvas api，在浏览器上执行

下面是一个3D绘图的例子，如果你使用Chrome、Firefox、Safari（版本别太老就行，IE是无论什么版本都不行），就可以看到效果：（可以拖拽）

在没有HTML5之前，要实现类似的效果就必须要Flash或者Java Applet这样的浏览器插件来实现，而现在只要书写出基于Web标准的代码，就可以跨平台跨浏览器的实现非常优秀的用户体验和界面效果。

而直接书写Canvas API，又过于繁琐过于底层了，Processing可视化语言创建之初的目的就是，希望在软件开发工程师和艺术家、数据建模者之间建立起桥梁，让非技术专家也可以利用计算机和程序语言来建立模型和动画。（提高程序员的审美水平是否也是创建Processing语言的目的之一呢？ – -b）

使用Processing来描述可视化数据或者动画，是非常方便和易于理解的，只要定义两个函数即可。

void setup() { … } 负责初始化绘图面板

void draw() { … } 定义绘图逻辑，每一帧画面的重绘都会调用这个函数

Processing API提供了方便的绘图支持：图形类的包括：rect()、ellipse()等基本图形，bezier()等曲线，box()、sphere()等3D图形。交互类的包括，对鼠标、键盘的事件处理。坐标定义的包括，translate()坐标转换，rotate()旋转，光源、视角的转换、位移。颜色处理、图片渲染、字体渲染。以及常用的数学计算支持、三角函数。

例1：一个2D：

int i = 0;
void setup() {size(200, 200);frameRate(24);background(255);strokeWeight(15);smooth();
}
void draw() {stroke(random(50), random(255), random(255), 100);line(i++, 0, random(0, width), height);if (i >= width) i = 0;
}
void mousePressed() {background(255);redraw();
}

例2:3D的一个示例：

float ang = 0, ang2 = 0, ang3 = 0, ang4 = 0;
float px = 0, py = 0, pz = 0;
float flapSpeed = 0.2;
void setup(){size(200, 200, P3D);frameRate(30);noStroke();
}
void draw(){background(0);camera();// Flightpx = sin(radians(ang3)) * 170;py = cos(radians(ang3)) * 300;pz = sin(radians(ang4)) * 500;translate(width/2+px, height/2+py, -700+pz);rotateX(sin(radians(ang2)) * 120);rotateY(sin(radians(ang2)) * 50);rotateZ(sin(radians(ang2)) * 65);// Bodyfill(153);box(20, 100, 20);// Left wingfill(204);pushMatrix();rotateY(sin(radians(ang)) * -20);rect(-75, -50, 75, 100);popMatrix();// Right wingpushMatrix();rotateY(sin(radians(ang)) * 20);rect(0, -50, 75, 100);popMatrix();// Wing flapang += flapSpeed;if (ang > 3 || ang < -3) flapSpeed *= -1;// Increment anglesang2 += 0.02;ang3 += 4.0;ang4 += 1.50;
}

呵呵，功能很强大，API表述能力很强。

文章的最后，放上一个我用ProcessingJS实现的常见排序算法图形化演示，包括了冒泡、选择、插入、希尔、归并、堆排、快排算法的实现。

传送门：http://hedatou.com/wp-content/uploads/2011/09/processingjs.html

顺带，我又找了一些数据可视化的例子：

可视化数据结构：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

匈牙利 Sapientia 大学的 6 种排序算法舞蹈视频：http://top.jobbole.com/1539/

很酷的各种排序演示：http://sorting.at/

ProcessingJS介绍相关推荐

简单介绍互联网领域选择与营销方法
在我看来,互联网领域的选择是"安家",而营销方法的不同则表现了"定家"的方式多种多样,只有选对了,"家"才得以"安定". ...
常用开源协议介绍以及开源软件规范列表
1. 开源协议介绍 GPL: General Public License,开源项目最常用的许可证,衍生代码的分发需开源并且也要遵守此协议.该协议也有很多变种,不同变种要求会略微不同. MPL: MP ...
python：Json模块dumps、loads、dump、load介绍
20210831 https://www.cnblogs.com/bigtreei/p/10466518.html json dump dumps 区别 python:Json模块dumps.load ...
pytorch学习笔记（九）：PyTorch结构介绍
PyTorch结构介绍对PyTorch架构的粗浅理解,不能保证完全正确,但是希望可以从更高层次上对PyTorch上有个整体把握.水平有限,如有错误,欢迎指错,谢谢! 几个重要的类型和数值相关的 T ...
Python字节码介绍
了解 Python 字节码是什么,Python 如何使用它来执行你的代码,以及知道它是如何帮到你的. 如果你曾经编写过 Python,或者只是使用过 Python,你或许经常会看到 Python 源代 ...
Pytest - 使用介绍
1. 概述 pytest是一个非常成熟的全功能的Python测试框架,主要特点有以下几点: 1.简单灵活,容易上手,文档丰富: 2.支持参数化,可以细粒度地控制要测试的测试用例: 3.能够支持简单的单 ...
遗传算法的简单介绍以及模式定理的简单证明
遗传算法遗传算法(Genetic Algorithm,GA),最早是由美国的John holland在20世纪70年代提出.算法通过模拟达尔文生物进化论的自然选择以及遗传学机理的生物进化过程来搜 ...
k8s核心组件详细介绍教程（配超详细实例演示）
本文实验环境基于上篇文章手把手从零开始搭建k8s集群超详细教程本文根据B站课程云原生Java架构师的第一课K8s+Docker+KubeSphere+DevOps学习总结而来 k8s核心组件介绍 1 ...
Tensorrt一些优化技术介绍
Tensorrt一些优化技术介绍 Figure 1. A quantizable AveragePool layer (in blue) is fused with a DQ layer and a ...
网路摄像头技术参数介绍
网路摄像头技术参数介绍星光级图像传感器 4MP (2592 × 1520) @30fps SmartH.265 / H.265+ / H.265 / SmartH.264 / H.264+ / H. ...

ProcessingJS介绍

ProcessingJS介绍相关推荐

最新文章

热门文章