說明
【跟月影學可視化】學習筆記。
極坐标示意圖
極坐标系使用相對極點的距離，以及與 x 軸正向的夾角來表示點的坐标，如
（3，60°）
。
直角坐标和極坐标互相轉換
// 直角坐标影射為極坐标
function toPolar(x, y) {
const r = Math.hypot(x, y);
const θ= Math.atan2(y, x);
return [r, θ];
}
// 極坐标映射為直角坐标
function fromPolar(r, θ) {
const x = r * cos(θ);
const y = r * sin(θ);
return [x, y];
} 如何用極坐标方程繪制曲線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>如何用極坐标方程繪制曲線</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script type="module">
import { parametric } from "./common/lib/parametric.js";
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const { width, height } = canvas;
const w = 0.5 * width,
h = 0.5 * height;
ctx.translate(w, h);
ctx.scale(1, -1);
function drawAxis() {
ctx.save();
ctx.strokeStyle = "#ccc";
ctx.beginPath();
ctx.moveTo(-w, 0);
ctx.lineTo(w, 0);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, -h);
ctx.lineTo(0, h);
ctx.stroke();
ctx.restore();
}
drawAxis();
// fromPolar 作為 parametric 的參數是坐标映射函數，通過它可以将任意坐标映射為直角坐标
const fromPolar = (r, theta) => {
return [r * Math.cos(theta), r * Math.sin(theta)];
};
// 畫一個半徑為 200 的半圓
const arc = parametric(
(t) => 200,
(t) => t,
fromPolar
);
arc(0, Math.PI).draw(ctx);
// 玫瑰線
const rose = parametric(
(t, a, k) => a * Math.cos(k * t),
(t) => t,
fromPolar
);
rose(0, Math.PI, 100, 200, 5).draw(ctx, { strokeStyle: "blue" });
// 心形線
const heart = parametric(
(t, a) => a - a * Math.sin(t),
(t) => t,
fromPolar
);
heart(0, 2 * Math.PI, 100, 100).draw(ctx, { strokeStyle: "red" });
// 雙紐線
const foliumRight = parametric(
(t, a) => Math.sqrt(2 * a ** 2 * Math.cos(2 * t)),
(t) => t,
fromPolar
);
const foliumLeft = parametric(
(t, a) => -Math.sqrt(2 * a ** 2 * Math.cos(2 * t)),
(t) => t,
fromPolar
);
foliumRight(-Math.PI / 4, Math.PI / 4, 100, 100).draw(ctx, {
strokeStyle: "green",
});
foliumLeft(-Math.PI / 4, Math.PI / 4, 100, 100).draw(ctx, {
strokeStyle: "green",
});
</script>
</body>
</html> 
如何使用片元着色器與極坐标系繪制圖案？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>如何使用片元着色器與極坐标系繪制圖案</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<script src="./common/lib/gl-renderer.js"></script>
<canvas width="512" height="512"></canvas>
<script>
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
// // 三瓣玫瑰線
// const fragment = `
// #ifdef GL_ES
// precision highp float;
// #endif
// varying vec2 vUv;
// vec2 polar(vec2 st) {
// return vec2(length(st), atan(st.y, st.x));
// }
// void main() {
// vec2 st = vUv - vec2(0.5);
// st = polar(st);
// float d = 0.5 * cos(st.y * 3.0) - st.x;
// gl_FragColor.rgb = smoothstep(-0.01, 0.01, d) * vec3(1.0);
// gl_FragColor.a = 1.0;
// }
// `;
// // 不同瓣數的玫瑰線圖案
// const fragment = `
// #ifdef GL_ES
// precision highp float;
// #endif
// varying vec2 vUv;
// uniform float u_k;
// vec2 polar(vec2 st) {
// return vec2(length(st), atan(st.y, st.x));
// }
// void main() {
// vec2 st = vUv - vec2(0.5);
// st = polar(st);
// float d = 0.5 * cos(st.y * u_k) - st.x;
// gl_FragColor.rgb = smoothstep(-0.01, 0.01, d) * vec3(1.0);
// gl_FragColor.a = 1.0;
// }
// `;
// 花瓣線
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
uniform float u_k;
vec2 polar(vec2 st) {
return vec2(length(st), atan(st.y, st.x));
}
void main() {
vec2 st = vUv - vec2(0.5);
st = polar(st);
float d = 0.5 * abs(cos(st.y * u_k * 0.5)) - st.x;
gl_FragColor.rgb = smoothstep(-0.01, 0.01, d) * vec3(1.0);
gl_FragColor.a = 1.0;
}
`;
// // 葫蘆圖案
// const fragment = `
// #ifdef GL_ES
// precision highp float;
// #endif
// varying vec2 vUv;
// uniform float u_k;
// uniform float u_scale;
// uniform float u_offset;
// vec2 polar(vec2 st) {
// return vec2(length(st), atan(st.y, st.x));
// }
// void main() {
// vec2 st = vUv - vec2(0.5);
// st = polar(st);
// float d = u_scale * 0.5 * abs(cos(st.y * u_k * 0.5)) - st.x + u_offset;
// gl_FragColor.rgb = smoothstep(-0.01, 0.01, d) * vec3(1.0);
// gl_FragColor.a = 1.0;
// }
// `;
// 花苞圖案
// const fragment = `
// #ifdef GL_ES
// precision highp float;
// #endif
// varying vec2 vUv;
// uniform float u_k;
// uniform float u_scale;
// uniform float u_offset;
// vec2 polar(vec2 st) {
// return vec2(length(st), atan(st.y, st.x));
// }
// void main() {
// vec2 st = vUv - vec2(0.5);
// st = polar(st);
// float d = smoothstep(-0.3, 1.0, u_scale * 0.5 * cos(st.y * u_k) + u_offset) - st.x;
// gl_FragColor.rgb = smoothstep(-0.01, 0.01, d) * vec3(1.0);
// gl_FragColor.a = 1.0;
// }
// `;
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
// // 不同瓣數的玫瑰線圖案
// renderer.uniforms.u_k = 2;
// setInterval(() => {
// renderer.uniforms.u_k += 2;
// }, 200);
// 花瓣線
// renderer.uniforms.u_k = 3;
renderer.uniforms.u_k = 1.3; // 1.3 的情況下是蘋果
// // 葫蘆圖案
// renderer.uniforms.u_k = 1.7;
// renderer.uniforms.u_scale = 0.5; // default 1.0
// renderer.uniforms.u_offset = 0.2; // default 0.0
// // 花苞圖案
// renderer.uniforms.u_k = 5;
// renderer.uniforms.u_scale = 0.2; // default 1.0
// renderer.uniforms.u_offset = 0.2; // default 0.0
renderer.setMeshData([
{
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [
[0, 1, 2],
[2, 0, 3],
],
},
]);
renderer.render();
</script>
</body>
</html> 極坐标系如何實作角向漸變？
角向漸變（
Conic Gradients
）就是以圖形中心為軸，順時針地實作漸變效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>極坐标系如何實作角向漸變</title>
<style>
canvas {
border: 1px dashed salmon;
}
div.conic {
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
background: conic-gradient(red 0%, green 45%, blue);
}
</style>
</head>
<body>
<script src="./common/lib/gl-renderer.js"></script>
<canvas width="512" height="512"></canvas>
<div class="conic"></div>
<script>
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
vec2 polar(vec2 st) {
return vec2(length(st), atan(st.y, st.x));
}
void main() {
vec2 st = vUv - vec2(0.5);
st = polar(st);
float d = smoothstep(st.x, st.x + 0.01, 0.2);
// 将角度範圍轉換到0到2pi之間
if(st.y < 0.0) st.y += 6.28;
// 計算p的值，也就是相對角度，p取值0到1
float p = st.y / 6.28;
if(p < 0.45) {
// p取0到0.45時從紅色線性過渡到綠色
gl_FragColor.rgb = d * mix(vec3(1.0, 0, 0), vec3(0, 0.5, 0), p / 0.45);
} else {
// p超過0.45從綠色過渡到藍色
gl_FragColor.rgb = d * mix(vec3(0, 0.5, 0), vec3(0, 0, 1.0), (p - 0.45) / (1.0 - 0.45));
}
gl_FragColor.a = 1.0;
}
`;
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.setMeshData([
{
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [
[0, 1, 2],
[2, 0, 3],
],
},
]);
renderer.render();
</script>
</body>
</html> 極坐标如何繪制 HSV 色輪？
隻需要将像素坐标轉換為極坐标，再除以 2π，就能得到 HSV 的 H 值。然後用滑鼠位置的 x、y 坐标來決定 S 和 V 的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>極坐标如何繪制 HSV 色輪</title>
<style>
canvas {
border: 1px dashed salmon;
}
</style>
</head>
<body>
<script src="./common/lib/gl-renderer.js"></script>
<canvas width="512" height="512"></canvas>
<div class="conic"></div>
<script>
const vertex = `
attribute vec2 a_vertexPosition;
attribute vec2 uv;
varying vec2 vUv;
void main() {
gl_PointSize = 1.0;
vUv = uv;
gl_Position = vec4(a_vertexPosition, 1, 1);
}
`;
const fragment = `
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vUv;
uniform vec2 uMouse;
vec3 hsv2rgb(vec3 c){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0), 6.0)-3.0)-1.0, 0.0, 1.0);
rgb = rgb * rgb * (3.0 - 2.0 * rgb);
return c.z * mix(vec3(1.0), rgb, c.y);
}
vec2 polar(vec2 st) {
return vec2(length(st), atan(st.y, st.x));
}
void main() {
vec2 st = vUv - vec2(0.5);
st = polar(st);
float d = smoothstep(st.x, st.x + 0.01, 0.2);
if(st.y < 0.0) st.y += 6.28;
float p = st.y / 6.28;
gl_FragColor.rgb = d * hsv2rgb(vec3(p, uMouse.x, uMouse.y));
gl_FragColor.a = 1.0;
}
`;
const canvas = document.querySelector("canvas");
const renderer = new GlRenderer(canvas);
const program = renderer.compileSync(fragment, vertex);
renderer.useProgram(program);
renderer.uniforms.uMouse = [0.5, 0.5];
renderer.setMeshData([
{
positions: [
[-1, -1],
[-1, 1],
[1, 1],
[1, -1],
],
attributes: {
uv: [
[0, 0],
[0, 1],
[1, 1],
[1, 0],
],
},
cells: [
[0, 1, 2],
[2, 0, 3],
],
},
]);
renderer.render();
canvas.addEventListener('mousemove', (e) => {
const {x, y, width, height} = e.target.getBoundingClientRect();
renderer.uniforms.uMouse = [(e.x - x) / width, 1.0 - (e.y - y) / height];
});
</script>
</body>
</html> 圓柱坐标與球坐标
圓柱坐标系是一種三維坐标系，又被稱為半極坐标系。可以用來繪制一些三維曲線，比如螺旋線、圓内螺旋線、費馬曲線等等。
直角坐标系和圓柱坐标系也可以互相轉換，公式如下：
球坐标系用在三維圖形繪制、球面定位、碰撞檢測等。