Saltar a contenido

Exhibition Services Erberto Carboni (1960)

Mi creación en p5

See the logo study in P5

Logo original

logo

Estudio Gráfico y Animación del Logo de Erberto Carboni (1960) - Exhibition Services

Este proyecto es una animación y estudio gráfico basado en el logo de Exhibition Services, diseñado por Erberto Carboni en 1960. El logo original puede verse en Logobook.

La animación utiliza p5.js para recrear y explorar variaciones geométricas del diseño original, permitiendo la manipulación interactiva de parámetros como el número de elementos, el radio de los círculos y la posición de las formas.

La Magia detrás de los logos que funcionan

Cuando veo un logo que "funciona", no puedo evitar imaginar el estudio y el proceso que llevó al diseñador o equipo a crearlo. Parte de ese proceso seguramente implicó hacer variaciones de las principales características del logo mientras se acercaban al resultado final.

¿Qué márgenes dejar? ¿Qué rotación aplicar? ¿Cuántos elementos de cada tipo incluir? Estas son preguntas clave que los diseñadores deben resolver en la etapa final de creación. Los estudios interactivos, como este, permiten dar algunas vueltas a esa fase de refinamiento y ayudan a explicar por qué las ideas detrás de esos logos funcionan tan bien.

Al manipular parámetros como el número de arcos, la posición de los elementos o el tamaño de los círculos, podemos experimentar con diferentes configuraciones y comprender cómo pequeñas variaciones pueden afectar la percepción visual y el equilibrio del diseño. Esto no solo nos acerca al proceso creativo del diseñador original, sino que también nos permite apreciar la elegancia y eficacia de un logo bien construido.

Características de la Animación

  • Controles interactivos: Se utilizan deslizadores (sliders) para ajustar dinámicamente los parámetros de la animación.
  • Geometría dinámica: Los círculos se organizan en arcos y se distribuyen alrededor de un punto central, emulando el estilo del logo original.
  • Efectos visuales: Se aplican variaciones en el tamaño y la posición de los círculos para crear un efecto visual dinámico y atractivo.

Code (p5.js)

Text Only
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
var logo=[];
var slider1, slider2, slider3, slider4;

function setup() {
  createCanvas(1200, 800);
  slider1 = createSlider(1, 30, 5, 1);
  slider1.position(10, 90);
  slider1.style('width', '140px');

  slider2 = createSlider(1, 40, 16, 1);
  slider2.position(10, 125);
  slider2.style('width', '140px');

  slider3 = createSlider(0, 100, 1.4, 0.1);
  slider3.position(10, 160);
  slider3.style('width', '140px');

  slider4 = createSlider(0, 100, 17.9, 0.1);
  slider4.position(10, 195);
  slider4.style('width', '140px');

  slider5 = createSlider(1, 50, 45, 0.1);
  slider5.position(10, 230);
  slider5.style('width', '140px');

  slider6 = createSlider(1, 50, 5, 0.1);
  slider6.position(10, 265);
  slider6.style('width', '140px');

  logo[1]=new logo3(width/2, height/2);
}

function draw() {
  background(255);
  logo[1].update();
  logo[1].display();
  textSize(32);
  fill(0);
  textSize(20);
  text(slider1.value(), 160, 100);
  text(slider2.value(), 160, 135);
  text(slider3.value(), 160, 170);
  text(slider4.value(), 160, 205);
  text(slider5.value(), 160, 240);
  text(slider6.value(), 160, 275);
  textSize(18);
  text("Exhibition Services", 20, 30);
  textSize(12);
  text("Erberto Carboni (1960) IT", 20, 50);
}

function logo3(posx, posy){
  this.pos=createVector(posx, posy);
  this.radio=45;
  this.radioMin=5;

  //slider 1
  this.arcos=slider1.value();
  //slider 2
  this.nelements=slider2.value();
  //slider3
  this.factorArea=slider3.value();
  //slider4
  this.factorPosicion=slider4.value();
  //slider5
  this.radio=slider5.value();;
  //slider6
  this.radioMin=slider6.value();

    this.update=function(){
    //slider 1
    this.arcos=slider1.value();
    //slider 2
    this.nelements=slider2.value();
    //slider3
    this.factorArea=slider3.value();
    //slider4
    this.factorPosicion=slider4.value();
    //slider5
    this.radio=slider5.value();;
    //slider6
    this.radioMin=slider6.value();
    var radio=0;
    var angle=0;

    var num=this.nelements;
    var arcos=this.arcos;
    for(var j=0; j<arcos; j++){
      radio=this.position(j);
      for(var i=0; i<num; i++){
          angle=i*TWO_PI/num;
          this.add_shape(this.pos.x+radio*cos(angle),this.pos.y+radio*sin(angle), this.radioMin*this.area(j));
      }
  }

    }

  this.display=function(){
    var radio=0;
    var angle=0;
    var num=this.nelements;
    var arcos=this.arcos;
    for(var j=0; j<arcos; j++){
      radio=this.position(j);
      for(var i=0; i<num; i++){
          angle=i*TWO_PI/num;
          this.add_shape(this.pos.x+radio*cos(angle),this.pos.y+radio*sin(angle), this.radioMin*this.area(j));
      }

    }
  }

//dibuja cada círculo en la posición indicada.
  this.add_shape=function(xpos, ypos, radio){
    rectMode(CENTER);
    fill(0);
    circle(xpos, ypos, radio);
  }

//calcula la posición en función del valor del arco al que pertenece
  this.position=function(n){
    var pos=this.radio;
      for(i=0;i<=n;i++){
        pos+=10+i*this.factorPosicion;
      }
      return(pos);

  }
//calcula el área en función del valor del arco al que pertenece
  this.area=function(n){
    var area=3;
      for(i=0;i<=n;i++){
        area+=i*this.factorArea;
      }
      return(area);

  }

}