Add dynamic line thickness
This commit is contained in:
parent
c5e9d763ce
commit
93816fad4b
|
@ -123,8 +123,9 @@ class Line {
|
||||||
* Global constants.
|
* Global constants.
|
||||||
*/
|
*/
|
||||||
const settings = {
|
const settings = {
|
||||||
dotRadius: 10,
|
dotRadius: 20,
|
||||||
fillGoal: 0.3,
|
fillGoal: 0.3,
|
||||||
|
lineThicknesses: [1, 5, 15],
|
||||||
stepTime: 250,
|
stepTime: 250,
|
||||||
stepsPerLevel: 5,
|
stepsPerLevel: 5,
|
||||||
zoomSpeed: 1 / 30,
|
zoomSpeed: 1 / 30,
|
||||||
|
@ -142,8 +143,7 @@ doAfterLoad(() => {
|
||||||
|
|
||||||
|
|
||||||
// Model
|
// Model
|
||||||
// TODO: Dynamic thickness calculation
|
const lines: Line[] = [new Line(settings.lineThicknesses[0]), new Line(settings.lineThicknesses[1])];
|
||||||
const lines: Line[] = [new Line(1), new Line(5)];
|
|
||||||
let step = 0;
|
let step = 0;
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const currentLevel = lines.findIndex(it => it.segments.length !== 25);
|
const currentLevel = lines.findIndex(it => it.segments.length !== 25);
|
||||||
|
@ -164,7 +164,7 @@ doAfterLoad(() => {
|
||||||
|
|
||||||
if (lowerLines.segments.length !== 0 && lowerLines.segments.length % 5 === 0) {
|
if (lowerLines.segments.length !== 0 && lowerLines.segments.length % 5 === 0) {
|
||||||
if (lines.length <= inductionLevel) {
|
if (lines.length <= inductionLevel) {
|
||||||
lines[inductionLevel] = new Line(5 ** inductionLevel);
|
lines[inductionLevel] = new Line(settings.lineThicknesses[level] / zoomFactor);
|
||||||
}
|
}
|
||||||
|
|
||||||
lines[inductionLevel].segments.push(lowerLines.sumSegmentsSlice(-settings.stepsPerLevel));
|
lines[inductionLevel].segments.push(lowerLines.sumSegmentsSlice(-settings.stepsPerLevel));
|
||||||
|
@ -208,13 +208,13 @@ doAfterLoad(() => {
|
||||||
|
|
||||||
// Zoom
|
// Zoom
|
||||||
const excessFactor = Math.max(
|
const excessFactor = Math.max(
|
||||||
((1 / zoomFactor) * maxPoint.x) / (canvas.width * settings.fillGoal),
|
(zoomFactor * maxPoint.x) / (canvas.width * settings.fillGoal),
|
||||||
((1 / zoomFactor) * maxPoint.y) / (canvas.height * settings.fillGoal)
|
(zoomFactor * maxPoint.y) / (canvas.height * settings.fillGoal)
|
||||||
);
|
);
|
||||||
if (excessFactor > 1) {
|
if (excessFactor > 1) {
|
||||||
zoomFactor *= excessFactor ** settings.zoomSpeed;
|
zoomFactor /= excessFactor ** settings.zoomSpeed;
|
||||||
}
|
}
|
||||||
ctx.scale(1 / zoomFactor, 1 / zoomFactor);
|
ctx.scale(zoomFactor, zoomFactor);
|
||||||
|
|
||||||
// Lines
|
// Lines
|
||||||
ctx.strokeStyle = "#ffffff";
|
ctx.strokeStyle = "#ffffff";
|
||||||
|
|
Loading…
Reference in New Issue