使用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;
var y3=200;
var x4=300;
var y4=400;
var w=Math.PI/6;
var w1=Math.PI;
var w2=2*Math.PI;
var w3=0;
var w4=Math.PI;
var w5=1.5*Math.PI;
var w6=0.5*Math.PI;
var w7=0.5*Math.PI;
var w8=1.5*Math.PI;
//旋转角度
var w0=0;
function setup() { createCanvas(800, 800);frameRate(20);//设置每秒20帧noStroke();} function draw(){//200<=x<=400//200<=y<=400background(220);//设置背景 遮盖之前作图fill(0);rect(300,300,10,400);fill(255,0,0);arc(x1, y1, 200, 200, w1, w2);fill(255,0,0);arc(x2, y2, 200, 200, w3, w4);fill(255,0,0);arc(x3, y3, 200, 200, w5, w6);fill(255,0,0);arc(x4, y4, 200, 200, w7, w8);w0=w0+w;w1=Math.PI+w0;w2=2*Math.PI+w0;w3=w0;w4=Math.PI+w0;w5=1.5*Math.PI+w0;w6=0.5*Math.PI+w0;w7=0.5*Math.PI+w0;w8=1.5*Math.PI+w0;// (x1-300)^2+(y1-300)^2=100^2;x1=300+100*Math.cos(w0);x2=300+100*Math.cos(w0+Math.PI);x3=300+100*Math.cos(w0+0.5*Math.PI);x4=300+100*Math.cos(w0+1.5*Math.PI);y1=300+100*Math.sin(w0);y2=300+100*Math.sin(w0+Math.PI);y3=300+100*Math.sin(w0+0.5*Math.PI);y4=300+100*Math.sin(w0+1.5*Math.PI);
}

效果如下：

三. 加点雪花背景

上面代码成功让风车动起来了，但画面上只有一个风车显得太单调，给它加点雪花背景吧，p5.js官网例子中就有现成的代码，这里我直接改一改拿来用了。

//初始化
var x1=400;
var y1=300;
var x2=200;
var y2=300;
var x3=300;
var y3=200;
var x4=300;
var y4=400;
var w=Math.PI/6;
var w1=Math.PI;
var w2=2*Math.PI;
var w3=0;
var w4=Math.PI;
var w5=1.5*Math.PI;
var w6=0.5*Math.PI;
var w7=0.5*Math.PI;
var w8=1.5*Math.PI;
let snowflakes = []; // array to hold snowflake objects
//旋转角度
var w0=0;
function setup() { createCanvas(800, 800);frameRate(20);//设置每秒20帧noStroke();} function draw(){//200<=x<=400//200<=y<=400background(240);//设置背景 遮盖之前作图fill(0);rect(295,300,10,400);//画竖直黑线fill(255,0,0);arc(x1, y1, 200, 200, w1, w2);//半圆fill(255,0,0);arc(x2, y2, 200, 200, w3, w4);fill(255,0,0);arc(x3, y3, 200, 200, w5, w6);fill(255,0,0);arc(x4, y4, 200, 200, w7, w8);fill(255);ellipse(300,300,5,5);//风车中间的白色小圆w0=w0+w;w1=Math.PI+w0;w2=2*Math.PI+w0;w3=w0;w4=Math.PI+w0;w5=1.5*Math.PI+w0;w6=0.5*Math.PI+w0;w7=0.5*Math.PI+w0;w8=1.5*Math.PI+w0;// (x1-300)^2+(y1-300)^2=100^2;x1=300+100*Math.cos(w0);x2=300+100*Math.cos(w0+Math.PI);x3=300+100*Math.cos(w0+0.5*Math.PI);x4=300+100*Math.cos(w0+1.5*Math.PI);y1=300+100*Math.sin(w0);y2=300+100*Math.sin(w0+Math.PI);y3=300+100*Math.sin(w0+0.5*Math.PI);y4=300+100*Math.sin(w0+1.5*Math.PI);//雪花let t = frameCount / 60; // update time// create a random number of snowflakes each framefor (var i = 0; i < random(5); i++) {snowflakes.push(new snowflake()); // append snowflake object}// loop through snowflakes with a for..of loopfor (let flake of snowflakes) {flake.update(t); // update snowflake positionflake.display(); // draw snowflake}
}
// snowflake class
function snowflake() {// initialize coordinatesthis.posX = 0;this.posY = random(-50, 0);this.initialangle = random(0, 2 * PI);this.size = random(2, 5);// radius of snowflake spiral// chosen so the snowflakes are uniformly spread out in areathis.radius = sqrt(random(pow(width / 2, 2)));this.update = function(time) {// x position follows a circlelet w = 0.6; // angular speedlet angle = w * time + this.initialangle;this.posX = width / 2 + this.radius * sin(angle);// different size snowflakes fall at slightly different y speedsthis.posY += pow(this.size, 0.5);// delete snowflake if past end of screenif (this.posY > height) {let index = snowflakes.indexOf(this);snowflakes.splice(index, 1);}};this.display = function() {ellipse(this.posX, this.posY, this.size);};
}

效果如下：

这样是不是就漂亮多了！

总结

用p5.js画图并不难，还有更多画图函数和例子可以在p5.js官网查看，看完这篇博客赶快自己动手试试吧！

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

使用p5.js画一幅创意自画像
使用p5.js画一幅创意自画像使用p5.js画一幅创意自画像用编程方式创作一幅介绍自己的图片,因为我很喜欢五月天,所以我的自画像就是展示我去看演唱会的样子,穿着五月天Logo的stayrealT恤 ...
互动媒体技术——基于p5.js创作一幅自画像
文章目录 1.实验主题 2.实验要求 3.实验结果 4.实验步骤总结 1.实验主题基于p5.js创作一幅自画像. 2.实验要求编程语言与工具:编程可以用p5,processing,若想用其他语言 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
“码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女关于第一点还是比较好实现的,就是外 ...
p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
p5.js 2.0绘制一幅动态图像
2.0 p5.js 绘制一幅动态图像 1.关于码绘实现动态图像的思考 2.明确作品类型 3.彩虹猫动画的实现 4.手绘和动态的思考 5.参考资料 1.关于码绘实现动态图像的思考上一次我们实现了用静态 ...
雪梨小白的“码绘”日常——p5.js自画像来喽！
这次需要完成互动媒体课程的第二项作业--利用p5.js绘制一幅表现自我的自画像,(雪梨是谁啊,那可是艺工交融的代表,骄傲的抬起快要睁不开的眼-),用三个字,那就是!!!我可以!!!(来啦!) 我觉得码 ...
p5.js 临摹作品“随鼠标转动的三角形”及自主作品“太阳花”
太阳花(自己的作品) 最近正在上互动媒体技术这门课,应作业要求用p5.js画了简笔画,好吧,不是很好看,但是在这个过程中,我还是学到了很多. 课上,我们看过一些影片,记忆最深刻的就是关于达芬奇的,他因 ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...

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

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

工具

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

二.让风车动起来

三. 加点雪花背景

总结

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

最新文章

热门文章