Logo algoritmico ///// Omotio
Con la llegada del año 16 Omotio trae muchas novedades y cambios. Empezaremos hablando del nuevo logo de Omotio. Este se crea como resultado de materializar lo que mas nos identifica: la generación de infinitas posibilidades por medio de algoritmos y procesamiento numérico. Por esto es una obra de arte generativo, minimalista, creada en colaboración entre Carlos Adrian Serna y Sebastian Gonzalez Dixon, cuyo resultado puede ser apreciado en omot.io
El arte generativo es una rama de las artes digitales y electrónicas en el cual la obra se crea a cada instante a partir de un detonante inicial. Este arte es tan efímero como una nube, perpetuamente cambiante, relativa a su observador y desprendida de toda vanidad pues le es indiferentes si ha sido observada o a pasado desapercibida.
En su interior, códigos con funciones y procedimientos matemáticos definen una nueva realidad que se genera a partir de un conjunto de reglas muy básicas, que ayudadas por el tiempo son capases de hacer emerger formas de gran complejidad.
Nuestro nuevo logo, en su forma, es una evolución de la marca anterior. Este conserva el color representativo de nuestra empresa, el color #E85720, visualizado como un naranja que tiende al rojo. Otra característica que se mantuvo fue la circularidad y la rotación del centro hacia la derecha superior, proponiendo en este caso un punto de fuga en lugar de una esfera, como se usaba anteriormente.
El logo se construye a partir de ligeras variaciones aleatorias de la posición, el tamaño y el grosor de círculos pseudo-concéntricos que se redibujan perpetuamente uno sobre otro. Por esto en cada visualización que se realiza del logo, cada parámetro varía infinitesimalmente, dando un resultado completamente diferente, siempre. Sin embargo perseptivamente todos los resultados conforman un conjunto muy bien definido de variaciones, las cuales son en su totalidad, posibles formas de la marca: Todas ellas son validas.
De esta forma hemos creado un logo que no es estático, que fluye como la corriente de un rio sobre una roca, siempre igual pero siempre único.
El algoritmo se creo en Processing, pero los derechos sobre la marca se enmarcan en el conjunto de parámetros que definen su forma, por lo cual puede ser reproducido de forma «idéntica» en cualquier lenguaje de programación.
Para otros medios es posible usar cualquiera de los frames generados por el algoritmo para usarlo en versiones impresas, o crear versiones en video o en animación gif para otros medios que no permiten su ejecución en tiempo real. Un ejemplo de esto se muestra a continuación:
Para los mas curiosos aquí les dejamos la versión web del algoritmo (javascript y processing.js ). O véalo vivo e inspeccione el código con su navegador en omot.io
/////////////////////////////////////////// Código Web del Logo de Omotio
// LOGO DE OMOTIO S.A.S
// Por Sebastian Gonzalez Dixon y Carlos Adrian Serna
// Todos los derechos reservados 2016
function setup() {
// Create the canvas
canvasScale = 800;
growingSpeed = 8;
createCanvas(canvasScale, canvasScale);
background(255);
strokeRed = 229;
strokeGreen = 82;
strokeBlue = 37;
centerOffsetx = 0.3;
centerOffsety = -0.5;
radMin = canvasScale*0.3;
radMax = canvasScale*0.85;
randCenterX = canvasScale*radMax*0.99;
randCenterY = canvasScale*radMax*0.99;
randRadius = canvasScale*centerOffsetx;
randRadiusY = canvasScale*centerOffsety;
noFill();
smooth();
}
function draw() {
if(frameCount%growingSpeed==0){
if(random(100) > 50){
strokeRed = 229;
strokeGreen = 82;
strokeBlue = 37;
}
else{
strokeRed = 255;
strokeGreen = 255;
strokeBlue = 255;
}
randRadius = random(radMin, radMax);
offsetX = centerOffsetx*radMax/4;
offsetY = centerOffsety*radMax/4;
centerMin = canvasScale*0.48;
centerMax = canvasScale*0.52;
randCenterX = offsetX*randRadius/(radMin-radMax) – offsetX*radMax/(radMin-radMax)+canvasScale*0.5 + canvasScale*random(-0.01,0.01);
randCenterY = offsetY*randRadius/(radMin-radMax) – offsetY*radMax/(radMin-radMax)+canvasScale*0.5 + canvasScale*random(-0.01,0.01);
}
else{
stroke(strokeRed,strokeGreen,strokeBlue);
strokeWeight(canvasScale*0.03*(frameCount%growingSpeed)/(growingSpeed-1));
ellipse(randCenterX,randCenterY,randRadius,randRadius);
}
}
