ZIMsalaBIM door leerkracht ict-co.
Karel.Rosseel@gmail.com Beveren
Bekijk ook www.klascement.be
Den Zen: zimjs.com
België: ZIMsalaBim
Open de nederlandstalige zimsalabim.webflow.io/zimjsSLATE
ZIMsalaBim vertlt je meer over KIDS/SLATE in een /zimkids-WIKI
Atom.io en oef. in 5minuten met zimjs.com/FIVE video+voorbeelden
info over zimjs.com/zapps + test op je smartphone /groovity en /pwa
ZIMsalaBim INHOUD ZIM Kids
ZIMsalaBim Kids DEEL 1 = PARTS
ZIMsalaBim Kids DEEL 2 = BUGS
ZIMsalaBim Kids DEEL 3 =THINGS
Intro video hoe ZIMjs gebruikt wordt om apps te maken.
ZIM wil ook kinderen inspireren om apps te maken met https://kids.zimjs.com, of developers op https://dev.Zimjs.com.
Veel plezier met creatief coderen van PWA-apps in zimjs.com/SLATE!
Samenvatting code op ZIMjs/com/magic of op ZIMjs.com/skool/lesson01
Color items from https://spline.design tekeningen, en beweeg de smartphone bv. door rond te draaien en kleur te veranderen.

Advertenties in website met animatie?
of game-frame in website = zimjs.com/ads

Versleep de smiley en je zal zien dat die veranderd.. ZIM maakt je happy coder: zim2 > 11 nft-code

>>Speel game op je phone
met dynamic Dpad

Why Zim? Pragma en Den Zen
leggen ZIM mogelijkheden uit in Introductie-video (2014->2022)

Check also the ZIM BASIC01 video 14:30
Try coding cool thingsin 5 minutes video's
zimjs.com/five or youtube/zimlearn/five

Maak vector-vormen bv. triangle(), circle()
NIO/parallax video of 5min tunnel maken, VR-bril voor kids-oogafstand in VR-movie

video preloading <> lazy load in shape image
Leer kinderen creatief omgaan met code-typen!
KIDS Planet codepen template
=>codepen.io/topic/zim/templates
Zimjs.com/slate => DEMO drone
Zim-games: www.ictgames.com
drag() de hand links < - > rechts
Zim-games: topmarks.co.uk/
Kies en sleep de elementen.
http://codepen.io/zimjs voor meer voorbeelden
start van een sjabloon = basisdocument van ZIM https://codepen.io/topic/zim/templates
Bekijk het basisvoorbeeld op codepen.io van karel Rosseel hier
Open de horizontale balken/wanden met showopenen.
grijze balk = WAND-menu (klik op tekst = openen [SHOW])
Kids.zimjs.com
zimjs.com/kids/teach
/magic
X
Wil je alls weten weten komen kan je ofwel naar zimjs.com/spells over het specifieke code-boek
Wil je tips bij gebruik maken vanafbeeldingenofgeluiden/fullscreen .. dan kan je naar zimjs.com/tips
Events: mouse() noMouse()
.zog()
.place()
/ZAP
/ZAPP
/TIPS
/ZOO
FRAME
FULL
html5
/LAB
STYLE WorldWide
Zim.js=11NFT
2021
X

.place("object") + F12 toont /.loc(x,y) waarde van een object

Om objecten te plaatsen, helpt het om even de .place() te gebruiken, nadien moet je die weer verwijderen, want de code is enkel bedoelt om de x en y locatie van het object te tonen van het .reg() punt van het object .Meesteal vooraf .centerReg() gebruiken. Bekijk de film vanaf muinttur 12:77 https://youtu.be/J9J8CMbMNV0?t=737

Apollo 8 bv.planeten plaatsen.

bekijk op codepen https://codepen.io/karelrosseel-prive/pen/JjyeoQV
of op zimsalabim.webflow.io/spaceshuttle-mousemove-flip

rechtsboven is de code 'volledig scherm'  tonen met pizzazz_02.js
const shell = new Container(stageW, stageH).addTo().top(4);
var fullscreen = new Button({
   width:40,
   height:40,
   corner:0,
   backgroundColor:clear,
   rollBackgroundColor:dark,
   icon:pizzazz.makeIcon("maximize", lighter),
   toggleIcon:pizzazz.makeIcon("close", lighter)
})
.addTo(shell)
.pos(30,30,RIGHT,TOP);

fullscreen.on("click", ()=>{
frame.fullscreen(!frame.isFullscreen);});
frame.on("fullscreenexit", ()=>{});

De wereld verandert =>PWA

Ook Mac Donalds werkt met touch +PWA-apps voor online bestellen.
http://webboard.app
Meer info over PWA apps voor Edge + vb.
Bekijk 6 uur SUMMIT

PWA-apps = 19/10/2021

Een website is eigenlijk een app, maar niet veel mensen weten het!
PWA Z-App maken en automatiseren met www.Zimjs.org/zapps !!
HTML5 basis met ZIMjs interactieve apps (jquery-js voor DOM, ZIMjs voor BOM!)
Belangrijk is te weten wat BOM Browser Object Model. Daarom kan je best even deze video bekijken voor de opbouw te weten. Succes!
13:52 Wat is er na Sratch = ZIMjs ! Bekijk alle ZIM-codepens op:
https://codepen.io/zimjs/pens/popular/?grid_type=list
BOM stands for Browser Object Model to use between different browsers implement it in different ways. Typically, the collection of browser objects. BOM main task is to manage browser windows and enable communication between the windows. Each HTML page which is loaded into a browser window becomes a Document object (DOM) and document object is an object in the BOM.
‍You can say BOM is super set of DOM. BOM has many objects, methods, and properties that are not the part of the DOM structure.
DOM stands for Document Object Model where tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language independent. Typically, we manipulate DOM tree with the help of JavaScript and jQuery. DOM organize the elements of the document in <html> tree structure, all elements of the document are defined as objects (tree nodes) which have properties and methods.

Zimjs.com/lab = SPRITE

Om te begrijpen hoe je een bewegende afbeelding kan schalen: test hier:
background + guy = klik = jump
zimjs.com/spritesheet/skateboard
klik op de skater en zo hoe hij het skateboard naar boven doet gaan!
Style heb je nodig om alle objecten of lettertypes in het hele document hetzelfde te maken. Style uitzetten kan met STYLE = {}
HTML5 en CSS kent je wel, leuk en toepasbaar in zim STYLE:Stijlen in een group steken, zo kan je gemakkelijker de soort stijl activeren .

bv.: Vietnam http://ichi.pro

bekijk de website en vertaal met translate.google.com FR -NL - EN
https://ichi.pro/vi/huong-dan-cua-ban-ve-tao-kieu-tren-canvas-20229347588714

Isräel: Ami

Ami is een programmeru uit Israël en schrijft tekst van rechts naar links. Hij maakt veel kinderspelen: https://closeapp.co.il/

Belgium => Wallonië (FR)

online app for kidgemaakt met ZIM Chim.. (combinatie met Adobe Animate en ZIM scrambler!) meer info op of  https://www.kloranebotanical.foundation/fr/actions-terrain/un-quiz-en-ligne-pour-semerveiller => https://www.kloranebotanical.foundation/fr
NFT is een manier om eigenaarschap te koppelen aan digitale online kunst/animaties. https://jarnoduursma.nl/blog/wat-is-nft

NFT = non-fungible token

1ste internetcode/bericht

2021=touch: AWE and Wonder

https://www.bloovi.be/branded/stories/2020/deze-25-jarige-iraanse-bouwt-aan-het-onderwijs-van-de-toekomst
Touch screen software voor schoolborden::
/components + test in /cat
PROSSESSINGjs
BOX2d
P5.js
Google>Flutter
Codeing train
/NFT/00/zim.js
PWA
X

