# Week 3

# Mass pong

Maak een folder mass_pong aan met de mappenstructuur uit p5.js introductie. Deze applicatie genereert een grote hoeveelheid ballen. Elke bal botst tegen de randen (actie-reactie).

Een Ball heeft de volgende eigenschappen en methoden:

  • x de x-positie van een ball
  • y de y-positie van een ball
  • xSpeed de constante snelheid van een ball langs de x-as
  • ySpeed de constante snelheid van een ball langs de y-as
  • r de straal van een ball
  • update() update de positie van een ball
  • display() herteken de ball

Tip

  • genereer elke ball met de volgende code new Ball(x, y, r, xSpeed, ySpeed), bewaar in een variabele
  • de balls worden gegenereerd door een for-lus
  • de balls worden toegevoegd aan een array

Resultaat:

Mass pong

# Unique arcade character

Maak een folder arcade_character aan met de mappenstructuur uit p5.js introductie. Deze applicatie genereert om de seconde een uniek aracade teken.

Op basis van de volgende afbeelding:

Pattern

Kunnen we het volgende patroon samenstellen (0 is doorzichtig en 1 vol zichtbaar):

  • rij 1: '0001000'
  • rij 2: '0011100'
  • rij 3: '0111110'
  • rij 4: '1111111'

We verbinden vervolgens alle patronen met elkaar, wat resulteert in let pattern = '0001000001110001111101111111...'. Stel met van dit patroon een grid van rechthoeken samen. Op basis van de huidige index verkrijgen we uit het patroon 0 of 1. Geeft aan beide toestanden een specifieke kleur. Gebruik de object initializer notatie om arcadeCharacter te initaliseren. Een arcadeCharacter heeft de volgende eigenschappen:

  • x de x-positie van een arcade character
  • y de y-positie van een arcade character
  • w de breedte van een arcade character
  • h de hoogte van een arcade character
  • gutter de afstand tussen de rechthoeken binnen een arcade character
  • nCols aantal rechthoeken per rij
  • pattern op basis van dit patroon worden de rechthoeken ingekleurd

Resultaat:

Arcade character

# Digital clock

Maak een folder digital_clock aan met de mappenstructuur uit p5.js introductie. Deze applicatie genereert een geanimeerde digitale klok.

Resultaat:

Digital clock

# Mass digital clocks

Maak een folder mass_digital_clocks aan met de mappenstructuur uit p5.js introductie. Deze applicatie genereert een groot aantal geanimeerde digitale klokken.

Resultaat:

Mass digital clocks

# Tag cloud

Maak een folder tag_cloud aan met de mappenstructuur uit p5.js introductie. Deze applicatie visualiseert tags as a cloud. Na elke klik op de muis verschijnen de tags op een andere plaats. Hoe langer het woord van een tag des te groter het lettertype hiervan.

Resultaat:

Tag cloud

# Waves

Maak een folder waves aan met de mappenstructuur uit p5.js introductie. Deze applicatie visualiseert sinus golven. Na iedere amplitude zal het kleur veranderen.

Resultaat:

Waves

# Quotes

Maak een folder quotes aan met de mappenstructuur uit p5.js introductie. Deze applicatie visualiseert quotes. Na elke klik op de muis verschijnt de volgende quote.

Resultaat:

Quotes
© 2024 Arteveldehogeschool Laatst bijgewerkt: 16/8/2023, 16:47:25