Ga naar de inhoud

p5js.nl

Menu
  • Home
  • Unit 1
    • Unit 1, LA1
      • U1 LA1 1.1. Maak een Robot
      • U1 LA1 1.2 Lijn functies en parameters
      • U1 LA1.3 Meerhoeken, sterren, bogen
      • U1 LA 1.4 Mini-project: Maak een Taijitu (Yin & Yang)
    • Unit 1, LA 2
      • U1 LA 2.1 Meebewegen met de muis
      • U1 LA2.2 Meekleuren met de muis op je eigen variabele
      • U1 LA 2.3 Random Ellipsen
      • U1 LA2 Mini-Project Custom Emoji
    • Unit 1, LA3
      • U1 LA 3.1 Inleiding Kleur
      • U1, LA 3.2 Maak je lievelingskleur in de HSB kleurmodus
      • U1 LA 3.3 Kleuren paletten
      • U1 LA 3.4 Eenvoudige Functies
      • U1 LA 3.5 Een simpele tekst
    • Unit 1 Final Project Teken een GSM
  • Unit 2
    • Unit 2, LA1
      • U2 LA1.1 If-Then-Else Kleur die Robot
      • U2 LA 1.2 AND en OR
      • U2 LA1 Mini-Project Stoplicht
      • U2 LA1.4 Tekenen met de muis
      • U2 LA1.5 De map() functie
    • Unit 2, LA 2
      • U2 LA2.1 Raken met Collide2D
      • U2 LA2.2 Muisclicks en vormen als knop gebruiken
      • U2 LA 2.3 Meer met functies
      • U2 LA2 Final Project Light Switch Game
    • Unit 2, LA3
      • U2 Final Project Painter
  • Unit 3
    • Unit 3 LA1
      • U3 LA 1.1 While Loops
      • U3 LA 1.2 Een for-loop
      • U3 LA 1.3 For-loop in een for-loop
      • U3 Mini-Project Wallpaper design
    • Unit 3 LA2
      • U3 LA 2.1 Arrays en Loops Deel 1
      • U3 LA 2.2 Arrays en loops deel 2 – random
    • Unit 3 LA 3 Mini-Project Vision Board
      • Unit 3 LA3.1 Afbeeldingen uploaden
    • Unit 3 LA 4 Mini-Project Bewegende Tekst
      • U3 LA 4.1 Werken met fonts
      • U3 LA 4.2 Geluiden
    • Unit 3 LA 5 Mini-Project Fun Piano
    • Unit 3 Final Project Meme Generator
  • Unit 4
    • Unit 4 LA 1 Stuiteren
    • Unit 4 LA1 Mini-Project DVD-Logo
    • Unit 4 LA 2.1 & 2.2 Translations & Rotations
    • U4 LA2 MP Draai die Koppen of Calypso
    • U4 LA 3.1 Sinus en cosinus
    • U4 LA 3 Mini-Project Stoomtrein
    • Unit 4 FP Brulbrief
  • Unit 5
    • U5 LA1 Programmeer Oefeningen
    • U5 LA2 Globale Variabelen opheffen
    • U5 LA 2.1 Finite State Machine
  • Blog
  • Links
    • P5JS Editor
      • P5JS.org
      • Video's Coding Train
      • P5JS Reference
      • Intro to Computational Media (2022)
    • Openverse Images
      • Freesound
      • Music
      • Free stock photo's
      • Free Vector Images
      • Dafont
  • Contact
    • Beoordeel P5js.nl
    • Docenten Info
Menu

U3 LA 4.1 Werken met fonts

Via Google Fonts

Het makkelijkst is om de Web Fonts van Google te gebruiken, natuurlijk om onze tekst wat op te leuken. Bij Google Fonts kun je de fonts gebruiken zonder ze te downloaden. Je laadt ze via het CSS dat Google Fonts aanbiedt.

NB: er zijn wel privacy bezwaren tegen Google Fonts, want ze weten precies waar jij gaat…

Voorbeeld Sofia Font

Dit Google font kun je laden met de onderstaande codes. Gebruik de index.html en de sketch.js allebei.

Gebruik de volgende code als index.html van je sketch. Hier wordt de CSS geladen voor het Sofia font.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Sofia"
    />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <script src="sketch.js"></script>
  </body>
</html>

Hieronder de code voor sketch.js


function preload(){
  
}
function setup() {
  createCanvas(400, 200);
  textFont("sofia")
}

function draw() {
  background(220);
  textSize(26)
  text("Sofia!",100,100)
}

Met een gedownload font

Eerst moet je een font-file (een ttf of een otf bestand) downloaden van een gespecialiseerde site als dafont.com of Fontsly. Het gedownloade font moet je uploaden naar de editor. Bij nood: gebruik deze batmforever_alt.ttf

Klap de sidebar uit. Met het kleine pijltje omlaag krijg je een menu om mee te uploaden. Er is een bug met filenames: hou deze lowercase en kort. Anders pakt ie ‘m niet.

Het font wordt eerst gepreload. De variabele die je daarmee maakt, gebruik je met de textFont() functie.

var batman;

function preload(){
  batman = loadFont("batmanforever.ttf");
  
}
function setup() {
  createCanvas(400, 200);
  textFont(batman)
}

function draw() {
  background(220);
  textSize(26)
  text("Batman!",100,100)
}

Opdracht

Maak een sketch met tenminste 1 Google Web Font naar keuze (maar wel een andere als in het voorbeeld) en minstens 1 eigen geüpload font.

Dit is de vertaling-in-aanbouw van de Amerikaanse lesmethode Introduction to computational media (V2020, V2022) voor P5JS door Luisa Pereira.

Aangepast voor Nederland door docent Barry Voeten.

Creative Commons-Licentie
Dit werk valt onder een Creative Commons Naamsvermelding-NietCommercieel-GelijkDelen 4.0 Internationaal-licentie.
© 2023 p5js.nl | Aangedreven door Minimalist Blog WordPress thema