Componenten

Het voordeel van ZIM ais dat je allemaal componenten krijgt om spellen/games te maken of informative voorstellingen.
Alle componenten zijn inclusief blinden uitleessoftware : dat noemen accesibility Youtube-video: https://zimjs.com/accessibility/

zimjs.com/cat

Test je kennis van de verschillende componenten door op de cat te klikken op de website zimjs.com/cat

NFT = creative art selling

NFT = latest ZIM version
with crystals for scripts

Zim werkt met createjs.js en dit script moet dus eerst zijn ingeladen vooraleer zim.js kan worden geladen, de minimale zim is zim_min:
‍<script src="http://zimjs.org/cdn/nft/00/zim_min.js"></script>
maar willen we physics erbij dan gebruiken we
<script src="http://zimjs.org/cdn/nft/00/zim_physics.js"> </script>
‍die automatisch de scripts box2d + physics + game bevat!

Zimjs/duo = zim2 3 > 11

Meer info over het ontstaan van Zim in 2014: film van 2015 : over hittest:

zimjs.com/tips.html#GLOSSARY

Normaal heb je een vast frame: van 1280x720 px , met een frame.color en frame.outercolor. Een full-screen-knop rechtsboven.
nft voorbeeld: https://codepen.io/karelrosseel-prive/pen/WNEqYgo
Dit is een vast frame van W1280 x H720px
en fullscreen-knop
Een pwa app heeft geen fullscreen knop nodig, want is altijd FULL
Bekijk https://codepen.io/karelrosseel-prive/pen/NWvZEQp
PWA -app, website gaat openen op je smartphone krijg een bericht: 'Installeer'
Kids Assets
/Assetlist
/cdn
/crystal
/learn.html#kids
/bits/view/fonts + fonts.googleapis
Codepen.io Start met NFT of CAT
X

Kids assets met id + src

FULL => frame = (.,., assets, path)

