Embedded Files
P5.JS permite la creación de figuras completamente personalizadas. Desde polígonos simples hasta todas las formas curvas que se te puedan ocurrir.
Esto es gracias a las funciones que serán enseñadas en esta unidad.
Funciones
Funciones
- Para crear una figura personalizada se deben poner 2 funciones como inicio y final de la figura, beginShape() y endShape() respectivamente.
- Dentro de estas funciones debemos utilizar las funciones vertex(x,y) y curveVertex(x,y)Ambas funciones llevan como parámetros Int que corresponden a sus coordenadas en el canvas donde aparecerá el vértice. P5.JS creará lineas entre los vértices en el orden en el que sean escritos en el código.
- Si es que se quiere crear una figura cerrada, es decir, que el último vértice cree una línea con el primero, se debe poner "CLOSE" como parámetro en endShape()
* La función vertex() sirve para crear vértices de los cuales saltará una linea recta mientras que curveVextex() sirve para crear lineas curvas que se doblan dependiendo de los ángulos que se tengan con el siguiente vértice.
* La función vertex() sirve para crear vértices de los cuales saltará una linea recta mientras que curveVextex() sirve para crear lineas curvas que se doblan dependiendo de los ángulos que se tengan con el siguiente vértice.
* Se pueden combinar ambos tipos de vértices dentro de la misma figura para crear figuras complejas y diferentes dependiendo de lo que necesitemos hacer.
* Se pueden combinar ambos tipos de vértices dentro de la misma figura para crear figuras complejas y diferentes dependiendo de lo que necesitemos hacer.
Ejemplos
Ejemplos
Usar estructura For() para crear un polígono regular
Usar estructura For() para crear un polígono regular
Se puede utilizar la estructura for() para crear polígonos regulares y simular círculos
Esto se realiza utilizando algoritmos que dependen de calculos matemáticos para calcular las posiciones de los distintos vértices
Utilizando la siguiente fórmula dentro del beginShape se pueden conseguir distintos polígonos regulares:
for(var i = 0; i < 359; i+= 360/(Número de caras de la figura))
{
var r = (Tamaño de la figura);
var x = r * cos(i);
var y = r * sin(i);
vertex(x + (Posición del centro en X), y + (Posición del centro en Y));
}
De esta fórmula hay que completar algunas variables dependiendo de nuestras preferencias, en el primer caso se determina la cantidad de caras que va a tener la figura, en el siguiente el tamaño del radio total de la figura y luego se debe sumar en X e Y unas coordenadas donde se quiere que aparezca la figura (Funciona de la misma forma que rectMode(RADIUS) en el que la var r es el radio de la figura y las posiciones en X e Y son las coordenadas del punto central de donde se formará la figura.
Si se usa un número lo suficientemente grande de caras la figura resultante se verá como un círculo.
Ejemplos
Ejemplos
Page updated
Google Sites
Report abuse