Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2020, 12:49
Новичок на форуме
Отправить личное сообщение для nashvlad370 Посмотреть профиль Найти все сообщения от nashvlad370
 
Регистрация: 18.09.2020
Сообщений: 4

Проблема с отрисовкой в самодельном 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 вызывается каждый раз когда я перемещаю мышку над канвасом

Последний раз редактировалось nashvlad370, 26.09.2020 в 12:52.
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2020, 14:50
Аватар для Rise
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,448

А картинка есть чего надо?
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2020, 14:58
Новичок на форуме
Отправить личное сообщение для nashvlad370 Посмотреть профиль Найти все сообщения от nashvlad370
 
Регистрация: 18.09.2020
Сообщений: 4

Сообщение от Rise Посмотреть сообщение
А картинка есть чего надо?
Чего надо картинки нету но могу нарисовать в пэинте
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2020, 15:16
Новичок на форуме
Отправить личное сообщение для nashvlad370 Посмотреть профиль Найти все сообщения от nashvlad370
 
Регистрация: 18.09.2020
Сообщений: 4

Сообщение от Rise Посмотреть сообщение
А картинка есть чего надо?


это результат который получился у меня
а мне надо чтобы это был не один луч а несколько в определённом угле обзора
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2020, 16:25
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 986

Наверно что то вроде такого нужно.
<iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/XdcBzS?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe>
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2020, 17:32
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 986

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена background при нажатии JIeuTo Общие вопросы Javascript 5 14.09.2018 18:48
Проблема с отрисовкой элементов Alt jQuery 0 30.01.2012 16:36