Hoe zie je nu waar de de assets zijn ingesloten in je code:
Het nadeel is als je een programma hebt gemaakt in je wil het weer importeren in kids-slate dan moet je steeds alle assets weer aanklikken. Gemakkelijker is deze code te gebruiken om images in te laden (want kids toont niet de frame code dus frame.dispose;
met Frame2 als nieuwe frame dat je wil gebruiken, de assets kan je er dan boven invoegen!

Fonts.google.com

Belangrijk is dat je weet dat google fionts kunnen worden gebruikt , maar je moet de correcte link gebruiken bij je src
namelijk src="https://fonts.googleapis.com/css?family=Staatliches" bijvoorbeeld: bekijk het voorbeeld zimjs.com/bits/view/fonts

start met Zim template!

Codepen heeft ZIM bij topic https://codepen.io/topics/

2 soorten templates: nieuwste crystal NFT

http://codepen.io/topics/ZIM/templates

Je kan gemakkelijk starten door gebruik te maken van een template van ZIMjs : via de website http://codepen.io/topic/zim/templates

Gebruik Frame FIT + tijd in seconden!
vroeger "fit" en tijd in milliseconden.

  • vroegere versie van Zim hadden tijd in milliseconds
    TIME = "milliseconds" MAAR NFT en CAT in seconden
  • wil je toch nog in NFT en CAT in milliseconds gebruiken dan kan dat, met extra code TIME = "milliseconds" . bekijk de note bij https://zimjs.com/cat/easeexamples.html
  • Hoe herken je gemakkelijk of je met de laatste scripts zit,
    dan kan je FIT bovenaan je Frame code zien
    const frame = new Frame(FIT, 1024, 768, "#EEE", "#555");
  • Een oudere versie van Zim heeft "fit" noodzakelijk
    const frame = new Frame("fit", 1024, 768, "#EEE", "#555");
kids.ZIMjs.com maakt PWA-apps wiki Hoe werkt PWA op Android+iOS+Chrome?
7-18j
VIDEO
kids.zimjs.com
SLATE
CoderDojo 2022
Wat is Zimjs?
MEDIUM
Zim-APPs = Zapp
Karel
eChalk
1280
X
Klaar voor een plezante uitdaging om je eigen GAME-scene te maken met een achtergrond, personage, tekstballon en een tekst-label?
Dan kan je met de Help-knop en zien hoe je de MAGIC code kan gebruiken. Open het marsmannetje voorbeeld in nieuw tabblad.
Alles staat gecentreerd met SPELL/center positie van de met de SPELLS/ pos zoeken .pos(x,y,RIGHT,BOTTOM) rechts/links, onder/TOP
asset("afbeelding.png") zoals backing = achtergrond, nature = natuurelementen en dieren, People = personages, Things = dingen bv. tekstballon, sound = basisgeluiden, OOK image("http://url.png")
Voorbeeldopdracht in zimjs.com/slate
CenterReg() registerpunt van de afbeelding
pos() positite van de afbeelding
.sca or .siz(w,h) in pixels
Phone turn

Iphone turn by finger

ZIM can turn phone

De code voor swipe

7 jaar = zimjs.com/slate

  • 5+ kinderen in de technieklessen kennis maken met programmeren, dan kunnen ze Scratch Junior gebruiken.
    Het leuke is dat deze software op tablet als app beschikbaar is.
    7+ Voor de kinderen die de uitdaging willen vergroten bestaat er Scratch.mit.edu die ervoor zorgt dat de leerling een bibliotheek aan afbeeldingen krijgt en bewegende sprites.
  • In veel scholen wordt ook code.org gebruikt, maar daarvoor heb je steeds een login nodig.
  • Software zonder login om te programmeren bestaat als apps maar dan meestal met reclame bij. Daarom biedt KIDS.zimjs.com een volledig gratis omgeving waar kinderen kunnen experimenteren met leuke afbeeldingen en ondertussen leren ze ook typen. met image("http://foto.png") kunnen kinderen alle foto's van het internet gebruiken.

12 -> 18: Z-app games
zimjs.com/zap => /zapp

Vanaf 12 jaar hebben kinderen Engels in de klas.
  • Scholen gebruiken Scratch.mid.edu maar wat blijkt dat veel kinderen reeds hebben kennis gemaakt met deze software in de lagere school.
  • Een eigen catching game maken leren de meeste kinderen aande hand van een video, maar ze leren niet wat code typen is onder elkaar. Daarom ontbreekt het kind aan structuur om te weten waar hij/zij nu mee bezig is.
  • Kids.zimjs.com probeert op een visuele manier echte code tot bij de leerlingen te krijgen als opstap naar de tweede en derde graad waar leerlingen met Phyton en PHP gaan beginnen coderen.
Een basisvoorbeeld van een scene: je kiest een achtergrond, personage, tekstballon en een label om hem iets te laten zeggen. voorbeeld
De positie van de afbeeldinge moet je nu nog leren en dat kan met de zimjs.com/SPELLS/ pos zoeken .pos(x,y,CENTER,CENTER)

Video om kids te tonen hoe je creatief kan zijn op hun eigen digitale lei/tablet!

Laat je kind creatief zijn maar met tools die ze later ook kunnen gebruiken wanneer ze graag apps gaan maken met dev.zimjs.com .
Let your kid be creative and make beautifull things easy with knowledge for apps at a later age with dev.zimjs.com.

Kids can be creative on their own digital SLATE!

Codeweek oktober 2021

Codeweek.eu was formidabel initiatief om kinderen code te leren!
Zimjs.com/TIPs: FULLSCREEN-button : Frame>zimjs.com/expand
/expandfull voor website-integratie en om te tonen op volledig scherm
Veel projecten https://projects.raspberrypi.org/nl-NL/coderdojo
waaronder met Scratch.mid.edu en AppInventor.mit.edu: GRATIS
Coderdojo worldwide on SLACK community: add your login: https://coderdojo.com/coderdojo-global-slack/

CoderDojo's 27 nov. 2021

Je kan een game buiten je scherm laten afspelen zoal SPACE-GAME codepen: https://zimjs.com/ten/follow.html - voor gevorderden?
NL
EN
FR?

Wat is kids.ZIMjs.com ?

Zimjs.com is een javascript-bibliotheek boven CreateJS.com om te laten zien hoe gemakkelijk CANVAS-games met slepen/neerzetten en physics kunnen worden gemaakt.

Scratch.mit.edu sleept code naar de stage, maar http://kids.zimjs.com typt de code in zijn eigen online webbrowser-editor en je kunt het code-resultaat direct zien.

Voor kinderen is het gemakkelijk om een ​​scène te leren bouwen in zimjs.com/kids/slate zoals Scratch maar met echte code en met creatieve illustraties-assets (achtergronden, natuur, mensen, dingen, geluid).

Uitvinder Dan Zen woont in Canada en helpt veel mensen over de hele wereld, maar wil dat kinderen de basisprincipes van programmeren heel goed leren door https://zimjs.com/snips te maken.

Er zijn veel videoworkshops om toffe apps te maken en javascript te leren: check youtube-kanaal ZIM LEARN (BASICS - FIVE Minutes - BUBBLING - EXPLORE).
‍
Scratch is erg beroemd vanwege het vangen van games die Zim in 5 minuten maakt in http://zimjs.com/five/falling en met /score .

Ook Angry Birds zimjs.com/five/slingshot of een fidget spinner /five/fidget spinner kan in 5 minuten gemaakt worden voor je telefoon als echte app! (PWA-app).
Leer code: zimjs.com/kids
code- editor : zimjs.com/kids/slate

Wat is kids.ZIMjs.com ?

Leer code: zimjs.com/kids
code- editor : zimjs.com/kids/slate
Zimjs.com is a javascript library above CreateJS.com to show how easy CANVAS games with drag/drop and physics can be made.
‍
Scratch.mit.edu is dragging code onto the stage, but in http://kids.zimjs.com kids can typ the code in the online web editor and of course kids can see the code-result directly. 
‍
For kids it is easy to learn building a scene in zimjs.com/kids/slate zoals Scratch maar met echte code and with creative illustrations-assets.
‍
Inventor Dan Zen lives in Canada and helps many people around the world but want kids to know the basics of programming very good by creating https://zimjs.com/snips.
‍
Scratch is very famous for catching-game what Zim make in 5 minutes in http://zimjs.com/five/falling and with /score .Also Angry Birds zimjs.com/five/slingshot or  a fidget spinner /five/fidget spinner can be made in 5 minutes for your phone as real app! (PWA-app).
‍
Many videoworkshops are on youtube to create cool apps and learn the basics of javascript: check  youtube-channel ZIM LEARN (BASICS - FIVE Minutes APP's - BUBBLING - EXPLORE). 

See you at DOJOCON 27/11/2021
Karel Rosseel
Events hebben geen addEventListener meer nodig, enkel .on
Een event op een tile (='vloer met tegels') waarop je kan klikken.

https://drabstract.medium.com

Artikels in het engels met voorbeelden bij: gemaakt in Zim kids:
https://drabstract.medium.com/controlling-the-canvas-with-javascript-d94792aa33cd
Muis beweegt CAR
ARTIKELs + CODE
.place() PARK CAR + FLY ROCKET
Emitter met stars
open voorbeeld
Pen met kitetail
open voorbeeld
Parallax
open voorbeeld
Parallax FIVE VID
open voorbeeld
Bubbling 30min VID
Pen line pressdrag
open voorbeeld
Pen met kitetail
open voorbeeld
Pen met kitetail
open voorbeeld
Pen met kitetail
open voorbeeld

PARK a car

Het origiinele voorbeeld is wat veranderd, omdat we 2 keer de auto willen tonen met .clone() moeten we de const car = new Container maken. Bekijk dit voorbeeld hier
‍

Fly rocket

Plaats planeten op een locatie .loc(x,y) zoals op de foto van Apollo 8 die voor het eerst rond de maan vloog met .place() bekijk video

artikels medium.com/tag/zimjs

HALLOWEEN
blobSPOOK
squiggle walvis
Connect
cat-points
3D planeet
MERCURY
control bugs
on path
VOETBAL
GAME
Combineer
door slepen
Explore
CAT SURVEY
ZIM FIVE in
5min. code
ZIM STORY
BOOK
FIDGET
SPINNER
BezemHeks
vliegt rond
MEMORY
1 - 2 - 4 pers.
shoot
circles + score
money
game 4pers.
MEMORY
sounds
SPRITES
AUDIO+PICs
elearning
quiz + match
teken of schrijf
programma
met touch
Blad
steen
 schaar
GAME  4 personen
TextInput()
Label()
Hallo, ik ben Karel Rosseel,
leerkracht ict en ict-coördinator in Beveren-Waas. -- al sinds
2000 bezig met Adobe Flash (bijscholingen in De Ham Mechelen)
Bachelor 2003 Grafische Bedrijven (Arteveldehogeschool HIGRO)
Jobs in Grafische drukkerijen, en nu leerkracht ICT-STEM-GAME

ICT-Coördinator voor games voor NT2 leerlingen en maak apps voor leerkrachten die nood hebben al gepersonaliseerde opdrachten voor kinderen met geluid van de juf als ze klikken in het spel.

Enerzijds werk ik met presenter10.prowise.nl
maar door kennis te maken met ZIMjs ben ik er van overtuigd dat kinderen ook nood hebben aan een programmeeromgeving die creativiteit kan stimuleren bij de kinderen.

Daarom heb ik samen met Dan Zen uit Canada kids.zimjs.com ontwikkeld omdat ik vooral zie dat in de maatschappij kinderen graag spellen spelen maar ook willen weten hoe je dat echt kunt programmeren. Ook kinderen bewust maken van de gevaren van ICT met http://cybersimpel.be/nl/cyberhelden.
‍
‍Het is niet evident om kinderen te overtuigen om code te typen omdat ze nu eenmaal in een touch-wereld opgroeien.

Maar door deze website te maken hoop ik andere leerkrachten te inspireren om ook in hun lessen kids.zimjs.com te gebruiken.

Succes.

Stuur mij gerust een mailtje als je meer info wil of mij met persoonlijk wil afspreken.


Contactgegevens: karel.rosseel@gmail.com

eChalk.co.uk

Slider makes circle big/small

Zimjs.com/TIPs: FULLSCREEN-button :voor website/tablet-integratie
voorbeeld met test: voetbal-game-landscape fullscreen of planetKIDS

ZIMjs.com/tips#fullscreen:

Fullscreen-tekst-knop: frame-stage 1024x768 px

In dit voorbeeld zie je deen frame van 1024 x 768 px zoals vroeger beeldscherm was gemaakt. Maar nu hebben telefoons 1280x720px!

EXPAND-tekst-knop: frame-stage 1024x768 px

In dit voorbeeld zie je een game afgespeeld in een website-frame met ID-tag, wanneer je de game groter wenstklik je op EXPAND, terugkeren doe je met CONTRACT-knop.
Sluit-knop <script src="http://zimjs.org/cdn.pizzazz_02.js> </script>
fullscreen-icon: pizzazz.makeIcon("maximize", lighter),
toggle-icon: pizzazz.makeIcon("close", lighter)

zimjs.org/spells.html?item=makeIcon

Voorbeeld van mogelijke pizzazz-makeIcon op https://zimjs.org/spells.html?item=makeIcon en overzicht op https://zimjs.com/bits/view/icons.html
KIDS > Phone heeft een frame-stage van 1280 x 720 px
dus al je klikt voor fullscreen verdwijnen de grijze frame-balken
voorbeeld zimsalabim.webflow.io/full-pizzazz-makeicon-1280
Waarom ZIMjs zo belangrijk is om de basis van programmeren te leren: het is een codelaag boven js (=javascript) voor de web-Browser Object Model (BOM) html5
computer C> JSJavaScript>Createjs.com/tools>ZIMjs.org>Scratch.mit.edu

Zim Kids wordt gebruikt over de hele wereld:

KIDS oefeningen
Tabs IKEA of code
UK Engeland
NL
Canada
EraseAllKittens.com
Profs:
BE/NL
CAR 0 CO2
https://jufeva-sintjozefschoolevere.webflow.io
Zim programmeert op het canvas of met andere woorden het gebied van je webbrowser, met code in zimjs.com/SPELLs ook wel de 'IKEA van <code> '
ZIMjs wil kids helpen
de code typen
ipv blokken slepen: blocky.games , Scratch
ZIMjs wil opvolger zijn van Scratchjr Junior en Scratch.mit.edg moeilijke Pyton code te leren, of Thunkable.com / pp-nventor /
P5js / Flutter wil ZIM kids helpen,
Code simpel uitleggen, Vereenvoudigen
naar een begijpbare .js programmeertaal.
+ Iedere ICT-coördinator
leren (PWA-)apps maken
voor op hun website
van de school!

Slider + Scroll + Parallax

Zim toont een doel met verschillende cirkels wanneer afbeeldingen nog moeten ingevoegd worden, of toont mogelijkheden voor programmatie.
Bekijk even dit voorbeel https://zimjs.com/examples/build
Een knop kan ronde hoeken hebben, een slider S met of zonder letter.
Een checkbox kan opties hebben om de slider aan te sturen.

Tabs buttons => Pages

Buttons zijn knoppen die gebruikt kunnen worden om meerdere pagina's content te tonen, ook wanneer je tabs gebruikt kan je meer content-informatie tonen op eenzelfde pagina, jij mag zelf kiezen.

Waarom Zim gebruiken in het onderwijs? 7-18 jaar?

In een notendop,
Zim Kids is de meest visuele
en lonende manier om kinderen
kennis te laten maken met programmeren.

Het is nog nooit zo eenvoudig geweest
om prachtige interactiviteit te creëren
met zo weinig code.

  • De inhoud is afgestemd op het curriculum van het onderwijs om kinderen van de eerste graad te leren programmeren
    ‍
  • Wordt geleverd in hapklare code om uit te testen
    waarbij studenten kennis maken met een concept
    ‍
  • Onmiddellijk wat code kunnen typen
    en verbluffende resultaten zien    .
    ‍
  • Ondersteunend materiaal is ook uitzonderlijk
    met een videobibliotheek voor lesgeven en leren.
  • Alles wat je nodig hebt om programmeren op in zimjs.com/SLATE (lei-bord) te leren.
    ‍

Dr Iestyn Jones opvoeder, oprichter van eChalk Ltd,
leraar, ontwikkelaar/auteur van educatieve inhoud
‍

  • JavaScript leren met Zim is leuk!
    ‍
  • De leerlingen hebben in een mum van tijd
    resultaat en zijn erg trots op wat ze maken.
    ‍
  • Zim geeft veel leuke experimenten en animaties
    ‍
  • De leerlingen komen vaak met onverwachte configuraties waar ik nog nooit aan heb gedacht.

Frank Los Visuele Communicatie - Nederland
vond het keyboard uit van ZIM

  • ZIM's focus op coderen op een begrijpbare manier
    voor het maken van objecten, animaties en games.
    ‍
  • Kids.zimjs.com en veelbelovend hulpmiddel voor computationeel denken in het onderwijs voor jongeren.
    ‍
  • zimjs.com/slate zorgt voor een duidelijke codeeromgeving onafhankelijk van welke computertype of tablet om te programmeren met een bibliotheek van afbeeldingen.
  • Ik heb een ZIM-workshop bijgewoond
    om anderen te helpen die weinig
    of geen codeerervaring hebben    .
    ‍
  • We hebben in drie uur tijd een kleurrijk spel
    n JavaScript op het Canvas     gemaakt.
    ‍
  • ZIM maakt het maken van
    ‍zeer visuele projecten eenvoudig,
    ‍
  • maar behoudt toch de traditionele coderingsstructuren
    voor overdraagbare vaardigheden    .
    ‍
  • Er was weinig tot geen insteltijd, in browser editeren van code
    of met een eenvoudig sjabloon met Atom.io
    en dan kan je direct beginnen coderen.
    ‍
  • Ik zou aanraden om ZIM te gebruiken voor het aanleren van creatief coderen.

Rex van der Spuy, auteur Foundation
Game Design met HTML5 en JavaScript

  • Mijn studenten verkenden de basisprincipes van programmeren en animatie in ZIM.
    ‍
  • Ze waren verbaasd,
    deden praktijkervaring op
    en hadden zoveel plezier.
    ‍
  • Het was een genoegen om hun enthousiasme te zien.
    ‍
  • Heel veel positieve opmerkingen over de leerervaring.
    ‍
  • Het was een fantastische,
    ‍goed georganiseerde workshop van 75 minuten.

Halina Dziewa, Docent & Coördinator Ancaster Hoge computerwetenschap en informatietechnologie

  • Ik ben betrokken geweest bij veel programma's
    om kinderen te leren coderen.
    ‍
  • Wat de meest succesvolle benaderingen gemeen hebben,
    is een sterk visualisatie-element.
    ‍
  • Kinderen moeten het effect zien van de veranderingen
    die ze aanbrengen in constructies     zoals variabelen, berekeningen en functies.
    ‍
  • ZIM's focus op het maken van objecten en animaties maakt het een veelbelovend hulpmiddel voor computationeel denken in het onderwijs voor jongeren,

Beweeg je car met keys

met afbeelding zoals bitsbox (touch of keys)

De auto beweggt naar je vingerophet scherm, maar speel je op een computer dan is het de bedoeling dat bij keydown de auto beweegt naar links/rechts/voor/achter, dat noemen ze 'firstPerson' driving.
Orginele foto hier

Full screen car-app

Rechthoek+venster toetsenbord
Foto van auto met toetsenbord
03: rect() - null - obj zog()
04 //comments + holder Container + BounceOut + call:addDrag
11 Squiggle+Blob
05 createjs + container GRID

Chaining parameters
null als er geen waarde nodig is

corner te groot = drone / helicoptor

shoot corona virus (from the center )  https://codepen.io/faisal-jawed/pen/NWqeRNZ
tank game (target from above) https://codepen.io/andyranged/pen/aPojMW
zombie game (target from left and right) https://codepen.io/k5h2P/pen/qVNgGy/
click angry birds (taget from left to right) https://codepen.io/taneleero/pen/ZOvAxN

const obj = {age:12}.zog(obj.age)

var holder = new container (stageW,stageH)

Comments /*multiline*/ or single line //

zimjs.com/ease bounceOut

Call: addDrag arrow function

Createjs.com  => EASELjs => ZIMjs

Container with objects (shapes) + Grid

Start always by creating var holder = new Container(width, height)

Zim helps: createjs added the polygon

Alle oefeningen van kids + games

Oefeningen BUGS
PARTS
Things
Matching the same - game
BLOBavatar
NIO = pizzazz_04.js
X
clouds
write
Dezelfde objecten op elkaar slepen : de blauwe op de roze (codepen)
Natuurlijk wel je een afbeelding kunnen koppelen naar elkaar, met Frame.loadAssets([ {id: , src:},{id: , src: },.. ],"path")
Je kan de blauwe blokken onderaan of bovenaan zetten, met een label waarop je kan klikken op te horen wat precies op de afbeelding staat. Een knop om de app te openen op volledig scherm kan ook.
Matching met een afbeelding - codepen hier
zelf een blob of squiggle maken met zimjs.com/nio/paths
Zim oefening: drag de elementen op het canvas: wolken maken met buttonstypes https://codepen.io/zimjs/pen/gjZpGY
Het voordeel van programmeren met kids is dat de html-code wordt weggelaten om echt te kunnen consentreren op de inhoud van js-code.
Probeer schrift, naast het woord schrift staat het icoon voor fullscreen!

Kids.Zimjs.com (basisvaardigheden beginners)

https://zimjs.com/kids.html

ZIM KIDS

Basic-video's over werken met Zimjs

Zim + JS Basic
Visueel code: zimjs.com/SNIPS
Zog F12
Zgo 'ga' naar URL
Dr. Abstract = Dan Zen
Museum
zimjs.com/bits
X

Begrippen Javascript JS

Zim-Begrippen

This is some text inside of a div block.

Zimjs.com/snips

Een snip is een visueel stukje code die je kan gebruiken in je game/app.

CANVAS FRAME : "fit"/"full"

Belangrijke instelling is het soort frame dat je wenst FIT - FULL - FILL
<html>
<script src="https://zimjs.org/cdn/nft/00/zim.js"></script>
‍<script>
// code voor je app
</script>
<body></body>
</html>

Zimjs.com/VEE

zgo => Zim 'go' naar http://url

Geen lange addEventListener van javascript meer nodig!!!
= tijdwinst in typen van code!

button.on("click") = Tap

tap is een kortere manier voor klikken zimjs.org/spells.html?item=tap
Events hebben geen addEventListener meer nodig, enkel .on
Een event op een tile (='vloer met tegels') waarop je kan klikken.

Uitvinder: Dr. Dan Zen met dochter Madeleine Zen

Dr. Dan Zen is docent Sheridan College Canada
Dr. Den Zen
Zim versie 1.0 : 2012
versie 9 = NIO : 2017
versie 10 = CAT=>NFT
Madeleine Zen (Pragma) & Dan Zen Dr.Abstract
Ideaal voor touchscreens in de klas, om alsleerkacht simpel aan het werkt te gaan met apps die ook op de schoolwebsite werken.
In 2002 was dit het leslokaal..
wat een verschil met nu 2021 :-)
Surf naar Sheridancollege.ca/
programs/interactive-media-management
GoStudent werken bij jam3 en stitch media
Wat is uw niveau van ZIM? dance, move, enjoy! en doe de http://zimjs.com/survey
Bedankt om ZIM KIDS
uit te testen, veel plezier met fantastisch
programmeren, kortom
FUNTASTISCH ! In de webbrowser coderen en uitproberen via http://zimjs.com/slate
http://kids.zimjs.com
ZIM is een gevestigde waarde geworden om te leren programmeren voor beginners en developers die slim
ontwikkelen en  de kracht van simpel coderen in de canvas willen begrijpen, zoals Scratch.mid.edu met slepen van code doet.
http://dev.zimjs.com
In dit voorbeeld moet je de smiley wegslepen, die veranderd in een niet gelukkige smiley, MAAR op het Zim logo = gelukkige smiley :-)

