如何解决给定JavaScript中的Schläfli符号，如何在庞加莱磁盘上绘制双曲线细分？
我对诸如@TilingBot生成的双曲形棋盘格感兴趣。为了进一步缩小范围，我希望能够构造一些Uniform Tilings on the Hyperbolic Plane，例如：
我找到的最接近的答案来自Math SE，并推荐以下3种资源：
- Ajit Datar's master's thesis
- David Joyce's Hyperbolic Tessellations applet
- 还有大卫·乔伊斯（David Joyce）对应的Java source code。
在这里，我已将Java翻译为JavaScript（并保留了注释），并试图绘制中心形状：
class Polygon {
constructor(n) {
this.n = n // the number of sides
this.v = new Array(n) // the list of vertices
}
static constructCenterPolygon(n,k,{ quasiregular = false }) {
// Initialize P as the center polygon in an n-k regular or quasiregular tiling.
// Let ABC be a triangle in a regular (n,k0-tiling,where
// A is the center of an n-gon (also center of the disk),// B is a vertex of the n-gon,and
// C is the midpoint of a side of the n-gon adjacent to B.
const angleA = Math.PI / n
const angleB = Math.PI / k
const angleC = Math.PI / 2.0
// For a regular tiling,we need to compute the distance s from A to B.
let sinA = Math.sin(angleA)
let sinB = Math.sin(angleB)
let s = Math.sin(angleC - angleB - angleA)
/ Math.sqrt(1.0 - (sinB * sinB) - (sinA * sinA))
// But for a quasiregular tiling,we need the distance s from A to C.
if (quasiregular) {
s = ((s * s) + 1.0) / (2.0 * s * Math.cos(angleA))
s = s - Math.sqrt((s * s) - 1.0)
}
// Now determine the coordinates of the n vertices of the n-gon.
// They're all at distance s from the center of the Poincare disk.
const polygon = new Polygon(n)
for (let i = 0; i < n; ++i) {
const something = (3 + 2 * i) * angleA
const x = s * Math.cos(something)
const y = s * Math.sin(something)
const point = new Point(x,y)
polygon.v[i] = point
}
return polygon
}
getScreenCoordinateArrays(dimension) {
// first construct a list of all the points
let pointList = null
for (let i = 0; i < this.n; ++i) {
const next = (i + 1) % this.n
const line = new Line(this.v[i],this.v[next])
pointList = line.appendScreenCoordinates(pointList,dimension)
}
// determine its length
let _in = 0
for (let pl = pointList; pl != null; pl = pl.link) {
_in++
}
// now store the coordinates
let pl = pointList
let ix = []
let iy = []
for (let i = 0; i < _in; i++) {
ix[i] = pl.x
iy[i] = pl.y
pl = pl.link
}
return { size: _in,ix,iy }
}
}
class Line {
constructor(a,b) {
this.a = a // this is the line between a and b
this.b = b
// if it's a circle,then a center C and radius r are needed
this.c = null
this.r = null
// if it's is a straight line,then a point P and a direction D
// are needed
this.p = null
this.d = null
// first determine if its a line or a circle
let den = (a.x * b.y) - (b.x * a.y)
this.isStraight = (Math.abs(den) < 1.0e-14)
if (this.isStraight) {
this.p = a; // a point on the line
// find a unit vector D in the direction of the line
den = Math.sqrt(
(a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)
)
let x = (b.x - a.x) / den
let y = (b.y - a.y) / den
this.d = new Point(x,y)
} else { // it's a circle
// find the center of the circle thru these points}
let s1 = (1.0 + (a.x * a.x) + (a.y * a.y)) / 2.0
let s2 = (1.0 + (b.x * b.x) + (b.y * b.y)) / 2.0
let x = (s1 * b.y - s2 * a.y) / den
let y = (a.x * s2 - b.x * s1) / den
this.c = new Point (x,y)
this.r = Math.sqrt(
(this.c.x * this.c.x)
+ (this.c.y * this.c.y)
- 1.0
)
}
}
// Reflect the point R thru the this line
// to get Q the returned point
reflect(point) {
reflection = new Point()
if (this.isStraight) {
const factor = 2.0 * (
(point.x - this.p.x)
* this.d.x
+ (point.y - this.p.y)
* this.d.y
)
reflection.x = 2.0 * this.p.x + factor * this.d.x - point.x
reflection.y = 2.0 * this.p.y + factor * this.d.y - point.y
} else { // it's a circle
const factor = (r * r) / (
(point.x - this.c.x) * (point.x - this.c.x)
+ (point.y - this.c.y) * (point.y - this.c.y)
)
reflection.x = this.c.x + factor * (point.x - this.c.x)
reflection.y = this.c.y + factor * (point.y - this.c.y)
}
return reflection
}
// append screen coordinates to the list in order to draw the line
appendScreenCoordinates(list,dimension) {
let x_center = dimension.width / 2
let y_center = dimension.height / 2
let radius = Math.min(x_center,y_center)
let x = Math.round((this.a.x * radius) + x_center)
let y = Math.round((this.a.y * radius) + y_center)
const conditionA = (list == null || x != list.x || y != list.y)
const conditionB = !isNaN(x) && !isNaN(y)
if (conditionA && conditionB) {
list = new ScreenCoordinateList(list,x,y)
}
if (this.isStraight) { // go directly to terminal point B
x = Math.round((this.b.x * radius) + x_center)
y = Math.round((this.b.y * radius) + y_center)
const conditionC = x != list.x || y != list.y
if (conditionC) {
list = new ScreenCoordinateList(list,y)
}
} else { // its an arc of a circle
// determine starting and ending angles
let alpha = Math.atan2(
this.a.y - this.c.y,this.a.x - this.c.x
)
let beta = Math.atan2(
this.b.y - this.c.y,this.b.x - this.c.x
)
if (Math.abs(beta - alpha) > Math.PI) {
if (beta < alpha) {
beta += (2.0 * Math.PI)
}
} else {
alpha += (2.0 * Math.PI)
}
const curve = new CircularCurve(this.c.x,this.c.y,this.r)
curve.setScreen(x_center,y_center,radius)
list = curve.interpolate(list,alpha,beta)
}
return list;
}
draw(dimensions) {
let x_center = dimensions.width / 2
let y_center = dimensions.height / 2
let radius = Math.min(x_center,y_center)
// yet to write...
}
}
class CircularCurve {
// The circle in the complex plane
constructor(x,y,r) {
// coordinates of the center of the circle
this.x = x
this.y = y
this.r = r // radius of the circle
}
// Add to the list the coordinates of the curve (f(t),g(t)) for t
// between a and b. It is assumed that the point (f(a),g(a)) is
// already on the list. Enough points will be interpolated between a
// and b so that the approximating polygon looks like the curve.
// The last point to be included will be (f(b),g(b)).}
interpolate(list,a,b) {
// first try bending it at the midpoint
let result = this.bent(a,b,(a + b) / 2.0,list)
if (result != list) return result
// now try 4 random points
for (let i = 0; i < 4; ++i) {
const t = Math.random()
result = this.bent(a,(t * a) + ((1.0 - t) * b),list)
if (result != list) return result
}
// it's a straight line
const b1 = this.xScreen(b)
const b2 = this.yScreen(b)
const conditionA = (list.x != b1 || list.y != b2)
const conditionB = !isNaN(b1) && !isNaN(b2)
if (conditionA && conditionB) {
list = new ScreenCoordinateList(list,b1,b2)
}
return list // it's a straight line
}
// Determine if a curve between t=a and t=b is bent at t=c.
// Say it is if C is outside a narrow ellipse.
// If it is bent there,subdivide the interval.
bent(a,c,list) {
const a1 = this.xScreen(a)
const a2 = this.yScreen(a)
const b1 = this.xScreen(b)
const b2 = this.yScreen(b)
const c1 = this.xScreen(c)
const c2 = this.yScreen(c)
const excess =
Math.sqrt((a1 - c1) * (a1 - c1) + (a2 - c2) * (a2 - c2))
+ Math.sqrt((b1 - c1) * (b1 - c1) + (b2 - c2) * (b2 - c2))
- Math.sqrt((a1 - b1) * (a1 - b1) + (a2 - b2) * (a2 - b2))
if (excess > 0.03) {
list = this.interpolate(list,c)
list = this.interpolate(list,b)
}
return list
}
setScreen(x_center,radius) {
// screen coordinates
this.x_center = x_center // x-coordinate of the origin
this.y_center = y_center // y-coordinate of the origin
this.radius = radius // distance to unit circle
}
xScreen(t) {
return Math.round(this.x_center + (this.radius * this.getX(t)))
}
yScreen(t) {
return Math.round(this.y_center + (this.radius * this.getY(t)))
}
getX(t) {
return this.x + (this.r * Math.cos(t))
}
getY(t) {
return this.y + (this.r * Math.sin(t))
}
}
class ScreenCoordinateList {
constructor(link,y) {
// link to next one
this.link = link
// coordinate pair
this.x = x
this.y = y
}
}
class Point {
constructor(x,y) {
this.x = x
this.y = y
}
}body {
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
}<canvas width="1000" height="1000"></canvas>
<script>
window.addEventListener('load',draw)
function draw() {
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const polygon = Polygon.constructCenterPolygon(7,3,{quasiregular: true
})
const { size,iy } = polygon.getScreenCoordinateArrays({
width: 100,height: 100
})
ctx.fillStyle = '#af77e7'
ctx.beginPath()
ctx.moveTo(ix[0],iy[0])
let i = 1
while (i < size) {
ctx.lineTo(ix[i],iy[i])
i++
}
ctx.closePath()
ctx.fill()
}
</script>如何针对HTML5上的JavaScript中的这种n双曲线细分来绘制中心形状和从中心向外绘制1或两层（或者如果方便的话从中心向外绘制{7,3}层）画布？
我现在正在得到这个：
理想情况下，我想绘制上面附加的第一张双曲线细分图像，但是如果考虑到我与戴维·乔伊斯（David Joyce）的工作相距甚远，那么这样做太复杂了，那么第一步就是计算中心多边形并用它绘制填充和线条正确吗？
解决方法
我建议您使用笔触而不是填充，这样您就可以看到多边形为您提供的功能。
运行下面的代码，以便您可以看到不同之处...
现在，将结果与您的图像进行比较，看起来就不像您想要的了
class Polygon {
constructor(n) {
this.n = n // the number of sides
this.v = new Array(n) // the list of vertices
}
static constructCenterPolygon(n,k,{ quasiregular = false }) {
// Initialize P as the center polygon in an n-k regular or quasiregular tiling.
// Let ABC be a triangle in a regular (n,k0-tiling,where
// A is the center of an n-gon (also center of the disk),// B is a vertex of the n-gon,and
// C is the midpoint of a side of the n-gon adjacent to B.
const angleA = Math.PI / n
const angleB = Math.PI / k
const angleC = Math.PI / 2.0
// For a regular tiling,we need to compute the distance s from A to B.
let sinA = Math.sin(angleA)
let sinB = Math.sin(angleB)
let s = Math.sin(angleC - angleB - angleA)
/ Math.sqrt(1.0 - (sinB * sinB) - (sinA * sinA))
// But for a quasiregular tiling,we need the distance s from A to C.
if (quasiregular) {
s = ((s * s) + 1.0) / (2.0 * s * Math.cos(angleA))
s = s - Math.sqrt((s * s) - 1.0)
}
// Now determine the coordinates of the n vertices of the n-gon.
// They're all at distance s from the center of the Poincare disk.
const polygon = new Polygon(n)
for (let i = 0; i < n; ++i) {
const something = (3 + 2 * i) * angleA
const x = s * Math.cos(something)
const y = s * Math.sin(something)
const point = new Point(x,y)
polygon.v[i] = point
}
return polygon
}
getScreenCoordinateArrays(dimension) {
// first construct a list of all the points
let pointList = null
for (let i = 0; i < this.n; ++i) {
const next = (i + 1) % this.n
const line = new Line(this.v[i],this.v[next])
pointList = line.appendScreenCoordinates(pointList,dimension)
}
// determine its length
let _in = 0
for (let pl = pointList; pl != null; pl = pl.link) {
_in++
}
// now store the coordinates
let pl = pointList
let ix = []
let iy = []
for (let i = 0; i < _in; i++) {
ix[i] = pl.x
iy[i] = pl.y
pl = pl.link
}
return { size: _in,ix,iy }
}
}
class Line {
constructor(a,b) {
this.a = a // this is the line between a and b
this.b = b
// if it's a circle,then a center C and radius r are needed
this.c = null
this.r = null
// if it's is a straight line,then a point P and a direction D
// are needed
this.p = null
this.d = null
// first determine if its a line or a circle
let den = (a.x * b.y) - (b.x * a.y)
this.isStraight = (Math.abs(den) < 1.0e-14)
if (this.isStraight) {
this.p = a; // a point on the line
// find a unit vector D in the direction of the line
den = Math.sqrt(
(a.x - b.x) * (a.x - b.x) + (a.y - b.y) * (a.y - b.y)
)
let x = (b.x - a.x) / den
let y = (b.y - a.y) / den
this.d = new Point(x,y)
} else { // it's a circle
// find the center of the circle thru these points}
let s1 = (1.0 + (a.x * a.x) + (a.y * a.y)) / 2.0
let s2 = (1.0 + (b.x * b.x) + (b.y * b.y)) / 2.0
let x = (s1 * b.y - s2 * a.y) / den
let y = (a.x * s2 - b.x * s1) / den
this.c = new Point (x,y)
this.r = Math.sqrt(
(this.c.x * this.c.x)
+ (this.c.y * this.c.y)
- 1.0
)
}
}
// Reflect the point R thru the this line
// to get Q the returned point
reflect(point) {
reflection = new Point()
if (this.isStraight) {
const factor = 2.0 * (
(point.x - this.p.x)
* this.d.x
+ (point.y - this.p.y)
* this.d.y
)
reflection.x = 2.0 * this.p.x + factor * this.d.x - point.x
reflection.y = 2.0 * this.p.y + factor * this.d.y - point.y
} else { // it's a circle
const factor = (r * r) / (
(point.x - this.c.x) * (point.x - this.c.x)
+ (point.y - this.c.y) * (point.y - this.c.y)
)
reflection.x = this.c.x + factor * (point.x - this.c.x)
reflection.y = this.c.y + factor * (point.y - this.c.y)
}
return reflection
}
// append screen coordinates to the list in order to draw the line
appendScreenCoordinates(list,dimension) {
let x_center = dimension.width / 2
let y_center = dimension.height / 2
let radius = Math.min(x_center,y_center)
let x = Math.round((this.a.x * radius) + x_center)
let y = Math.round((this.a.y * radius) + y_center)
const conditionA = (list == null || x != list.x || y != list.y)
const conditionB = !isNaN(x) && !isNaN(y)
if (conditionA && conditionB) {
list = new ScreenCoordinateList(list,x,y)
}
if (this.isStraight) { // go directly to terminal point B
x = Math.round((this.b.x * radius) + x_center)
y = Math.round((this.b.y * radius) + y_center)
const conditionC = x != list.x || y != list.y
if (conditionC) {
list = new ScreenCoordinateList(list,y)
}
} else { // its an arc of a circle
// determine starting and ending angles
let alpha = Math.atan2(
this.a.y - this.c.y,this.a.x - this.c.x
)
let beta = Math.atan2(
this.b.y - this.c.y,this.b.x - this.c.x
)
if (Math.abs(beta - alpha) > Math.PI) {
if (beta < alpha) {
beta += (2.0 * Math.PI)
}
} else {
alpha += (2.0 * Math.PI)
}
const curve = new CircularCurve(this.c.x,this.c.y,this.r)
curve.setScreen(x_center,y_center,radius)
list = curve.interpolate(list,alpha,beta)
}
return list;
}
draw(dimensions) {
let x_center = dimensions.width / 2
let y_center = dimensions.height / 2
let radius = Math.min(x_center,y_center)
// yet to write...
}
}
class CircularCurve {
// The circle in the complex plane
constructor(x,y,r) {
// coordinates of the center of the circle
this.x = x
this.y = y
this.r = r // radius of the circle
}
// Add to the list the coordinates of the curve (f(t),g(t)) for t
// between a and b. It is assumed that the point (f(a),g(a)) is
// already on the list. Enough points will be interpolated between a
// and b so that the approximating polygon looks like the curve.
// The last point to be included will be (f(b),g(b)).}
interpolate(list,a,b) {
// first try bending it at the midpoint
let result = this.bent(a,b,(a + b) / 2.0,list)
if (result != list) return result
// now try 4 random points
for (let i = 0; i < 4; ++i) {
const t = Math.random()
result = this.bent(a,(t * a) + ((1.0 - t) * b),list)
if (result != list) return result
}
// it's a straight line
const b1 = this.xScreen(b)
const b2 = this.yScreen(b)
const conditionA = (list.x != b1 || list.y != b2)
const conditionB = !isNaN(b1) && !isNaN(b2)
if (conditionA && conditionB) {
list = new ScreenCoordinateList(list,b1,b2)
}
return list // it's a straight line
}
// Determine if a curve between t=a and t=b is bent at t=c.
// Say it is if C is outside a narrow ellipse.
// If it is bent there,subdivide the interval.
bent(a,c,list) {
const a1 = this.xScreen(a)
const a2 = this.yScreen(a)
const b1 = this.xScreen(b)
const b2 = this.yScreen(b)
const c1 = this.xScreen(c)
const c2 = this.yScreen(c)
const excess =
Math.sqrt((a1 - c1) * (a1 - c1) + (a2 - c2) * (a2 - c2))
+ Math.sqrt((b1 - c1) * (b1 - c1) + (b2 - c2) * (b2 - c2))
- Math.sqrt((a1 - b1) * (a1 - b1) + (a2 - b2) * (a2 - b2))
if (excess > 0.03) {
list = this.interpolate(list,c)
list = this.interpolate(list,b)
}
return list
}
setScreen(x_center,radius) {
// screen coordinates
this.x_center = x_center // x-coordinate of the origin
this.y_center = y_center // y-coordinate of the origin
this.radius = radius // distance to unit circle
}
xScreen(t) {
return Math.round(this.x_center + (this.radius * this.getX(t)))
}
yScreen(t) {
return Math.round(this.y_center + (this.radius * this.getY(t)))
}
getX(t) {
return this.x + (this.r * Math.cos(t))
}
getY(t) {
return this.y + (this.r * Math.sin(t))
}
}
class ScreenCoordinateList {
constructor(link,y) {
// link to next one
this.link = link
// coordinate pair
this.x = x
this.y = y
}
}
class Point {
constructor(x,y) {
this.x = x
this.y = y
}
}<canvas width="400" height="400"></canvas>
<script>
window.addEventListener('load',draw)
function draw() {
const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
ctx.translate(150,150);
const polygon = Polygon.constructCenterPolygon(7,3,{quasiregular: true})
const { size,iy } = polygon.getScreenCoordinateArrays({width: 80,height: 80})
for (i = 0; i < size; i++) {
ctx.lineTo(ix[i],iy[i])
}
ctx.stroke()
}
</script>
但是，如果您要解决的所有问题是：
第一步是计算中心多边形并绘制
该中心多边形看起来像一个等边的多边形，代码可能会更简单，请参见下文
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
function drawEquilateralPolygon(x,lines,size) {
ctx.beginPath();
for (angle = 0; angle < 360; angle += 360/lines) {
a = angle * Math.PI / 180
ctx.lineTo(x + size * Math.sin(a),y + size * Math.cos(a));
}
ctx.lineTo(x + size * Math.sin(0),y + size * Math.cos(0));
ctx.stroke();
}
drawEquilateralPolygon(20,20,5,20)
drawEquilateralPolygon(80,50,6,30)
drawEquilateralPolygon(160,60,7,40)<canvas id="c"></canvas>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。