In een eerder door mij geschreven artikel heb ik uitgelegd hoe je kan 3d programmeren in scratch. Nu ga ik uitleggen hoe ik een javascript bibliotheek heb gemaakt met functies om 3d te programmeren en ga ik uitleggen hoe ik het heb gemaakt.
LET OP: bij de y-as houd het gewoon de javascript canvas y posities aan. en in mijn bibliotheek leest het programma alleen een canvas met het ID ‘Here’.
Allereerst moet je weten hoe je een lijn in een bepaalde richting maakt. de javascript functie voor lijnen is:
var ctx = document.getElementById(“canvas”).getContext(“2d”); ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2,y2); ctx.stroke();
Voor het berekenen van de posities bij een richting gebruik ik een beetje wiskunde. we gebruiken namelijk Sinus en Cosinus. de twee geven een x-as (Cosinus) en een y-as (Sinus) van een richting. de javascript code voor Sinus en Cosinus is:
var Sinus = Math.sin(waarde); var Cosinus = Math.cos(waarde);
Nu we dit weten moeten we alleen nog een 3d vector berekenen. dus ik heb alles aan elkaar geplakt en dat wordt:
ctx.moveTo((wid/2)+(Math.cos(deg)*(z*Zdist))+(Math.cos(deg+t)*(x*Zdist)), (window.hig/2)+(Math.sin(deg)*(z*Zdist))+(Math.sin(deg+t)*(x*Zdist))+ (y*Zdist));
Hier heb ik wat variabelen gebruikt.
‘wid’ is een variabel die de lengte aangeeft die kan worden gebruikt. ‘hig’ is een variabel die de breedte aangeeft die kan worden gebruikt. ‘deg’ is een variabel die het aantal graden voor de z-as aangeeft. ‘t’ is een variabel die aangeeft hoeveel graden de richting verandert van de z-as naar de x-as. ‘Zdist’ is de hoogte van de camera.
Nu we alle informatie hebben kunnen we over gaan op de functies in mijn bibliotheek.
line3(x1,y1,z1, x2,y2,z2,deg); hierin kun je de x, y en z assen al zien. het is een functie om een lijn te maken. deg heb ik al een keer uitgelegd. dat geeft namelijk aan wat het aantal graden voor de z-as is.
setStyle(col, width, edge cap); met deze functie kun je wat stijl veranderen. col geeft een kleur aan, width geeft de breedte aan en edge cap geeft aan of het einde van een lijn rond is rechthoekig.
setDist(val); met deze functie kun je de camera hoogte aangeven met val.
setMid(wid, hig); met deze functie geef je de breedte en de hoogte aan die het programma mag gebruiken.
pathCube(x,y,z,deg,width); deze functie tekent een kubes. de breedte of eigenlijk een soort radius wordt aangegeven met width.
sunEfect(x,y,z,deg,rad,time); met deze functie kun je een zon effect creëren. het is trouwens wel zo verstandig om deze functie aan het begin van een code te typen, want anders zal er niets te zien zijn van de dingen die je ervoor hebt getypt. rad geeft hier het radius aan en time geeft de tijd aan (bijv. nacht of zonsopkomst).
enzovoort. ik heb te veel functies gemaakt om op te noemen. Als je meer wilt weten over de functies moet je de javascript code op https://codepen.io/Koen124/pen/zYYPQQr.js bekijken.