拋物線 Parabolas

https://en.wikipedia.org/wiki/Parabola

y = a * x * x


準備工作

translate(width / 2, height / 2)


function center() {
translate(width / 2, height / 2)
}


canvas.translate(canvas.width / 2, canvas.height / 2)


scale(1, -1)


function drawAxes() {
lineWidth = 0.25
moveTo(-width, 0)
lineTo(width, 0)
moveTo(0, -height)
lineTo(0, height)
stroke()
lineWidth = 1
}


Ok, 現在可以設置 canvas 了:

width = 800
height = 800
canvas(width, height)

center()
scale(1, -1)
drawAxes()


繪製拋物線

a = 0.003
for (x = -width / 2; x <= width / 2; x++) {
y = a * x * x
lineTo(x, y)
}
stroke()


Oh, 等等。還有一些事情需要交待！

焦點與準線

x = 0
y = 1 / (4 * a)


a = 0.003
for (x = -width / 2; x <= width / 2; x++) {
y = a * x * x
lineTo(x, y)
}
stroke()

// draw focus
focusX = 0
focusY = 1/(4 * a)
circle(focusX, focusY, 4)
fill()


y = -1 / (4 * a)


a = 0.003
for (x = -width / 2; x <= width / 2; x++) {
y = a * x * x
lineTo(x, y)
}
stroke()

// 繪製焦點
focusX = 0
focusY = 1/(4 * a)
circle(focusX, focusY, 4)
fill()

// 繪製準線
directrixY = -1/(4 * a)
moveTo(-width / 2, directrixY)
lineTo(width / 2, directrixY)
stroke()


lineWidth = 0.5
for (x = -width / 2; x <= width/2; x += 40) {
// find a point on the parabola
// 在拋物線上找到那個點
y = a * x * x
circle(x, y, 4)
// draw a vertical line from the directrix to that point
// then from the that point to the focus
// 畫一條線垂直於準線於那個點
// 再將那個點連接至焦點
moveTo(x, directrixY)
lineTo(x, y)
lineTo(0, focusY)
}


切線

y = 2 * a * x0 * x - a * x0 * x0


// 拋物線
a = 0.003
for (x = -width / 2; x <= width / 2; x++) {
y = a * x * x
lineTo(x, y)
}
stroke()

// 找任意一個拋物線上的點
x = -80
y = a * x * x
circle(x, y, 4)
fill()

// 找一個遠離 canvas 左邊的點
x1 = -width / 2
y1 = 2 * a * x0 * x1 - a * x0 * x0

// 找一個遠離 canvas 右邊的點
x2 = width / 2
y2 = 2 * a * x0 * x2 - a * x0 * x0

// 畫線
moveTo(x1, y1)
lineTo(x2, y2)
stroke()


lineWidth = 0.5
for (x0 = -width / 2; x0 <= width/2; x0 += 40) {
// find a point on the parabola
y0 = a * x0 * x0
circle(x0, y0, 4)
fill()

// find a point on the far left of the canvas
x1 = -width / 2
y1 = 2 * a * x0 * x1 - a * x0 * x0

// and one on the far right
x2 = width / 2
y2 = 2 * a * x0 * x2 - a * x0 * x0

// and draw a line
moveTo(x1, y1)
lineTo(x2, y2)
stroke()
}


拋物面反射鏡

https://en.wikipedia.org/wiki/Parabolic_antenna#/media/File:Erdfunkstelle_Raisting_2.jpg

a = 0.003

// 在這個位置假裝畫了個拋物線
// 繪製焦點
focusX = 0
focusY = 1/(4 * a)
circle(focusX, focusY, 4)
fill()

lineWidth = 0.5
for (x = -width / 2; x <= width/2; x += 40) {
// 找到一個拋物線上的點
y = a * x * x

moveTo(x, -height / 2)
lineTo(x, y)
lineTo(focusX, focusY)
stroke()
}


另一個公式


y = a * x * x + b * x + c


function parabola(a, b, c, x0, x1) {
for (x = x0; x <= x1; x++) {
y = a*x*x + b*x + c
lineTo(x, y)
}
}


parabola(0.01, 0, 0, -width/2, width/2)


parabola(0.01, 0, -200, -width/2, width/2)
parabola(0.01, 0, 200, -width/2, width/2)


parabola(0.01, 3, 0, -width/2, width/2)


b 爲負數：

parabola(0.01, -3, 0, -width/2, width/2)


a 爲正數，b 用於控制拋物線位置左、右移動。那如果將 a 變成 負數會如何？

parabola(-0.01, -3, 0, -width/2, width/2)
parabola(-0.01, 3, 0, -width/2, width/2)


x = a * y * y


x = a * y * y + b * y + c