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

Вход на сайт

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

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

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

добрый день! при попытке компиляции выдает Source.obj : error LNK2001: неразрешенный внешний символ "__imp_glPointSize" 1>Source.obj : error LNK2001: неразрешенный внешний символ "__imp_glPopMatrix" 1>Source.obj : error LNK2001: неразрешенный...
Можно точно вот эту программу просто наоборот типа:4,3,2,1,4 вот так надо двигаться
Здравствуйте. Спасибо за полезную инфу про уравнения а не матрицы. Во всём интернете только матрицы. У Вас опечатка в уравнении вращения по Z в координате Y= надо минус добавить И ещё. Все предыдущие уравнения можно подставить в последнее уравнение...
WebGL API Tutorial WebGL wiki Adding 2D content to a WebGL context

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

Рейтинг@Mail.ru Яндекс.Метрика
Скриншот к примеру
Среда программирования: 
Любая

Алгоритм использует механизмы сглаживания при растеризации линии. При этом ступенчатые выступы на линии становятся менее заметны. Этот эффект достигается следующим образом. На первом шаге для точки, лежащей на линии, вычисляются две ближайшие точки растра. Далее между этими двумя точками распределяется прозрачность(альфа-канал) цвета пиксела пропорционально близости пиксела к линии таким образом, чтобы суммарная яркость была равна единице. При таком распределении человеческий глаз воспринимает последовательность нескольких пикселов с взаимодополняющими значениями прозрачности как непрерывную линию, причем достаточно гладкую. В программе реализован упрощенный алгоритм, в котором некоторые вычисления производятся в вещественном формате, а также учитываются особенности платформы разработки, что замедляет работу алгоритма.

При всей своей простоте такой метод быстр и позволяет строить очень качественно сглаженные отрезки.

Код программы: 

<!DOCTYPE HTML>
<html>
<head>
<title>Lab 3</title>
<meta charset="utf-8">
<script type="text/javascript">
 
var plot = function(x, y, c) { // Установить пиксель в т. (x, y) с прозрачностью c
    if(isFinite(x) && isFinite(y)){
        var color = {
            r: plot.color.r,
            g: plot.color.g,
            b: plot.color.b,
            a: plot.color.a*c
        };
 
        setPixel(x,y, color);
    }
};
 
function setPixel (x,y,c) { // Функция установки пикселя в js
    var p=canvas.createImageData(1,1);
    p.data[0]=c.r;
    p.data[1]=c.g;
    p.data[2]=c.b;
    p.data[3]=c.a;
    var data = canvas.getImageData(x, y, 1,1).data;
    canvas.putImageData(p,x,y);
}
var ipart = Math.floor; // целая часть числа
 
function fpart(x) { // Дробная часть числа
    return x - Math.floor(x);
}
 
function rfpart(x) { // 1-(Дробная часть числа)
    return 1.0 - fpart(x);
}
 
function drawLine(x0, y0, x1, y1, color) {
    if(color)  { //если цвет задан, установить цвет кисточки в него
        plot.color = color;
    } else { //если нет - установить черный
        plot.color = {r:0,g:0,b:0,a:255};
    }
    var steep = Math.abs(y1 - y0) > Math.abs(x1 - x0); //приращение по x или y?
    if (steep){
        x0 = y0 + (y0=x0, 0); // поменять местами x0 и y0
        x1 = y1 + (y1=x1, 0); // js-oneliner для сокращения кода
    }
    if (x0 > x1){ //если x0>x1 поменять местами концы отрезка
        x0 = x1 + (x1=x0, 0); 
        y0 = y1 + (y1=y0, 0);
    }
 
    var dx = x1 - x0;
    var dy = y1 - y0;
    var gradient = dy / dx;
 
    //обработка начала отрезка
    var xend = Math.round(x0);//алгоритм может работать с нецелыми числами начала и конца отрезка
    var yend = y0 + gradient * (xend - x0);
    var xgap = rfpart(x0 + 0.5);
    var xpxl1 = xend; //сохраняем xend (будет использовано в основном цикле)
    var ypxl1 = ipart(yend);
 
    if (steep) { //устанавливаем 2 пикселя с разной прозрачностью
        plot(ypxl1, xpxl1, rfpart(yend) * xgap);
        plot(ypxl1 + 1, xpxl1, fpart(yend) * xgap);
    } else {
        plot(xpxl1, ypxl1, rfpart(yend) * xgap);
        plot(xpxl1, ypxl1 + 1, fpart(yend) * xgap);
    }
    //сохраняем для основного цикла
    var intery = yend + gradient;
 
    // обработка конца отрезка(аналогично началу)
    xend = Math.round(x1);
    yend = y1 + gradient * (xend - x1);
    xgap = fpart(x1 + 0.5);
    var xpxl2 = xend;
    var ypxl2 = ipart(yend);
 
    if (steep) {
        plot(ypxl2, xpxl2, rfpart(yend) * xgap);
        plot(ypxl2 + 1, xpxl2, fpart(yend) * xgap);
    } else {
        plot(xpxl2, ypxl2, rfpart(yend) * xgap);
        plot(xpxl2, ypxl2 + 1, fpart(yend) * xgap);
    }
 
    // основной цикл
    for (var x = xpxl1 + 1; x <= xpxl2 - 1; x++) {
        if (steep) { //устанавливаем 2 пикселя с разной прозрачностью в зависимости от удаленности от отрезка
            plot(ipart(intery), x, rfpart(intery));
            plot(ipart(intery) + 1, x, fpart(intery));
        } else {
            plot(x, ipart(intery), rfpart(intery));
            plot(x, ipart(intery) + 1, fpart(intery));
        }
        intery = intery + gradient;
    }
}
</script>
</head>
<body style="margin: 0; height: 100vh;">
<script type="text/javascript">
    var canvasElem= document.createElement('canvas');
    canvasElem.id     = "canvas";
    canvasElem.width  = 600;
    canvasElem.height = 600;
    canvasElem.style.margin = 'auto';
    canvasElem.style.display = 'flex';
    document.body.appendChild(canvasElem);
    canvas = canvasElem.getContext('2d');
    canvasX = canvasElem.width;
    canvasY = canvasElem.height;
    drawLine(135, 220, 200, 500);
    drawLine(150, 100, 400, 10, {r:255, g:123, b: 84, a:255});
    drawLine(500, 400, 100, 200, {r:255, g:0, b: 0, a:127})
</script>
</body>
 
 <sharp>

Прикрепленный файлРазмер
opryshko_exampleWu.html_.zip1.7 кб