Adrianistán

Triángulo de Sierpinski en JavaScript

24/05/2017
Un amigo me propuso esta mañana que viera un vídeo de Numberphile, concretamente uno titulado Chaos Game. El vídeo es bastante interesante y habla de como de una aparente aleatoriedad es posible sacar fractales y patrones regulares. Esta misma mañana al llegar a casa y antes de comer me he picado y me he puesto a implementar el algoritmo en JavaScript usando el Canvas de HTML5. El resultado lo tenéis aquí:


http://adrianistan.eu/sierpinski/


Y el código que lleva es el siguiente:


const COLOR_LIST = ["red","green","yellow","pink","brown","purple","cyan","blue","orange"];

function punto(x,y){
var p = {
x:x,
y:y
};
return p;
}

function puntoMedio(p,q){
var m = {
x: Math.round((p.x+q.x)/2),
y: Math.round((p.y+q.y)/2)
};
return m;
}

function getRandomColor(){
return COLOR_LIST[Math.floor(COLOR_LIST.length * Math.random())];
}

function dibujarPunto(ctx,p,size){
ctx.fillStyle = getRandomColor();
ctx.fillRect(p.x,p.y,size,size);
}

function $(id){
return document.getElementById(id);
}

function get(id){
return Math.round(document.getElementById(id).value);
}

function main(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var interval;

$("start").addEventListener("click",function(){

var size = get("size");
var vertex = [punto(get("a-x"),get("a-y")),punto(get("b-x"),get("b-y")),punto(get("c-x"),get("c-y"))];

let p = punto(get("s-x"),get("s-y"));

dibujarPunto(ctx,p,size);

interval = setInterval(function(){
var q = vertex[Math.floor(3*Math.random())];
p = puntoMedio(p,q);
dibujarPunto(ctx,p,size);
},get("speed"));
});

$("stop").addEventListener("click",function(){
clearInterval(interval);
});

$("reset").addEventListener("click",function(){
ctx.fillStyle = "white";
ctx.fillRect(0,0,600,600);
});
}

window.addEventListener("DOMContentLoaded",main);


Con distinto número de vértices existen otros fractales, también muy chulos. Incluso en el vídeo de Numberphile realizan un fractal con un gran parecido a una hoja de helecho, usando dos triángulos y una ligera modificación del algoritmo.

Un saludo y soñad con fractales.
Tags: fractal numberphile programacion javascript matematicas tutorial sierpinski html5 triangulo