Skip to content

Exhibition Services Erberto Carboni (1960)

My Creation in p5

See the logo study in P5

logo

Graphic Study and Animation of Erberto Carboni's Exhibition Services Logo (1960)

This project is an animation and graphic study based on the Exhibition Services logo, designed by Erberto Carboni in 1960. The original logo can be seen on Logobook.

The animation uses p5.js to recreate and explore geometric variations of the original design, allowing interactive manipulation of parameters such as the number of elements, the radius of the circles, and the positioning of shapes.

The Magic Behind Logos That Work

When I see a logo that "works," I can't help but imagine the study and process that led the designer or team to create it. Part of that process likely involved making variations of the logo’s main features while refining it toward the final result.

What margins should be left? What rotation should be applied? How many elements of each type should be included? These are key questions designers must answer in the final stages of creation. Interactive studies like this one provide insights into that refinement phase and help explain why the ideas behind these logos work so well.

By manipulating parameters such as the number of arcs, the position of elements, or the size of circles, we can experiment with different configurations and understand how small variations affect visual perception and design balance. This not only brings us closer to the original designer’s creative process but also allows us to appreciate the elegance and effectiveness of a well-constructed logo.

Animation Features

  • Interactive controls: Sliders allow real-time adjustment of the animation parameters.
  • Dynamic geometry: Circles are arranged in arcs and distributed around a central point, emulating the style of the original logo.
  • Visual effects: Variations in the size and position of the circles create a dynamic and engaging visual effect.

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