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

Вход на сайт

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

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

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

Спасибо за реализацию, она действительно быстрая. Но не все линии отрисовывает в нужную сторону... Необходимо добавить проверку для случая X-линии if(y1 "<" y0) grad=-grad; и аналогично для Y-линии if(x1 "<" x0) grad=-grad; P.S. На...
Отличные уроки(учу GL по ним), только в renderScene нужно добавить очистку буфера цвета и буфера глубины. При изменении размеров треугольники размножаются)
как исправить это , сделал все по инструкции
Timer1 - выдает ошибку. Использовал IdleTimer1, работает! unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls, ExtCtrls, OpenGLContext, GL, GLU; type { TForm1 } TForm1 =...
в коде присутствуют ошибки! // Считываем координаты procedure TForm1.getCoords(Sender: TObject); var j1:longint; begin n:= StrToInt(Edit2.Text); //число точек s1:=Edit1.Text; s2:=''; i := 1; j:=1; k:=0...

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

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

<body style="background: black">
<canvas id="canvas1" style="background: black; position:absolute"></canvas>
</body>
<script>
canvas = document.getElementById("canvas1") 
ctx = canvas.getContext("2d")
w = canvas.width = 500
h = canvas.height = 500
canvas.style.top = window.innerHeight/2 - h/2 + "px"
canvas.style.left = window.innerWidth/2 - w/2 + "px"
ctx.lineWidth = 2
ctx.fillStyle = '#fff'
ctx.strokeStyle = '#fff'
 
ctx.translate(w/2,h/2) 
 
function point(x,y){ //структура: 2D точка
	this.x = x
	this.y = y
}
var points = [new point(100,100),new point(-100,100),new point(-100,-100),new point(100,-100)] //вершины
var edges = [
[0,1], [0,2], [1,3], [3,2],
[0,3], [2,1]
]	//ребра
 
s=5 //скорость анимации
shots = [] //стек, чтобы прокручивать анимацию обратно
stop = false
first=true
wait = 0
function drawfigure(){ //функция отрисовки вершин и связей
	for(i of edges){
		ctx.beginPath()
		ctx.moveTo(points[i[0]].x,points[i[0]].y);
		ctx.lineTo(points[i[1]].x,points[i[1]].y);
		ctx.stroke()
		ctx.closePath()
	}
	for(j of points){
		ctx.beginPath()
		ctx.moveTo(j.x-10,j.y-10);
		ctx.lineTo(j.x+10,j.y-10);
		ctx.lineTo(j.x+10,j.y+10);
		ctx.lineTo(j.x-10,j.y+10);
		ctx.lineTo(j.x-10,j.y-10);
		ctx.fill()
		ctx.closePath()
	}
}
function draw(){
	if(wait)wait--//отсчет паузы
	else{
		ctx.clearRect(-w/2,-h/2,w,h)//очищаем canvas
		if(points[3].y!=0){//если последня точка еще не в нуле
			if(!wait)
				for(i in points){
					if(i%2!=0){ //двигаем четные и нечетные в обратом порядке
						if(points[i].x!=0)
							points[i].x>0?points[i].x-=s:points[i].x+=s
						else if (points[i].y!=0)
							points[i].y>0?points[i].y-=s:points[i].y+=s
						if(Math.abs(points[i].x)>50)break //начинаем движение след. точки, когда текущая пройдет половину пути
					}
					else{
						if (points[i].y!=0)
							points[i].y>0?points[i].y-=s:points[i].y+=s
						else if(points[i].x!=0)
							points[i].x>0?points[i].x-=s:points[i].x+=s
						if(Math.abs(points[i].y)>50)break
					}
				}
			drawfigure()//рисуем фигуру
		}
		if(points[3].y==0&&shots.length>0&&!wait){
			if(first){
				wait = 30 //запускаем паузу
				first=false
			}
			else
				ctx.putImageData(shots.pop(),-w/2,-h/2)//скриншоты - в стек
		}
		else if(points[3].y!=0)
				shots.push(ctx.getImageData(-w/2,-h/2,2*w,2*h)) //достаем скрины из стека
			else{ //запускаем анимацию заново
				points = [new point(100,100),new point(-100,100),new point(-100,-100),new point(100,-100)]
				drawfigure()
				first=true
				wait=30
			}
	}
	requestAnimationFrame(draw)
}
draw()
</script>

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