Leer tekenen met JavaScript

Een tijdje geleden hebben we ons verdiept in de Turtle Graphics bibliotheek voor Python , met als resultaat onderstaande tekening van een voetballer.

Voetballer

Nu we Python steeds beter onder de knie hebben, zijn we ook aan de slag gegaan met JavaScript om onze kennis te verbreden. Na het volgen van enkele online introductielesjes hebben we ons zelf de uitdaging opgelegd om bovenstaande voetballer na te maken met JavaScript. Voordat we aan de slag gaan raadplegen we Youtube. We oefenen wat met behulp van deze en deze instructiefilmpjes en gaan vervolgens zelf aan de slag.

Verschil Python Turtle en JavaScript

We kunnen het verschil tussen Python Turtle en JavaScript het beste uitleggen aan de hand van een voorbeeld waarbij we een figuur willen tekenen.

Turtle werkt volgens het volgende principe:

  • Teken een lijn 25 pixels vooruit
  • Draai 90 graden naar links
  • Teken 40 pixels vooruit
  • Draai 90 graden naar rechts
  • etc.

In het JavaScript canvas werkt het als volgt:

  • Ga op het canvas naar de positie met de coördinaten 100 pixel, 100 pixel (100, 100)
  • Teken een lijn van positie (100,100) naar positie (125, 100)
  • Teken een lijn van positie (125,100)  naar (125,140)
  • Etc.

Om nu onze voetballer gemaakt met Python exact na te maken in Javascript hebben we alle hoeken en lijnen omgerekend naar coördinaten. Hier kwam een aardige portie wiskunde bij aan te pas. Gelukkig zit dochter/zus op 3 Atheneum en kan zijn ons de broodnodige ondersteuning leveren.

Bereken de positie

 

Het resultaat

Na de nodige uurtjes rekenen en puzzelen is het ons gelukt om de voetballer precies na te maken:

Voetballer JavaScript vs Python

 

De code hier beschikbaar op GitHub.

Vervolg…

Dit is slechts een eerste stap. We gaan onze voetballer nu verder bewerken en proberen om ook een animatie er van te maken. Hoe onze blog in de gaten voor het vervolg.

Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *