In P5 is hier de bekende Beethovenposter van Josef Müller-Brockmann nagemaakt, met variabelen voor de grafische onderdelen. Links het origineel en rechts in P5. Het geeft dus oneindig veel variaties. Om het beter te zien, klik hier. Naast het origineel staat daar de javascript versie.
Hoe kun je die grafische elementen maken?
Met de arc-functie in P5 zijn deze grote vormen lastig te bepalen. Daarom is gekozen of het met een eigen script lukt. We gebruiken hiervoor de cosinus en sinus waarover hier al eerder een bericht is geplaatst.
Het bronbestand van de P5-beethovenposter vind je hier. Het is even zoeken hoe je een boog kunt tekenen. Hier is gekozen voor de beginShape en endShape waartusssen twee for-loops staan, die x en y van de punten (telkens een nieuwe vertex) bepalen.
Eerste versie van de boog-functie
Hier zie je het script van een basisversie. Het ziet er ingewikkelder uit dan het is.
Het bron bestand vind je in deze map: link.
In plaats van de mouseX en mouseY kun je gewoon waardes zetten. Maar zo kun je er wel de mogelijkheden mee ontdekken, zie hieronder in deze gif-afbeelding.
Graden op basis van mouseX en mouseY
Hieronder is in een gif-afbeelding een variatie te zien, waarbij de positie van je cursor wordt gebruikt om de boog groter of kleiner te maken. Nu draait de boog rechtsom, zoals de computer normaal rekent. Net andersom dan wat we op school (met onze geo-driehoek) leerden. De link naar dit p5-bestand staat hier.
De scriptregels (met Math.atan2) om de graden te berekenen op basis van mouseX en mouseY, staan hieronder. Het centrum van het canvas wordt er vanaf gehaald (-width/2 en -height/2).
Meerdere bogen voor Beethoven
In de uitwerking van de Beethovenposter is de functie maakBoog( ) meerdere keren gebruikt. Daar is ook de beginstand telkens anders. Nogmaals: het bronbestand van de P5-beethovenposter vind je hier.
Veel plezier met dit script. Laat maar een reactie achter als dit bericht nuttig was…
