javascript - js实现上抛物线的算法

问题描述

问 题

• 不是要画这条线啊, 是一个函数, 参数是一个x, 返回值随x的值变大呈现上图的趋势, 求这样一个函数, 谢谢!

解决方案

上抛物线 ？ 看图似乎是四分之一圆。。

指数函数

比如二次函数

y = ax^2 + bx + c

// 柯里化 
var y = a => b => c => x =>  a * x ** 2 + b * x + c; 

// y = x^2 
var ept = y(1)(0)(0); 

大概这样

三角函数

看了看 这个比较符合。。。

y = -cos wx + o

// 柯里化 
var y = A => W => O => OFFSET =>  x => A * Math.cos(W * x + O) + OFFSET; 

// cosineLine(x) = -1000cos(w)
var cosineLine = y(-1000)(1)(0)(500); 

大概这样。。。。

抛物线

数学形式是

x^2 = 2p * y

也就是

y = x ^ 2 / 2p

跟指数函数形式一致

// 柯里化 
var y = p => x => x * x / 2p; 

幂函数

// y = a^x - 1 
// 柯里化 
var y = a => x => a ** x - 1;

大概长这样

四分之一圆

利用... canvas 的 arc 画弧就可以了

大概长这样

g.arc(0,0,800, 0, 2*Math.PI);
g.stroke(); 

不过 x 达到半径之外就没有实数解了。。

---

canvas部分

大概这样。。 不过容易栈溢出。。

function render(g, line, x = 0){
    var y = line(x / 50); 

    if (y <= 800) {
        g.lineTo(x, 800 - y); 
        render(g, line, x + 0.5); 
    } else {
        g.stroke();
    }
}

这篇关于javascript - js实现上抛物线的算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！