About
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 | |
---|---|---|---|---|
![]() |
Credits
lookang (weelookang@gmail.com); shaun
This source provides detailed information about the applet, its functionality, pedagogical goals, and technical aspects.
Main Themes and Important Ideas:
- Purpose and Learning Goals: The primary purpose of the simulation is to help students who struggle with mentally visualizing light rays as they pass through shapes. It aims to facilitate their understanding of how light interacts with different cutouts. The source explicitly states: "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."
- Interactive Variables: The applet allows users (primarily students and teachers) to manipulate several key variables to observe their effect on the projected light:
- Opacity of the cutouts: Users can adjust the transparency of each shape, ranging from completely transparent (opacity 0) to completely opaque (opacity 1), in steps of 0.1. The documentation notes: "The opacity ranges from 0 to 1, with steps of 0.1. 1 is completely opaque, while 0 is completely transparent."
- Distance of the cutouts from the screen: Increasing the distance between the cutouts and the screen affects the size of the projected shape. The documentation provides a formula for this: "new_size = cur_size * factor where factor = (0.1 * distFromScreen + 0.9) (Note that the minimum distance from screen is 1)." It also specifies that "The lengths along the x and y axis should always be equal to maintain a sqaure aspect ratio."
- Arrangement of the cutouts: The source mentions that the arrangement is a changeable setting, implying users can alter the order or positioning of the circle, triangle, and square.
- Intensity of light from the torchlight: Users can modify the brightness of the light source.
- Light Source: The default light source in the simulation is a circle. However, the documentation notes that this can be modified by editing the HTML view: "The light source is currently a circle in the plotting panel. This can be ammended in HtmlView, if desired."
- Technical Aspects: The applet is built using Javascript and HTML5, making it embeddable in webpages via an iframe. The provided code snippet for embedding is: <iframe width="100%" height="100%" src="https://iwant2study.org/lookangejss/04waves_13light/ejss_model_light_cutout/light_cutout_Simulation.xhtml " frameborder="0"></iframe>. The layout of the control panel is managed using CSS Grid.
- Pedagogical Use: The "For Teachers" section highlights the simulation's potential to meet pedagogical needs and aid student understanding of complex light systems. It suggests the interactive nature allows for better comprehension.
- Open Educational Resource: The platform hosting the applet, "Open Educational Resources / Open Source Physics @ Singapore," and the Creative Commons license mentioned in the second source, indicate that this is intended as a freely available educational tool.
- Related Resources: The extensive list of other applets and resources on the page suggests a broader ecosystem of interactive simulations for science and mathematics education.
Source 2: Excerpts from "Light shining on Objects with Circular, Triangle and Square holes in a straight line projected on a screen"
This source appears to be a more concise description, possibly the title or a brief metadata excerpt associated with the applet.
Main Themes and Important Ideas:
- Title and Description: The title clearly describes the simulation's core functionality: demonstrating light shining on objects with circular, triangle, and square holes arranged in a line, and observing the projection on a screen.
- Authorship and Licensing: The source credits "lookang (weelookang@gmail.com); shaun" as the authors and indicates a "© 2021, Creative Commons Attribution" license. This reinforces the OER nature of the applet.
- Technical Information: It mentions that the applet was "Compiled with EJS 6.1 BETA (201115)", referring to the Easy Java/Javascript Simulations Toolkit, which is also linked in the first source's list of related resources ("Easy Java/JavaScript Simulations Toolkit https://www.um.es/fem/EjsWiki/ vy Francisco Esquembre and Félix Jesús Garcia Clemente").
Overall Summary and Key Takeaways:
The "Light Shining Through 3D Shape Cutouts" applet is an interactive Javascript HTML5 simulation designed to help students visualize how light behaves when passing through different geometric shapes (circle, triangle, square). Key features include adjustable opacity, distance from the screen (affecting size), arrangement of cutouts, and light intensity. The applet is intended as an Open Educational Resource, created by lookang and shaun, and is licensed under a Creative Commons Attribution license. It is built using Javascript and HTML5, leveraging the Easy Java/Javascript Simulations Toolkit. The simulation offers teachers a valuable tool to address the challenge of visualizing abstract concepts in optics and allows students to actively explore the relationship between light, shapes, and their projections through experimentation with various parameters.
Study Guide: Light Through Shape Cutouts Simulation
Overview
This study guide is designed to help you review your understanding of the Javascript HTML5 applet that simulates light shining through circular, triangular, and square cutouts. The simulation allows users to manipulate variables such as the opacity and distance of the cutouts from the screen, their arrangement, and the intensity of the light source to observe how these changes affect the projection of light. This tool is intended to aid in the visualization of how light interacts with and passes through different shapes.
Key Concepts
- Light Propagation: The simulation models light as rays emanating from a source.
- Shape Cutouts: The applet features circular, triangular, and square apertures that block or allow the passage of light.
- Opacity: This property determines how much light is blocked by a cutout, ranging from completely transparent (0) to completely opaque (1).
- Distance from Screen: The position of the cutouts relative to the projection screen affects the size of the projected light patterns.
- Scaling Factor: The size of the cutout changes with distance according to the formula: new_size = cur_size * factor, where factor = (0.1 * distFromScreen + 0.9).
- Light Intensity: This variable controls the brightness of the light source.
- Arrangement: The order and spacing of the cutouts can be adjusted to observe their combined effect on the light projection.
- Visualization: The applet aims to provide a visual representation of abstract concepts related to light and geometry.
- Open Educational Resource (OER): This simulation is freely available for educational purposes, promoting accessibility and collaborative learning.
- HTML5 and Javascript: The simulation is built using these web technologies, making it accessible through web browsers without the need for additional plugins.
- CSS Grid Layout: The control panel of the simulation utilizes CSS Grid for its layout.
Quiz
Answer the following questions in 2-3 sentences each.
- What are the three basic shapes of the cutouts available in the simulation?
- How does increasing the opacity of a cutout affect the amount of light that passes through it?
- Explain the relationship between the distance of a cutout from the screen and the size of its projected light pattern.
- According to the provided formula, what is the scaling factor when a cutout is at the minimum allowed distance from the screen?
- What type of shape is used for the light source in the default settings of the simulation?
- What web technology is used to manage the layout of the control panel in the simulation?
- What are some of the variables that students can change within the interactive simulation?
- What is the primary goal of this simulation in an educational context?
- Under what type of license is the content of the Open Educational Resources / Open Source Physics @ Singapore website generally licensed?
- What programming languages are used to create this interactive simulation?
Quiz Answer Key
- The three basic shapes of the cutouts in the simulation are a circle, a triangle, and a square. These shapes allow students to observe how light interacts differently with various geometric forms.
- Increasing the opacity of a cutout reduces the amount of light that can pass through it. An opacity of 1 means no light gets through (completely opaque), while a value closer to 0 allows more light to pass (more transparent).
- As the distance of a cutout from the screen increases, the size of its projected light pattern also increases. This scaling is determined by a specific formula that takes the initial size and the distance into account.
- The minimum distance from the screen is 1. Using the formula factor = (0.1 * distFromScreen + 0.9), when distFromScreen is 1, the scaling factor is (0.1 * 1 + 0.9) = 1.0.
- In its initial state, the light source in the plotting panel of the simulation is a circle. However, the documentation mentions that this can be modified in the HtmlView if a different shape is desired.
- The control panel of the simulation uses CSS Grid for its layout. This web technology allows for a structured and responsive arrangement of the interactive elements.
- Students can change various settings in the simulation, including the opacity of the cutouts, their distance from the screen, the arrangement of the cutouts, and the intensity of the light from the torchlight.
- The primary goal of this simulation is to help students who struggle with visualizing light rays mentally to better comprehend how light interacts with and passes through different shapes by allowing them to manipulate various parameters.
- The contents of the Open Educational Resources / Open Source Physics @ Singapore website are generally licensed under the Creative Commons Attribution-Share Alike 4.0 Singapore License. This encourages sharing and adaptation with proper attribution.
- This interactive simulation is created using Javascript and HTML5. These web technologies allow the simulation to run directly in web browsers.
Essay Format Questions
- Discuss how manipulating the opacity and distance of the shape cutouts individually and in combination affects the projected light patterns on the screen. Explain the underlying principles of light propagation that these observations demonstrate.
- Explain the mathematical relationship between the distance of a cutout from the screen and the scaling factor applied to its size, as described in the documentation. How does this scaling impact the visual representation of light passing through the shapes?
- Analyze the pedagogical benefits of using this interactive simulation for teaching the concept of light passing through different shapes. How might this tool aid student understanding compared to traditional teaching methods?
- Describe the different variables that users can control in the simulation and discuss how each variable contributes to a deeper understanding of how light interacts with objects. Consider the role of experimentation and observation in this learning process.
- Based on the documentation provided, discuss the importance of open educational resources like this simulation in promoting science education and accessibility to learning tools. What are the potential advantages and considerations for educators using such resources?
Glossary of Key Terms
- Applet: A small application, often written in Java or JavaScript, designed to run within another application, typically a web browser.
- CSS Grid: A two-dimensional layout system for CSS that allows developers to create complex and responsive web page layouts.
- HTML5: The latest evolution of the standard that defines the structure of web pages. It supports multimedia and interactive elements.
- Javascript: A high-level, often just-in-time compiled programming language that conforms to the ECMAScript specification. It is essential for adding interactivity to web pages.
- Light Ray: A model representing the path that light takes as it travels in a straight line.
- Opacity: The degree to which a material obstructs the transmission of light. A completely opaque object blocks all light, while a transparent object allows all light to pass through.
- Open Educational Resources (OER): Teaching, learning, and research materials in any medium – digital or otherwise – that reside in the public domain or have been released under an open license that permits no-cost access, use, adaptation, and redistribution by others with no or limited restrictions.
- Pedagogical: Relating to teaching or education.
- Projection: The casting of an image onto a surface. In this context, it refers to the light patterns formed on the screen after passing through the cutouts.
- Simulation: A computerized model that imitates a real-world system or process, allowing users to manipulate variables and observe the outcomes.
- Transparent: Allowing light to pass through so that objects behind can be distinctly seen.
- Opaque: Not able to be seen through; not transparent.
Sample Learning Goals
[text]
For Teachers
Light Shining Through Shape Cutouts Javascript HTML5 Applet
Description
- 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.
Research
[text]
Video
Version:
Other Resources
[text]
Frequently Asked Questions about the Light and Shape Cutouts Simulation
1. What is the purpose of the "Light Shining Through 3D Shape Cutouts" simulation?
This interactive simulation is designed to help students visualize how light from a flashlight behaves as it passes through three different shape cutouts: a circle, a triangle, and a square. It aims to improve understanding of light interaction with objects, especially for those who find it challenging to imagine the path of light rays mentally.
2. What aspects of the light and cutouts can be adjusted in the simulation?
Users can manipulate several variables within the simulation to observe their effects. These include:
- Opacity of the cutouts: Ranging from completely transparent (0) to fully opaque (1), in steps of 0.1.
- Distance of the cutouts from the screen: Increasing the distance affects the size of the projected cutout.
- Arrangement of the cutouts: Users can likely change the order or spacing of the circle, triangle, and square.
- Intensity of the light source: The brightness of the "flashlight" can be modified.
3. How does the distance of the cutout from the screen affect its projected size?
The simulation uses a formula to determine the new size of a cutout based on its distance from the screen: new_size = cur_size * factor, where factor = (0.1 * distFromScreen + 0.9). The original size of each cutout is 2 by 2 units. As the distance from the screen increases (with a minimum value of 1), the 'factor' increases, resulting in a larger projected size of the cutout on the screen. The simulation maintains a square aspect ratio for the cutouts.
4. How does the opacity setting influence the passage of light through the cutouts?
The opacity setting controls how much light can pass through each cutout. An opacity of 1 means the cutout is completely opaque, blocking all light. An opacity of 0 indicates complete transparency, allowing all light to pass through. Intermediate values (e.g., 0.5) represent partial opacity, where some light is blocked and some passes through.
5. What is the nature of the light source in this simulation?
By default, the light source in the simulation is represented as a circle within the plotting panel. However, the documentation mentions that this can be changed or amended in the HTMLView if a different light source representation is desired.
6. Who created this simulation and under what terms is it available?
The "Light Shining Through 3D Shape (Circle, Triangle and Square) Cutouts" Javascript HTML5 Applet was created by lookang and shaun. It is available as an Open Educational Resource under a Creative Commons Attribution-Share Alike 4.0 Singapore License, promoting sharing and adaptation. The EasyJavaScriptSimulations Library used in its creation has its own commercial use license, details of which are provided in the source.
7. For whom is this simulation primarily intended?
This simulation is particularly intended for students who are learning about the behavior of light and how it interacts with different shapes and materials. It is designed to help them visualize these concepts, especially when mental visualization is challenging. The documentation also suggests it is a resource for teachers to aid in their pedagogical needs related to teaching about light.
8. Where can I find and use this interactive simulation?
The simulation can be embedded into webpages using the provided iframe code: <iframe width="100%" height="100%" src="https://iwant2study.org/lookangejss/04waves_13light/ejss_model_light_cutout/light_cutout_Simulation.xhtml " frameborder="0"></iframe>. A direct link to run the simulation is also mentioned in the documentation, indicating it is accessible online.