Visuele voorbeelden

Surf naar http://www.zimjs.com.bits
1) Klik op het kleine selectie-vierkantje
om miniatuur te zien van het spel.
2) Klik op VIEW
om het resultaat te zien van de code
3) klik op CODE 
om de code te zien van het spelletje

Scratch is een laag boven ZIMjs-code, met image().

Scratch
Extra Game_2_5.js module om eigen games te maken zoals Scratch maar met echte code!
Sprite
Explosions
scene
DEMO

ZIM = ECHTE Scratch-code

Scratch.mit .edu voor kinderen, maar daar leren ze geen code typen!!
In 2x 5 minuten kan je een 'falling catch game' make met Zim!!
met zimjs.com/five/falling en zimjs.com/five/score => bekijk ze online!
Geen enkel spel gemaakt in Scratch kan gebruikt worden als app!!

Durf <code> begrijpen!

De BleuPrint achter Scratch.mit.edu is www.Zimjs.org/kids/slate !!
spaceguy walking

ZIM = ECHTE Scratch-code

Scratch.mit .edu voor kinderen, maar daar leren ze geen code typen!!
Verschillende modules helpen je de beginselen van programmeren uit te leggen.

Banner-ogen bewegen met muispointer

Probeer zimjs.com/kids/slate, door kinderen 'echt' met <code> in de webbrowser te leren programmeren, met computationeel denken!
Bij imgur draaien de ogen ook bv: https://karel.imgur.com/all/#5
Als je afbeeldingen wil opslaan vooreenspel,dan gebruik je best imgur.com omdat het een simpele manier verborgen bestanden daar kunt opslaan en gebruiken met een link. Github.io ook voor sounds.

