@Uncle_Savva

Чем бы это могло быть?

Я рисовал освещение с тенями при помощи рейкастинга, и обнаружил вот это:
5edba29cc0279397298635.png
Подскажите пожалуйста, что это и как от этого избавиться?

Код на html (не пинайте):

<body>
<canvas id="canvas" width="600" height="600"></canvas>

<script type="text/javascript">
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")

document.body.style.overflow = "hidden"
document.body.style.backgroundColor = "black"



ctx.globalAlpha = 0.5
ctx.fillStyle = "rgb(50, 50, 50)"
ctx.fillRect(0, 0, 1500, 1500)

blocksize = 50
gg = []

player_x = 450
player_y = -100

Block = function(x, y) {
this.x = x
this.y = y
}

Block.prototype.draw = function() {
ctx.fillStyle = "black"
ctx.globalAlpha = 1
ctx.fillRect(this.x, this.y, blocksize, blocksize)
};

blocks = [new Block(0, 0), new Block(50, 0), new Block(100, 0), new Block(0, 0), new Block(150, 0), new Block(200, 0), new Block(250, 0), new Block(300, 0), new Block(550, 0), new Block(550, 50), new Block(500, 0), new Block(500, 50), new Block(0, 500), new Block(50, 500),
new Block(100, 500),
new Block(150, 500),
new Block(200, 500),
new Block(250, 500),
new Block(300, 500),
new Block(350, 500),
new Block(400, 500),
new Block(450, 500),
new Block(500, 500),
new Block(550, 500),
new Block(350, 300),
new Block(400, 200)
]

window.onload = function(){
for (var i = blocks.length - 1; i >= 0; i--) {
blocks[i].draw()
}
}


var x, y = 0

function coll(arr, x1, y1) {
for (var i = arr.length - 1; i >= 0; i--) {
if (arr[i].x <= x1 && arr[i].x + blocksize >= x1 && arr[i].y <= y && arr[i].y + blocksize >= y) {
return true
}
}
return false
}

function newLight(xl, yl, color, startAlpha, deltaAlpha, angle, width) {
	c = 0
i = 0
n = 0
g = false
while (c < width) {
i = 0
g = true

while (i < 1000) {
x = xl + i*Math.cos(c*0.002 + angle);
y = yl + i*Math.sin(c*0.002 + angle);

if (coll(blocks, x, y) == false) {
ctx.globalAlpha = startAlpha - i*deltaAlpha
ctx.fillStyle = color
ctx.fillRect(x, y, 1, 1)
} else {
break
}

i += 1
}
c += 1
}
}
newLight(player_x, player_y, "rgb(255, 255, 128)", 0.2, 0.00012, 1, 1024)

//newLight(player_x - 200, player_y + 200, "lime", 0.1, 0.00012, 1, 3142)

for (var i = blocks.length - 1; i >= 0; i--) {
blocks[i].draw()
}
</script>
</body>


P.S
Заметил что в firefox такого нет, в отличии от google chrome
  • Вопрос задан
  • 301 просмотр
Решения вопроса 1
@forspamonly2
это муар между регулярной пиксельной сеткой и рисуемыми по некруглым координатам шагами ваших лучей. в фаерфоксе он точно так же есть.

рейкастинг делается в обратную сторону. нужно идти по пикселам картинки и проверять не заслоняет ли конкретно этому пикселу какой-нибудь объект источник света.

вот, добавил вам первый же нагуглённый метод определения пересечений (отсюда https://stackoverflow.com/questions/99353/how-to-t... ):



зы. код у вас ужасный, не потому что "на хтмл", а потому что половина переменных не объявлена и попадает в глобальный контекст, плюс вы пытаетесь рисовать каждую точку отдельным прямоугольником, да ещё и между пикселов, размеры картинок не совпадают, куски рисуются в разное время, и так далее...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы