Этот алгоритм удваивает количество вершин.
Если есть произвольный N угольник вписанный в окружность, то он строит 2*N угольник. Если начать с треугольника, то получится 6-угольник на следующем шаге. |
voraa,
тогда для 5, 7, 9, 11 угольников и тд надо будет извращаться )) |
А цель - строить произвольный многоугольник вписанный в окружность?
Ну да. Не любой можно построить без тригонометрии Собственно только с треугольника и квадрата можно начинать. Так как там фигурируют углы в 30, 60, 45, синусы и косинусы которых можно вычислить квадратными корнями и дробями. С другой стороны, если в этом большая необходимость, но вы подозреваете, что из-за вычисления синусов и косинусов будут какие то тормоза, то там не так много и вычислять. Например, для пятиугольника могут быть нужны син и кос углов типа 36, 72, 18. Ну вычислить их один раз, записать в переменные, и потом работать с ними. |
Teamur,
А зачем вы в цикле их (косинусы и синусы) считаете они же не меняются или нет? |
Цитата:
Цитата:
|
Teamur,
Матрицы трансформации надо: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Matrix</title>
</head>
<body>
<canvas id="canvas" width=600 height=300 style="outline:1px solid"></canvas>
<script>
class Path extends Path2D {
constructor(radius, vertices) {
super();
for (let A = 2 * Math.PI / vertices, a, i = 0; i < vertices; i++) {
a = i * A;
this.lineTo(radius * Math.cos(a), radius * Math.sin(a));
}
this.closePath();
}
}
class Polygon {
constructor(x, y, path) {
this.path = path;
this.matrix = new DOMMatrix();
this.translate(x, y);
this.rotate(0);
this.scale(1);
}
translate(x, y) {
this.matrix.translateSelf(x, y);
}
rotate(angle) {
this.matrix.rotateSelf(angle);
}
scale(factor) {
this.matrix.scaleSelf(factor);
}
render(ctx, color) {
ctx.save();
ctx.setTransform(this.matrix);
ctx.strokeStyle = color;
ctx.stroke(this.path);
ctx.restore();
}
}
const ctx = canvas.getContext('2d');
let path1 = new Path(50, 5);
let path2 = new Path(100, 10);
let polygon1 = new Polygon(150, 100, path1);
polygon1.rotate(-90);
polygon1.render(ctx, 'green');
let polygon2 = new Polygon(450, 100, path1);
polygon2.render(ctx, 'blue');
let polygon3 = new Polygon(300, 150, path2);
polygon3.render(ctx, 'red');
setTimeout(() => {
polygon3.translate(0, -50);
polygon3.scale(0.5);
polygon3.render(ctx, 'gray');
}, 3000);
</script>
</body>
</html>
|
Цитата:
Синусы косинусы достаточно один раз вычислить <body>
<label>Количество вершин: <input id="nu" type="number" min="3" value=3></label>
<button id="p2">Построить</button>
<br>
<svg width="410" height="410" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="205" cy="205" r="200" stroke="black" fill="transparent" stroke-width="1"/>
<polygon id="mnog" stroke="red" fill="transparent" stroke-width="1"/>
</svg>
<script>
const cx = 205
const cy = 205
const R = 200;
const draw = (mnog) => document.getElementById('mnog').setAttribute('points', mnog.flat())
const mnogoug = (n) => {
const a = Math.PI*2/n;
const sa = Math.sin(a)
const ca = Math.cos(a)
let sc = 0.;
let cc = 1.;
const mnog = []
for (let i=0; i< n; i++) {
mnog.push([R*cc+cx, R*sc+cy])
let tsc = sc;
sc = sc*ca+cc*sa;
cc = cc*ca-tsc*sa;
}
return mnog
}
document.getElementById('p2').addEventListener('click', () => {
const n = document.getElementById('nu').valueAsNumber;
mnog = mnogoug(n)
draw(mnog)
})
</script>
</body>
|
Цитата:
Вообще если смотреть на круг как на правильный многоугольник, количество вершин которого стремиться к бесконечности, то многоугольники с небольшим числом вершин, по сути, подчиняются тем же законам построения что и круг. Отличие лишь в том что в качестве основы тригонометрии взяли многоугольник, состоящий из 360 граней и назвали одну грань градусом. Я же хочу понять эти закономерности и вывести, если смогу, формулу, позволяющую мне самому задавать разбивку круга = градусную меру, а число ПИ - это предельный случай. Длина окружности = периметр правильного многоугольника с бесконечным числом вершин. В общем, есть чувство, что можно что-то вывести. Пока мне интересно, я буду пробовать, а если не смогу, то вернусь к косинусам или, действительно, предварительно вычислю их, и нап сформирую массив, в котором начиная с индекса 3 будут вычисленные значения SINCOS[ , , ,[sin,cos],[sin,cos],... ]. Ну и в цикле по индексу что-то вроде let[sin,cos]=SINCOS[n++]; cx.lineTo(x+d*sin,y+d*cos); |
Углы все одинаковые. От 0 до 360 с шагом 360/n
Школу вспомни. синусы/косинусы суммы углов Зная син/кос текущего угла, на получение син/кос следующего надо 4 умножения и 2 сложения. |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 00:10. |