Wanneer je de DEMO code wil kopiëren, kan je tijdelijk uw code opslaan STORE

Basic 02: circle.drag(stage)
draw with pen()
drawing app genpen
navigeren met keyboard of touch=dpad
image(".png")

script en frame startcode

BASICS 01 minuut 9.37 start een basis template met cirkel.center()
BASICS 02 minuut 9.37 start een basis template met cirkel.center()
minuut 6.37 start een basis template met cirkel in het midden, achteraf kan je de cirkel vervangen door een foto-asset.

Een circle .drag(stage)

midden, achteraf kan je de cirkel vervangen door een foto-asset.
minuut 10:44 .drag(stage)

zimjs.com/tips#images

Gebruik alle fotos van het internet om je game te maken door
image("http://.. .png")
te typen in je code

ZIM KIDS = GRATIS
Bitsbox (niet gratis)
Blocky.games
KhanAcadamy js
Robomind
RoBlocks
AppInventor
CoderDojo WORLD

Leuk dat je een echte phone ziet als je programmeert, maar NIET gratis en het is geen echte js-code!!

5 gratis start-oefeningen

DANCIN'HAL
Een foto van een robot wiebelt, is hetzelfde als de DEMO van KIDS  zimjs.org/spells.html?item=wiggle
SO LONG HOMEWORK
Een boek verdwijnt in het zwarte gat.. met draaiende beweging, zim .ANIMATE() en kan met zimjs.com/ease. kids>blockHead
BLOCKCRAFT
tekenen van blokken/lijnen komt overeen met zimjs.com/genpen of kids>scrambler, je kan kiezen welke soort lijn/kitetail/..
FOODFIGHT
Exploderen van een stuk taart: je kilkt afbeelidng, sprite start en taart verdwijnt  .RemvoeFrom()
komt overeen met KIDS>explode
RedRacer
beweeg een auto van bovenaanzicht met je keyboard , dat kan kids>firstPerson
This is some text inside of a div block.
Blocky heeft ook SPELLS zoals kids om kinderen te help n bij opdrachten. https://blockly.games/
Peter Matthijzsen uit Tilburg zit in de community van AppInventor en wil CoderDojo in Nederland overtuigen om Appinventer zeker te testen. Zijn tuturials kan je terugvinden op: https://petermathijssen.nl/dry-programmeren/
Het is duidelijk dat AppInventor werkt zoals sScratchmetblokken, maar ook interactie kan doen met de telefoon. appinventor.mid.edu
kan geen pwa-apps maken en is beperkt in echt coderen.
Het is niet gemakkelijk om de grotte van je toestel te wijzien, terwijl je in Zimjs perfect je grootte van je frame kan bepalen.
Kids leren al 10 jaar programeren met CoderDojo
Zelf een coderdojo oprichting of cursussen vinden op https://www.futurelearn.com/partners/institute-of-coding
Eens de kinderen weten hoe belangrijk de X en Y-as is. op minuut 16:51 legt iemand in het Engels uit hoe belangrijk dat is.
Het is alsaof het een magic box is.
Blanco Code template
SLATE hides basic Frame code
x

