Saltar a contenido

Canadian Broadcasting Company

Burton Kramer (1972)

logo1

Representación Animada del Logo "The Gem" de CBC

El cuarto logo de la Canadian Broadcasting Corporation (CBC), conocido internamente como "The Gem" (la gema), fue diseñado por el artista gráfico Burton Kramer en diciembre de 1974. Este diseño es uno de los símbolos más reconocidos de la corporación.

En su versión original para televisión:

  • El logo aparecía como una animación caleidoscópica que se transformaba en su forma final mientras irradiaba hacia afuera desde el centro de la pantalla sobre un fondo azul.

  • Esta animación, conocida coloquialmente como "The Exploding Pizza", marcó la llegada del servicio de televisión en color a toda la red de CBC.

El diseño tiene un simbolismo profundo:

  1. La gran figura central representa la letra "C" de Canadá.

  2. Las partes irradiadas simbolizan la difusión de señales, en referencia a la misión de transmitir a través de la nación.

  3. El círculo azul que rodea al logo alude al mundo, encapsulando la idea de "Canadá transmitiendo al mundo".

logo1 logo1

logo1 logo1

Interpretación Personal

He explorado variaciones geométricas animadas que capturan el espíritu dinámico del diseño original. Utilizando código en JavaScript y la biblioteca p5.js, he creado una representación que:

  • Permite manipular parámetros como el número de figuras y su proximidad.

  • Simula un efecto visual en expansión, similar al de la versión original.

Detalles Técnicos

El programa genera una serie de formas geométricas que emulan las secciones irradiadas del logo de CBC.

Características principales:

  • Factor de distancia: Controla cómo las figuras se aproximan entre sí, creando un efecto de contracción o expansión.

  • Número de elementos: Cambia la densidad y complejidad de las variaciones geométricas.

Los controles interactivos (deslizadores) permiten experimentar con diferentes configuraciones para generar nuevas interpretaciones visuales.

See the logo study in P5

See the logo study in P5 in OpenProcessing

Code p5

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
//LOGO 1
//Genera variaciones de la idea para el logo de la Canadian Broadcasting Company
//Diseñado por Burton Kramer (1972)


function logo1(posx, posy){
    this.pos=createVector(posx, posy);
    this.side=100;
    //filas y columnas
    this.num=3;
    //factor que indica lo que se muestra de cada figura
    this.factor=1.5;

       this.update=function(){
     this.factor=slider1.value();
     this.num=slider2.value();
     this.pos.x=width/2;
     this.pos.y=height/2;
      }

this.display=function(){

for(var j=0; j<=this.num; j++){
  for(var i=(this.num-j); i<=this.num; i++){
      //sup derecha
      this.add_shape(this.pos.x+this.points(0, this.side/2,this.num-i+1), this.pos.y-this.points(0, this.side/2,this.num-j+1));
      //sup izquierda
      this.add_shape(this.pos.x-this.points(0, this.side/2,this.num-i+1), this.pos.y-this.points(0, this.side/2,this.num-j+1));
      //inf derecha
      this.add_shape(this.pos.x+this.points(0, this.side/2,this.num-i+1), this.pos.y+this.points(0, this.side/2,this.num-j+1));
      //inf izquierda
      this.add_shape(this.pos.x-this.points(0, this.side/2,this.num-i+1), this.pos.y+this.points(0, this.side/2,this.num-j+1));
    }
  }
}

this.add_shape=function(xpos, ypos){

rectMode(CENTER);
strokeWeight(0);
fill(255);
square(xpos, ypos, this.side);
fill(0);
circle(xpos, ypos, this.side-5);
fill(255);
circle(xpos, ypos, this.side/3);
strokeWeight(4);
stroke(255);
strokeCap(SQUARE);
line(xpos, ypos, xpos+this.side/2, ypos)


}

//POINTS
//Función recursiva que aplica un factor (this.factor) de distancia entre figuras
//Te da las posiciones de las figuras de forma que cada
//una se acerca proporcionalmente a las anteriores
this.points=function(a_1, a_2, n){
  n=n-1;
  if(n==0)
    return a_1;
  else
    return(a_1+this.points(a_2, a_2/this.factor, n));
  }

}


function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
  }