AI 助理
备案控制台
开发者社区 大数据 文章 正文

【视觉基础篇】15 # 如何用极坐标系绘制有趣图案？

2023-02-25 166
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云原生数据库 PolarDB 分布式版，标准版 2核8GB
推荐场景：
使用PolarDB-X与Flink搭建实时数据大屏
简介： 【视觉基础篇】15 # 如何用极坐标系绘制有趣图案？

说明

【跟月影学可视化】学习笔记。



极坐标示意图

极坐标系使用相对极点的距离，以及与 x 轴正向的夹角来表示点的坐标，如（3，60°）。



d18bbd4e77cb4265af02da7f4dd8e0c5.png

直角坐标和极坐标相互转换

// 直角坐标影射为极坐标
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>

002819fe83a04e8ba66c50c733d1476f.png


如何使用片元着色器与极坐标系绘制图案？

<!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>

97e492d7fec644c1958c2914cf58d39d.png




极坐标系如何实现角向渐变？

角向渐变（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>

1ae78d1ada3c484c8328a5fa59b3070b.png



极坐标如何绘制 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>

image.gif




圆柱坐标与球坐标

圆柱坐标系是一种三维坐标系，又被称为半极坐标系。可以用来绘制一些三维曲线，比如螺旋线、圆内螺旋线、费马曲线等等。

570fd148517d42bdbdb12111b4d1b7e8.png

直角坐标系和圆柱坐标系也可以相互转换，公式如下：

96ea893ef3af42408f24aa8abb0077ba.png


球坐标系用在三维图形绘制、球面定位、碰撞检测等。

07d3620bcec74991bf259fa3c3c9bd9e.png


圆柱坐标系可以和球坐标系相互转换，公式如下：

ab0064408132431a8824b7a775ee3d56.png


文章标签：
云原生分布式数据库 PolarDB-X
数据可视化
相关实践学习
快速体验PolarDB开源数据库
本实验环境已内置PostgreSQL数据库以及PolarDB开源数据库：PolarDB PostgreSQL版和PolarDB分布式版，支持一键拉起使用，方便各位开发者学习使用。
凯小默
目录
相关文章
廖文
|
1月前
|
架构师 图形学
图形学基础概念(画布/位图/像素等)
图形学基础概念(画布/位图/像素等)
廖文
42 0
幼稚十一
|
6月前
|
存储 算法 图形学
【计算机图形学】实验二 用扫描线算法实现多边形填充
【计算机图形学】实验二 用扫描线算法实现多边形填充
幼稚十一
202 2
荷塘月色2
|
C++ 计算机视觉 Python
C++ VS OpenGL绘制教室三维立体旋转图像
C++ VS OpenGL绘制教室三维立体旋转图像
荷塘月色2
130 0
C++ VS OpenGL绘制教室三维立体旋转图像
凯小默
|
传感器 JSON 数据可视化
【视觉高级篇】22 # 如何用仿射变换来移动和旋转3D物体？
【视觉高级篇】22 # 如何用仿射变换来移动和旋转3D物体？
凯小默
196 0
【视觉高级篇】22 # 如何用仿射变换来移动和旋转3D物体？
凯小默
|
数据可视化
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
凯小默
179 0
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
凯小默
|
算法 数据可视化
【视觉高级篇】25 # 如何用法线贴图模拟真实物体表面
【视觉高级篇】25 # 如何用法线贴图模拟真实物体表面
凯小默
172 0
【视觉高级篇】25 # 如何用法线贴图模拟真实物体表面
凯小默
|
算法 前端开发 JavaScript
【视觉基础篇】10 # 图形系统如何表示颜色？
【视觉基础篇】10 # 图形系统如何表示颜色？
凯小默
172 0
【视觉基础篇】10 # 图形系统如何表示颜色？
凯小默
|
前端开发 数据可视化
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜？
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜？
凯小默
87 0
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜？
凯小默
【视觉高级篇】19 # 如何用着色器实现像素动画？2
【视觉高级篇】19 # 如何用着色器实现像素动画？
凯小默
87 0
【视觉高级篇】19 # 如何用着色器实现像素动画？2
凯小默
|
数据可视化 异构计算
【视觉高级篇】19 # 如何用着色器实现像素动画？
【视觉高级篇】19 # 如何用着色器实现像素动画？
凯小默
100 0
【视觉高级篇】19 # 如何用着色器实现像素动画？