Breadcrumbs

Light Shining Through 3D Shape (Circle, Triangle and Square) Cutouts Javascript HTML5 Applet

 

 

 

Download ModelDownload Sourceembed

About

Intro Page

DOCUMENTATION

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

where

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)

Opacity

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:

https://css-tricks.com/snippets/css/complete-guide-grid/

 

Translations

Code Language Translator Run

Software Requirements

SoftwareRequirements


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

 

Credits

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

end faq

Sample Learning Goals

[text]

For Teachers

Light Shining Through Shape Cutouts Javascript HTML5 Applet

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

Description

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.
 

Research

[text]

Video

https://youtu.be/A7SXPYkm6-c 

 Version:

  1. https://iwant2study.org/lookangejss/04waves_13light/ejss_model_light_cutout/

Other Resources

[text]

end faq

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)
comments
Details
Parent Category: 04 Waves
Category: 04 Light
Hits: 2659