p5.js中的Sin(1/x)
p5.js中的Sin(1/x)
提问于 2020-03-13 15:00:18
我试图在p5中绘制函数sin (1/x)。问题是，我没有得到我所期望的，我得到的是直线，而不是正弦函数的振荡，任何帮助都是值得赞赏的。
var y;
var x
function setup() {
createCanvas(windowWidth, windowHeight);
x=-width;
background(0);
angleMode(DEGREES)
}
function draw() {
cord();
y=sin(1/x)
if(x>-510&&x<510)
y=1221550*y
stroke(0,222,0)
strokeWeight(4);
point(x,y);
if(x<width)
x+=1;
stroke(222,2,11)
strokeWeight(2)
line(width,height);
}
function Line(w, h) {
line(-w, 0, w, 0)
line(0, h, 0, -h)
}
function cord() {
translate(width / 2, height / 2);
scale(0.5, -0.5);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-13 22:51:03
要记住的一件事是，sin函数的范围是-1.0到1.0。要使正弦波看起来不像一条直线，你可以用一个因子乘以它，使它具有更大的振幅。
下面是一个与您的代码相似的示例，它绘制了您可以看到的正弦波。请记住，y=0是屏幕的顶部，所以我添加了windowHeight/2来对波进行居中。
var y;
var x
function setup() {
createCanvas(windowWidth, windowHeight);
x=0;
background(0);
angleMode(DEGREES)
}
function draw() {
y= (sin(x)* windowHeight/2) + windowHeight/2;
stroke(0,222,0)
strokeWeight(4);
point(x,y);
if(x<width){
x+=1;
} else {
noLoop();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
既然我们可以画出x的正弦，我们就可以继续画1/x的正弦了。首先，我们注意到函数不是在x= 0时定义的。我们只要从x=1开始就能得到一个好的图，以避免零。接下来，我们注意到，当x变大时，当1/x接近零时，1/x的正弦将接近于零。因为我们知道零的正弦是零，所以我们期望我们的情节接近于零。
下面是一个基于代码的快速草图
var y;
var x=1;
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
angleMode(DEGREES)
}
function draw() {
y= (sin(1/x)* 1000 * windowHeight/2) + windowHeight/2;
stroke(0,222,0)
strokeWeight(4);
point(x,y);
if(x<width){
x+=.1;
} else {
noLoop();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
现在我们可以画一个草图，画出负的和正的值。不用x来测量角度，我们可以用一个变量θ来表示角度。从上面的实验中我们可以看到，我们主要感兴趣的是角接近，而不是在零值的地方。在零的时候，情节是没有定义的，在离零太远的地方，情节只是非常接近1的东西。
var y;
var x = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
angleMode(DEGREES)
}
function draw() {
// here we use the map function to take our x position and turn it into a value between -1 and 1
let theta = map(x, 0, width, -1, 1);
// avoid zero
if (theta !== 0){
// calculate a y based on theta and center the plot in the middle of the window
y= (sin(1/theta) * 1000) + windowHeight/2;
stroke(0,222,0)
strokeWeight(4);
point(x,y);
}
if( x < width){
x+=1;
} else {
noLoop();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
现在，我们有了我们需要的一切，放大到接近0，并检查振荡行为。这里我们将把θ映射到-0.001和0.001之间的数字。
var y;
var x = 0;
function setup() {
createCanvas(windowWidth, windowHeight);
background(0);
angleMode(DEGREES)
}
function draw() {
let theta = map(x, 0, width, -.001, .001);
if (theta !== 0){
y= (sin(1/theta) * 100) + windowHeight/2;
stroke(0,222,0)
strokeWeight(4);
point(x+10,y);
}
if( x < width){
x+=1;
} else {
noLoop();
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
看一看sin(1/x)和x(1/x)限制示例，更深入地了解这个函数是怎么回事。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60672720
复制相关文章
相似问题
腾讯云开发者
