processing动态文字（processing简单动态线条）

看到动态的风车，第一个想到的是《大风车》，没错，就是下面这个。

央视《大风车》

所以就以这个为原型来制作一个风车，完成后是这样的。

点开下面的链接就可以看到了

大风车​editor.p5js.org/jaxblue3279@gmail.com/present/l89szd8cT

以下是制作步骤:

为了便于在网上显示，这里用的是p5的网页编辑器。

1.先制作一个风车的图片

2.上传图片

先打开p5网页编辑器p5.js Web Editor，然后添加文件，选择图片

关于p5网页编辑器的使用，可以参考这篇文章。

jack：什么是p5.js109 赞同 · 11 评论文章

3.写代码

总共只有16行

1 var angle = 0; //声明旋转角度的变量 2 var img ; //声明一个存储图片的变量 3 function setup() { //设置部分 4 createCanvas(600,600); //设置画像素布的长宽，长宽均为600 5 angleMode(DEGREES); //设置模式为角度模式，默认是弧度模式 6 imageMode(CENTER); //设置图片显示模式为居中 7 img = loadImage("windmill/windmill.png"); //加载风车的图片 8 } 9 function draw() { //画图部分 10 background(220); //设置背景色为灰色 11 translate(width/2, height/2); //将原点设置为画布的正中心 12 rect(-10,0,20,300); //绘制一个长方形作为风车的手柄 13 rotate(angle); //旋转一定的角度 14 image(img, 0, 0); //显示风车的图片 15 angle=angle+mouseX/20; //设置每次旋转的角度值 16 }

还有其他的一些方法，之后会更新

干货。