Benvenuto su Epixiom Blog
Benvenuto sul blog di Epixiom! Io sono Emiliano e ho fondato Epixiom perché mi occupo già da tempo di sviluppo web e marketing. Nel sito epixiom.io troverete i nostri servizi a prezzi molto vantaggiosi. Ma il primo argomento di questo blog non riguarda la nostra attività ma bensì un modo di scrivere codice e di fare “arte” tramite codice che risale a un po’ di anni fa e io, essendo del 1982, ho vissuto con partecipazione e anche voglia di testare in prima persona su Amiga e i PC che sono arrivati negli anni successivi.
Cosa troverai qui
È affascinante come due stili nati per pura necessità tecnica siano diventati icone culturali intramontabili. Sebbene oggi li vediamo spesso insieme nell’estetica “retrogaming”, la Pixel Art e l’ASCII Art hanno radici e scopi originari molto diversi.
Ecco una panoramica della loro evoluzione, dalle origini testuali ai siti web moderni.
1. ASCII Art: L’arte prima della grafica
Prima che i computer potessero visualizzare immagini (i cosiddetti “modi grafici”), gli utenti avevano a disposizione solo il testo. L’ASCII Art è nata per “disegnare” usando i 128 caratteri standard della codifica ASCII.
- Le Origini (Anni ‘60-‘70): Usata nelle università e nei laboratori di ricerca per creare diagrammi o immagini scherzose sulle stampanti ad aghi o sui terminali a fosfori verdi.
- L’Epoca delle BBS e di IRC (Anni ‘80-‘90): Prima del web moderno, si comunicava tramite Bulletin Board Systems. Qui l’ASCII Art divenne una forma d’arte identitaria: i gruppi di “cracker” o “warez” creavano loghi complessi nei file
.nfoper firmare le proprie imprese. - ANSI Art: Un’evoluzione dell’ASCII che utilizzava codici speciali per aggiungere colore e blocchi di riempimento, permettendo di creare illustrazioni molto più simili a veri disegni.
2. Pixel Art: L’estetica del limite
La Pixel Art nasce quando i computer acquisiscono la capacità di controllare ogni singolo punto (pixel) sullo schermo. Non era una scelta stilistica, era l’unico modo per disegnare con memorie video minuscole.
- L’Era degli 8-bit (Atari, NES): Con risoluzioni bassissime e palette di colori ridotte (spesso solo 4 o 16 colori), ogni pixel era fondamentale. Un singolo punto fuori posto poteva trasformare un occhio in una macchia.
- L’Età dell’Oro (16-bit / Arcade): Con il Super Nintendo e il SEGA Mega Drive, la Pixel Art raggiunge vette incredibili. Artisti come quelli di Metal Slug o Street Fighter creavano animazioni fluide e dettagliate, lavorando “punto su punto”.
- Il declino e la rinascita (2000 - oggi): Con l’arrivo del 3D, la pixel art sembrava destinata a morire. È “risorta” grazie ai giochi indie (Minecraft, Terraria, Stardew Valley) che hanno trasformato il limite tecnico in un linguaggio artistico nostalgico e pulito.
3. L’integrazione nel Web Design
Oggi, inserire Pixel Art o ASCII Art in un sito web non serve per risparmiare dati, ma per comunicare un’identità precisa (spesso legata al mondo tech, hacker o vintage).
Come vengono usate oggi:
- Favicon e Icone: Le piccole icone delle schede del browser sono, tecnicamente, la forma di pixel art più diffusa al mondo.
- Effetti Hover e Gamification: Molti siti di portfolio usano sprite in pixel art che si animano quando passi il mouse, creando un’esperienza interattiva “arcade”.
- Easter Eggs nel Codice: Se apri la “Console per sviluppatori” (F12) su siti come Amazon, Google o Discord, spesso troverai loghi in ASCII Art nascosti tra i commenti del codice.
- Font Iconografici: Molti siti usano set di icone (come FontAwesome) che richiamano lo stile pixelato per dare un tocco retro-chic.
Confronto Rapido
| Caratteristica | ASCII Art | Pixel Art |
|---|---|---|
| Elemento base | Caratteri di testo (A, @, #, -) | Pixel (quadrati di colore) |
| Supporto | Qualsiasi editor di testo | File immagine (PNG, GIF) |
| Vibe | Hacker, Terminale, Underground | Nostalgia, Videogame, Creatività |
Nota di stile: Se vuoi creare della Pixel Art oggi, non hai bisogno di software costosi. Esistono strumenti web-based come Piskel o Aseprite che sono diventati lo standard per gli artisti moderni.
Ti voglio far vedere come creare un effetto “Matrix” o “Digital Rain” utilizzando l’ASCII art. Invece di limitarci a caratteri casuali, faremo in modo che il codice “disegni” un’immagine che emerge dal flusso di dati.
Ecco il codice completo. Puoi sostituire l’immagine di base con qualsiasi logo o foto per vedere l’effetto “fantasma” tra i caratteri.
Effetto Matrix ASCII (HTML5 Canvas)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Matrix ASCII Effect</title>
<style>
body { margin: 0; overflow: hidden; background: #000; }
canvas { display: block; }
#controls { position: absolute; top: 10px; left: 10px; z-index: 10; }
</style>
</head>
<body>
<div id="controls">
<input type="file" id="upload" accept="image/*">
</div>
<canvas id="canvas1"></canvas>
<script>
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
const upload = document.getElementById('upload');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let symbols = [];
const fontSize = 12;
const columns = canvas.width / fontSize;
// Caratteri da usare
const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$+-*/=%' + 'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ';
class Symbol {
constructor(x, y, fontSize, canvasHeight) {
this.characters = charset;
this.x = x;
this.y = y;
this.fontSize = fontSize;
this.text = '';
this.canvasHeight = canvasHeight;
}
draw(context) {
this.text = this.characters.charAt(Math.floor(Math.random() * this.characters.length));
context.fillText(this.text, this.x * this.fontSize, this.y * this.fontSize);
if (this.y * this.fontSize > this.canvasHeight && Math.random() > 0.98) {
this.y = 0;
} else {
this.y += 1;
}
}
}
function init() {
for (let i = 0; i < columns; i++) {
symbols[i] = new Symbol(i, 0, fontSize, canvas.height);
}
}
init();
let image = new Image();
upload.addEventListener('change', (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
image.src = event.target.result;
};
reader.readAsDataURL(file);
});
function animate() {
// Effetto scia: disegna un rettangolo semitrasparente sopra il frame precedente
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = fontSize + 'px monospace';
symbols.forEach((symbol, index) => {
// Se c'è un'immagine, usiamo i suoi pixel per colorare il testo
if (image.complete && image.src) {
// Mappiamo la posizione del simbolo sull'immagine
const imgX = (symbol.x * fontSize / canvas.width) * image.width;
const imgY = (symbol.y * fontSize / canvas.height) * image.height;
// Disegniamo temporaneamente un pezzetto di immagine per leggerne il colore
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(image, -imgX, -imgY);
const pixel = tempCtx.getImageData(0, 0, 1, 1).data;
ctx.fillStyle = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
} else {
ctx.fillStyle = '#0f0'; // Colore Matrix classico
}
symbol.draw(ctx);
});
requestAnimationFrame(animate);
}
animate();
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
init();
});
</script>
</body>
</html>
Come testarlo:
- Copia il codice in un file chiamato
matrix.html. - Aprilo nel browser. Vedrai la pioggia verde classica.
- Si può applicare questo metodo anche a una foto.
Ma questo è solo uno dei tanti sistemi che possiamo inserire nei siti web, anche per divertirci a sperimentare e provare da vicino come poter adattare al mondo di oggi un tipo di intendere il web di ieri. Io lo trovo un processo affascinante.
Hai suggerimenti per nuovi post? Scrivici a info@epixiom.io