Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблема с отрисовкой в самодельном ray marching (https://javascript.ru/forum/misc/81077-problema-s-otrisovkojj-v-samodelnom-ray-marching.html)

nashvlad370 26.09.2020 12:49

Проблема с отрисовкой в самодельном ray marching
 
var x_obj_pos = [];
var y_obj_pos = [];
var size_obj = [];
var type_obj = [];

x_obj_pos[0] = 250;
y_obj_pos[0] = 250;
size_obj[0] = 50;
type_obj[0] = 0;

x_obj_pos[1] = 400;
y_obj_pos[1] = 400;
size_obj[1] = 30;
type_obj[1] = 0;

x_obj_pos[2] = 350;
y_obj_pos[2] = 100;
size_obj[2] = 80;
type_obj[2] = 0;

function drawObjects() {
    for (var i = 0; i < x_obj_pos.length; i++) {
        ctx.beginPath();
        ctx.arc(x_obj_pos[i], y_obj_pos[i], size_obj[i], 0, Math.PI * 2);
        ctx.fill();
    }
}

function calcWay(xpos, ypos) {
    var itter = 0;
    var size_step = 1;

    var xp = xpos;
    var yp = ypos;

    for (var ang = 0; ang < 10; ang++) {

        while (itter < 30 && size_step > 0.2) {
            var lengthes = [];
            for (var i = 0; i < x_obj_pos.length; i++) {
                lengthes.push(Math.sqrt(Math.pow(xpos - x_obj_pos[i], 2) + Math.pow(ypos - y_obj_pos[i], 2)) - size_obj[i]);

                //console.log(lengthes[i]);
            }


            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.arc(xpos, ypos, Math.abs(Math.min.apply(null, lengthes)), 0, Math.PI * 2);
            ctx.stroke();


            size_step = Math.min.apply(null, lengthes);
            if (size_step < 0.2) {
                ctx.fillStyle = "red";
                ctx.beginPath();
                ctx.arc(xpos, ypos, 5, 0, Math.PI * 2);
                ctx.fill();
                //return;
            }

            xpos += Math.sqrt(Math.pow(Math.min.apply(null, lengthes), 2) / (Math.pow(ang, 2) + 1));

            itter += 1;

            ypos += Math.sqrt(Math.pow(ang, 2) * Math.pow(Math.min.apply(null, lengthes), 2) / (Math.pow(ang, 2) + 1));
        }
        xpos = xp;
        ypos = yp;

        //console.log(ang);

    }
}

function OnOver(x_onover, y_onover) {
    x_onover -= 8;
    y_onover -= 8;

    ctx.fillStyle = "white";
    ctx.fillRect(-500, -500, 1000, 1000);
    ctx.fillStyle = "black";
    drawObjects();
    ctx.fillStyle = "red";
    ctx.beginPath();
    //ctx.arc(x_onover-8.5, y_onover-8.5, 20, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillStyle = "green";
    calcWay(x_onover,y_onover);
    //calcWay(30,350);
}


Желаемый результат - много красных точек на канвасе в соприкосновениях лучей с кругами, однако видно только одну точку(

функция onover вызывается каждый раз когда я перемещаю мышку над канвасом

Rise 26.09.2020 14:50

А картинка есть чего надо?

nashvlad370 26.09.2020 14:58

Цитата:

Сообщение от Rise (Сообщение 529257)
А картинка есть чего надо?

Чего надо картинки нету но могу нарисовать в пэинте

nashvlad370 26.09.2020 15:16

Цитата:

Сообщение от Rise (Сообщение 529257)
А картинка есть чего надо?



это результат который получился у меня
а мне надо чтобы это был не один луч а несколько в определённом угле обзора

MallSerg 26.09.2020 16:25

Наверно что то вроде такого нужно.
<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/XdcBzS?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe>

MallSerg 26.09.2020 17:32

Можно кликнуть мышкой
<iframe width="960" height="420" frameborder="0" src="https://www.shadertoy.com/embed/3scczB?gui=true&t=10&paused=false&muted=false" allowfullscreen></iframe>


Часовой пояс GMT +3, время: 10:44.