p5.js star example

The star() function created for this example is capable of drawing a wide range of different forms. Try placing different numbers into the star() function calls within draw() to explore.

by juansb827

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

JavaScript

var diameter; 
var angle = 0;

/** Se inicialza el ambiente
*/
function setup() {
 createCanvas(640, 360); //Se configuran las dimensiones de la ventana 
  diameter = height - 10; //El diametro maximo de los circulos será 350 unidades
  noStroke(); //Se remueve el delineado de los elementos 
  fill(255, 204, 0); //Se configura el color para rellenar los elementos
}

function draw() {

  background(0); //Se define el fondo de la ventana

  //Los diametros cambian de acuerdo a el seno del angulo actual
  //El minimo diametro que un circulo podra tener en un determinado momento sera de 10 unidades
  //Se usa una funcion seno con fase diferente para cada uno de los tres diametros
  var d1 = 10 + (sin(angle) * diameter/2) + diameter/2; 
  var d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;   
  var d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
  
  //Todos los circulos tienen y=altura/2, por lo cual estaran centrados verticalmente
  ellipse(0, height/2, d1, d1); // x=0, el circulo estara alineado horizontalmente con el comienzo de la ventana          
  ellipse(width/2, height/2, d2, d2); // x=ancho/2 el circulo estara centrado horizontalmente
  ellipse(width, height/2, d3, d3); // x=ancho  el circulo estara alineado horizontalmente con el final de la ventana
  
  angle += 0.02; //Se aumenta el angulo 0.2 radianes en cada llamado de la funcion
}