Download ModelDownload SourceembedLaunch WebsiteLaunch Website 2


Intro Page


Varying the size with distance from screen

The original size of each of the cutOuts in the plotting panel is 2 by 2.

As the distance of the cutout from the screen increases, the size of the cutout will increase by a certain factor using the following formula:

new_size = cur_size * factor


factor = (0.1 * distFromScreen + 0.9)

The lengths along the x and y axis should always be equal to maintain a sqaure aspect ratio.

(Note that the minimum distance from screen is 1)


The opacity ranges from 0 to 1, with steps of 0.1.

1 is completely opaque, while 0 is completely transparent.

Light Source

The light source is currently a circle in the plotting panel. This can be ammended in HtmlView, if desired.

CSS Layout of the controlPanel

The layout is made using CSS Grid with 6 columns. For more information, please view:



Code Language Translator Run

Software Requirements


Android iOS Windows MacOS
with best with Chrome Chrome Chrome Chrome
support full-screen? Yes. Chrome/Opera No. Firefox/ Samsung Internet Not yet Yes Yes
cannot work on some mobile browser that don't understand JavaScript such as.....
cannot work on Internet Explorer 9 and below



lookang (This email address is being protected from spambots. You need JavaScript enabled to view it.); shaun

Sample Learning Goals


For Teachers

Light Shining Through Shape Cutouts Javascript HTML5 Applet

Initial state of the simulation
The link to the simulation can be found here.


This interactive simulation attempts to model light, emitted from a flashlight, as it passes through 3 shape cutouts: a circle, triangle and square. This model can be particularly helpful for students struggling to visualise the light rays mentally.  
Students are able to change various settings of the interactive in order to better comprehend how the light interacts and passes through the different cutouts. These variables include:
  • The opacity of the cutouts
  • The distance of the cutouts from the screen
  • The arrangement of the cutouts
  • The intensity of light from the torchlight
The interactive in progress

Hopefully, this simulation can suit the pedagogical needs of teachers, as well as facilitate the understanding of students in trying to comprehend the complexities of this system. 
The link to the simulation can be found here.






Other Resources


end faq

{accordionfaq faqid=accordion4 faqclass="lightnessfaq defaulticon headerbackground headerborder contentbackground contentborder round5"}

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)