共计 5437 个字符,预计需要花费 14 分钟才能阅读完成。
作者:肖剑华
- 可视化是前端可视化
- 图形是计算机图形学
- 向量就是那个向量,高中学过的,你懂的
- 树是那棵贼丑的树
后果
首先先看看本文最终的后果。
是不是贼丑!是不是能在画展上卖个好价格!
过程
好了,话不多说,看看这棵贼丑的树是怎么诞生的吧。
坐标系
坐标系,或者说 立体直角坐标系 ,是几何图形学的根底,其次是 点、线、面 这些元素。
坐标系大家都很相熟,最后接触坐标系应该是初中,那时候的坐标系不知大家还有没有印象。
原点在两头,程度轴是 x 轴,竖轴是 y 轴,分为四个象限。
然而呢, html canvas 这货,默认原点在左上角,x 轴是跟立体直角坐标系是统一的,y 轴是向下的!!
置信这种坐标轴在日常工作中应用 canvas 绘图给前端人不晓得造成过多少麻烦,计算起来麻烦费劲,还容易出 bug。
那么如何把 canvas 的坐标系变成立体直角坐标系呢
Maaaaaaaaagic!
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
// 咱们这里把原点定位在 canvas 左下角
ctx.translate(0, canvas.height)
// 关键步骤:将 canvasY 轴方向翻转
ctx.scale(1, -1)
两行代码,就实现了对坐标系的翻转。
咱们用一个 ???? 来验证一下
假如,咱们要在宽 512 * 高 256 的一个 Canvas 画布上实现如下的视觉效果。其中,山的高度是 100,底边 200,两座山的核心地位到中线的间隔都是 80,太阳的圆心高度是 150。
咱们这里应用 rough.js 减少一下趣味性
<canvas
width="512"
height="256"
style="display: block;margin: 0 auto;background-color: #ccc"
></canvas>
const canvas = document.querySelector('canvas')
const rc = rough.canvas(canvas)
rc.ctx.translate(0, canvas.height)
rc.ctx.scale(1, -1)
const cSun = [canvas.width / 2, 106]
const diameter = 100 // 直径
const hill1Points = {start: [76, 0], // 起始点
top: [176, 100], // 顶点
end: [276, 0] // 起点
}
const hill2Points = {start: [236, 0], // 起始点
top: [336, 100], // 顶点
end: [436, 0] // 起点
}
const hill1Options = {
roughness: 0.8,
stokeWidth: 2,
fill: 'pink'
}
const hill2Options = {
roughness: 0.8,
stokeWidth: 2,
fill: 'chocolate'
}
function createHillPath(point) {const { start, top, end} = point
return `M${start[0]} ${start[1]}L${top[0]} ${top[1]}L${end[0]} ${end[1]}`
}
function paint() {rc.path(createHillPath(hill1Points), hill1Options)
rc.path(createHillPath(hill2Points), hill2Options)
rc.circle(cSun[0], cSun[1], diameter, {
stroke: 'red',
strokeWidth: 4,
fill: 'rgba(255, 255, 0, 0.4)',
fillStyle: 'solid'
})
}
paint()
这里咱们翻转了坐标系,定义了 mountain1,mountain2,太阳 的各个点的坐标,齐全是参照直角坐标系的坐标。
最终的实现成果如下
(是不是也能在画展上卖个不错的价格)
向量
定义
说完直角坐标系的转换,咱们来探讨明天的正主,向量(Vector)
向量的广泛定义是具备大小和方向的量,咱们这里探讨的向量是 几何向量,是用一组立体直角坐标系的坐标示意的
例如 (1, 1), 意思是,顶点坐标为 x 为 1,y 为 0 的一条有向线段,向量的方向是由 原点 (0, 0) 指向顶点(1,1) 的方向。
换言之,晓得了向量的顶点,就晓得了向量的大小和方向
向量的模
向量的大小也叫向量的模,是向量坐标的平方和的算术平方根,length = Math.pow((x2 + y2), 0.5)。
向量的方向
向量的方向一方面能够应用向量的顶点示意。
另外一方面应用向量和 x 轴的夹角,也可能示意一个向量。
应用 javascript Math 的内置办法能够失去,计算形式:
// 构造函数在本文稍后的中央介绍
const v = new Vector2D(1, 10)
const dir = Math.atan2(v.y, v.x)
四则运算
加减法
示意图:
如图所示:向量 v1(x1, y1)和向量 v2(x2, y2)相加失去的新的向量就是两个向量对应坐标之和, 用公式表白就是
v1(x1, y1) + v2(x2, y2) = v3(x1 + x2, y1 + y2)
反之就是减法 v3(x1 + x2, y1 + y2) – v2 (x2, y2)= v1(x1, y1)
乘除
向量乘法有 叉乘和点乘
点乘示意图:
物理意义是,方向为 va 方向,大小为 va.length 的力,沿 vb 方向拉动 vb.length 间隔所做的功
va vb = va.length vb.length * cos(rad)
叉乘示意图:
va vb = va.length va.length * sin(rad)
也能够了解为长度为 va.length 的线段沿着 vb 方向挪动到 vb 顶点扫过的面积,反之就是除法
乘除这里仅做概念上的介绍
单位向量
长度为 1 的向量叫做单位向量,满足这个条件的向量有无数条,一个非 0 的向量除以他的模,就是这个向量的单位向量,咱们取与 x 轴夹角为 0 的向量:[1, 0]作为单位向量
向量的旋转
将一个向量转动肯定的角度 rad 之后的向量该如何计算呢。
这里有比较复杂的推导过程,因而能够间接记住论断。
具体代码在上面构造函数外面展现
结构器
// 用一个长度为 2 的数组示意一个向量,下标为 0 的地位示意 x 下标为 1 的地位示意 y
class Vector2D extends Array {constructor(x = 1, y = 0) {super(x, y)
}
get x() {return this[0]
}
get y() {return this[1]
}
set x(v) {this[0] = v
}
set y(v) {this[1] = v
}
add(v) {
this.x = this.x + v.x
this.y = this.y + v.y
return this
}
length() {return Math.hypot(this.x, this.y)
}
rotate(rad) {const c = Math.cos(rad)
const s = Math.sin(rad)
const [x, y] = this
this.x = x * c + y * -s
this.y = x * s + y * c
return this
}
}
至此,画出文章结尾的那个图形的基本要素都曾经筹备好了。
上面,让咱们来见证一下世界名画的产生。
入手画图
- 筹备一个 512 * 512 的画布
<html>
...
<canvas
width="512"
height="512"
style="display:block;margin:0 auto;background-color: #ccc"
></canvas>
...
</html>
- 翻转 canvas 坐标系
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.translate(0, canvas.height)
ctx.scale(1, -1)
- 定义绘制树枝的办法
/**
* 1. ctx canvas ctx 上下文对象
* 2. 起始向量
* 3. length 向量长度(树枝长度)
* 4. thickness 线段宽度
* 5. 单位向量 dir 旋转角度
* 6. bias 随机因子
*/
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.translate(0, canvas.height)
ctx.scale(1, -1)
ctx.lineCap = 'round'
console.log(canvas.width)
const v0 = new Vector2D(canvas.width / 2, 0)
function drawBranch(ctx, v0, length, thickness, rad, bias) {const v = new Vector2D().rotate(rad).scale(length)
console.log(v, rad, length)
const v1 = v0.copy().add(v)
ctx.beginPath()
ctx.lineWidth = thickness
ctx.moveTo(...v0)
ctx.lineTo(...v1)
ctx.stroke()
ctx.closePath()}
// 定义好了之后咱们先画一个树枝试试看
drawBranch(ctx, v0, 50, 10, Math.PI / 2, 1)
- 递归画图
// 先定义膨胀系数
const LENGTH_SHRINK = 0.9
const THICKNESS_SHRINK = 0.8
const RAD_SHRINK = 0.5
const BIAS_SHRINK = 1
function drawBranch(ctx, v0, length, thickness, rad, bias) {
// ....
if (thickness > 2) {
// 画左树枝
const left =
Math.PI / 4 +
RAD_SHRINK * (rad + 0.2) +
drawBranch(
ctx,
v1,
length * LENGTH_SHRINK,
thickness * THICKNESS_SHRINK,
left,
bias
)
// 画右树枝
const right = Math.PI / 4 + RAD_SHRINK * (rad - 0.2)
drawBranch(
ctx,
v1,
length * LENGTH_SHRINK,
thickness * THICKNESS_SHRINK,
right,
bias
)
}
}
drawBranch(ctx, v0, 50, 10, Math.PI / 2, 1)
这一步画进去的是一个比拟规定的形态,代码写到这一步,树的根本形态曾经进去了,然而 为了展现成果,向量翻转上加一些随机性来画一颗更加靠近天然状态的树。代码如下:
function drawBranch(ctx, v0, length, thickness, rad, bias) {
// ....
if (thickness > 2) {
// 画左树枝
const left =
Math.PI / 4 + RAD_SHRINK * (rad + 0.2) + bias * (Math.random() - 0.5) // 加些随机数
drawBranch(
ctx,
v1,
length * LENGTH_SHRINK,
thickness * THICKNESS_SHRINK,
left,
bias
)
// 画右树枝
const right =
Math.PI / 4 + RAD_SHRINK * (rad - 0.2) + bias * (Math.random() - 0.5) // 加些随机数
drawBranch(
ctx,
v1,
length * LENGTH_SHRINK,
thickness * THICKNESS_SHRINK,
right,
bias
)
}
}
drawBranch(ctx, v0, 50, 10, Math.PI / 2, 1)
等等等等,效果图:一棵赤裸裸的树
(是不是有点艺术内味儿了)
剩下的就是增加一些装点,把果子挂上
function drawBranch(ctx, v0, length, thickness, rad, bias) {
// .....
if (thickness < 5 && Math.random() < 0.3) {const th = 6 + Math.random()
ctx.save()
ctx.strokeStyle = '#e4393c'
ctx.lineWidth = th
ctx.beginPath()
ctx.moveTo(...v1)
ctx.lineTo(v1.x, v1.y + 2)
ctx.stroke()
ctx.closePath()
ctx.restore()}
}
drawBranch(ctx, v0, 50, 10, Math.PI / 2, 3) // 这里增大了随机因子,让树枝更加扩散
此时效果图就进去了:
(我再问一遍,是不是很难看,是不是很想花个几百万小钱买下它)
对于 drawBranch 第一调用,能够尝试调一调参数,看看后果如何。
残缺代码地址:github
总结
本文首先展现了如何将 canvas 的坐标系转化为直角坐标系
其次用一个例子演示了,向量在图形学内的根本运算。
向量运算的意义并不仅仅只是用来算点的地位和结构线段,这只是最高级的用法。
可视化出现依赖于计算机图形学,而向量运算是整个计算机图形学的数学根底。而且,在向量运算中,除了加法示意挪动点和绘制线段外,向量的点乘、叉乘运算也有非凡的意义。
咱们是晓黑板前端,欢送关注咱们的知乎、Segmentfault、CSDN、简书、开源中国账号。