Zimjs.com./code met Atom.io happy coder

Voorbeeld van de totalecode kan je openen met F12 wat de Console noemt van je webbrowser: klik eerst FULL aan http://zimjs.com/kids/slate
<html>
<script src="https://zimjs.org/cdn/nft/00/zim.js"></script>
‍<script>
// code voor je app
</script>
<body></body>
</html>

Voetbal + ijshockey game: met boundary!

Voetbal Phone/Portrait
Icehockey (corners)
theorie Reg()
Positioning+Boundary
STAGE(=BOUNDARY) bots tegen scherm
X

voetbal landscape (phone)

Creatief zijn met auto's die een bal doen bewegen kan link: https://apkpure.com/car-soccer-2d

voetbal portrait (staand)

(gemaakt door Karel Rosseel) op codepen : https://codepen.io/karelrosseel-prive/pen/OJgvreO
Smarthphone kan liggend zijn voor een app 'landscape', een staande app noemen we Portrait.
Belangrijk is dat je weet wanneer je een veld nodig hebt voor een spel dat dat een Boundary heet.
Meer info op zimjs.org/spells.html?item=Boundary
Tap is klikken op een cirkel,no
noTap is belangrijk wanneer het aantal punten is behaald ! bekijk de spell spells.html?item=noTap
Extra voorbeeld waar de je ziet waarrond de figuren bewegen
Icebhockey veld heeft afgeronde hoeken. daarom is het belangrijk je boundary af te ronden met corners. codepen https://codepen.io/karelrosseel-prive/pen/oNeGQQd
Ieder object heeft steeds een vorm maar ook een rotatiepunt.
Het is belangrijk die vast te leggen zodat je bij een botsing gemakkelijk kan weten tegen welke randen het object heeft gebotst.

en getBounds waar je van een cirkel kan opvragen wat de boundary is.
Het is belangrijk te weten dat bij een rechthoek de Reg(point) altijd linksboven is, en bij een Circle inhetmidden.

var rect = new Rectangle(100, 100, blue).center();
zog(rect.getBounds()); // {x:0, y:0, width:100, height:100}

var circle = new Circle(100, red).center(); // 100 is the radius
zog(circle.getBounds()); // {x:-100,y:-100,width:200,height:200}
// note that a Circle has its origin (0,0) in the middle
// so half the bounds goes to the left and above
// and the width and height are twice the radius

// Also note that the registration point is completely independent from the bounds
// and independent from the origin.  See https://codepen.io/zimjs/pen/qBEjYZV‍
This is some text inside of a div block.
Meestal is je boundary je canvas-stage, zo groot als je frame-grootte die je in het begin definieert van je code.
Belangrijk is dat je weet hoe je een blok moet positioneren,zie je ook de middelste gele vierkant die heeft centerReg() omdat het registratiepunt perfect zorgt dat de vierkant in het midden dan staat. open het voorbeeld https://zimjs.com/positioning/
Belangrijk is dat je weet wanneer je een veld/rechthoek nodig hebt voor een spel; dat dat een Boundary difinieert. (een boundary is onzichtbaar)
Meer info op zimjs.org/spells.html?item=Boundary
Even een voorstelling (groen is correct, rood is fout) om uit te leggen hoe Boundary werkt in zim
(boundary is een veld waarin een bal bijvoorbeeld moet bewegen,
we hebben het paarse vlak =de stage
en we hebben het gele vlak: rechthoek)
Een boundary (info van shooting game) instellen zodat de cirkel niet het de stage kan verdwijnen doe je zo bijvoorbeeld op een horizontale as: minuut 15:07

Shoot the targetdown (sprite explosion) - or balloon

kids > explosions
Scratch > shoot Drone
theorie Motioncontroller
horizontal axis + boundary
Codepen + Google Font

'makeCircles' + sprite ontploffing
https://zimjs.com/kids/explosions

(als afbeelding in een appontbreekt wordt dit ook gebruikt)

willekeurige target 'circles'
zimjs.org/spells.html?item=Bitmap

PEACE without drones!

MotionController zorgt ervoor dat we met ons toetsenbord-pijltjes
kunnen een cirkel aansturen.
Je kan de MotionController ook gebruiken om met je muis een cirkel of autootje te laten bewegen. alles over motioncontroller op minuut 9:30
MotionController kan verschillende apparatuur aansturen minuut 9:55
Meer over de codepen voorbeeld op minuut 16:27
Invoegen van een google font Saira Stencil One :
fonts.google.com/?query=saira+stencil+one als ASSET minuut 18:31
Een boundary (info van shooting game) instellen zodat de cirkel niet het de stage kan verdwijnen doe je zo bijvoorbeeld op een horizontale as: minuut 15:07
Meer over de codepen voorbeeld op minuut 16:27
Invoegen van een google font Saira Stencil One :
fonts.google.com/?query=saira+stencil+one als ASSET minuut 18:31

Codebasis leren op een schoollei=SLATE typen!

Voorbeeld van http://zimjs.com/kids/slate
voorbeeld van codebord: https://codepen.io/zimjs/pen/MWgdYPL
CoderDojo Canada werkt al met Zimjs voorbeelden: zimjs.com/kids/teach
Bekijk de video van Coderdojo Hamelton (Canada) over Dan Zen
Waarom vrijwilliger worden zo leuk is: https://www.coderdojobelgium.be/nl/vrijwilliger-worden

Conditional Level 3
label() - TextInput() - Textarea()

4 personen spel

Codepen met tafelgame: memory: sleep naar je eigen vak
Zwaartekracht
Voetbal - ijshockey
X

Crystal (Box2d+ physics) = nft/00/zim_physics.js

een vierkant naar boven slepen en laten vallen https://zimjs.com/test2/physicsfriction.html
Wil je alle physics eens testen: zimjs.com/physics
GAME: voetbal zo veel mogelijk in de lucht houden speel dan dit spel: https://zimjs.com/physics/keepup.html

kids gebruikt scripts los: Box2dWeb.. + physics..js

In kids wordt de html-code verborgen, FULL + F12 en je ziet de scripts!
Het moet niet altijd een vorm te zijn, leuker is je eigen afbeeldingen te zoeken, transparante afbeeldingen noemen we .png bv. pluimpje : https://www.pngall.com/shuttlecock-png/download/15577‍

waiters (progress bar) waits for loading pics

voorbeeld van ronddraaiende waiter bij www.zimjs.com/elearning/quiz
Voorbeeld van rechthoekige (afgeronde) waiter op codepen: https://codepen.io/zimjs/pen/wxmOmG?editors=1010

Skool - creatieve code-lessen voor smartphone-app

https://zimjs.org/skool.html (= lessons links)

LESSON 01 - DISPLAY OBJECTS
LESSON 02 - CONFIG OBJECTS AND ANIMATION
LESSON 03 - FUNCTIONS AND EVENTS
LESSON 04 - ABSTRACTION
LESSON 05 - ARRAYS AND LOOPS
LESSON 06 - CONDITIONALS AND DEBUGGING
LESSON 07 - TEMPLATES AND BUILDING
ZIM Skool

Match dezelfde zelfde (Concentratie spel)

