Adrianistán

El blog de Adrián Arroyo


Artículos con etiqueta «javascript»

Triángulo de Sierpinski en JavaScript

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
Seguir leyendo

Tutorial de Neon - Combina Node.js con Rust

Hoy en día muchas webs se diseñan con Node.js. Es una solución fantástica para respuestas rápidas pero numerosos benchmarks han demostrado que su rendimiento empeora en respuestas complejas. Estos mismos benchmarks recomiendan usar Java o .NET si preveemos que nuestra aplicación web va a generar respuestas complejas. Sin embargo renunciar a las ventajas de Node.js no es del agrado de muchos. Afortunadamente hay otra solución, usar Rust. Todo ello gracias a Neon
Seguir leyendo

Crónica de un vídeo de citas célebres

Vuelvo a la carga con un problema que me ha tenido entretenido un rato y que me parece interesante contaros
Seguir leyendo

Tutorial de WebExtensions (II) - Popup y Tabs

Continuamos con el tutorial de WebExtensions, hoy veremos un elemento muy útil para muchas extensiones que es el popup
Seguir leyendo

Tutorial de WebExtensions (I) - manifest.json y conceptos

WebExtensions es un sistema para desarrollar extensiones de navegador. Realmente se trata de la API original de Google Chrome y Chromium. Esta API ya había sido diseñada teniendo en cuenta las extensiones de Firefox basadas en XUL y XPCOM. Simplifica mucho el proceso de tareas comunes, no requiere reinicios y es más segura al no permitir tanto control sobre el navegador
Seguir leyendo

Phaser.js Hispano, aprende a hacer videojuegos en HTML5

Phaser.js Hispano es un sitio web, de mi propia creación, donde escribo tutoriales para aprender a usar Phaser, una de las librerías más populares para crear juegos 2D con JavaScript
Seguir leyendo

Beta privada de TucTum, la red social que te paga

Este post se conserva por motivos históricos, sin embargo TucTum fue cerrado dado su poco éxito
Hace poco me enteré de que Tsu, la red social que pagaba a sus usuarios una parte de lo que generasen por publicidad, había cerrado. Me lo comentó un amigo, había intentado acceder desde la app de Android y ya no podía. Efectivamente, Tsu había cerrado. Llevaba acumulados unos cuantos euros (6 o 7 euros) y me sentó mal, porque además no han explicado los motivos del cierre. Había que hacer algo
Seguir leyendo

ShortKin.gq, un acortador de enlaces anónimo

ShortKin.gq es un proyecto en el que he trabajado solamente dos días, sin embargo, creo que ya puede ser de utilidad. Se trata de un acortador de enlaces, gratuito y anónimo. Los enlaces durán para siempre pero nadie sabe quien los creó. El servicio no dispone de anuncios, por lo que puedes estar tranquilo y usarlo donde te apetezca, no será baneado de foros y redes sociales. Actualmente usa Heroku ShortKing

Bonus: API pública

Puedes usar ShortKin.gq en tu propio proyecto a través de una API muy sencilla. Simplemente has de llamar a:
http://shortkin.gq/s?url=URL
Y se te devolverá el enlace acortado. Muy fácil de usar en tus aplicaciones. Si tus aplicaciones usan Node.js recuerda que puedes usar unos paquetes de acortadores que programé para que todo fuese más sencillo.
Seguir leyendo

Subir APK a Google Play automáticamente

Hoy vamos a ver como subir un APK a Google Play directamente, usando la línea de comandos, sin pasar por el navegador. Perfecto para automatizar la publicación de actualizaciones
Seguir leyendo

Crear credenciales OAuth2 para Google

Google dispone de muchas APIs a nuestra disposición de forma gratuita. Para poder usarla es necesario que hayamos iniciado sesión. Desde un navegador como Firefox o Chrome es muy sencillo, introducimos nuestro usuario y contraseña y ya podemos acceder a Gmail, YouTube, etc. Si queremos hacerlo desde nuestro propio programa también es posible, pero el procedimiento es distinto. Una vez hagamos esto podremos hacer lo mismo que haría un usuario, lo único que programándolo (leer los contactos, leer el correo, modificar suscripciones de YouTube, publicar en Blogger, etc)
Seguir leyendo