Fonter och emojis

Ladda fonter och emojis till ett projekt

Du kan hitta fonter på flera webbsidor. Här har jag laddat ner Coolvetica . Du får filen som en zip. Packa upp filen och ladda upp filen som är i formatet  .ttf till ditt projekt i p5.js editor. Du laddar upp en fil genom att högerklicka på projektmappen och välj Add file.

I projektfoldern ska nu finnas följande filer:

let font;
function preload(){
  font = loadFont('coolvetica.ttf');
}

I setup() skapas först en canvas som är 500 * 500 pixlar.  Bakgrund får en grå färg. Funktionen textFont() anger vilken font som ska användas när funktionen text() används. Här sätts fonten till variabeln font. Textens storlek sätts till 256 px, färgen vit och inge stroke (streck i ytterkant). Därefter skrivs texten HEJ ut.

En variabel med namnet points skapas. Där används en funktion textToPoints(). Den funktionen beräknar en array av punkter som följer en specificerad text.
font.textToPoints(‘HEJ’,50,200)  säger att det är på texten HEJ (som är i fonten font som arrayen ska beräknas på.

function setup() {
  createCanvas(500, 500);
  background(70);
  textFont(font);
  textSize(256);
  fill(255);
  noStroke();
  text('HEJ', 50,200);
  let points = font.textToPoints('HEJ',50,200);
  console.log(points);
}

Om du loggar variabeln points till konsolen nu genom console.log(points); så fås i konsolen en stor array full med objekt. Om man tittar närmare på ett av dessa objekt så ser man att det har en position som anges av ett x-värde och ett y-värde. Den positionen ska användas när emojin  ska ritas

Object, Object, Object, Object, Object, Object  
▶0: Object
 x: 182.864
 y: 42.56718826293945
 alpha: 90
▶1: Object
▶2: Object

Fortfarande i setup() skapas en for-loop. Den ska loopa igenom hela arrayen points.
En variabel med namnet plutt skapas. den får värdet av objektet i arrayen.
Färgen på stroke sätts till röd och storleken till 4 px. Därefter ritas en punkt ut för varje index i arrayen. Positionen för varje punkt är plutt.x och plutt.y

for(let i=0; i < points.length; i++){
  let plutt = points[i];
  stroke(255,0,0);
  strokeWeight(4);
  point(plutt.x, plutt.y);
}

När koden nu körs kommer en mängd röda punkter att synas i ytterkant av texten.
Kommentera bort följande rad i koden
//text(‘HEJ’, 50,200);
Nu syns bara de röda prickarna. För att byta de röda prickarna mot emojis så tas följande tre rader bort

stroke(255,0,0);
strokeWeight(4);
point(plutt.x, plutt.y);

och ersätts med:

textFont(NORMAL);
textSize(12);
text('😱', plutt.x, plutt.y);

textFont(NORMAL) ersätter coolvetica med p5.js vanliga text. Emojis fungerar inte med coolvetica. Innanför apostroferna sätts en valfri emoji. Du kan hitta de flesta på emojipedia . Hitta den emoji du vill ha, klicka på kopiera knappen och klistra in i editorn.

 Hitta andra emojis och ändra storlek på text tills du är nöjd med din bild.

 Kan du sprida ut emoji lite. Kanske bara rita ut varannan?
Det är for-loopen som måste förändras för det.