diff --git a/README.md b/README.md index cb0caee..1806f12 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # TAKE THE STREET -![Take the Street](docs/marca/logotipo-naranja.svg) +![Take the Street](docs/marca/logotipo.svg) -![Una multitud en la calle forma una persona grande con el puño en alto](docs/calle.svg) +![Gente que sale de los portales y avanza hacia la calle](docs/calle.svg) **takethestreet.net / takethestreet.org**: red internacional de las acampadas por la vivienda que nacieron en la Puerta del Sol el 26 de septiembre de 2026 (26S). La vivienda es un derecho, no un negocio. @@ -118,30 +118,28 @@ Tres piezas, cada una con su uso: ![Hoja de marca](docs/marca/hoja.png) -- **Símbolo** (`docs/marca/simbolo*.svg`): una calle en perspectiva con una cabeza encima. La calle es el cuerpo de una persona: la gente es la calle. Repite la forma de las presencias del dibujo (cabeza y cuerpo afilado). Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja. -- **Logotipo** (`docs/marca/logotipo*.svg`): «TAKE THE STREET» en **Dracutaz**, de pincel, como la calle pintada. Va convertido a trazados, así que no hace falta la fuente. Hay versión en una línea y en dos, en negro, con STREET en naranja y en negativo. +- **Símbolo** (`docs/marca/simbolo*.svg`): una calle en perspectiva con una cabeza naranja encima. La calle es el cuerpo de una persona: la gente es la calle. Repite la forma de las presencias del dibujo (cabeza y cuerpo afilado). Sirve para el favicon, los avatares de redes y las pegatinas, y se lee hasta a 16 px. Tres versiones: positivo, negativo y sobre naranja. +- **Logotipo** (`docs/marca/logotipo*.svg`): «TAKE THE STREET» en **Grindy Brush**, todo en negro (o en blanco sobre negro). Va convertido a trazados, así que no hace falta la fuente. Hay versión en una línea y en dos. - **Firma**: símbolo + logotipo. Es lo que va arriba a la izquierda de la web. - **Ilustración** (`docs/calle.svg`): la imagen principal de la portada, nunca en la cabecera. Ver el apartado 6. -Color: naranja `#ff7a1a`, negro `#111` y blanco. +Color: negro `#111` y blanco. El naranja `#f04e23` (más rojizo que el de antes) va solo en detalles: la cabeza del símbolo, alguna línea del dibujo, la sombra de los botones y el directo. Tipografías: -- logotipo: **Dracutaz** (Dhabee Studio, freeware, uso comercial permitido), solo convertida a trazados +- logotipo: **Grindy Brush** (Sronstudio), solo convertida a trazados - titulares, botones y etiquetas: **League Gothic**, OFL (`mockup/fonts/`) - texto: la fuente del sistema -### Alternativas para el logotipo +### Licencia del logotipo -![Alternativas de pincel](docs/marca/alternativas.png) - -Grindy Brush, Eagle Horizon, Brushed, Higher Jump y Future Outrun (1001fonts) son **solo para uso personal**. Para usarlas en el logotipo habría que comprar la licencia o pedir permiso a sus autores. Dracutaz no tiene ese problema. +Grindy Brush es una versión demo **solo para uso personal**. Antes de usar el logotipo en público (web, redes, carteles, camisetas) hay que comprar la licencia en https://sronstudio.com/product/grindy-brush-font/ o pedir permiso a su autor (sronstudio@gmail.com). Su nota avisa de que el uso comercial sin licencia se cobra a diez veces el precio de la licencia corporativa. ## 6. Dibujo -![Una multitud en la calle forma una persona grande con el puño en alto](docs/calle.svg) +![Gente que sale de los portales y avanza hacia la calle](docs/calle.svg) -Una calle pintada a brochazos que se disuelve hacia arriba y hacia los lados, sin edificios. Encima, cientos de «presencias» (cabeza, cuerpo afilado y una sombra en diagonal), a la manera del mural *Presencias/Ausencias* de Suso33 en Tetuán: juntas forman una persona grande con el puño en alto. Unas pocas van en naranja. Se genera con `tools/calle.py`, sin dependencias: +Una calle corta vista en diagonal, con el punto de fuga a la derecha. Solo se ve la planta baja: la fachada se desvanece hacia arriba, sin pisos, y la calle también se pierde por la derecha. De cada portal sale gente que avanza hacia la calzada y hacia quien mira. Son «presencias» abstractas a la manera de Suso33 (el mural *Presencias/Ausencias* de Tetuán): una mancha afilada con la cabeza, y algunas con zancada o con el puño en alto. Todo en negro; el naranja va solo en líneas de detalle (el bordillo, algún dintel, alguna estela). Se genera con `tools/calle.py`, sin dependencias: ``` python3 tools/calle.py docs/calle.svg @@ -149,6 +147,6 @@ python3 tools/calle.py docs/calle.svg ## 7. Maqueta -`mockup/index.html` es HTML y CSS, sin JavaScript. Se abre directamente en el navegador. Sigue el estilo de acampada26s.net (blanco y negro, bordes de 3 px, sombra de color): firma en la cabecera, portada con el lema y el dibujo, y debajo el deck.Capturas al principio de este README. +`mockup/index.html` es HTML y CSS, sin JavaScript. Se abre directamente en el navegador. Sigue el estilo de acampada26s.net (blanco y negro, bordes de 3 px, sombra de color): firma en la cabecera, portada con el lema y el dibujo debajo, y debajo el deck.Capturas al principio de este README. -Código AGPL-3.0. Textos y dibujo CC BY-SA 4.0. Tipografías: League Gothic (OFL); logotipo dibujado con Dracutaz (freeware). +Código AGPL-3.0. Textos y dibujo CC BY-SA 4.0. Tipografías: League Gothic (OFL); logotipo dibujado con Grindy Brush (demo de uso personal, ver «Licencia del logotipo»). diff --git a/docs/calle.svg b/docs/calle.svg index 002beae..69679b9 100644 --- a/docs/calle.svg +++ b/docs/calle.svg @@ -1,1179 +1,225 @@ - + - - - - - - - - - - + + + + + + + + - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/deck-movil.png b/docs/deck-movil.png index f74483b..99d1bea 100644 Binary files a/docs/deck-movil.png and b/docs/deck-movil.png differ diff --git a/docs/deck.png b/docs/deck.png index 5d880aa..8475466 100644 Binary files a/docs/deck.png and b/docs/deck.png differ diff --git a/docs/marca/alternativas.png b/docs/marca/alternativas.png deleted file mode 100644 index 9b36c1c..0000000 Binary files a/docs/marca/alternativas.png and /dev/null differ diff --git a/docs/marca/hoja.png b/docs/marca/hoja.png index 77491be..be5a603 100644 Binary files a/docs/marca/hoja.png and b/docs/marca/hoja.png differ diff --git a/docs/marca/logotipo-2l.svg b/docs/marca/logotipo-2l.svg index da92b77..06c5f76 100644 --- a/docs/marca/logotipo-2l.svg +++ b/docs/marca/logotipo-2l.svg @@ -1 +1 @@ - + diff --git a/docs/marca/logotipo-naranja-2l.svg b/docs/marca/logotipo-naranja-2l.svg deleted file mode 100644 index 3b4e7da..0000000 --- a/docs/marca/logotipo-naranja-2l.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/marca/logotipo-naranja.svg b/docs/marca/logotipo-naranja.svg deleted file mode 100644 index 1f2ffe9..0000000 --- a/docs/marca/logotipo-naranja.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/docs/marca/logotipo-negativo-2l.svg b/docs/marca/logotipo-negativo-2l.svg index 584ccb3..5422b33 100644 --- a/docs/marca/logotipo-negativo-2l.svg +++ b/docs/marca/logotipo-negativo-2l.svg @@ -1 +1 @@ - + diff --git a/docs/marca/logotipo-negativo.svg b/docs/marca/logotipo-negativo.svg index 1d32cf8..2681fa7 100644 --- a/docs/marca/logotipo-negativo.svg +++ b/docs/marca/logotipo-negativo.svg @@ -1 +1 @@ - + diff --git a/docs/marca/logotipo.svg b/docs/marca/logotipo.svg index 9abb1fa..4e29ad1 100644 --- a/docs/marca/logotipo.svg +++ b/docs/marca/logotipo.svg @@ -1 +1 @@ - + diff --git a/docs/marca/simbolo-naranja.svg b/docs/marca/simbolo-naranja.svg index 789fd25..f0bab49 100644 --- a/docs/marca/simbolo-naranja.svg +++ b/docs/marca/simbolo-naranja.svg @@ -1,5 +1,5 @@ - + - + diff --git a/docs/marca/simbolo-negativo.svg b/docs/marca/simbolo-negativo.svg index ac50856..810abac 100644 --- a/docs/marca/simbolo-negativo.svg +++ b/docs/marca/simbolo-negativo.svg @@ -1,5 +1,5 @@ - + diff --git a/docs/marca/simbolo.svg b/docs/marca/simbolo.svg index 4f2b374..b864f45 100644 --- a/docs/marca/simbolo.svg +++ b/docs/marca/simbolo.svg @@ -1,5 +1,5 @@ - + diff --git a/mockup/css/deck.css b/mockup/css/deck.css index 93052d0..feadcb4 100644 --- a/mockup/css/deck.css +++ b/mockup/css/deck.css @@ -3,7 +3,7 @@ :root { --bg: #fff; --fg: #111; - --neon: #ff7a1a; + --neon: #f04e23; --bd: 3px solid var(--fg); --bt: "League Gothic", "Arial Narrow", Impact, sans-serif; --txt: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; @@ -29,9 +29,9 @@ a { color: inherit; } .idiomas a[aria-current] { background: var(--fg); color: var(--bg); box-shadow: 3px 3px 0 var(--neon); } .portada { padding: 36px 0 0; border-bottom: var(--bd); text-align: center; } -.calle { display: block; width: 100%; max-width: 1100px; height: auto; margin: -10px auto 0; } +.calle { display: block; width: 100%; max-width: 1200px; height: auto; margin: 10px auto 0; } .lema { margin: 0; font: 400 clamp(40px, 6vw, 80px)/.95 var(--bt); text-transform: uppercase; } -.sub { margin: 10px 0 0; font: 20px var(--bt); letter-spacing: .12em; text-transform: uppercase; color: var(--neon); } +.sub { margin: 10px 0 0; font: 20px var(--bt); letter-spacing: .12em; text-transform: uppercase; } .tags { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: var(--bd); font: 18px var(--bt); letter-spacing: .03em; } .tags span { border: 2px dashed var(--fg); padding: 1px 8px; } diff --git a/mockup/index.html b/mockup/index.html index e519abc..561659f 100644 --- a/mockup/index.html +++ b/mockup/index.html @@ -9,14 +9,14 @@
- Take the Street + Take the Street