Concentratie spel (2 gelijke afbeeldingen vinden) op codepen van Karel
Originele versie op codepen met alleen kleuren https://codepen.io/zimjs/pen/oNYObKM
frame.loadAssets(
    [{id:"blad", src:"XlYKL18.png"},
     {id:"pompoen", src:"9bgYJeQ.png"},
     {id:"heks", src:"gX49SiE.png"},
      {id:"spook", src:"zReCEc2.png"},
        {id:"front", src:"haRZeGz.png"} //olifant wBJHGON.png
    ], "https://i.imgur.com/"); //path
BLEEP Match dezelfde met geluid (als je link op de afbeelding klikt)
De code voor de sounds (kan in var bovenaan
var assets = [
{id:'bleep01', src:'bleep01.mp3'},
{id:'bleep02', src:'bleep02.mp3'},
{id:'bleep03', src:'bleep03.mp3'},
{id:'bleep04', src:'bleep04.mp3'},
id:'backing', src:'backing.mp3'}];
var path = "https://d309knd7es5f10.cloudfront.net/kids/assets/";

var frame = new Frame({assets:assets, path:path, scaling:scaling, width:width, height:height, color:light,
outerColor:darker, progress:new Waiter({backgroundColor:dark})});
De code voor de sounds (kan in var bovaenaan
var images = frame.loadAssets []

var sounds = frame.loadAssets []
Echte geluiden gebruiken:link naar de Halloween-APP

ZIM APP = ZAPP : nieuw 2021: simpele PWA-app

ZIM mobile = de code opslaan als een app voor smartphone of tablet
  1. eerst je code schrijven
  2. beslissen of je afbeeldingen op github.com komen of imgur.com
  3. de extra code toevoegen om je code te kunnen opslaan als een app
Links die je kunnen helpen bij het maken van een Zim-app
  1. http://zimjs.com/mobile om een PWA-app te maken
  2. http://zimjs.com/zapp => http://zimjs.com/zapps met info over tool
  3. de Zapp-tool gebruiken = http://zimjs.com/zapps/index.html
  4. de PWA REACTION openen op je smartphone (of verkleine Chrome Webbrowser met F12) http://zimjs.com/pwa
  5. de PWA GROOVITY openen op je smartphone (of verkleinde Chrome Webbrowser met F12) http://zimjs.com/groovity

PWA apps maken kan je heel simpel als je ZIM code af is. Een voorbeeld van een PWA-app is REACTION http://www.zimjs.com/pwa

HOE een PWA maken met ZIM: manueel of met de ZIM-tool: Zapps-tool
Meer over pwa op wikipedia: https://en.wikipedia.org/wiki/Progressive_web_application

https://zimjs.com/pwa (= REACTION!)

ZIM FIVE kanaal : 5 minuten video's (zimjs.com/five)

32 actieve YouTube video's om In 5 minuten leuke dingen te programmeren zoals games met ZIM FIVE CHANNEL: oplossingen op www.zimjs.com/five
Code kan je het typen in een zimjs.com/SLATE browser-editor van kids.Zimjs.com : je kan er assets (afbeeldingen) kiezen om het leuker te maken..
Wil je aan het werk met professionele gratis software: dan kan kiezen om software te installeren zoals Atom.io
De template om te starten met Zim kan je vinden bij http://zimjs.com/code

Maak kennis met blob en squiggle.. minuut 4:31: info over squiggle-to-bob en over blobatar

Teach-javascript-skool (skool is de creatieve naam voor school)

https://zimjs.com/teach.html
https://zimjs.org/skool.html (= lessons links)

ZIM Basis registratie punt
Lagen in zim met https://codepen.io/zimjs/pen/GPxegm
Waarom www.Zimjs.org als 'echte taal' beter is dan Scratch.mid.edu

ANGRY BIRDS in 3x 5 minuten FIVE ( met Physics)

Een overzicht van hoe je angry birds kan maken met als basis zimjs.com/five/slingshot4 aangepast tot echt Angry Birds game.
Het artikel https://dev.to/zimlearn/angry-birds-like-physics-game-in-15-minutes-with-zim-9al
Je leert in 4 video's hoe Angry birds te maken.
Nadien kan je zelf je game nog aanpassen met afbeeldingen.
Stap 1: je leert werken met je frame
video + resultaat:
slingshot 1: https://zimjs.com/five/slingshot1
Stap 2: je leert hoe physics werken in Zim
video + resulaat
slingshot 2: https://zimjs.com/five/slingshot2
Alle assets (afb.) kan je op github vinden
Stap 3: je leert hoe je afbeeldingen
kan plaatsen
video + resultaat:
slingshot 3: https://zimjs.com/five/slingshot3
Stap 4: je leert hoe je aantal beurten 'shots' en aantal blokken over 'left'
kan maken: video +
slingshot 4: https://zimjs.com/five/slingshot4
CONNECT DOTS

CONNECT DOTS in 5 minuten FIVE (kies linair of niet)

Een overzicht van hoe je angry birds kan maken en testen door Karel is zimjs.com/five/slingshot4 aangepast tot echt Angry Brid game.
Het artikel https://dev.to/zimlearn/angry-birds-like-physics-game-in-15-minutes-with-zim-9al

playlist youtube here

Wil je connectors maken: https://zimjs.org/spells.html?item=Connectors
De kat OwMe heeft zin om omtrokken te worden: bekijk dan de video hier
Wil je text met meerdere regels in een box om te zeggen wat je moet doen:: https://zimjs.com/explore/textinbox.html
Wat is de bedoeling:
  • Onder de tekst zijn grijze cirkels die verbonden kunnen worden en zichtbaar worden als de tekening is vervolledigd.
  • Bovenop de grijze cirkeltjes ligt een paarse cirkel met als labeltext het nummer van het bolletje
  • als alle cijfertjes correct achter elkaar verbonden moeten worden, dan noemen we dit linear
  • Eenmaal alle cijfertjes zijn verbonden met elkaar dan verdwijnen de nummertjes en paarse cirkels en komen de grijze verbonden cirkels tevoorschijn.
  • Eenmaal alle cijferts zijn verbonden, dan komt ook de tekening helemaal te voorschijn. Iets dat trangsparant is noemen we 'alpha' . Zo heeft ook RGBa de kleuren Rood, Groen, Blauw en alpha (doorzichtigheid) . De tekening is is eerst alp(5) en wordt alp(1)
  • extra: je kan ook een Labeltext laten verschijnen van 'goed gedaan' ga naar de volgende oefening, of 'probeer opnieuw'
  • Wees creatief en zoek een eigen afbeelding 'kleurplaat' en dan kan je de bolletjes rond de tekening verplaatsen met de (x,y)-coördinaten.
#ZIMsalaBIM .. magie is het als je het allemaal begrijpt.
ZIM 3D (i.s.m. Threejs.com)

3D in ZIM in 5 minuten FIVE (kies linair of niet)

Een overzicht van hoe je angry birds kan maken en testen door Karel is zimjs.com/five/slingshot4 aangepast tot echt Angry Brid game.
Het artikel https://dev.to/zimlearn/angry-birds-like-physics-game-in-15-minutes-with-zim-9al

playlist youtube here

Wil je in 3D werken dan kan dat met Threejs en een foto van mercury.jpg
codepen: link
#ZIMsalaBIM .. magie is het als je het allemaal begrijpt.

Shapes veranderen in gezonde 'Groenten'

Shapes zijn vormen die je zelf kan kiezen: een rechthoek, cirkel of driehoek.

Wanneer je niet wil werken met shapes, kan je alle shapes veranderen door foto's om leukere visuele games te maken.
ZIM CODE ZERO [3] 12:17 SHAPES is created by CREATEjs.com
rechthoek
cirkel
driehoek
makepath

Tuturials: WhatIZ? (Wat-is Zim? Make a new Game with Zimjs here

ZIM BasisZIM What IZ video's https://zimjs.com/learn.html#tutorials
Basis componenten
ZIMjs
LESSONs for
bitsbox vs zimjs
EDpuzzle VIDs

BLOB (gesloten bezier)

Een blob is een gesloten circle, of een object bv. driehoek, vierkant..
kijk eens bij de spells: https://zimjs.org/spells.html?item=Blob
Test dit voorbeeld uit die je er kan vinden!!
Blob heeft standaard 4 ankerpunten, die je kan wijzigen
Wil je meer ankerpunten typ dan points:12
Verschillende vormen maken kan je ook met een blob
Het voorbeeld kan je hier zien: blobpointstoshape.html
new Blob({points:"circle"}) pos(200,200);
new Blob({ points:new Rectangle(100,200)}).center();
new Blob({points:new Triangle()}).pos(50,50,RIGHT,BOTTOM);
Andere voorbeelden met video's van ZIM 9 op zimjs.com/explore
en https://zimjs.com/explore/blobpoints.html
Hier zie je 3 verschillende blob-vormen: cirkel, rechthoek, driehoek
In deze video kan je alles te weten komen over blobs (sinds 2017)
Minuut 7.24 zie je dat je ook in je scherm de nieuwe blob-vorm kan opslaan door te kllikken op een knop 'PRESS'/'RECORD'
4:15 en 8:40 dblClick:true voor editeren van je blob
8.22 ctrlClick:true to make copies of the same blob

BLOB naar SQUIGGLE

Een blob is een gesloten circle, of een object bv. driehoek, vierkant..
kijk eens bij de spells: https://zimjs.org/spells.html?item=Blob
originele versie: https://codepen.io/danzen/pen/wXXzzb
Maak een walvis oefening : van suiggle naar blob met oog en water erbij
https://zimsalabim.webflow.io/blob-squiggle/blobtosquiggle-whale
2:06 meer info over de squiglle to blob-whale/walis tuturial!!
7:07: Squiggle with 8 points
17:35 Een blob heeft normaal 4 punten, maar addPoints(1) tussen = 8 punten.
Hier zie je 3 verschillende blob-vormen: cirkel, rechthoek, driehoek
golven
de zee die moet je kunnen uittrekken om groter vlak te maken
schub / schubben met oog
Het resultaat van de walvis app:
https://zimsalabim.webflow.io/blob-squiggle/blobtosquiggle-whale
Probeer de blob code van dit voorbeeld in http://zimjs.com/slate , en dan zie je de animatie van een roze cirkel (Circle(20, pink) bewegen op de blob. https://zimjs.com/explore/blobanimation.html
Deze code komt uit het voorbeeld maar veranderd naar 15 seconden!
const path = new Blob({
       onTop:false,
       borderColor:blue,
       showControls:false
   }).sca(2).center();  
new Circle(20, pink).addTo().animate({
       props:{path:path, startPercent:20, percent:200},
       time:15, //ZIM 11 = CAT in seconden: 15 (vroeger 15000 millis.)
       rewind:true
   })
Dit voorbeeld is nog in milliseconds!! Verander 15000 to 15 seconden!

blob-spook met pizzazz4 makePath (pizzazz=mooi)

Een voorbeeld van een geest in plaats van een cirkel die beweegt op een pad. originele code : https://codepen.io/danzen/pen/xyVZdO
Je ziet het is niet gemakkelijk om ogen te plaatsen, kies beter een image() van het internet en dan kan je alles maken. Klik op de foto om IMGUR te zien.
www.Zimjs.Com/nio heeft een link naar https://zimjs.com/nio/paths.html die we pizzazz04 noemen: https://zimjs.org/spells.html?item=makePath
Door de vleermuis te verslepen krijg je een spookvorm (links het resultaat)
Werken met afbeeldingen op imgur.com kan ook:
Open dit voorbeeld link

Herfstkaart : BezemHeks

De heks vliegt op een vliegroute, met een spook op haar bezem.
De vliegroute kan je tonen door checkbox aan te klikken,
De kromme vliegroute is een squiggle die je kan aanpassen.

images op IMGUR.com

Uploaden van een afbeelding met Ctrl+v (plakken) in imgur.com/upload
Surf naar https://i.imgur.com/gX49SiE.png om de afbeelding te zien.
Een link begint altijd met http://i. imgur.com/ naam .png/jpg extensie!!

Squiggle theorie: bezier-curve = path(=lijn)

Wat is een Squiggle?
Hoe kan je iets animeren op een squiggle?
Alle vormen zijn steeds gemaakt uit een Bezier-lijn (wikipedia: bezier-curve genoemd naar de uitvinder Pierre Beziér)
‍
Als we even de code testen van https://zimjs.org/spells.html?item=Bezier
dan zien we dat er raaklijnen nodig zijn om een kromme lijn te trekken.
Raaklijnen hebben steeds vierkantjes op het einde die je kan veranderen van positie.
Uitleg over de 4 punten die je nodig hebt voor een bezier te vormen (de grijze balletjes zijn extra)

Beweeg kriebeldiertje op je pad
(+ squiggle aanpassen + aangepaste squiggle opslaan in transformmanager)

Animeren op een pad, door een pad op te nemen met record 'R'-toets
Een squiggle is een curve, maar je kan die curve ook wijzigen.
ZIM CAT (11) selecteert punten met CTRL terwijl
NIO (9) VIDEO's=EXPLORE doet CTRL=delete)
Het voorbeeld uit de video https://zimjs.com/explore/squiggleAnimate.html
BUG (=kriebeldiertje) beweegt op een squiggle pad (kromme lijn).
Test de rede lieveheersbeestje op de squiggle:
de bedoeling is dat je met de knop GO/NO het hemelbeestje probeert te starten en te stoppen.
Met de checkbox kan je de squiggle tonen/verbergen.

ZIMjs.com/nio (versie9)

Video voorbeelden zijn van ZIM NIO (versie 9).. waar path is uitgevonden.
op minuut 21:39 wordt verwezen naar de SPELL 'BLOB' example maar in 2018 was dit nog in grijswaarden, nu is code in kleur zichtbaar gemaakt!
ZIM nio: van https://zimjs.com/nio/path.html is bijna het zelfde als van https://zimjs.com/explore/blobAnimate.html

Zimjs.com/cat (versie11)

De code van de vorige versie van ZIM is NIO (versie 9).
De laatste ZIM versie 11 CAT werd hernoemd naar NFT zimjs.com/crystal.
BELANGRIJK dus te weten:
  • SHIFT om een punt te verwijderen
  • CTRL voor meerdere punten
  • 2x klikken om een punt toe te voegen
https://zimsalabim.webflow.io/blob-squiggle/niopath-to-nftpath
In de code is het de Transformmanager die zorgt dat de blob blijft onthouden in het geheugen van de computerm
Uitleg over wat bezier-curves zijn met raaklijnen: oefeningen:
met https://bezier.method.ac of vrij tekenen https://editor.method.ac !
Ik heb de nieuwe versie: de pijltjes richten zich naar de cirkel=target
DE blob-orient-arrows MET ZIM 10 (ZIM 11 NFT WERKT NOG NIET)
(vroeger ZIMjs.com/nio/orient = zimjs.com/explore/blobAnimate2.html )
Wil je een animatie op een blob die naar een startpercentage gaat %
dan kan je de code hier zien: https://zimjs.com/explore/blobanimation.html

Code begrippen: http://zimjs.com/spells

https://zimjs.com/code.html

ZIM Basis registratie punt

Leer javascript - de basis voor je hele code-leven :-)

https://zimjs.com/learnjavascript.html#lesson01

youtube playlist here

ZIM Basis registratie punt

Students Bubbling-series

https://zimjs.org/skool/students.html

bubbling youtube playlist here

Bubbling series

ZIM Bits (how-to examples)

https://zimjs.com/bits.html

ZIM bits