Penrose Trip

"El único sentido verdadero de la vida es encontrar el modo de difrutarla."

HOME Música Videos Sitios info

TRY ME

Juguetitos en javascript que hago por diversión. Ideas de fin de semana que se llevan a cabo en unas cuantas horas y con el proposito de enseñarle algo nuevo y quemar un poco de su tiempo.

Como suena llegar?

Hackathon automatas celulares

Cellular automata model to simulate traffic, with the plus that each car can honk (using its own frequency) or not according to a tolerance index defined in the simulation parameters. This scenario is about cars un a multi-lane highway, whenever the need to brake, they may or may not honk their claxons. The can also change lane, which modifies the dynamic of the highway adding interaction between lanes. If two cars collide they may stop moving for a few seconds.

The idea is developed as a groupal exercise in a Hactivity trying to stablish a dialogue involving artistic and scientific perspectives around cellular automata. With my team ,ITERANTES , we decided to develop our ideas around the urban tissue of Bogotá, trying to reconstruct from scratch a city shaped by improvisation and multicultural mixtures. Our proposal is to wander into the daily iterative phoenomena of the city and analize them through the lense of celuular automata.

Other exercise prposed as well in this context is the Random GPS which is a Tour-like random route generated with origin in a random adress in Bogotá. A Click would work to generate a new instruction.

CONTROLS : CLICK on a lane to create a car in that spot. pressing K on the keyboar while pointing a car will delete it. pressing it while pointing an empty spot in the lane will create a barricade which you can remove by clicking on it.

2D Cellular Automata in p5.js

A celular automaton is a system in which a grid of cells determines its state (ON or OFF) according to rules stablished on the states of a determined neighborhood of cells in the grid. The system behaves according to a set of game rules that commands each cell in the grid to adopt in the net step a state based on the previous states of the neighbors.

These Game rules are codified in a structure similar to DNA. Each cell has 8 neighbors, so there are 9 states each cell hast to handle (including own state). As ech one of these states are values 0 (OFF) or 1 (ON), the number of different possible neighborhood configurations are 2 to the power of 9, or 512. Each configuration has a response ,for example, if the inmediate left neighbor is ON, then this cell turns ON as well. If we assign each one of this states to a position in a 512-length string, and in this string we store the response, the result is a 512-length string of 0's and 1's describing the behaviour of the system. This might be codified to be expressed as genes in the form of alfanumeric values and colors. This 512-string is called the "rule code".

This means that a single rule code describes the unique behavior of a system and, moreover, there exist as much as 2 to the power of 512 possible rule code configurations. In other words, there are more than 10 million million million million . . . (25 times million) . . . million million million possible systems.

This gene structure was, in a beginning, a way to store compressed data information of the state, but as experimentation went on I realized common beahviors tend to be stored in the same Gene. experimentation with cellular automata is easy and fun as long as you find the beauty of the patterns made by simpple binary rules. These systems are controversial in the study of life emergence and complex systems, for example, you may know the famous "Conway's Game of Life" which is an specific rule code for 2D cellular automata that ressemebles organic movement from simple configurations.

CONTROL: Mouse Click may allow you to switch cell states manually and interact with sliders and buttons in the simulator. Load - Save butttons are for inserting or retrieving codified genomes in case there's a rule code you dont want to lose. Random DNA creates a random rule for the system and Empty DNA will create a rule code in zeros. Examples of genomes you can load easily are: conway , conway-4 , maze-gen , square , triangle , tissue . With other genomes it is necessary to copy-paste the desired encoded genome (long alphanumeric sequence).

In Settings you can change the color palette of the System . The system will evolve untill the max. generation limit is reached. You could modify this limit with the slider in the bottom or setting the max generation parameter to "infinite". In the Behavior programation Module you can configure specific cases and its response, where the 3X3 grid represents the neighboorhood with the evaluated cell is in the middle. The cells apart represents the actual response to that configuration (will set automatically) and the new response (modify manually with click).The green button is to modify the genome with the case displayed in the module. the "sinlge case option" is to apply only the case that is displayed, the "all rotations" option applies the rule to all 4 rotations of that case.

The case setting line in the bottom is to create rules based on the number of neighbors, to create a rule press the blue button, to update the genome with the created rules press the white button and to delete al created rules (before update) press the red button.

Keyboard :

