使用p5.js画一幅简单的风车动态效果图

最新推荐文章于 2022-01-22 21:09:49 发布

原创

最新推荐文章于 2022-01-22 21:09:49 发布 · 7.2k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#p5.js #码绘

使用p5.js画一幅简单的动态风车图

因为大三互动媒体技术课程需要使用p5.js画图显示动态效果，并和自己手绘作品进行对比，查了查网上好像没有做风车相关的教程，就在这里简单介绍下吧。

工具

js编辑器(我用的是visual studio code2017)和p5.js库，具体下载和配置步骤这里就不讲了。不清楚的朋友可以参考下这篇博客: p5.js入门教程.

一.做一个简单的静态风车

画个风车很简单，四个同样大小的半圆和一根竖线就行了。
新建一个p5.js工程，代码如下：

function setup() {
   
    
    createCanvas(800, 800);
    noStroke();
  } 
  function draw(){
   
   
    background(204);//设置背景 遮盖之前作图
    fill(0);
    rect(300,300,10,400);//一条竖线 颜色为黑色
    fill(255,0,0);//红色
    arc(400, 300, 200, 200, PI, TWO_PI);//半圆
    fill(255,0,0);
    arc(200, 300, 200, 200, 0, PI);//半圆
    fill(255,0,0);
    arc(300, 200, 200, 200, 0.5*PI, 1.5*PI);//半圆
    fill(255,0,0);
    arc(300, 400, 200, 200, 1.5*PI, 0.5*PI);//半圆
  }

创建一个.html文件，将之前创建的js文件和p5.js链接到此html文件中,例如:

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.js"></script>
    <script src="4.js"></script>
  </head>
  <body>
  </body>
</html>

效果如下：
在这里插入图片描述

附上我手画的风车做个对比。
在这里插入图片描述

二.让风车动起来

我刚开始做的时候直接使用PI进行运算，结果报错说我没有定义PI。后来查过之后才知道使用之前要加上“Math.”
为了以防万一，后面的所有三角函数之前我也把“Math.”补上了，最后成功实现动态效果。下面看代码：

//初始化
var x1=400;
var y1=300;
var x2=200;
var y2=300;
var x3=300;

最低0.47元/天解锁文章