使用Canvas绘制完美的不完美圆形

techbrood 发表于 2016-05-23 15:41:17

标签: canvas, html5, circle, fractal, 分形

- +

真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canvas生成随机大小的不完美圆形。


首先我们要了解,在几何学上圆形可以通过增加等边对称多边形边数来无限逼近。

那么所谓不完美圆形,实际可以通过一个不等边不对称的多边形来实现。

要实现不等边不对称,一个简单的方法是使多边形各个顶点距离中心点的距离(即半径)为一个随机值就好。

为避免半径落差过大,我们可以给其设定一个最大和最小值,然后在这个区间进行随机,代码如下:

function drawCircle(centerX, centerY, minRad, maxRad) {
  var points = 512; //多边形边的总数目
  var rad, theta;
  var twoPi = 2 * Math.PI;
  var x0, y0;

  context.strokeStyle = "#aa6699";
  context.lineWidth = 1.01;
  context.fillStyle = "#6633aa";
  context.beginPath();
  theta = 0;
  x0 = centerX + rad * Math.cos(theta);
  y0 = centerY + rad * Math.sin(theta);
  context.lineTo(x0, y0);
  for (var i = 0; i < points; i++) {
      theta += twoPi / points;
      rad = minRad + Math.random() * (maxRad - minRad); //随机半径
      x0 = centerX + rad * Math.cos(theta);
      y0 = centerY + rad * Math.sin(theta);
      context.lineTo(x0, y0);
  }
  context.stroke();
  context.fill();
}

上面的代码实现效果如下:

无标题.png

上面这样的图形可以用来模拟松果、毛线球、刺猬等物体。

但如果想模拟海岸线、雨滴、云朵等线条比较柔和的物体,则显然不能满足要求。

我们需要边沿有一个平滑的过渡,而分形算法刚好可以用来完成这个任务。

我们假设半径的长度为1,我们来对这个区间进行细分,第1步在线段中间添加一个节点把区间分成2段,随机一个y坐标,第2步在左右半区间内重复类似操作,如此反复,直到达到预先设定的细分粒度。


fractal subdivision

为了避免线条的起伏过大,我们在给新增中间节点设定y坐标时,使其和所在细分线段的长度正相关,这样随着细分粒度的提高,局部区域的波动就越小,就形成了一个平滑过渡的效果,代码如下:

function setLinePoints(iterations) {
    var pointList = {};
    pointList.first = {
        x: 0,
        y: 1
    };
    var lastPoint = {
        x: 1,
        y: 1
    }
    var minY = 1;
    var maxY = 1;
    var point;
    var nextPoint;
    var dx, newX, newY;

    pointList.first.next = lastPoint;
    for (var i = 0; i < iterations; i++) {
        point = pointList.first;
        while (point.next != null) {
            nextPoint = point.next;

            dx = nextPoint.x - point.x;
            newX = 0.5 * (point.x + nextPoint.x);
            newY = 0.5 * (point.y + nextPoint.y);
            newY += dx * (Math.random() * 2 - 1);

            var newPoint = {
                x: newX,
                y: newY
            };

            //min, max
            if (newY < minY) {
                minY = newY;
            } else if (newY > maxY) {
                maxY = newY;
            }

            //put between points
            newPoint.next = nextPoint;
            point.next = newPoint;

            point = nextPoint;
        }
    }

    var normalizeRate = 1 / (maxY - minY);
    point = pointList.first;
    while (point != null) {
        point.y = normalizeRate * (point.y - minY);
        point = point.next;
    }

    return pointList;
}

function drawCircle(centerX, centerY, minRad, maxRad, phase) {
    var point;
    var rad, theta;
    var twoPi = 2 * Math.PI;
    var x0, y0;

    //生成分形细分顶点链表,用来获取随机半径, 9次迭代将返回512个顶点。
    var pointList = setLinePoints(9);
    context.strokeStyle = "#aa6699";
    context.lineWidth = 1.01;
    context.fillStyle = "#6633aa";
    context.beginPath();
    point = pointList.first;
    theta = phase;
    rad = minRad + point.y * (maxRad - minRad);
    x0 = centerX + rad * Math.cos(theta);
    y0 = centerY + rad * Math.sin(theta);
    context.lineTo(x0, y0);
    while (point.next != null) {
        point = point.next;
        theta = twoPi * point.x + phase;
        rad = minRad + point.y * (maxRad - minRad);
        x0 = centerX + rad * Math.cos(theta);
        y0 = centerY + rad * Math.sin(theta);
        context.lineTo(x0, y0);
    }
    context.stroke();
    context.fill();
}

上面的代码实现效果如下:

blob.png

很好,我们获得了一个完美的不完美圆形!

你可以自己在线试试。

possitive(2) negative(0) views11606 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 2019年开源WebRTC媒体服务器选型比较

    什么是WebRTC服务器?在WebRTC的早期开始,该技术的主要卖点之一是它允许点对点(浏览器到浏览器)通信,几乎没有服务器的干预,服务器通常仅用于信令(比如用于...

  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • 计算WebGL中的uniforms变量使用数

    在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • Three.js入门教程5 - 10个必须知道的编程技巧

    作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • 如何使用CSS3实现一个平滑的3D文本标题

    要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...