Rotar un polígono por grados dados en p5.js

Dada una array de vectores que representan cada vértice del polígono, tenemos que rotar el polígono por el punto medio por el número dado de grados (digamos n). Tenga en cuenta que el problema nos pide que no dibujemos un polígono girado sino que giremos un polígono. Lo que significa que los objetos de transformación incorporados son inútiles en este escenario. En pocas palabras, necesitamos rotar el polígono en sí y no todo el sistema de coordenadas.

La idea fundamental es rotar cada vértice del polígono n-grados. La siguiente fórmula rota un punto dado $(x,y)$ en el plano cartesiano:

${x}' = x cos(\theta ) - y sin(\theta )$
${y}' = x sin(\theta ) + y cos(\theta )$

Resolveremos el problema en iteraciones a partir del código base:

El código base: Usaremos p5.js para este propósito para hacerlo más interactivo. Aquí está nuestro archivo base index.html

Código:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Rotating a Polygon</title>
    <script type="text/javascript"
       src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js">
    </script>
    <script type="text/javascript" src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

Rotación del polígono: Aquí está la función que rota el polígono. Tenga en cuenta que convertimos el ángulo a radianes ya que la entrada será en grados. Pero en p5.js, cosy sinespera valores en radianes por defecto. Además, tenga en cuenta que las listas en JavaScript se pasan por referencia, por lo que si modificamos el argumento pasado, eso también tendrá efecto en la lista original.

Código:

function rotatePolygon(vertices,degree){
  
  // Converting degree to radians!
  degree = radians(degree);
  for(let i = 0; i < vertices.length; ++i){
  
    // Storing the previous values so
    // they don't get overwritten
    let x = vertices[i].x, y = vertices[i].y;
    vertices[i].x = x*cos(degree)-y*sin(degree);
    vertices[i].y = x*sin(degree)+y*cos(degree);
  }
}

Calculando el punto medio: Ahora podemos rotar el polígono ahora mismo pero el problema nos pide rotarlo con respecto a su punto medio, así que primero necesitamos calcular eso. Para rotar un polígono por su punto medio, primero debemos calcular que es el punto medio. El punto medio de un polígono es simplemente el promedio de todas las coordenadas . Aquí está la función que calcula el punto medio.

Código:

function calcMidpoint(vertices){
  let midpoint = createVector(0, 0)
    for (let i = 0; i < vertices.length; i++)
      midpoint.add(vertices[i]);
  return midpoint.div(vertices.length)
}

Traslación del punto medio: el proceso de rotación del polígono sobre su punto medio implicará alguna traslación. Con suerte, este paso es muy intuitivo y autodeclarativo.
Código:

function translatePolygon(vertices, x, y) {

    for (let i = 0; i < vertices.length; i++) {

      vertices[i].x += x;

      vertices[i].y += y;

    }

}

La combinación final del programa de la iteración anterior: aquí está nuestro archivo sketch.js final basado en las iteraciones anteriores:

Código:

var starPolygon = []
  
function setup() {
    
    // Init the HTML5 Canvas of given size
    createCanvas(800, 600);
      
    /* Vertices for a star-polygon (decagon) */
    let x = [440, 468, 534, 486, 498,
             440, 382, 394, 346, 412];
             
    let y = [230, 290, 300, 344, 410,
             380, 410, 344, 300, 290];
    
    /* Converting given vertices to
        an array of vectors */
    for (let i = 0; i < x.length; ++i)
        starPolygon.push(createVector(x[i], y[i]));
}
    
function rotatePolygon(vertices, degree){
    
    // Converting degree to radians!
    degree = radians(degree);
      
    for(let i = 0; i < vertices.length; ++i) {
    
        // Storing the previous values so they
        // don't get overwritten
        let x = vertices[i].x, y = vertices[i].y;
          
        vertices[i].x = x*cos(degree)-y*sin(degree);
        vertices[i].y = x*sin(degree)+y*cos(degree);
    }
}
    
function calcMidpoint(vertices) {
    let midpoint = createVector(0, 0)
      
    for (let i = 0; i < vertices.length; i++)
        midpoint.add(vertices[i]);
      
    return midpoint.div(vertices.length)
}
    
function translatePolygon(vertices, x, y) {
    for(let i = 0; i < vertices.length; i++){
      vertices[i].x += x;
      vertices[i].y += y;
    }
}
    
function draw() {
    
    // Clear everything with grey background
    background(255);
    rotatePolygon(starPolygon,1);
    drawPolygon(starPolygon);
    let a = calcMidpoint(starPolygon);
    
    // Origin the polygon to center
    // and draw it at (400, 300)
    translatePolygon(starPolygon, 400-a.x, 300-a.y)
}
        
// This is how you draw a polygon in p5.js
function drawPolygon(vertices) {
    
    beginShape();
      
    for (let i = 0; i < vertices.length; ++i)
        vertex(vertices[i].x, vertices[i].y);
      
    fill(255, 217, 0);
   
    // If you don't close it then it'd 
    // draw a chained line-segment
    endShape(CLOSE);
}

Producción:

Los principios simples discutidos en este artículo se pueden aplicar para resolver una variedad de problemas relacionados con gráficos por computadora. Si bien aún no hablamos de eso, uno puede escalar fácilmente el polígono de una manera similar a la que se traduce el polígono (simplemente escalar cada vértice por el mismo factor). El algoritmo de búsqueda del punto medio se puede usar para encontrar el punto medio de segmentos de línea enstringdos y no solo polígonos. Además, tenga en cuenta que se aplican los mismos principios para transformar todo el sistema de coordenadas y p5.js proporciona objetos de transformación incorporados, pero no los usamos porque se nos pidió que rotamos el polígono y no el sistema de coordenadas.

Publicación traducida automáticamente

Artículo escrito por youngneer y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta