Форум

voraa · #11 (**permalink**) 24.12.2021, 15:43

Этот алгоритм удваивает количество вершин.
Если есть произвольный N угольник вписанный в окружность, то он строит 2*N угольник.
Если начать с треугольника, то получится 6-угольник на следующем шаге.

Teamur · #12 (**permalink**) 24.12.2021, 15:55

voraa,
тогда для 5, 7, 9, 11 угольников и тд надо будет извращаться ))

voraa · #13 (**permalink**) 24.12.2021, 16:03

А цель - строить произвольный многоугольник вписанный в окружность?
Ну да. Не любой можно построить без тригонометрии
Собственно только с треугольника и квадрата можно начинать. Так как там фигурируют углы в 30, 60, 45, синусы и косинусы которых можно вычислить квадратными корнями и дробями.

С другой стороны, если в этом большая необходимость, но вы подозреваете, что из-за вычисления синусов и косинусов будут какие то тормоза, то там не так много и вычислять. Например, для пятиугольника могут быть нужны син и кос углов типа 36, 72, 18. Ну вычислить их один раз, записать в переменные, и потом работать с ними.

Rise · #14 (**permalink**) 24.12.2021, 17:00

Teamur,
А зачем вы в цикле их (косинусы и синусы) считаете они же не меняются или нет?

Teamur · #15 (**permalink**) 24.12.2021, 17:17

Сообщение от voraa

А цель - строить произвольный многоугольник вписанный в окружность?

Да

Сообщение от Rise

А зачем вы в цикле их (косинусы и синусы) считаете они же не меняются или нет?

Там радианы меняются, а надо как-то получать координаты вершин

Rise · #16 (**permalink**) 24.12.2021, 18:17

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>

voraa · #17 (**permalink**) 24.12.2021, 20:34

Сообщение от Teamur

Там радианы меняются, а надо как-то получать координаты вершин

Так они не произвольно меняются, а все время на один и тот же угол.
Синусы косинусы достаточно один раз вычислить

<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>

Teamur · #18 (**permalink**) 24.12.2021, 20:41

Сообщение от Rise

Матрицы трансформации надо

матрицы - это, конечно, здорово, но в цикле конструктора Path синус и косинус.
Вообще если смотреть на круг как на правильный многоугольник, количество вершин которого стремиться к бесконечности, то многоугольники с небольшим числом вершин, по сути, подчиняются тем же законам построения что и круг.
Отличие лишь в том что в качестве основы тригонометрии взяли многоугольник, состоящий из 360 граней и назвали одну грань градусом.
Я же хочу понять эти закономерности и вывести, если смогу, формулу, позволяющую мне самому задавать разбивку круга = градусную меру,
а число ПИ - это предельный случай.
Длина окружности = периметр правильного многоугольника с бесконечным числом вершин.
В общем, есть чувство, что можно что-то вывести. Пока мне интересно, я буду пробовать, а если не смогу, то вернусь к косинусам или, действительно, предварительно вычислю их, и нап сформирую массив, в котором начиная с индекса 3 будут вычисленные значения
SINCOS[ , , ,[sin,cos],[sin,cos],... ].

Ну и в цикле по индексу что-то вроде

let[sin,cos]=SINCOS[n++]; cx.lineTo(x+d*sin,y+d*cos);

voraa · #19 (**permalink**) 24.12.2021, 20:45

Углы все одинаковые. От 0 до 360 с шагом 360/n
Школу вспомни.
синусы/косинусы суммы углов
Зная син/кос текущего угла, на получение син/кос следующего надо 4 умножения и 2 сложения.

Teamur · #20 (**permalink**) 24.12.2021, 21:22

Сообщение от voraa

Школу вспомни

синусы, косинусы, медианы, высоты, хорды, ... начинаю вспоминать ))

Сообщение от voraa

4 умножения и 2 сложения

вот она простота !

Форум

Справочник

Discord чат

Курсы javascript