javascript - 我的代码不能绘制任何东西而不是显示白色画布
问题描述
我是 p5.js 的新手,我编写这段代码来绘制一些随机循环曲线。但我不知道为什么我的代码没有返回任何东西。有人可以指出我们的错误吗?提前致谢!
var modifier1 = 300;
var modifier2 = 300;
var modifier3 = 2;
var addition = 90;
var count = 0;
function setup()
{
createCanvas(600, 600);
background(255);
}
function draw()
{
translate(width/2, height/2);
stroke(237, 34, 93);
beginShape();
while (count < 500)
{
var x = modifier1 * sin(radians(modifier3 * frameCount + addition));
var y = modifier2 * sin(radians(frameCount));
vertex(x,y);
count++;
}
endShape();
}
解决方案
您的代码没有绘制任何内容,因为您指定vertex
了具有相同坐标的 500 个顶点 ( )。请注意,x
并且y
不要更改,因为frameCount
在循环运行时不会更改。因此,该形状仅包含 500 个相同的点。
在接下来的帧中,frameCount
已更改,但您再次使用相同的协调器指定 500 个顶点。坐标与前一帧中的坐标不同,但形状本身由 500 个相同的点组成。
如果您使用count
而不是frameCount
您的形状将立即绘制:
var modifier1 = 300;
var modifier2 = 300;
var modifier3 = 2;
var addition = 90;
var count = 0;
function setup()
{
createCanvas(600, 600);
background(255);
}
function draw()
{
translate(width/2, height/2);
stroke(237, 34, 93);
beginShape();
while (count < 500)
{
var x = modifier1 * sin(radians(modifier3 * count + addition));
var y = modifier2 * sin(radians(count));
vertex(x,y);
count++;
}
endShape();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
如果要“逐步”绘制形状,则需要从每帧添加 1frameCount
段frameCount + 1
:
var modifier1 = 300;
var modifier2 = 300;
var modifier3 = 2;
var addition = 90;
var count = 0;
function setup()
{
createCanvas(600, 600);
background(255);
}
function draw()
{
translate(width/2, height/2);
stroke(237, 34, 93);
beginShape();
var x1 = modifier1 * sin(radians(modifier3 * frameCount + addition));
var y1 = modifier2 * sin(radians(frameCount ));
vertex(x1, y1);
var x2 = modifier1 * sin(radians(modifier3 * (frameCount+1) + addition));
var y2 = modifier2 * sin(radians(frameCount+1));
vertex(x2, y2);
endShape();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
推荐阅读
- android - kotlin.TypeCastException: null 不能转换为非 null 类型 android.widget.SearchView
- javascript - 如何在 jquery 对话框表单中输入数据之前防止执行 javascript 代码
- javascript - 用纯javascript将点击事件附加到他的父亲身上
- c - 比较没有ASCII的C中的两个字符
- javascript - 如何在 fs.existsSync 或 statSync 或 readFileSync 中使用通配符
- python - os.walk() 替代品
- c# - 如何使用 Windows 应用程序驱动程序测试 Excel 电子表格
- typescript - 接口属性上的类型缩小(删除空选项)
- ruby-on-rails - Tricky Rails 迁移和建模涉及自连接“:users”表和“:bands”表:同时存在一对多和多对多关系
- bootstrap-4 - Bootstrap 折叠点击时显示的多个 div