Как использовать p5. js WebGL и javaScript? - PullRequest
Новая
       138

Как использовать p5. js WebGL и javaScript?

0 голосов
/ 09 мая 2020

У меня есть домашнее задание об алгоритме DDA (алгоритм рисования линий цифрового дифференциального анализатора).

Наши уроки не очень хорошие из-за вируса короны, и в этом курсе мы не посетили ни одной лекции.

Учитель говорит:

Вы собираетесь реализовать этот алгоритм с помощью WebGL и отправить свою веб-страницу, содержащую JavaScript код для его реализации.

Я реализовал код js и html своего домашнего задания. Прикреплю. Но как я могу использовать для этого WebGL, ведь у меня нет веб-страницы. Пожалуйста, помогите мне.

dda. js

//grid variables
const width=500
const height=300
const increment=50

//line params
let x1 = null;
let y1 = null;
let x2 = null;
let y2 = null;

function setup(){
    createCanvas(width,height);
    background(200);
    grid(width,height,increment);

}

//draw the grid
function grid(width,height,increment){
    stroke(120);
    for(let i=0;i <= width;i += increment){
        line(i,0,i,height);    
    }
    for(let i=0;i <= height;i += increment){
        line(0,i,width,i);    
    }
}

function mouseClicked(){
    if(!(x1)){
        x1 = Math.floor(mouseX/increment);
        y1 = Math.floor(mouseY/increment);
        fill(255,0,102);
        rect(x1*increment,y1*increment,increment,increment);
        console.log('1')
    }else{
        x2 = Math.floor(mouseX/increment);
        y2 = Math.floor(mouseY/increment);
        dda(x1,y1,x2,y2,increment);
        x1=null;
        y1=null;      
        console.log('2'); 
    }   
}

//DDA algorithm
function dda(x1,y1,x2,y2,increment){ 
    //calculate dx,dy
    let dx = x2 - x1;
    let dy = y2 - y1;

    //decide the size of steps based on bigger difference
    let steps = Math.abs(dx) > Math.abs(dy) ? Math.abs(dx) : Math.abs(dy);

    //calculate the increment in each axis
    let Xinc = dx / steps;
    let Yinc = dy / steps;

    //pixel for each step:
    let x = x1;
    let y = y1;

    //interate from 0 to the numbers of steps calculated 
    for(let i = 0;i <= steps; i++){
        console.log(`PIXEL AT: (${Math.round(x)},${Math.round(y)})`);

        //draw the pixel 
        fill(0);
        rect(Math.round(x)*increment,Math.round(y)*increment,increment,increment);

        x += Xinc;
        y += Yinc;
    }
}

dda. html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>DDA Algorithm</title>
    <script src="DDA.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <style> 
    body {padding: 1px; margin: 1px; text-align: center;}
    .info{background: #ff66ff; text-align: center; border: 1px solid;};
    </style>
    <div class="info">
    <p>E** D**** C*** <br> 15*** <br> Assignment-1 <br> CENG 471 <br> Computer Graphics </p>
    <div>

  </head>
  <body>

  </body>
</html>
...