La vivienda es un derecho,
no un negocio

Red internacional de acampadas · 26S

- Una multitud en la calle forma una persona grande con el puño en alto + Gente que sale de los portales y avanza hacia la calle
#takethestreet#26s#acampadaporto#generazionesenzacasa#11N#viviendaya
diff --git a/tools/calle.py b/tools/calle.py index 908d3c7..e66206c 100644 --- a/tools/calle.py +++ b/tools/calle.py @@ -1,108 +1,111 @@ -# Genera docs/calle.svg: calle pintada que se disuelve, con «presencias» que, -# juntas, forman una figura grande con el puño en alto (a la manera de Suso33). +# Genera docs/calle.svg: una calle corta vista en diagonal. De cada portal sale +# gente que avanza hacia la calzada (presencias abstractas, a la manera de Suso33). +# Arriba no hay pisos: la fachada se desvanece, y la calle también hacia la derecha. import sys, random, math random.seed(26) OUT = sys.argv[1] -W, H = 1600, 900 -VX, VY = 800, 70 # punto de fuga -INK, ORA = "#111", "#ff7a1a" +W, H = 1600, 700 +VX, VY, F, EYE = 1150, 210, 520, 1.6 # punto de fuga a la derecha, focal, ojo a 1,6 m +FX, KX = -5.0, -2.6 # fachada y bordillo (m) +INK, ORA = "#111", "#f04e23" o = [] add = o.append -def esc(y): # tamaño según la distancia - return max(0.0, (y - VY) / (H - VY)) +def P(X, Yh, Z): # Yh = altura sobre el suelo + return VX + X * F / Z, VY + (EYE - Yh) * F / Z +def pts(*ps): + return " ".join(f"{x:.1f},{y:.1f}" for x, y in ps) +def brush(a, b, w, n=4, col=INK, op=.9): + for _ in range(n): + j = lambda: random.uniform(-w, w) * .35 + add(f'') -def edge(xb, y): # x de una recta que va del punto de fuga a (xb, H) - return VX + (xb - VX) * esc(y) - -Y0 = 210 # lo de arriba queda en blanco: se recorta -add(f'') +HV = 570 # se recorta el suelo vacío de abajo +add(f'') add(''' - - - - - - - - - - + + + + + + + + ''') -# --- calle pintada: todo dentro de la máscara que la disipa --- -add('') -road = [(VX, VY), (edge(-150, H), H), (edge(1750, H), H)] -add(f'') -def brush(x0, y0, x1, y1, w, n, col=INK, op=.85): - for _ in range(n): - j = lambda: random.uniform(-w, w) * .5 - add(f'') +ZN, ZF = 1.5, 70 +# --- calle: suelo, bordillo y carretera; se va a blanco por la derecha --- +add('') add('') -for xb, w in ((-150, 26), (1750, 26)): # bordillos - y0 = VY + 40 - brush(edge(xb, y0), y0, xb, H + 30, w, 7) -add('') +add(f'') +add(f'') # acera +brush(P(KX, 0, ZN), P(KX, 0, 40), 9, 5) # bordillo +brush(P(KX + .25, 0, ZN), P(KX + .25, 0, 34), 3, 2, col=ORA) # línea naranja de detalle +add('') -# --- figura grande: siluetas sencillas en coordenadas de la imagen --- -def cap(px, py, ax, ay, bx, by, r): # cápsula (segmento con radio) - dx, dy = bx - ax, by - ay - t = max(0, min(1, ((px - ax) * dx + (py - ay) * dy) / (dx * dx + dy * dy))) - return math.hypot(px - (ax + t * dx), py - (ay + t * dy)) < r -K, YT = .8, 250 # escala y altura de la figura -def dentro(x, y): - x, y = 800 + (x - 800) / K, 60 + (y - YT) / K - return (math.hypot(x - 772, (y - 205) * .9) < 56 or # cabeza - cap(x, y, 790, 372, 815, 560, 88) or # tronco - cap(x, y, 735, 360, 590, 270, 34) or cap(x, y, 590, 270, 560, 150, 32) or # brazo en alto - math.hypot(x - 556, y - 128) < 46 or # puño - cap(x, y, 880, 360, 960, 470, 32) or cap(x, y, 960, 470, 935, 585, 30) or # brazo bajo - cap(x, y, 770, 590, 700, 735, 44) or cap(x, y, 700, 735, 650, 870, 40) or # pierna - cap(x, y, 860, 590, 940, 720, 44) or cap(x, y, 940, 720, 1010, 860, 40)) # pierna +# --- fachada solo a la altura de los portales: arriba se desvanece --- +add('') +add(f'') +brush(P(FX, 0, ZN), P(FX, 0, ZF), 7, 4) # pie de la fachada +DOORS = [4.0, 7.5, 12.0, 18.5, 28.0] +for zd in DOORS: + d = [P(FX, 0, zd), P(FX, 2.5, zd), P(FX, 2.5, zd + 1.5), P(FX, 0, zd + 1.5)] + add(f'') + w = 90 / zd + brush(d[0], d[1], w, 3); brush(d[1], d[2], w, 3) # marco + if zd in (4.0, 12.0): # dintel en naranja + brush(P(FX, 2.7, zd - .1), P(FX, 2.7, zd + 1.6), w * .5, 2, col=ORA, op=.8) +add('') -# --- presencias --- -def presencia(x, y, s, col): - h = 46 * s # alto de la figura - r = h * random.uniform(.10, .13) # cabeza - lean = random.uniform(-.12, .12) * h - w = h * random.uniform(.13, .19) # hombros - fx = x + lean # pies - # sombra hacia abajo a la derecha - L = h * random.uniform(.9, 1.3) - add(f'') - sx, sy = x, y - h + 2 * r # hombros - split = random.random() < .35 # piernas abiertas al andar - if split: - d = (f'M{sx-w/2:.1f},{sy:.1f} Q{sx-w*.55:.1f},{sy+h*.35:.1f} {fx-w*.32:.1f},{y:.1f} ' - f'L{fx-w*.12:.1f},{y:.1f} L{fx:.1f},{y-h*.3:.1f} L{fx+w*.12:.1f},{y:.1f} L{fx+w*.32:.1f},{y:.1f} ' - f'Q{sx+w*.55:.1f},{sy+h*.35:.1f} {sx+w/2:.1f},{sy:.1f} Z') - else: - d = (f'M{sx-w/2:.1f},{sy:.1f} Q{sx-w*.45:.1f},{sy+h*.45:.1f} {fx-w*.1:.1f},{y:.1f} ' - f'L{fx+w*.1:.1f},{y:.1f} Q{sx+w*.45:.1f},{sy+h*.45:.1f} {sx+w/2:.1f},{sy:.1f} Z') - add(f'') - add(f'') +# --- presencias: salen de los portales hacia la calzada y hacia quien mira --- +def presencia(X, Z, paso, brazo): + fx, fy = P(X, 0, Z) + h = 1.75 * F / Z # alto en pantalla + lean = h * .09 # inclinados hacia delante (derecha) + sx, sy = fx + lean, fy - h * .80 # hombros + r = h * .095 + w = h * .17 + # sombra en el suelo, hacia atrás a la izquierda + add(f'') + if paso: # zancada: tronco y dos piernas de pincel + hip = (fx + lean * .4, fy - h * .45) + add(f'') + for fxx, fyy in ((fx - h * .16, fy), (fx + h * .17, fy - h * .03)): + add(f'') + else: # cuerpo afilado + add(f'') + if brazo == "arriba": # brazo en alto + hx, hy = sx + h * .14, sy - h * .30 + add(f'') + add(f'') + elif brazo == "atras": # brazo que se balancea hacia atrás + add(f'') + add(f'') + if random.random() < .15: # estela de movimiento en naranja + for k in range(2): + y = sy + h * (.15 + .22 * k) + add(f'') -pts = [] -def libre(x, y, s): - return all(math.hypot(x - a, (y - b) * 1.6) > 17 * max(s, t) for a, b, t in pts) -for _ in range(200000): # la figura grande, densa - x, y = random.uniform(400, 1150), random.uniform(240, 890) - if dentro(x, y): - s = .62 + .38 * esc(y) - if libre(x, y, s * 1.35): - pts.append((x, y, s)) -grande = len(pts) -for _ in range(900): # poca gente suelta, por la calle - y = random.uniform(300, 880) - x = random.uniform(edge(-150, y), edge(1750, y)) - s = .62 + .38 * esc(y) - if not dentro(x, y) and libre(x, y, s * 5) and random.random() < .35: - pts.append((x, y, s)) -pts.sort(key=lambda p: p[1]) # de lejos a cerca -add('') -for x, y, s in pts: - presencia(x, y, s, ORA if random.random() < .05 else INK) +gente = [] +for zd in DOORS: + n = random.randint(7, 10) if zd < 20 else 5 + for i in range(n): + t = (i + random.uniform(.1, .9)) / n # 0 en el portal, 1 en la calzada + X = FX + .5 + t * random.uniform(4, 9) + Z = zd + .75 - t * zd * random.uniform(.3, .5) + if Z < 2.6 or any(abs(Z - g[0]) < .35 and abs(X - g[1]) < .45 for g in gente): + continue + paso = random.random() < .3 + brazo = random.choices(["arriba", "atras", None], [.15, .2, .65])[0] + gente.append((Z, X, paso, brazo)) +gente.sort(reverse=True) # de lejos a cerca +add('') +for Z, X, paso, brazo in gente: + presencia(X, Z, paso, brazo) add('') open(OUT, "w").write("\n".join(o)) -print(f"{len(pts)} presencias ({grande} en la figura grande)", file=sys.stderr) +print(f"{len(gente)} presencias", file=sys.stderr)