Solarzelle
Überblick
Überblick
In Scratch hat man die Figuren Photon, Elektron und Dotierungen der Grenzschicht als Objekte.
In JavaScript baut man aus Klassen mit dem Operator new die entsprechenden Objekte, zeichnet und bewegt sie an verschiedenen Orten und animiert die Bewegung indem man in der Methode requestAnimationFrame() die einzelnen Zeichnungen löscht und wieder zeichnet.
Programm mit JavaScript
Programm mit JavaScript
<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>'use strict';
//Zeichenflächen-Element in HTML bekommt durch JavaScript Grafikobjektevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klassen für die Objekteclass Teilchen{ constructor(Radius,Farbe){ctx.beginPath(); this.Radius=Radius; this.Farbe=Farbe; } zeichnen(x,y){ this.x=x; this.y=y; ctx.beginPath(); ctx.arc(this.x, this.y, this.Radius, 0, 2 * Math.PI); ctx.fillStyle = this.Farbe; ctx.fill(); ctx.stroke(); } bewegen(vx,vy){ this.vx=vx; this.vy=vy; var dt=1; var dx=this.vx*dt; var dy=this.vy*dt; this.x=this.x+dx; this.y=this.y+dy; } static Animation(){ ctx.clearRect(0, 0, c.width, c.height); if (Photon.y<=150){ Photon.zeichnen(Photon.x,Photon.y); Photon.bewegen(0,1); } if (Photon.y>150){ if (Elektron.y>30){ Elektron.zeichnen(Elektron.x,Elektron.y); Elektron.bewegen(0,-1); } if (Loch.y<270){ Loch.zeichnen(Loch.x,Loch.y); Loch.bewegen(0,1); } Elektron.zeichnen(Elektron.x,Elektron.y); Loch.zeichnen(Loch.x,Loch.y); } Dotierungpositiv.zeichnen(50,100,c.width-100,5); Dotierungnegativ.zeichnen(50,200,c.width-100,20); window.requestAnimationFrame(Teilchen.Animation); }}class Dotierung{ constructor(Ladung){ this.Ladung=Ladung; } zeichnen(x,y,l,b){ this.x=x; this.y=y; this.l=l; this.b=b; ctx.fillStyle = this.Ladung; ctx.fillRect(this.x, this.y, this.l, this.b); }}
//Zeichnung und Animation der Objektevar Photon=new Teilchen(20,"white");Photon.zeichnen(c.width/2,20);var Elektron=new Teilchen(10,"blue");Elektron.zeichnen(c.width/2,150);var Loch=new Teilchen(10,"red");Loch.zeichnen(c.width/2,150);var Dotierungpositiv=new Dotierung("red");var Dotierungnegativ=new Dotierung("blue");Teilchen.Animation();
</script>
</body></html>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>'use strict';
//Zeichenflächen-Element in HTML bekommt durch JavaScript Grafikobjektevar c = document.getElementById("myCanvas");var ctx = c.getContext("2d");
//Klassen für die Objekteclass Teilchen{ constructor(Radius,Farbe){ctx.beginPath(); this.Radius=Radius; this.Farbe=Farbe; } zeichnen(x,y){ this.x=x; this.y=y; ctx.beginPath(); ctx.arc(this.x, this.y, this.Radius, 0, 2 * Math.PI); ctx.fillStyle = this.Farbe; ctx.fill(); ctx.stroke(); } bewegen(vx,vy){ this.vx=vx; this.vy=vy; var dt=1; var dx=this.vx*dt; var dy=this.vy*dt; this.x=this.x+dx; this.y=this.y+dy; } static Animation(){ ctx.clearRect(0, 0, c.width, c.height); if (Photon.y<=150){ Photon.zeichnen(Photon.x,Photon.y); Photon.bewegen(0,1); } if (Photon.y>150){ if (Elektron.y>30){ Elektron.zeichnen(Elektron.x,Elektron.y); Elektron.bewegen(0,-1); } if (Loch.y<270){ Loch.zeichnen(Loch.x,Loch.y); Loch.bewegen(0,1); } Elektron.zeichnen(Elektron.x,Elektron.y); Loch.zeichnen(Loch.x,Loch.y); } Dotierungpositiv.zeichnen(50,100,c.width-100,5); Dotierungnegativ.zeichnen(50,200,c.width-100,20); window.requestAnimationFrame(Teilchen.Animation); }}class Dotierung{ constructor(Ladung){ this.Ladung=Ladung; } zeichnen(x,y,l,b){ this.x=x; this.y=y; this.l=l; this.b=b; ctx.fillStyle = this.Ladung; ctx.fillRect(this.x, this.y, this.l, this.b); }}
//Zeichnung und Animation der Objektevar Photon=new Teilchen(20,"white");Photon.zeichnen(c.width/2,20);var Elektron=new Teilchen(10,"blue");Elektron.zeichnen(c.width/2,150);var Loch=new Teilchen(10,"red");Loch.zeichnen(c.width/2,150);var Dotierungpositiv=new Dotierung("red");var Dotierungnegativ=new Dotierung("blue");Teilchen.Animation();
</script>
</body></html>