Skip to content

Animatie

Animatie verwijst naar het creëren van de illusie van beweging door het snel weergeven van een reeks stilstaande beelden, frames genaamd. Elke frame verschilt subtiel van de vorige en volgende frames, waardoor het menselijk oog de indruk krijgt van vloeiende beweging. Animaties kunnen worden gemaakt met behulp van verschillende media, waaronder tekeningen, afbeeldingen, 3D-modellen en meer.

Hier zijn enkele redenen waarom animaties worden gebruikt:

  • Visuele Aantrekkingskracht: Animaties kunnen visuele interesse en aantrekkingskracht toevoegen aan een project. Bewegende elementen trekken automatisch de aandacht en maken de inhoud boeiender.
  • Educatie: Animaties worden vaak ingezet om complexe concepten en processen eenvoudig uit te leggen. Ze maken abstracte ideeën visueel begrijpelijk en boeiend.
  • Entertainment: Films, tv-shows, games en online content maken uitgebreid gebruik van animaties voor entertainment. Ze zorgen voor een plezierige en interactieve ervaring voor het publiek.
  • Simulaties: In wetenschap, techniek en training worden animaties gebruikt om simulaties te maken. Deze simulaties kunnen helpen bij het begrijpen van complexe fenomenen en het trainen van mensen in realistische scenario’s.
  • Interactieve Ervaringen: Interactieve animaties reageren op de acties van gebruikers. Deze kunnen worden gebruikt in educatieve apps, games en interactieve kunst om de gebruikerservaring te verbeteren.
  • Webdesign: Animaties worden vaak toegepast in webdesign om websites levendiger en aantrekkelijker te maken. Ze kunnen de gebruiker begeleiden, informatie op een boeiende manier presenteren en het algemene ontwerp verbeteren.

Kortom, animaties zijn een krachtig communicatiemiddel dat kan worden gebruikt om verhalen te vertellen, complexe ideeën over te brengen, betrokkenheid te vergroten en entertainment te bieden. Ze hebben een breed scala aan toepassingen in verschillende industrieën en spelen een belangrijke rol in moderne media en communicatie.

In de volgende voorbeelden kan je zien hoe je in p5 animaties kan maken gebruikmakend van losse sprites of van een spritesheet.

const sprites = []; // Array om afbeeldingen op te slaan
let spriteIndex = 0; // Huidige frame van de animatie
let spriteAmount = 16; // Hoeveelheid sprites die geladen/getekend moeten worden

function preload() {
    for (let i = 0; i < spriteAmount; i++) {
        sprites[i] = loadImage(`sprite_${i}.png`); // Laad afbeeldingen in de vorm sprite_0.png, sprite_1.png, enz.
    }
}

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);

    // Teken de huidige sprite afbeelding op het canvas
    image(sprites[frameCount % sprites.length], 100, 100);
}

let spritesheet; // Variabele om de spritesheet-afbeelding op te slaan
let spriteWidth = 64; // Breedte van elk frame in de spritesheet
let spriteHeight = 64; // Hoogte van elk frame in de spritesheet
let spriteCols = 4; // Totaal aantal kollomen in de spritesheet
let spriteRows = 4; // Totaal aantal rijen in de spritesheet

function preload() {
    spritesheet = loadImage('spritesheet.png'); // Laad de spritesheet-afbeelding
}

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);

    let sx = frameCount % spriteCols * spriteWidth; // X-positie van het frame in de spritesheet
    let sy = Math.floor(frameCount / spriteCols) % spriteRows * spriteHeight; // Y-positie van het frame in de spritesheet -

    image(spritesheet, 100, 100, spriteWidth, spriteHeight, sx, sy, spriteWidth, spriteHeight);
}

Oefening

Zoek plaatjes op en maak gebruik van de bovenstaande code om een animatie te maken. Denk aan onderdelen zoals:

  • De maancyclus
  • Planten die groeien
  • Explosies