Starten met ZIM

See the Pen Les 1 Starten met zim by Frank Los (@franklosdus) on CodePen.

Canvas

In deze lessen gaan we aan de slag met HTML Canvas. Dat is een "leeg schildersdoek" waarop je kan "tekenen" met code. Je kunt ook werken met

 

  • tekst
  • plaatjes die je laadt
  • geluid

Je kan er tekeningen mee maken. Maar ook spelletjes, animaties, presentaties, puzzels en nog veel meer.

 

Bovenaan deze pagina vind je een code-editor waarin je code kunt veranderen. De resultaten zie je ernaast. Elke les heeft dit.

 

ZIM

Zim is een zogenaamde Javascript-bibliotheek.

Dat is eigenlijk code die iemand anders al geschreven heeft om het ons gemakkelijker te maken.

Zim is weer gebouwd met gebruik van een andere Javascript-bibliotheek: Createjs.

Wij kunnen op deze code verder bouwen omdat wij deze in ons programma laden.

Hoe dat gaat komt in een latere les.

 

Codepen

We werken met Codepen.

Dat is een programma waarmee je online code kunt schrijven.

Als je een account aanmaakt kun jij je code ook opslaan.

In een latere les vertel ik hoe je dat kunt doen.

Een basis-account is gratis.

Ik heb een betaald account zodat jij kunt coderen op mijn website.

 

HTML

Zim werkt met een "Frame".

Dit zet Zim zelf in HTML.

Daar hoef je dus niks voor te doen.

Dat is gemakkelijk.

We kunnen ons even helemaal concentreren op Javascript.

 

Opdracht

Klik hierboven op "Run Pen".

Je kunt dan de code bekijken en zelf veranderen.

Het resultaat zie je gelijk.

Zoek dit stukje code:

 

const circ = new Circle(100, pink);

circ.center()

circ.drag();

 

const circ = new Circle(100, pink);

 

Er wordt hier een cirkel gemaakt met een radius van 100 pixels. De vulkleur is roze.


Verander de radius.


Verander de kleur:

orange, green, pink, blue, brown, yellow, red, purple, silver, tin, grey, lighter, moon, light, dark, darker, white, black


Ga naar https://zimjs.com/docs.html en zoek daarin naar "circle". Er is een zoekvak bovenaan. Kijk wat je allemaal kunt veranderen.


circ.center()

Hier wordt de cirkel op het midden van de "stage" gezet.

circ.drag();

Hier geef ik de opdracht dat je de cirkel kunt slepen.


Verander de plek van de cirkel door deze code op regel 22 te plakken:

circ.x += 100;

circ.y += 100;

Verander de getallen.

Verander de plus in een min.

Meer bekijken

Weer een blog van Frank Los

Ik deel graag mijn visie en projecten.
Dit soort berichten maandelijks in je mail?
Meld je dan hier aan.

illustratie kadootje

Krijg je gelijk animaties voor op je site kado! 

Delen is fijn!

Wil je zelf uitblinken met visuele communicatie?

Bekijk dan mijn diensten.

Wellicht wil je meer weten over mij.