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

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

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

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

У меня проблема вот с этим: gl.Clear(OpenGL.GL_COLOR_BUFFER_BIT | OpenGL.GL_DEPTH_BUFFER_BIT);. Вылезает ошибка: CS1061 "object" не содержит определения "GL_COLOR_BUFFER_BIT", и не удалось найти доступный метод расширения "GL_COLOR_BUFFER_BIT",...
Большое спасибо. Единственный код который прошел без каких либо ошибок. Ура!!!
Скажите пожалуйста, подскажите алгоритм по которому по заданным точкам можно определить тип многогранника, скажем это куб или прямоугольный параллелепипед. Нашел теорию по этим фигурам: https://www.mat... https://www.mat... Акцентировать внимание...
Всем у кого не работает. файл wizard.script Ещё одно упоминание Glut32 в строке "if (!VerifyLibFile(dir_nomacro_lib, _T("glut32"), _T("GLUT's"))) return false;" меняем на "if (!VerifyLibFile(dir_nomacro_lib, _T("freeglut"), _T("GLUT's"))) return...
Не получается, емаё

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

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

Программа, демонстрирующая смещение, поворот, масштабирование произвольной фигуры и ее отрисовку на экранной области.

1. Создадим файл index.html, в котором подключим файл bird.js и создадим блоки кнопок, отвечающие за каждую из операций.
По клику на кнопки "left", "right", "up", "down" будет вызываться функция move().
По клику на кнопки "turn left", "turn right" будет вызываться функция turn().
По клику на кнопки "+", "-" будет вызываться функция scale().

<html>
    <head>
        <title></title>
        <meta charset="utf-8"/>
        <script src="bird.js"></script>
        <style>
            body {
                background: #000;
                color: #fff;
            }
        </style>
    </head>
    <body>  
        <form>
          <label>Смещение:</label>
          <input type="button" onclick="move(-20, 0)" value="left" />
          <input type="button" onclick="move(20, 0)" value="right" />
          <input type="button" onclick="move(0, 20)" value="up" />
          <input type="button" onclick="move(0, -20)" value="down" />
          <br/>
          <label>Поворот:</label>
          <input type="button" onclick="turn(0.9)" value="turn left" />
           <input type="button" onclick="turn(-0.9)" value="turn right" />
           <br/>
          <label>Масштабирование:</label>
          <input type="button" onclick="scale(1.6)" value="+" />
          <input type="button" onclick="scale(0.4)" value="-" />
        </form>
    </body>
 
</html>

2. Файл bird.js.
1. create_canvas() - создаем канвас и получает 2d контекст.
2. drawBird() - рисует фигуру.
3. move() - функция смещения, в которую передаются координаты на которые необходимо сместить фигуру.
4. turn() - функция поворота, в которую передается угол, выраженный в радианах.
5. scale() - функция масштабирования, в которую передается коэффициент масштабирования.

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

// создаем канвас
function create_canvas() {
    var canvas_html = document.createElement('canvas');
    canvas_html.id = "canvas";
    canvas_html.width = 1200;
    canvas_html.height = 600;
 
    document.body.appendChild(canvas_html);
 
    return canvas_html.getContext('2d');
}
 
// запускается при загрузке страницы, подгружает канвас 
// и создает фигуру и точку, относительно которой будут производиться операции 
window.onload = function() {
    canvas = create_canvas();
    // координаты фигуры
    bird = [{
            'x': 10,
            'y': 80
        }, {
            'x': 50,
            'y': 160
        }, {
            'x': 90,
            'y': 80
        }, {
            'x': 50,
            'y': 130
        }, 
        ];
    // координаты точки
    center = {
        'x': 50,
        'y': 100
    }
    drawBird();
}
 
//рисует фигуру
function drawBird() {
    canvas.fillStyle = '#fff';
    canvas.beginPath();
    canvas.moveTo(670 + bird[0].x, 380 - bird[0].y);
    for(var d in bird){
        canvas.lineTo(670 + bird[d].x, 380 - bird[d].y);
    }
    canvas.closePath();
    canvas.fill();
}
 
//функция смещения
function move(x, y) {
    canvas.clearRect( 0 , 0 , 1200 , 600 );
 
    for(var d in bird){
        bird[d].x += x;
        bird[d].y += y;
    }
    center.x += x;
    center.y += y;
    drawBird();
 
}
 
//функция поворота
function turn(angle) {
    canvas.clearRect( 0 , 0 , 1200 , 600);
    for(var d in bird){
        temp = bird[d].x-center.x;
        bird[d].x = parseInt( (bird[d].x-center.x) * Math.cos(angle) - (bird[d].y - center.y)*Math.sin(angle)) + center.x;
        bird[d].y = parseInt( temp * Math.sin(angle) + (bird[d].y - center.y)*Math.cos(angle) ) + center.y;
    }
    drawBird();
 
}
 
//функция масштабирования
function scale(k) {
    canvas.clearRect( 0 , 0 , 1200 , 600 );
    for(var d in bird){
        bird[d].x = (bird[d].x-center.x) * k + center.x;
        bird[d].y = (bird[d].y-center.y) * k + center.y;
    }
    drawBird();
 
}

Прикрепленный файлРазмер
bird.zip1.36 кб