ENTER : Runs/Stops the simulation .
R : Create random rule code (Random DNA button).
E : Evolves a single step (Step button).
X : Toogles bombing (switch random cell every generation).
M : Mutates a random gene.
P : Switches the state of a random cell.
B : Sets all cells to OFF (Blank button).
I : Inverts the value of every cell.
C : Sets the center Cell to ON.
H / V / D / A : Sets an alternating pattern along the central (Horizontal / Vertical / Diagonal / Antidiagonal) respectively.
0 / 1 : create arule code with only 0 / 1 respectively (Empty DNA button).
2/3/4 : Sets a figure of ON cells in the center.

SIR simulation for viral behavior in p5.js

The middle of the COVID-19 crisis seemed like the perfect oportunity to create an SIR environment to simulate The propagation of an infection within a population.

The simulation depends on the state of each individual of the population:[S] for the suceptible or Healthy (white), [I] for the infected (red),[C] for the cured (blue) and [D] for the dead (brown).

Some important statistical values are displayed on the interface, as well as a real-time graph of the progress of the infection. It is important to note that although it is a toy model, it shows the impact of preventive actions, such as movement restrictions or the interpersonal distance measure, on the speed of spread of a disease.

CONTROLS : Parameters are set to replicate COVID-19 outbreak, but they can be changed at will. RESET button will preserve your settings between simulations.

Vectors en p5.js

Se genera grupo de lineas que conforman un conjunto de lineas de campo representando una interacción determinada con la posición del Puntero en la pantalla.

Los vectores rotan a velocidades diferentes entre ellas pero de valor entero, lo que implica eventuales alineaciones del campo respecto al puntero. Al haber más de un tipo de linea, se diferencian por color y cada tipo de linea reacciona diferente al Puntero-

CONTROLES : El click del mouse cambia la dirección en la que avanza el tiempo, la tecla P pausa el avance del tiempo.

Organisms en p5.js

Base: Flocking Algorythm tomado de Daniel Shiffmann - The coding Train

El algoritmo de flocking o enjambre surge a partir de individuos móviles por un campo definido siguiendo 3 simples reglas: agruparse con los vecinos, evitar sobrepoblar areas cercanas y alinear su velocidad con los vecinos. Esto da lugar al comportamiento de agrupaciones fluctuantes entre individuos o células que se puede observar en una simulación de enjambre normal. En este caso las reglas del juego cambian cuando se insertan individuos llamados "shifters" que tienen cierta probabilidad de alterar a sus vecinos.

Los tipos de shifters son: Los Knitters (Azules) fijan algunas células formando redes y realintizan otras. Los Flockers (Rojos) hacen que las celulas se comporten como una unidad rápida fuertemente vinculada a su vecindad, y los Healers (verdes) que reinician la célula. Lo realmente interesante de este pequeño ecosistema es la forma en la que este escenario aleatorio regido po rreglas simples comienza a imitar comportamientos que se pueden observar en la naturaleza: cacería, trampas, asedio, lucha entre Shifters, unidad multicelular, acorralamiento, entre otros.

CONTROLES : Arrastrar el click sobre la pantalla crea nuevas células. Para crear nuevos shifters basta con usar las teclas [K] para knitters,[H] para healers y [F] para flockers. [R] para posicionar uno aletorio.

Camdraw en p5.js + ml5.js

Con la iniciativa Trainable Machine de Google se genera un modelo de red neuronal entrenada con imagenes etiquetadas respectivamente con UP, DOWN, LEFT, RIGHT y STILL segun la pose que represente. Una vez obtenido el modelo entrenado, se implementa librería de Machine Learning ml5 de Javascript para importar el modelo y usarlo para clasificar video en vivo de la webcam y de esta forma darle instrucciones al juego.

El objetivo del juego es guiar el viajero Rojo hacia los objetivos azules para crecer y recolectar el mayor numero de puntos posible.Las ordenes se le daran al juego por webcam, traduciendose gracias al modelo a 5 instrucciones basicas: ir arriba, ir abajo, ir a la izquiera, ir a la derecha y no hacer nada.

CONTROLES : Para jugar es necesario permitirle a la página usar la webcam pues de esta manera se recolectan las imagenes que traducen a instrucciones. Para que la red neuronal reconozca mejor la pose, es necesario que la webcam enfoque el pecho, la cabeza y los brazos completos.Además, es preciso que el fondo sea uniforme (por ejemplo, una pared lisa).

QUEDARSE QUIETO: Quedarse quieto con los brazos abajo.

IR ARRIBA:Hacer una "casa" con las manos sobre la cabeza, poniendo las manos por encima de la cabeza en forma de punta hacia arriba.

IR ABAJO:Hacer una forma de flacha hacia abajo por debajo de la cara, haciendo una cuna para la mandibula con las manos hacia abajo en forma de punta, tambien alzando los codos.

