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

Вход на сайт

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

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

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

torrvic, возможно, Вам нужно добавить -lGLU
Извините за тупой вопрос. У меня при сборке Вашего примера выходит ошибка: "undefined reference to gluLookAt". Не могу найти в какой библиотеке находится эта функция. У меня задано: -lGL -lglut ... Искал в /usr/lib таким образом: nm lib*so* | grep...
Здравствуйте. Спасибо за проект. У меня вопрос, по какой причине определение принадлежности точки многоугольнику работает некорректно, если координаты из больших чисел состоят, например: int[] vertex = new int[] {...
Сейчас проверила нашла причину не запускания // Создание контекста воспроизведения OpenGL и привязка его к панели на форме OpenGLControl1:=TOpenGLControl.Create(Self); with OpenGLControl1 do begin Name:='OpenGLControl1'; //вот тут...
Ну..кажется что то пошло не так http://pp.usera...

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

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

<body style="background:#000">
<canvas id="myCanvas" style="background: #666; z-index:1; position:absolute; left: 500px; top: 300px"></canvas>
<canvas id="myCanvas2" style="background: rgba(0,0,0,0); z-index:2; position:absolute; left: 500px; top: 300px"></canvas>
</body>
<script>
var click = false //тригерим нажатие (для рисованя и смещения лампочки)
var mouse = false
var go = false
var e = 3
canvas = document.getElementById("myCanvas") //динамический слой (обновляется каждый фрейм)
canvas2 = document.getElementById("myCanvas2") //статический (на нем рисуем)
ctx = canvas.getContext("2d")
ctx2 = canvas2.getContext("2d")
w = canvas2.width = canvas.width = 500
h = canvas2.height = canvas.height = 500
source = {x:w/2,y:h/2} //источник света
segments = [] // массив для хранения отрисованных отрезков
var temp
var lightmove = false
 
ctx.lineWidth = 2
ctx2.lineWidth = 5
document.addEventListener("mousedown", function(e){
	if(e.clientX-500>source.x-20&&e.clientX-500<source.x+20&&e.clientY-300>source.y-20&&e.clientY-300<source.y+20){
		lightmove=true
		mouse=e
	}
	else {click=e; go=true}
	})//передаем событие в переменную (в нем содержатся координаты нажатия)
document.addEventListener("mousemove", function(e){mouse=e})
document.addEventListener("mouseup", function(e){
	mouse=false
	ctx2.closePath()
	go=false
	lightmove=false
})
function shadow(a,b){ //отрисовка тени
	//немного смещаем границы отреезка, чтобы тень от фигуры сливалась в одну
	a1 = {x: a.x-b.x, y: a.y-b.y}
	len1 = Math.sqrt(a1.x*a1.x + a1.y*a1.y)
	b1 = {x: b.x-a.x, y: b.y-a.y}
	len2 = Math.sqrt(b1.x*b1.x + b1.y*b1.y)
	aNew = {x: a.x+a1.x/len1, y:a.y+a1.y/len1}
	bNew = {x: b.x+b1.x/len1, y:b.y+b1.y/len1}
	a=aNew;b=bNew
	//векторы-проекторы заведомо большего размера
	v1 = {x:(a.x-source.x)*1000,y:(a.y-source.y)*1000}
	v2 = {x:(b.x-source.x)*1000,y:(b.y-source.y)*1000}
	//заливаем четырехугольник, состоящий из точек отрезка и точек пересечения лучей с границами
	ctx.beginPath()
	ctx.moveTo(a.x,a.y)
	ctx.lineTo(a.x+v1.x,a.y+v1.y)
	ctx.lineTo(b.x+v2.x,b.y+v2.y)
	ctx.lineTo(b.x,b.y)
	ctx.lineTo(a.x,a.y)
	ctx.fillStyle="#333"
	ctx.fill()
	ctx.closePath()
}
var first
function draw(){
	ctx.clearRect(0,0,w,h) //очищаем canvas (только 1ый)
 
	ctx.beginPath()
	if(lightmove){source.x=mouse.clientX-500;source.y=mouse.clientY-300}//двигаем лампу
	var grd=ctx.createRadialGradient(source.x,source.y,300,source.x,source.y,10)
	grd.addColorStop(1,"white")
	grd.addColorStop(0,"#666")
	ctx.arc(source.x,source.y,310,0,Math.PI*2)//русуем источник света
 
	ctx.fillStyle=grd
	ctx.fill()
	ctx.closePath()
 
	if(click){//рисуем первую точку
		ctx2.beginPath()
		ctx2.moveTo(click.clientX-500, click.clientY-300)
		first = temp = {x:click.clientX-500,y:click.clientY-300}
		click=false
 
	}
	if(mouse&&go){
		ctx2.lineTo(mouse.clientX-500, mouse.clientY-300)
		segments.push({a:temp,b:{x:mouse.clientX-500,y:mouse.clientY-300}})
		temp = {x:mouse.clientX-500,y:mouse.clientY-300}
		if(temp.x>first.x-8&&temp.x<first.x+8&&temp.y>first.y-8&&temp.y<first.y+8){
			ctx2.fillStyle = "#000" //если контур замкнулся - заливаем
			ctx2.fill()
		}
		ctx2.strokeStyle = "#000"
		ctx2.stroke()
	}
	for (i of segments){ //отбрасываем тень от всех сегментов
		shadow(i.a,i.b)
	}
	requestAnimationFrame(draw)
}
draw()
</script>

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