itsnickbarry / hyperbolic-canvas Goto Github PK
View Code? Open in Web Editor NEWThe Poincaré disk model of the hyperbolic plane on the HTML canvas 💫
Home Page: https://ItsNickBarry.github.io/hyperbolic-canvas
License: MIT License
The Poincaré disk model of the hyperbolic plane on the HTML canvas 💫
Home Page: https://ItsNickBarry.github.io/hyperbolic-canvas
License: MIT License
The polygon is acting strange. No idea why. I would fix it if I knew more about hyperbolic geometry. https://gist.github.com/x13machine/f6964cd6df7dd0ec809b
The Line object currently represents lines, line segments, and rays, in both the Euclidean and hyperbolic sense. This is potentially confusing, and the Line object should be split into multiple objects.
It's suppose to wrap the player around to the other side. Some place it's not working. I'm assuming the math is wrong.
https://gist.github.com/x13machine/5b0f7aba9a91ad351873
https://github.com/ItsNickBarry/hyperbolic-canvas/blob/gh-pages/lib/Point.js#L51
should be:
var point = Point.givenHyperbolicPolarCoordinates(this.distanceFromCenter() - distance,self.distance > distance?thisAngle:angle);
I think that's right.
I was going to convert the polar coordinates to something like x = angle.cos() * raduis, y = angle.sin() * radius. Then run this library on on the converted output: https://github.com/gfx-rs/genmesh Would this be accurate?
This only happens when I change these:
c.ctx.shadowColor = color;
c.ctx.shadowBlur = 40;
c.ctx.strokeStyle = color;
c.ctx.lineWidth = 2;
https://gist.github.com/x13machine/1c8344d87a698255b0f6
Any ideas on how I could fix this? I saw something similar happen like this with bezier curves.
Hello, and thanks for the nice software! It fits best for my school project, so I would like to learn how to use this software, but I'm having troubles understanding it.
Given Poincaree disk, represented as a circle in the Cartesian coordinate system, centered at the origin (0, 0)
and having radius 1
, I have some questions:
Given a point in hyperbolic plane defined using hyperbolic polar coordinates (r, φ)
that projects into the point (x, y)
(Euclidean non-polar coordinates) on the Poincaree disk, how to express x
and y
respectively using r
and φ
? What formula would it be?
Given two points in hyperbolic plane P1
and P2
defined using hyperbolic polar coordinates (r1, φ1)
and (r2, φ2)
respectively. Given polar hyperbolic point P3 (r3, φ3)
as the linear interpolation between P1
and P2
parametrized with some variable k
(between 0
(gives P1
) and 1
(gives P2
)). How to express r3
and φ3
using r1, φ1, r2, φ2, k
?
Given hyperbolic line L1
defined by polar hyperbolic points (1, 0)
and (1, π)
. Given hyperbolic line L2
that is parallel to the L1
(in hyperbolic plane) and that, when projected to the Poincaree disk, has vertical symmetry. Given hyperbolic polar point Q
on L2
that is closest to the origin and hyperbolic distance from Q
to the origin is n
, and Q
projects above the origin on the Poincaree disk. The set of all hyperbolic polar points on line L2
is defined as P(k)
where parameter k
is a real number in range (-∞, +∞)
, such that for k < 0
points project to the left side of the Poincaree disk and for k > 0
points project to the right side of the Poincaree disk, while P(0)
is Q
. Question: how to express P(k)
using n
and k
?
Note: I tried to make questions mathematically formal in order to avoid confusion or spoken language imprecision. I was also reading math papers and wikipedia page about hyperbolic geometry, but still can't find answers to these questions.
Regarding question 1: I read source code and if I understand correctly, x = tanh(r / 2) * cos(φ)
and y = tanh(r / 2) * sin(φ)
, is that correct? If yes, where did the formula come from?
Regarding question 2, I tried to define two hyperbolic points and draw a line between them by iterating k
from 0
to 1
and drawing small straight line segments between two consecutive interpolated points. However, no matter what I try, the arc curves to the opposite direction and is mislaced on the Poincaree disk. Same happens regarding question 3: the line curves downwards instead of upwards.
Precise formulas for all 3 questions would be preferred over spoken language explanation, since I am trying to finish my project and I can later understand how it works. Thank you in advance for your time.
When I was working on a hyperbolic geometry idea the Point.js script threw an error with a huge call stack, consisting of these three over and over:
isIdealPoint.js:256
getHyperbolicRadiusPoint.js:63
getEuclideanRadiusPoint.js:42
Apparently isIdealPoint
calls getHyperbolicRadiusPoint
which calls getEuclideanRadiusPoint
which calls isIdealPoint
... perhaps, change isIdealPoint
to not use the other two functions?
NOTE: I'm not sure if this bug even exists or if my version of the library is outdated.
does Line.hyperbolicIntersect work?
I have to radius set to 7 on q polygon to have reach the end of the disk. The maximum x,y is 1. Shouldn't the radius be 1 to reach the end of the screen? why is it 7?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.