网页版的processing

一种是嵌入java applet（还没学会），一种是用processing.js

私心想着，还是第二种更实用，就没去理会第一种。

希望博客园能运行这个例子吧，学校开放个端口太麻烦了，正好可以钻这个空子，嘿嘿。

 尼玛啊，终于成功啦。

具体的步骤可以参考http://processingjs.org/articles/jsQuickStart.html

我用的是最最下面的方法，因为要在cnblog里面实现嘛。

即直接在你的页面中添加processing源码这一种方法。

不过也是经过了很大的波折才成功，原因是，

1.刚开始cnblog不让添加canvas标签，

2.引用web上的脚本的话，必须是：

<script type="text/javascript" src="https://rawgit.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>

3.如果插入的代码中有<script>这种东西，就会在脚本中自动在脚本两端添加“// <![CDATA[”  和 “// ]]>”这种东西，这会影响到从processing源码到中间js代码的“编译”（参考官网）

////我这里采用的是最笨的办法，就是使用documen.write()把不让加的东西都用脚本加上。这样当然不是什么好的办法。更好的办法会在以后尝试。

好吧，不能采用write（）方法，不然你的主页就打不开了。用jquery的apend方法和html方法吧，试了好久，真无语。

这个例子所有的代码是

<p id="help">&nbsp;</p>
<script type="text/javascript" src="https://rawgit.com/processing-js/processing-js/v1.4.8/processing.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function(){
$("#help").html("<canvas id='pjs'> </canvas>");
$("body").append("<script type="application/processing" data-processing-target="pjs">
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16; void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = height / 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;}<"+"/script>");});
// ]]></script>

就能看到那个眼睛了，9点了，回去睡觉了。