IR A LA IZQUIERDA: poner la mano izquierda al lado de la cara con la palma hacia el frente, como si fuera un saludo.

IR A LA DERECHA:poner la mano derecha al lado de la cara con la palma hacia el frente, como si fuera un saludo.

Imferye en p5.js

Se genera un mapa aleatorio usando Ruido de Perlin incluyendo fuentes de recursos aleatorias en el terreno. La idea del juego es expandir lo más posible el imperio sin que se consuma por su propio tamaño al tener que mantener tantas estaciones.

Al comienzo se puede poner un semilla correspondiente a una ciudad grande a partir de la cual se originará el imperio. Cada nueva estación que se ponga en el mapa debe estar conectada a una estación cercana al igual que subirá de nivel a medida que conecte a si misma mas y más estaciones. Despues de lograr poner 5 ciudades grandes, el juego dará más semillas para originar nuevas ciduades grandes sin necesidad de estar conectadas a otros puntos o subir de nivel cualquer estacion a ciudad grande. El rango de conectividad de las estaciones cambia según su rango.

CONTROLES : Con click derecho se crean nuevas estaciones, siempre y cuando esten dentro del rango de conexión de otra estación. Si esta muy lejos de cualquier estación y se dispone de SEEDS, hacer click genera una nueva ciudad grande desconectada.
Controles del teclado :
M : Cambia la vista de mapas de recursos [normal - combustible - comida - terreno].
A : Enciende/apaga el modo de auto-exloración.
P : Pausa/despusa el juego.
K : (con el cursor sobre una estación) Golpea fuertemente la estación. Muchos golpes pueden matar una estación.
R : Enciende/apaga el modo 'ignorar ruinas'.
V : Enciende/apaga la progpagación de un virus letal que ataca ciudades de forma arbitraria.

Slide en mattter.js + p5.js

Experimentando con una nueva librería que permite la creación de objetos físicos.

CONTROLES : La posición de mouse en X determina la tasa de destrucción de objetos aumentando de izquierda a detercha. La posición de mouse en Y determina la tasa de creación de objetos aumentando de abajo hacia arriba.

Hive en p5.js

Hive es una idea simple: el poder del enjambre. En este escenario se tienen objetos con velocidades propias respecto a la posicion del puntero (mouse). Para adquirir masa , y por ende tamaño, necesitan estar lo más cerca posible de otro objeto; Así cuanto más se comportan en "unidad" más masa tienen la capacidad de adquirir y viceversa, cuanto más se alejen uno de otro más riesgo hay de que desaparezcan. Se tienen dos modos de simulación: en el primero (libre) cada objeto tiene una velocidad resultado de una combinación lineal de las posiciones XY del puntero, es decir que cambiando dicha posicion la velocidad del objeto cambia. en el segundo modo (lider), los objetos seguirán al puntero como si se tratase de un lider.

Para rastrear las características de grupo que se tienen en un momento dado, se analizan algunos estadisticos que se muestran en la esquina superior izquierda de la pantalla. Estos dan cuenta de el indice de concentracion de objetos (Focus density), la proporcion de masa respecto a la masa maxima que se puede alcanzar (Mass density) y el porcentaje de objetos que estan existiendo repsecto al total inicial (Existence ratio). Cabe recalcar que una vez el objeto desaparece puede vovler a existir si su posicion hipotetica se enceuntra cerca de la de otro objeto.

CONTROLES : La posicion XY del puntero del mouse determina la velocidad de cada objeto, ya sea en modo libre o modo lider. El click cambia el escenario entre los dos modos posibles.

Red Conexa en p5.js

El cerebro esta compuesto de billones y billones de neuronas, cada una con capacidad de procesar información por señales de manera compartimental y teselada. Las señales viajan a través de una red con conexiones casi que arbitrarias entre neuronas que se extieden indefinidamente. Compuertas lógicas con capacidad de memoria que forman sistemas complejos más allá de nuestro entendimiento.

En este ocasión se tiene un sistema aleatorio con cientos de neuronas que se mueven con pulsaciones del ambiente. Establecen conexiones por cercanía con otras neuronas para transportar señales. Si existe un origen para la señal, esta viajara por determinado numero de nodos hasta que finalmente se quede sin suficiente fuera para seguir transmitiendose.

CONTROLES : Haciendo CLICK en cualquier neurona se cambia su estado entre activa (origen) e inactiva.

Caja fuerte en p5.js

En este caso se trata de una serie de candados de combinación que deben ser resueltos con el objetivo de desbloquear una recompensa en el nivel 8. Lo interesante es que la complejidad de los conados crece tan rapido que no es posible llegar al nivel 10 en un tiempo razonable.

