Уроки, алгоритмы, программы, примеры

Вход на сайт

Материалы по разделам

Построения
на плоскости (2D)
Графика
в пространстве (3D)
Вычислительная
геометрия
Физическое
моделирование
Фрактальная
графика

Новые комментарии

Как реализовать в данном примере границы расчёта?
Не работает, выводит это: Process terminated with status 4258096 (0 minute(s), 2 second(s)) при этом открывается консоль с тем же числом

Счетчики и рейтинг

Рейтинг@Mail.ru Яндекс.Метрика
Язык программирования: 
Javascript
Среда программирования: 
HTML5 + JS

<head>
</head>
<body style="background: #000">
<form id="frm1" style="z-index:100;position:relative; left: 0px; top: 0px"><input type="text"></form>
<form id="frm2" style="z-index:100;position:relative; left: 0px; top: 0px"><input type="text"></form>
<form id="frm3" style="z-index:100;position:relative; left: 0px; top: 0px"><input type="text"></form>
<button onclick="extract()" style="z-index:100;position:relative; left: 0px; top: 0px">go</button>
<canvas id="myCanvas" style="background: #000; z-index:1; position:absolute; left: 0px; top: 0px"></canvas>
<canvas id="myCanvas2" style="background: rgba(0,0,0,0); z-index:2; position:absolute; left: 0px; top: 0px"></canvas>
</body>
<script>
/*** формы для ввода параметров, запуск по нажатию enter ***/
document.addEventListener("keypress", function(e){if(e.keyCode==13){e.preventDefault();extract();}})
var speed1 = 0.1
var speed2 = 0.25
var speed3 = 0.1
function extract() {
	ctx2.clearRect(-w/2,-h/2, w, h)
	t1 = speed1; t2 = speed2; t3 = speed3
	ctx2.beginPath()
	trig = false
	ctx2.moveTo(300,0)
	speed1 = parseFloat(document.getElementById("frm1").elements[0].value);
	speed2 = parseFloat(document.getElementById("frm2").elements[0].value);
	speed3 = parseFloat(document.getElementById("frm3").elements[0].value);
}
canvas = document.getElementById("myCanvas") //2 холста. 1ый - обновляемая анимация спирографа
canvas2 = document.getElementById("myCanvas2") //2ой - статическая отрисовка траектории
ctx = canvas.getContext("2d")
ctx2 = canvas2.getContext("2d")
w = canvas2.width = canvas.width = window.innerWidth
h = canvas2.height = canvas.height = window.innerHeight
ctx.lineWidth = 2
ctx2.lineWidth = 4
ctx.fillStyle = '#fff'
ctx2.fillStyle = '#fff'
ctx.strokeStyle = '#fff'
ctx2.strokeStyle = '#fff'
 
var t1 = speed1, t2 = speed2, t3 = speed3 // парматры (скорость движения плеч спирографа)
var trig = false
var e = 1
ctx.translate(w/2,h/2)
ctx2.translate(w/2,h/2)
var circle = Math.PI*2
ctx2.beginPath()
ctx2.moveTo(300,0)
function draw(){
	ctx.clearRect(-w/2,-h/2, w, h) //очищаем canvas (только 1ый)
	ctx.beginPath()
	ctx.moveTo(0,0)
	//рисуем плечи
	ctx.lineTo(100*Math.cos(t1), 100*Math.sin(t1))
	ctx.lineTo(100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t2)+100*Math.sin(t1))
	ctx.lineTo(100*Math.cos(t3)+100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t3)+100*Math.sin(t2)+100*Math.sin(t1))
	ctx.stroke()
	ctx.closePath()
	//рисуем шарики 
	ctx.beginPath()
	ctx.arc(100*Math.cos(t1), 100*Math.sin(t1), 7, 0, Math.PI*2)
	ctx.fill()
	ctx.closePath()
	ctx.beginPath()
	ctx.arc(100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t2)+100*Math.sin(t1), 7, 0, Math.PI*2)
	ctx.arc(100*Math.cos(t3)+100*Math.cos(t2)+100*Math.cos(t1), 100*Math.sin(t3)+100*Math.sin(t2)+100*Math.sin(t1),7, 0, Math.PI*2)
	ctx.fill()
	ctx.closePath()
	if(!trig){//оптимизация - перестаем отрисовывать, если траектория замкнулась
		//отрисовываем траекторию на 2м canvas
		var x = 100*Math.cos(t3)+100*Math.cos(t2)+100*Math.cos(t1)
		var y = 100*Math.sin(t3)+100*Math.sin(t2)+100*Math.sin(t1)
		ctx2.lineTo(x,y)
		ctx2.stroke()
	}
	if(x>300-e&&x<300+e&&y>-e&&y<e){ctx2.closePath();trig=true} // траектория замкнулась?
 
	t1=(t1+speed1)%circle; t2=(t2+speed2)%circle; t3=(t3+speed3)%circle //инкремент соответствующих переменных
	requestAnimationFrame(draw)
}
draw()
</script>

Прикрепленный файлРазмер
sirota_spirograph.rar1.38 кб