{ "information": { "Title": "Light Transmission and Scattering Through Materials", "Author": [ "shaun", "lookang" ], "AuthorLogo": [ "" ], "Password": "", "Keywords": "", "Abstract": "Explore how transmission and scattering affect whether a material appears transparent, translucent, or opaque.", "Copyright": "", "Level": "", "Language": "", "Logo": [ "./blurImage/Screenshot 2021-04-16 at 9.29.01 AM (2).png" ], "RunAlways": "true", "ModelTab": "", "ModelTabTitle": "", "ModelName": "", "FixedNavigationBar": "false", "CSSFile": "", "DetectedFiles": [ "./blurImage/Screenshot 2021-04-16 at 9.29.01 AM (2).png" ], "AuxiliaryFiles": [ "./blurImage/" ], "HTMLHead": "\n\n", "SaveInXMLFormat": "false", "IncludeSource": "true", "IncludeLibrary": "true", "UglifyJS": "false", "PreviewFullModel": "false", "UseInterpreter": "true", "UseDeltaForODE": "false" }, "description": { "pages": [] }, "model": { "variables": { "pages": [ { "Name": "Var Table", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "lensLength", "Value": "4", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "lensColor", "Value": "\"rgba(0, 0, 0, 0.2)\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "imageUrl", "Value": "\"./blurImage/sample_img1.jpg\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "transmission", "Value": "0.8", "Type": "double", "Dimension": "", "Comment": "Transmission of light", "Domain": "public" }, { "Name": "scattering", "Value": "0.1", "Type": "double", "Dimension": "", "Comment": "How much the transmitted light is scattered", "Domain": "public" }, { "Name": "font", "Value": "\"normal normal 2vw\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "state", "Value": "\"Mostly Transparent\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "behaviorText", "Value": "\"Light passes through clearly.\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "promptText", "Value": "\"Prediction: Will the image stay sharp, become fuzzy, or disappear?\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "transmissionText", "Value": "\"Light transmitted: 80%\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "scatteringText", "Value": "\"Scattering: 10%\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "Var Table 2", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "opacity", "Value": "0", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "", "Domain": "" } ] } ] }, "initialization": { "pages": [ { "Name": "Init Page", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "if (_isMobile){\n // keep defaults on smaller screens\n}\nelse{\n _view.plottingPanel.getMessageDecoration(\"TL\").getFont().setFontSize(\"2vw\");\n _view.plottingPanel.getMessageDecoration(\"TR\").getFont().setFontSize(\"2vw\");\n _view.plottingPanel.getMessageDecoration(\"BL\").getFont().setFontSize(\"2vw\");\n _view.plottingPanel.getMessageDecoration(\"BR\").getFont().setFontSize(\"2vw\");\n}\nupdateMaterialModel();" } ] }, "evolution": { "information": { "FPS": "5", "SPD": "1", "RealTimeVariable": "", "Autoplay": "true" }, "pages": [] }, "fixed_relations": { "pages": [ { "Name": "FixRel Page", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "/*\nCreates the SVG blur filter and clip path once.\nThe lens region shows how transmitted light can also be scattered.\n*/\n_view._update();\n_view._render();\nensureSvgEffects();\nsyncClipCircle();\nsyncSvgVisuals();" } ] }, "custom": { "pages": [ { "Name": "setAttributes", "Active": "true", "Internal": "false", "Type": "LIBRARY_EDITOR", "Comment": "", "Code": "function setAttributes (ele, attrs) {\n for (var key in attrs) {\n ele.setAttribute(key, attrs[key]);\n }\n}\n\nfunction formatPercent(value) {\n return Math.round(100 * value) + \"%\";\n}\n\nfunction updateMaterialModel() {\n transmission = Math.max(0, Math.min(1, transmission));\n scattering = Math.max(0, Math.min(1, scattering));\n\n lensColor = \"rgba(0, 0, 0, \" + (1 - transmission) + \")\";\n transmissionText = \"Light transmitted: \" + formatPercent(transmission);\n scatteringText = \"Scattering: \" + formatPercent(scattering);\n\n if (transmission <= 0.15) {\n state = \"Opaque\";\n behaviorText = \"Very little light gets through, so the image is blocked.\";\n }\n else if (scattering >= 0.35) {\n state = \"Translucent\";\n behaviorText = \"Light passes through, but scattering makes the image look fuzzy.\";\n }\n else if (transmission >= 0.85) {\n state = \"Transparent\";\n behaviorText = \"Most light passes through in an orderly way, so the image stays sharp.\";\n }\n else {\n state = \"Mostly Transparent\";\n behaviorText = \"A lot of light gets through, but the material still dims the image a little.\";\n }\n\n syncSvgVisuals();\n}\n\nfunction ensureSvgEffects() {\n var lens = document.getElementById('lens');\n if (lens == null || document.getElementById('blurFilter') != null) {\n return;\n }\n\n var defs = document.querySelector('#plottingPanel');\n if (defs == null) {\n return;\n }\n\n var filter = document.createElementNS(\"http://www.w3.org/2000/svg\", \"filter\");\n setAttributes(filter, {\n id: \"blurFilter\"\n });\n\n var gaussBlur = document.createElementNS(\"http://www.w3.org/2000/svg\", \"feGaussianBlur\");\n setAttributes(gaussBlur, {\n id: \"gaussBlur\",\n in: \"SourceGraphic\",\n stdDeviation: 10 * scattering\n });\n filter.append(gaussBlur);\n\n var blurClip = document.createElementNS(\"http://www.w3.org/2000/svg\", \"clipPath\");\n setAttributes(blurClip, {\n id: \"blurClip\"\n });\n\n var clipCircle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\n setAttributes(clipCircle, {\n id: \"clipCircle\",\n cx: lens.getAttribute('cx'),\n cy: lens.getAttribute('cy'),\n r: lens.getAttribute('rx')\n });\n\n blurClip.prepend(clipCircle);\n defs.prepend(filter, blurClip);\n}\n\nfunction syncClipCircle() {\n var lens = document.getElementById('lens');\n var clipCircle = document.getElementById('clipCircle');\n if (lens == null || clipCircle == null) {\n return;\n }\n\n setAttributes(clipCircle, {\n cx: lens.getAttribute('cx'),\n cy: lens.getAttribute('cy'),\n r: lens.getAttribute('rx')\n });\n}\n\nfunction syncSvgVisuals() {\n var gaussBlur = document.getElementById(\"gaussBlur\");\n if (gaussBlur != null) {\n setAttributes(gaussBlur, {\n stdDeviation: 10 * scattering\n });\n }\n\n var blurImage = document.getElementById(\"blurImage\");\n if (blurImage != null) {\n blurImage.style.opacity = transmission;\n }\n}\n\nfunction applyPreset(name) {\n if (name === \"glass\") {\n transmission = 0.95;\n scattering = 0.05;\n }\n else if (name === \"paper\") {\n transmission = 0.75;\n scattering = 0.75;\n }\n else if (name === \"wood\") {\n transmission = 0.05;\n scattering = 0.05;\n }\n updateMaterialModel();\n}" } ] }, "elements": { "list": [] } }, "view": { "Tree": [ { "Name": "topPanel", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Width", "value": "\"100%\"" }, { "name": "Display", "value": "\"inline-flex\"" } ], "Children": [ { "Name": "imageLabel", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"Choose Image: \"" }, { "name": "Font", "value": "font" } ] }, { "Name": "comboBox", "Type": "ComboBox", "Properties": [ { "name": "Options", "value": "[\"Image 1\", \"Image 2\", \"Image 3\", \"Image 4\"]" }, { "name": "OnChange", "value": "var selected = _view.comboBox.getProperty(\"SelectedOptions\");\nif(selected == \"Image 1\"){\n imageUrl = \"./blurImage/sample_img1.jpg\"\n}\nelse if(selected == \"Image 2\"){\n imageUrl = \"./blurImage/sample_img2.jpg\"\n}\nelse if(selected == \"Image 3\"){\n imageUrl = \"./blurImage/sample_img3.jpg\"\n}\nelse{\n imageUrl = \"./blurImage/sample_img4.jpg\"\n}\n" }, { "name": "Font", "value": "font" } ] }, { "Name": "opacityLabel", "Type": "Label", "Properties": [ { "name": "Background", "value": "lensColor" }, { "name": "Text", "value": "transmissionText" }, { "name": "Font", "value": "font" } ] }, { "Name": "transmissionSlider", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "0" }, { "name": "Maximum", "value": "1" }, { "name": "Background", "value": "lensColor" }, { "name": "Value", "value": "transmission" }, { "name": "OnChange", "value": "updateMaterialModel();" }, { "name": "Step", "value": "0.1" }, { "name": "Width", "value": "\"20%\"" } ] }, { "Name": "scatteringLabel", "Type": "Label", "Properties": [ { "name": "Background", "value": "\"rgba(220,220,220,0.9)\"" }, { "name": "Text", "value": "scatteringText" }, { "name": "Font", "value": "font" } ] }, { "Name": "scatteringSlider", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "0" }, { "name": "Maximum", "value": "1" }, { "name": "Value", "value": "scattering" }, { "name": "OnChange", "value": "updateMaterialModel();" }, { "name": "Step", "value": "0.1" }, { "name": "Width", "value": "\"20%\"" } ] }, { "Name": "glassButton", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"Clear Glass\"" }, { "name": "OnClick", "value": "applyPreset(\"glass\");" }, { "name": "Font", "value": "font" } ] }, { "Name": "paperButton", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"Tracing Paper\"" }, { "name": "OnClick", "value": "applyPreset(\"paper\");" }, { "name": "Font", "value": "font" } ] }, { "Name": "woodButton", "Type": "Button", "Properties": [ { "name": "Text", "value": "\"Wood\"" }, { "name": "OnClick", "value": "applyPreset(\"wood\");" }, { "name": "Font", "value": "font" } ] } ] }, { "Name": "mainPanel", "Type": "Panel", "Expanded": "false", "Properties": [], "Children": [ { "Name": "plottingPanel", "Type": "PlottingPanel", "Expanded": "true", "Properties": [ { "name": "Gutters", "value": "[0,0,0,0]" }, { "name": "YScalePrecision", "value": "0" }, { "name": "XFixedTick", "value": "0" }, { "name": "Enabled", "value": "true" }, { "name": "SquareAspect", "value": "true" }, { "name": "MaximumY", "value": "4.5" }, { "name": "YFixedTick", "value": "0" }, { "name": "YAutoTicks", "value": "false" }, { "name": "TLMessage", "value": "promptText" }, { "name": "TRMessage", "value": "state" }, { "name": "BLMessage", "value": "transmissionText + \" |\\n \" + scatteringText" }, { "name": "BRMessage", "value": "behaviorText" }, { "name": "MinimumY", "value": "-4.5" }, { "name": "XTickStep", "value": "5" }, { "name": "YTickStep", "value": "5" }, { "name": "AutoScaleY", "value": "false" }, { "name": "AutoScaleX", "value": "false" }, { "name": "XAutoTicks", "value": "false" }, { "name": "Height", "value": "\"85vh\"" }, { "name": "XScalePrecision", "value": "0" }, { "name": "Width", "value": "\"100%\"" } ], "Children": [ { "Name": "image", "Type": "Image2D", "Properties": [ { "name": "SizeX", "value": "16" }, { "name": "ImageUrl", "value": "%imageUrl%" }, { "name": "SizeY", "value": "9" } ] }, { "Name": "blurImage", "Type": "Image2D", "Properties": [ { "name": "SizeX", "value": "16" }, { "name": "Attributes", "value": "{\n \"filter\": \"url(#blurFilter)\",\n \"clip-path\": \"url(#blurClip)\"\n}\n" }, { "name": "ImageUrl", "value": "%imageUrl%" }, { "name": "SizeY", "value": "9" } ] }, { "Name": "lens", "Type": "Shape2D", "Properties": [ { "name": "FillColor", "value": "lensColor" }, { "name": "Sensitivity", "value": "100" }, { "name": "SizeX", "value": "lensLength" }, { "name": "ShapeType", "value": "\"ELLIPSE\"" }, { "name": "LineColor", "value": "\"black\"" }, { "name": "SizeY", "value": "lensLength" }, { "name": "LineWidth", "value": "10" }, { "name": "EnabledPosition", "value": "\"ENABLED_ANY\"" }, { "name": "OnDrag", "value": "syncClipCircle();" } ] } ] } ] }, { "Name": "html", "Type": "Panel", "Properties": [ { "name": "Html", "value": "
\n

Light Transmission and Scattering Through Materials

\n\n

\n This simulation helps you compare how different materials affect light. A material can\n transmit light, scatter light, or block light almost completely.\n By changing these two ideas, we can explain why materials appear\n transparent, translucent, or opaque.\n

\n\n

What to Explore

\n \n\n

How to Use the Simulation

\n
    \n
  1. Choose an image from the drop-down menu.
    2. \n
  2. Drag the circular lens over different parts of the image.
    3. \n
  3. Adjust the Transmission slider to control how much light gets through.
    4. \n
  4. Adjust the Scattering slider to control how blurry the image becomes.
    5. \n
  5. Try the preset buttons such as Clear Glass, Tracing Paper, and Wood.
    6. \n
\n\n

Scientific Ideas

\n \n\n

Questions to Think About

\n \n\n

Learning Goal

\n

\n Use this simulation to understand that the appearance of a material depends not only on\n how much light it lets through, but also on whether that light remains clear or becomes scattered.\n

\n
" } ] } ], "RootProperties": [] }, "metadata": { "APP": "WebEJS", "CreatedWith": "WebEJS : The web version of Easy JavaScript Simulations", "MoreInfo": "WebEJS 1.1", "version": "https://www.um.es/fem/wikis/webejs/" } }