Funciona asi: Cada nivel tiene un numero de ruedas giratorias con un punto negro que si se alinea en linea reca con los de las otras ruedas permiten abrir el candado. La velocidad angular de las ruedas , es decir su velocidad de giro, depende de una reaccion alatoria a la posición XY del ultimo click en pantalla. De esta forma cada vez que se hace click en diferentes partes de la pantalla, las ruedas cambian su velocidad de giro. Cabe recalcar que cada rueda tiene una respuesta diferente y por ende es imposible sincronizarlas.

CONTROLES : Haciendo CLICK en cualquier parte de la pantalla se modifica la velocidad angular de las ruedas como respuesta a la posición XY del click.

Modelo de Isisng 2D en p5.js

El modelo de Isisng describe el comportamiento de spines vecinos en cuanto a su alineacion dependiendo de parametros de orden y la temperatura del sistema en el que se ecuentran. Desde la fisica se sabe que a mayor temperatura o menor parametro de orden el sistema permanece en desorden. Sin embargo, al bajar la temperatura el sistema tiende a seccionarse por regiones llamadas regiones de magnetización. Lo mismo sucede si el parametro de orden es tan alto que sobrecompensa los efectos de las altas temperaturas.

En dos dimensiones tratamos una red de spines en donde cada uno tiene cuatro vecinos inmediatos. El objetivo siempre es disminuir la energia total del sistema la cual se calcula como la suma de todas las interacciones entre vecinos inmediatos. Es decir que dependiendo de la alineacion de cada spin en relacion a la de sus cuatro vecinos. Con el fin de que la energia total disminuya se deben alinear spines vecinos que eventualmente lleva a la formación de regiones.

CONTROLES : La posicion en X del cursor determina la magnitud del parametro de orden J y la posicion en Y del cursor determina la magnitud de la temperatura. Hacer click lleva al sistema a un estado aleatorio.

Sistema Planetario en p5.js

En el universo existen miles de trillones de estrellas, cada una con posibilidad de tener un sistema planetario que la orbite y por extensión, la minuscula posibilidad de contener una civilización inteligente.

En este caso no se tiene rigor cientifico en cuanto al valor de la simulación pues se trata de un generador de sistemas solares aleatorio. Las distancias gráficas como los radios de los astros están lejanos de ser adecuados, pero solo por esta vez entreguemonos a la ciencia ficción.

CONTROLES : La posicion del cursor en X determina la dirección y avance del tiempo. La posicion del cursor en Y dicta la velocidad con la que avanza el tiempo. La tecla ENTER alinea los planetas y la Tecla BACKSPACE genera un estado aleatorio de este sistema solar. Para explorar un nuevo sistema solar basta con hacer CLICK o simplemente recargar la página.

NOTA : Hay un bug que no puedo encontrar que hace que cada tanto se crashee el programa. Si esto sucede lo recomendado es cerrar la pestaña y vovlerla abrir. También se puede recargar la pagina pero no es seguro que funcione.

2D Wave en p5.js

Cuando se estudian las ondas eventualmente uno se encuentra con que se pueden describir como osciladores estáticos circulares con desfase asociado a su posicion dentro del sistema. Esto se logra con demostraciones matematicas simples cuyo objetivo es exponer una verdad simple pero poderosa sobre las ondas, y es que en general no transportan materia, sino energía.

En esta ocasión, el espacio se llena con osciladores circulares estáticos cuyo desfase se relaciona con su distancia al centro de la pantalla. Esto hace que cualquier onda a gran escala que se evidencia en el modelo será de caracter radial.

CONTROLES : La posicion X del cursor determina la flecha del tiempo en la simulacion, permitiendo ir hacia atras, adelante o incluso dejar estático el tiempo. La posicion Y del cursor determina la fase relativa entre vecinos, lo que modifica la la forma de la onda en si misma.

Torture Time en p5.js

El tiempo es un concepto abstracto con el que nos hemos familiarizado a pesar de no comprender muy bien. Si bien el tiempo solo es otra propiedad de la realidad en donde vivimos, es casi seguro que cualquier humano alguna vez ha sufrido por culpa de este.

En este ambiente vemos lo que sería el concepto de tiempo de forma gráfica: un popurrí de eventos y conceptos aplicados alineas del tiempo que no van precisamente al mismo compás.

CONTROLES : La posicion en X del cursor determina la progresión temporal del tiempo mientras que la posicion en Y del cursor afecta la progresión de cada reloj. Mantener el click (sobretodo cuando estos dos ultimos efectos están al máximo) tortura al tiempo en sí mismo.

Payback is a bitch...

Atomo en p5.js

Los átomos, en especial los pesados no son eternos. La física atómica y nuclear han determiando que entre más masivo es un átomo , mas probabilidad tiene de decaer en elementos de menor masa atómica. Esto se debe a que el núcleo del átomo tiene la misma carga positiva y entre más protones tenga dicho núcleo más van a quererse separar. Los neutrones ayudan a estabilizar el núcleo sin embargo, muchas veces no es suficiente.

Esta simulacion genera un determinado numero de átomos aleatorios y permite ver el deterioro progresivo de estos en funcion de su masa. Estos se van a degradar con el paso del tiempo por eventos de decaimiento nuclear arbitrarios.

CONTROLES : La posicion en X del cursor determina la escala de tiempo con la que avanza la simulación. Es decir, cuanto tiempo simulado pasa por milisegundo. El click del cursor reinicia la simulación con parámetros aleatorios.

Collider en p5.js

De la mecánica cuántica, la física de particulas y en especial de la Teoría Cuántica de Campos (QFT) se sabe que el espacio tiene energía que se manifiesta como una simetría temporal del espaciotiempo. En consecuencia, el espacio está repleto de pares de partículas virtuales que se crean a partir de la nada, particula y anti-particula, para eventualmente colisionar y aniquilarse para volver a la nada. La simulación está en condiciones periódicas, es decir, lo que sale por un borde de la pantalla, entra por el opuesto.

¿Es posible volver a la nada absoluta a partir de un estado de caos aleatorio?

Durante la simulación se genrarán un numero finito de parejas, de esta forma en un futuro eventualmente no quedará ninguna particula pues todas se habran encontrado con su par.

CONTROLES : La posicion en X del cursor determina la velociad del tiempo. La posicion Y del cursor determina la probabilidad que en el instante siguiente se genere un nuevo par, siendo el borde inferior de la pantalla la mayor probabilidad.

Lanzador Genetico en p5.js

Se tiene un cañón que dispara un proyectil con determianda velocidad inicial a determinado angulo de elevación. El objetivo es lanzar un proyectil a una distancia especifica y obtener los parametros necesarios para este lanzamiento optimo. El lanzador puede evaluar el desempeño del lanzamiento segun la distancia entre el objetivo y la distancia lograda por el lanzamiento.

Cada generacion se hace un determinado numero de lanzamientos llamados la poblacion cuyo objetivo es ser en promedio mejor que la generacion anterior.

La idea del algoritmo genetico es que si bien el cañon no hace calculos para deteminar los parametros optimos, si puede evaluar cada lanzamiento con el fin de determianr su desempeño y determinar si vale la pena que herede sus caracteristicas a la siguiente generación.

CONTROLES : La posicion en X del cursor determina la velociad del tiempo.

NOTA : La simulación se detiene cuando el promedio de puntajes es cerrcano a 0.95/1. Es decir, cuando el algoritmo alcanza un 95% de exactitud.

HACKATHON: AUTOMATAS CELULARES

Para el HACKATHON: AUTOMATAS CELULARES junto con mi equipo nos propusimos a abordar desde nuestras diferentes disciplinas las muchas facetas qur tiene Bogotá y como algunos fenomenos se presentan de forma iterativa.

Partiendo de la memoria digital de un tejido urbano que ha surgido de procesos múltiples entre la planeación y la contingencia, proponemos otras formas de observar algunos de los fenómenos iterativos que le componen.

Quienes somos : Juan Camilo León, ruth Martinez, Alejandro Nieves, David Paipa, Juan Restrepo.

SCIENCE HACK DAY 3

Para el Science Hack Day 3: Expediciones junto con mi equipo sacamos adelante la iniciativa psiconautas. Se trata de un proyecto enfocado en la experiencia personal relativa al tiempo y el espacio.

psiconautas propone la idea del viaje espaciotemporal basado en un punto de vista subjetivo y no absoluto. A modo de agencia de viajes y valiendonos de la ciencia (futurista, no de ficción) exponemos una idea irónica y divertida del viaje espaciotemporal.

Quienes somos : D3RO, Hache, Nina, Sebastian, Brayan, Eloin, Ana, Sebastian y su servidor, Paipa.

KEY GENERATOR

Nombre de usuario: ?
Contraseña (4 digitos) : ?
Confirmar contraseña :

OUTPUT:

KEY CHECK

Nombre de usuario: ?
Contraseña (4 digitos) : ?

OUTPUT:

El autor

Formación en astronomía y física computacional con gusto musical variado. Fan del humor negro, la juventud en decadencia y opositor de la censura.

Twitter feed

Follow Me