{ "information": { "Title": "ejss_model_Light_Object_Screen_Shadow_3D_animate Left Light Source, Middle Object (Cube or Sphere) and Right Screen with Shadow in 3D", "Author": [ "lookang (weelookang@gmail.com)", "shaun" ], "AuthorLogo": [ "./01authorlookang50x50.png", "" ], "Password": "", "Keywords": "", "Abstract": "\n by weelookang@gmail.com", "Copyright": "Creative Commons Attribution", "Level": "Primary", "Language": "", "Logo": [ "./logoLight.png" ], "RunAlways": "true", "ModelTab": "", "ModelTabTitle": "", "ModelName": "", "FixedNavigationBar": "false", "CSSFile": "", "DetectedFiles": [ "./01authorlookang50x50.png", "./logoLight.png" ], "AuxiliaryFiles": [ "./Light_Object_Screen_Shadow_3D/" ], "HTMLHead": "\n\n\n\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": "pi", "Value": "Math.PI", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "blue", "Value": "\"rgb(0,0,255)\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "green", "Value": "\"rgb(0,255,0)\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "green2", "Value": "\"rgb(0,255,0)\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "yellow", "Value": "\"rgb(255,255,0)\"", "Type": "String", "Dimension": "", "Comment": "introduce by wee for color of electron", "Domain": "public" } ] }, { "Name": "Var Table 2", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "font", "Value": "\"normal normal 2vw \"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "windowMax", "Value": "5.0", "Type": "double", "Dimension": "", "Comment": "sets the size of the window", "Domain": "public" }, { "Name": "range", "Value": "windowMax", "Type": "double", "Dimension": "", "Comment": "range", "Domain": "public" }, { "Name": "xmin", "Value": "-range", "Type": "double", "Dimension": "", "Comment": "x minimum", "Domain": "public" }, { "Name": "xmax", "Value": "range", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "ymin", "Value": "-range", "Type": "double", "Dimension": "", "Comment": "y minimum", "Domain": "public" }, { "Name": "ymax", "Value": "range", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "zmin", "Value": "-range", "Type": "double", "Dimension": "", "Comment": "z minimum", "Domain": "public" }, { "Name": "zmax", "Value": "range", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "enabledview", "Value": "true", "Type": "boolean", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cameraaltitude", "Value": "45", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "draggable", "Value": "false", "Type": "boolean", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "light", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "lightX", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "lightY", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "lightZ", "Value": "10", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "lightZslider", "Value": "-lightZ", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "lightLinesX", "Value": "", "Type": "double", "Dimension": "[4]", "Comment": "null", "Domain": "public" }, { "Name": "lightLinesY", "Value": "", "Type": "double", "Dimension": "[4]", "Comment": "null", "Domain": "public" }, { "Name": "lightLinesZ", "Value": "", "Type": "double", "Dimension": "[4]", "Comment": "null", "Domain": "public" }, { "Name": "lightVisible", "Value": "", "Type": "double", "Dimension": "[4]", "Comment": "null", "Domain": "public" }, { "Name": "objectType", "Value": "\"cube\"", "Type": "String", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "cube", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "cubeX", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cubeY", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cubeZ", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cubeZslider", "Value": "-cubeZ", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "cubeLength", "Value": "2", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "sphere", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "sphereX", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "sphereY", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "sphereZ", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "sphereZslider", "Value": "-sphereZ", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "sphereRadius", "Value": "1", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "shadow", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "shadow", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "shadowLengthX", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "shadowLengthY", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "shadowRadius", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "shadowCorners", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "screen", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "screenZ", "Value": "-10", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "screenZslider", "Value": "-screenZ", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] }, { "Name": "animate", "Active": "true", "Internal": "false", "Type": "VARIABLE_EDITOR", "PageComment": "", "Variables": [ { "Name": "t", "Value": "0", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "dt", "Value": "0.05", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "animateOn", "Value": "false", "Type": "boolean", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "animateInit", "Value": "false", "Type": "boolean", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "dest", "Value": "[0, 0, 0]", "Type": "double", "Dimension": "[4]", "Comment": "null", "Domain": "public" }, { "Name": "velocity", "Value": "[0, 0, 0]", "Type": "double", "Dimension": "[4]", "Comment": "null", "Domain": "public" }, { "Name": "animateDuration", "Value": "1", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" }, { "Name": "", "Value": "", "Type": "double", "Dimension": "", "Comment": "null", "Domain": "public" } ] } ] }, "initialization": { "pages": [ { "Name": "Init Page", "Active": "true", "Internal": "false", "Type": "CODE_EDITOR", "Comment": "", "Code": "calcShadow();\n\n\n\n\n" } ] }, "evolution": { "information": { "FPS": "20", "SPD": "1", "RealTimeVariable": "", "Autoplay": "true" }, "pages": [ { "Name": "Evol Page", "Active": "true", "Internal": "false", "Type": "EVOLUTION_EDITOR", "Comment": "", "Code": "//console.log(\"test\");\n\nif(!animateOn)\n return;\n\n \nif(t >= animateDuration){\n animateOn = false;\n animateInit = false;\n t= 0;\n \n for(var i = 0; i < 4; i++){\n lightLinesX[i] = dest[i][0];\n lightLinesY[i] = dest[i][1];\n lightLinesZ[i] = dest[i][2];\n }\n \n return;\n}\n \nif(!animateInit){\n t = 0;\n // iterate for each light ray\n for(var i = 0; i < 4; i++){\n velocity[i] = [0, 0, 0];\n // for each direction x, y, x\n for(var k = 0; k < 3; k++){\n velocity[i][k] = dest[i][k] / animateDuration;\n }\n } \n animateInit = true;\n}\n\nfor(var i = 0; i < 4; i++){\n // for each direction x, y, x\n lightLinesX[i] += velocity[i][0] * dt;\n lightLinesY[i] += velocity[i][1] * dt;\n lightLinesZ[i] += velocity[i][2] * dt;\n } \n \nt += dt;\n" } ] }, "fixed_relations": { "pages": [] }, "custom": { "pages": [ { "Name": "ChangeOrientation", "Active": "true", "Internal": "false", "Type": "LIBRARY_EDITOR", "Comment": "", "Code": "// code to be copied to EJSS source code under Custom and used in drawingPanel3D and plottingPanel2D\n// address the problem is height difference is iOS app , epub, and Firefox\n// user need to change only k and kepub\n// copy %changeOrientation()% into the Height Field of drawingPanel3D and plottingPanel2D\n\n// _view.plottingPanel.getGraphics().setHeight(changeOrientation(0.85));\n\nfunction changeOrientation(kheight) {\n \nvar k =0.90 ; // k control height 1 is for full screen, 0.9 shorten etc\nvar kapple =kheight // control apple app height\nvar kepub =0.90 ;\n// check platform for Apps\ntry { // allow code to run in Student Learning Space \n var iOSapp = (typeof parent.device != 'undefined' && parent.device.platform == \"iOS\");\n var Androidapp = (typeof parent.device != 'undefined' && parent.device.platform == \"Android\");\n} catch(e) {\n var iOSapp = false;\n var Androidapp = false;\n}\n// check platform for web browsers\nvar iOS =/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;\nvar iPad =/iPad/.test(navigator.userAgent) && !window.MSStream;\nvar iPhone = /iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;\nvar Android= /Android|android/i.test(navigator.userAgent);\n\n//navigator\nvar Firefox = navigator.userAgent.indexOf(\"Firefox\") != -1;\n \nswitch (window.orientation) { // using window.orientation as deciding factor\n case 0:\n case 180:\n this.screenOrientation = 'portrait';\n if (iOSapp){ // does not seems to work\n \n return window.screen.height*kapple; //0.1 for app and 0.1 for nonfullscreenapp \n \n }\n else if (_isEPub){ // does not seems to work\n // return Math.max(window.screen.width,window.screen.height)*0.9;\n return window.innerHeight*kepub; //0.1 for app and 0.1 for nonfullscreenapp \n // return window.screen.height;\n // return window.innerHeight;\n // return document.documentElement.clientHeight;\n }\n \n else {\n return window.innerHeight*kheight;\n //return 100*k+\"vh\";\n }\n break;\n case 90:\n case -90:\n this.screenOrientation = 'landscape';\n \n if (iOSapp){ // App\n return window.screen.width*kapple; \n // return window.screen.height;\n // return window.innerHeight;\n // return document.documentElement.clientHeight;\n }\n else if (_isEPub){ // does not seems to work\n // return Math.max(window.screen.width,window.screen.height)*0.9;\n return window.innerHeight*kepub; //0.1 for app and 0.1 for nonfullscreenapp \n // return window.screen.height;\n // return window.innerHeight;\n // return document.documentElement.clientHeight;\n }\n \n else {\n return window.innerHeight*kheight;\n //return 100*k+\"vh\"; // safari produce error\n }\n break;\n default:\n this.screenOrientation = 'unknown';\n // return (iPad)?\"\"+(window.screen.width+window.screen.height)*0.4:((iPhone)?\"\"+window.screen.width:_view._format(window.innerHeight*0.9,\"0\"));\n if (Firefox){\n return window.innerHeight*k;// number as of 20180831 Firefox does not support vh yet so need a separate line to handle\n }\n // else if (iOS&&(window.orientation==0)||(window.orientation==180)){\n // return window.screen.height*k;// number as of 20180831 Firefox does not support vh yet so need a separate line to handle\n // }\n // else if (iOS&&(window.orientation==90)||(window.orientation==-90)){\n // return window.screen.width*k;// number as of 20180831 Firefox does not support vh yet so need a separate line to handle\n // }\n else {\n //alert();\n // return 100*k+\"%\"; // work on fullscreen works in EJSS6.0beta\n // works in EjsS_5.3_180131\n //return window.innerHeight*kheight; // work on panel \n // take note the panel that contains the plottingPanel needs to be 100% in Height to maximize the view\n return 100*k+\"vh\";\n // 100% does not work on iOS after clicking reset it lengthens\n}\n\n}\n \n}" }, { "Name": "calcShadow", "Active": "true", "Internal": "false", "Type": "LIBRARY_EDITOR", "Comment": "", "Code": "//https://basarat.gitbook.io/typescript/future-javascript/classes\nclass Point {\n constructor(x, y, z) {\n this.x = x;\n this.y = y;\n this.z = z;\n }\n}\n\n// determining the shape of the shadow\nfunction calcShadow() {\n var light = new Point(lightX, lightY, lightZ);\n var object, length, dy, dx;\n \n if(objectType == \"cube\"){\n object = new Point(cubeX, cubeY, cubeZ + cubeLength / 2); // object the centre of the 4 points edge of the light touching the cube?\n // object = new Point(cubeX, cubeY, cubeZ + cubeLength );\n length = cubeLength;\n dx = [1, 1, -1, -1]; // top bottom left right point\n dy = [1, -1, 1, -1];\n }\n else if(objectType == \"sphere\"){\n var distance = light.z - sphereZ;\n var offset = (sphereRadius * sphereRadius) / distance;\n \n object = new Point(sphereX, sphereY, sphereZ + offset);\n length = (sphereRadius * Math.sin(Math.acos(sphereRadius / distance))) * 2;\n dx = [1, -1, 0, 0]; // top bottom left right point\n dy = [0, 0, 1, -1];\n }\n \n // stores the edge points of the shadow\n shadowCorners = [];\n\n for(var i = 0; i < 4; i++) {\n // the corners of the object where the light will intersect with the object\n var corner = new Point(\n dx[i] * (length / 2) + object.x, \n dy[i] * (length / 2) + object.y, \n object.z\n );\n //console.log(corner);\n // using vector math to calculate the endpoints\n var lambda = (screenZ - corner.z) / (corner.z - light.z);\n\n var final = new Point(\n corner.x + lambda * (corner.x - light.x), // screen cooridnate of shadow\n corner.y + lambda * (corner.y - light.y),\n corner.z + lambda * (corner.z - light.z),\n );\n shadowCorners.push(final);\n }\n\n //console.log(shadowCorners);\n\n // calculations to determine the center and size of the shadow\n var maxX = null, minX = null, maxY = null, minY = null;\n shadow = new Point(0, 0, 0);\n for(var i = 0; i < 4; i++) {\n shadow.x += shadowCorners[i].x;\n shadow.y += shadowCorners[i].y;\n shadow.z += shadowCorners[i].z;\n\n maxX = maxX == null ? shadowCorners[i].x : Math.max(maxX, shadowCorners[i].x);\n minX = minX == null ? shadowCorners[i].x : Math.min(minX, shadowCorners[i].x);\n maxY = maxY == null ? shadowCorners[i].y : Math.max(maxY, shadowCorners[i].y);\n minY = minY == null ? shadowCorners[i].y : Math.min(minY, shadowCorners[i].y);\n\n dest[i] = [shadowCorners[i].x, shadowCorners[i].y, screenZ - lightZ];\n \n lightLinesX[i] = 0;\n lightLinesY[i] = 0;\n lightLinesZ[i] = 0;\n \n lightVisible[i] = true;\n }\n // removing some light rays for a sphere for visual effect\n if(objectType == 'sphere'){\n lightVisible[0] = false;\n lightVisible[1] = false;\n }\n\n shadow.x /= 4; // centre point \n shadow.y /= 4;\n shadow.z /= 4;\n shadowLengthX = (maxX - minX); //screen length\n shadowLengthY = (maxY - minY);\n \n // turn on light animation \n animateOn = true;\n animateInit = false;\n \n}" } ] }, "elements": { "list": [] } }, "view": { "Tree": [ { "Name": "panel", "Type": "Panel", "Expanded": "true", "Properties": [], "Children": [ { "Name": "displayPanel", "Type": "Panel", "Expanded": "true", "Properties": [ { "name": "Width", "value": "\"100%\"" }, { "name": "Font", "value": "font" } ], "Children": [ { "Name": "controlPanelfromlefttorightconvention", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Width", "value": "\"100%\"" }, { "name": "Display", "value": "\"inline-flex\"" } ], "Children": [ { "Name": "viewlock", "Type": "CheckBox", "Properties": [ { "name": "Checked", "value": "enabledview" }, { "name": "OnCheckOff", "value": "draggable=\"AZIMUTH\"" }, { "name": "TextOn", "value": "\"\ud83d\udd12\"" }, { "name": "TextOff", "value": "\"\ud83d\udd13\"" }, { "name": "Height", "value": "1" }, { "name": "Width", "value": "\"4vw\"" }, { "name": "Font", "value": "font" }, { "name": "OnCheckOn", "value": "draggable=\"NONE\"" } ] }, { "Name": "panel_2", "Type": "Panel", "Expanded": "true", "Properties": [], "Children": [ { "Name": "lightZ2", "Type": "Label", "Properties": [ { "name": "Background", "value": "\"Yellow\"" }, { "name": "Text", "value": "\"light Z= \"+lightZslider" } ] }, { "Name": "lightZSlider2", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "-10" }, { "name": "Maximum", "value": "objectType==\"cube\"?(cubeZslider-cubeLength/2):(sphereZslider-sphereRadius)" }, { "name": "Value", "value": "lightZslider" }, { "name": "OnChange", "value": "lightZ= -lightZslider; // to minus\ncalcShadow();" }, { "name": "Step", "value": "1" } ] }, { "Name": "title2", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"Shadow Simulation\"" }, { "name": "Font", "value": "font" }, { "name": "Display", "value": "\"none\"" } ] } ] }, { "Name": "lightZField2", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "lightZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "secondaryPanel2", "Type": "Panel", "Expanded": "true", "Properties": [ { "name": "Background", "value": "\"rgb(64,128,255,1)\"" }, { "name": "Display", "value": "\"inline-block\"" } ], "Children": [ { "Name": "comboBox2", "Type": "ComboBox", "Properties": [ { "name": "Options", "value": "[\"cube\", \"sphere\"]" }, { "name": "Foreground", "value": "\"rgb(64,128,255,1)\"" }, { "name": "OnChange", "value": "var opts = _view.comboBox2.getProperty(\"SelectedOptions\"); // array of options\nvar option = (opts.length > 0)? opts[0]:\"\"; // selected option\n\nobjectType = option;\ncalcShadow();\n" }, { "name": "Width", "value": "\"8vw\"" }, { "name": "Font", "value": "font" } ] }, { "Name": "cubeContainer2", "Type": "Panel", "Expanded": "true", "Properties": [ { "name": "Display", "value": "objectType==\"cube\"?\"inline-flex\":\"none\"" }, { "name": "Width", "value": "\"100%\"" } ], "Children": [ { "Name": "cubeZ2", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"Position= \"+cubeZslider" } ] }, { "Name": "cubeZSlider23", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "lightZslider+cubeLength/2" }, { "name": "Maximum", "value": "screenZslider-cubeLength/2" }, { "name": "Value", "value": "cubeZslider" }, { "name": "OnChange", "value": "cubeZ=-cubeZslider // minus\ncalcShadow();\n" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"cube\"" } ] }, { "Name": "cubeZField2", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "cubeZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"cube\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "cubeLength3", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"Size = \"+cubeLength" } ] }, { "Name": "cubeLength22", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "1" }, { "name": "Maximum", "value": "5" }, { "name": "Value", "value": "cubeLength" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"cube\"" } ] }, { "Name": "cubeLengthField2", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "cubeLength" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"cube\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] } ] }, { "Name": "sphereContainer2", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Display", "value": "objectType==\"sphere\"?\"inline-flex\":\"none\"" }, { "name": "Width", "value": "\"100%\"" } ], "Children": [ { "Name": "sphereZ2", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"Position = \"+sphereZslider" } ] }, { "Name": "cubeZSlider223", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "lightZslider+sphereRadius/2" }, { "name": "Maximum", "value": "screenZslider-sphereRadius/2" }, { "name": "Value", "value": "sphereZslider" }, { "name": "OnChange", "value": "sphereZ=-sphereZslider\ncalcShadow();\n" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"sphere\"" } ] }, { "Name": "sphereZField2", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "sphereZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"sphere\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "sphereRadius2", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"Radius = \"+sphereRadius" } ] }, { "Name": "cubeZSlider2222", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "1" }, { "name": "Maximum", "value": "5" }, { "name": "Value", "value": "sphereRadius" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"sphere\"" } ] }, { "Name": "sphereRadiusField2", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "sphereRadius" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"sphere\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] } ] } ] }, { "Name": "panel_3", "Type": "Panel", "Expanded": "true", "Properties": [], "Children": [ { "Name": "screenZ2", "Type": "Label", "Properties": [ { "name": "Background", "value": "\"rgb(200,220,208,1)\"" }, { "name": "Text", "value": "\"screenZ = \"+screenZslider" } ] }, { "Name": "screenZSlider22", "Type": "Slider", "Properties": [ { "name": "Maximum", "value": "10" }, { "name": "Minimum", "value": "objectType==\"cube\"?(cubeZslider+cubeLength/2):(sphereZslider+sphereRadius)" }, { "name": "Value", "value": "screenZslider" }, { "name": "OnChange", "value": "screenZ=-screenZslider\ncalcShadow();\n" }, { "name": "Step", "value": "1" } ] }, { "Name": "screenZField2", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "screenZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] } ] }, { "Name": "resetButton", "Type": "Button", "Properties": [ { "name": "Tooltip", "value": "\"Reset\"" }, { "name": "Text", "value": "\"\u21bbReset\"" }, { "name": "OnClick", "value": "%_reset%" }, { "name": "Font", "value": "font" } ] } ] }, { "Name": "controlPanel", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Display", "value": "\"none\"" } ], "Children": [ { "Name": "title", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"Shadow Simulation\"" } ] }, { "Name": "lightZ", "Type": "Label", "Properties": [ { "name": "Background", "value": "\"Yellow\"" }, { "name": "Text", "value": "\"lightZ= \"+lightZ" }, { "name": "Font", "value": "\"normal bold 20px \"" } ] }, { "Name": "lightZSlider", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "cubeZ+1" }, { "name": "Maximum", "value": "10" }, { "name": "Value", "value": "lightZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" } ] }, { "Name": "lightZField", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "lightZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "secondaryPanel", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Background", "value": "\"rgb(64,128,255,1)\"" }, { "name": "Display", "value": "\"inline-block\"" } ], "Children": [ { "Name": "comboBox", "Type": "ComboBox", "Properties": [ { "name": "Options", "value": "[\"cube\", \"sphere\"]" }, { "name": "OnChange", "value": "var opts = _view.comboBox.getProperty(\"SelectedOptions\"); // array of options\nvar option = (opts.length > 0)? opts[0]:\"\"; // selected option\n\nobjectType = option;\ncalcShadow();\n" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 1vw \"" } ] }, { "Name": "cubeContainer", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Display", "value": "objectType==\"cube\"?\"inline-block\":\"none\"" } ], "Children": [ { "Name": "cubeZ", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"Cube Z= \"+cubeZ" }, { "name": "Font", "value": "\"normal bold 20px \"" } ] }, { "Name": "cubeZSlider2", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "0" }, { "name": "Maximum", "value": "5" }, { "name": "Value", "value": "cubeZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"cube\"" } ] }, { "Name": "cubeZField", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "cubeZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"cube\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "cubeLength", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"Cube Length: \"" }, { "name": "Font", "value": "\"normal bold 20px \"" } ] }, { "Name": "cubeLength2", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "0" }, { "name": "Maximum", "value": "5" }, { "name": "Value", "value": "cubeLength" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"cube\"" } ] }, { "Name": "cubeLengthField", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "cubeLength" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"cube\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] } ] }, { "Name": "sphereContainer", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Display", "value": "objectType==\"sphere\"?\"inline-block\":\"none\"" } ], "Children": [ { "Name": "sphereZ", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"sphereZ: \"" }, { "name": "Font", "value": "\"normal bold 20px \"" } ] }, { "Name": "cubeZSlider22", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "0" }, { "name": "Maximum", "value": "5" }, { "name": "Value", "value": "sphereZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"sphere\"" } ] }, { "Name": "sphereZField", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "sphereZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"sphere\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] }, { "Name": "sphereRadius", "Type": "Label", "Properties": [ { "name": "TextAlign", "value": "\"right\"" }, { "name": "Text", "value": "\"sphereRadius: \"" }, { "name": "Font", "value": "\"normal bold 20px \"" } ] }, { "Name": "cubeZSlider222", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "0" }, { "name": "Maximum", "value": "5" }, { "name": "Value", "value": "sphereRadius" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" }, { "name": "Disabled", "value": "objectType != \"sphere\"" } ] }, { "Name": "sphereRadiusField", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "sphereRadius" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Editable", "value": "objectType == \"sphere\"" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] } ] } ] }, { "Name": "screenZ", "Type": "Label", "Properties": [ { "name": "Background", "value": "\"rgb(200,220,208,1)\"" }, { "name": "Text", "value": "\"screenZ: \"" }, { "name": "Font", "value": "\"normal bold 20px \"" } ] }, { "Name": "screenZSlider2", "Type": "Slider", "Properties": [ { "name": "Minimum", "value": "-10" }, { "name": "Maximum", "value": "-2" }, { "name": "Value", "value": "screenZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Step", "value": "1" } ] }, { "Name": "screenZField", "Type": "ParsedField", "Properties": [ { "name": "Value", "value": "screenZ" }, { "name": "OnChange", "value": "calcShadow();" }, { "name": "Width", "value": "\"10vw\"" }, { "name": "Font", "value": "\"normal bold 20px \"" }, { "name": "Display", "value": "\"none\"" } ] } ] }, { "Name": "topPanel", "Type": "Panel", "Expanded": "false", "Properties": [], "Children": [ { "Name": "drawingPanel3D", "Type": "Display3DPanel", "Expanded": "true", "Properties": [ { "name": "Draggable", "value": "%draggable%" }, { "name": "CameraAltitude", "value": "cameraaltitude" }, { "name": "Enabled", "value": "true" }, { "name": "Projection", "value": "\"PLANAR_YZ\"" }, { "name": "MaximumZ", "value": "zmax" }, { "name": "MaximumY", "value": "ymax" }, { "name": "MaximumX", "value": "xmax" }, { "name": "MinimumX", "value": "xmin" }, { "name": "MinimumY", "value": "ymin" }, { "name": "MinimumZ", "value": "zmin" }, { "name": "Lights", "value": "0" }, { "name": "CameraAzimuth", "value": "0" }, { "name": "Height", "value": "\"\"+changeOrientation(0.8)" }, { "name": "DecorationType", "value": "\"NONE\"" }, { "name": "Width", "value": "\"100%\"" } ], "Children": [ { "Name": "lightSource", "Type": "Sphere3D", "Properties": [ { "name": "Radius", "value": "0.2" }, { "name": "FillColor", "value": "\"Yellow\"" }, { "name": "Sensitivity", "value": "5" }, { "name": "X", "value": "lightX" }, { "name": "Y", "value": "lightY" }, { "name": "Z", "value": "lightZ" }, { "name": "Visibility", "value": "false" }, { "name": "DrawFill", "value": "true" }, { "name": "EnabledPosition", "value": "\"ENABLED_Z\"" } ] }, { "Name": "lightLines", "Type": "SegmentSet3D", "Properties": [ { "name": "SizeX", "value": "lightLinesX" }, { "name": "X", "value": "lightX" }, { "name": "LineColor", "value": "\"Yellow\"" }, { "name": "Y", "value": "lightY" }, { "name": "Z", "value": "lightZ" }, { "name": "SizeZ", "value": "lightLinesZ" }, { "name": "Visibility", "value": "lightVisible" }, { "name": "SizeY", "value": "lightLinesY" }, { "name": "LineWidth", "value": "0.05" } ] }, { "Name": "cubeItem", "Type": "Box3D", "Properties": [ { "name": "FillColor", "value": "\"rgb(64,128,255,1)\"" }, { "name": "SizeX", "value": "cubeLength" }, { "name": "X", "value": "cubeX" }, { "name": "LineColor", "value": "\"Blue\"" }, { "name": "Y", "value": "cubeY" }, { "name": "Z", "value": "cubeZ" }, { "name": "SizeZ", "value": "cubeLength" }, { "name": "Visibility", "value": "objectType == \"cube\"" }, { "name": "SizeY", "value": "cubeLength" }, { "name": "DrawLines", "value": "true" }, { "name": "Resolution", "value": "4" } ] }, { "Name": "sphere", "Type": "Group3D", "Expanded": "true", "Properties": [ { "name": "X", "value": "sphereX" }, { "name": "Y", "value": "sphereY" }, { "name": "Z", "value": "sphereZ" } ], "Children": [ { "Name": "sphereItem", "Type": "Sphere3D", "Properties": [ { "name": "Radius", "value": "sphereRadius" }, { "name": "FillColor", "value": "\"rgb(64,128,255,1)\"" }, { "name": "Transformation", "value": "[[pi/2,1,0,0],[0,0,1,0],[0,0,0,1]]" }, { "name": "X", "value": "0" }, { "name": "LineColor", "value": "blue" }, { "name": "Y", "value": "0" }, { "name": "Z", "value": "0" }, { "name": "Visibility", "value": "objectType == \"sphere\"" }, { "name": "DrawLines", "value": "true" }, { "name": "LineWidth", "value": "1" }, { "name": "Resolution", "value": "36" } ] } ] }, { "Name": "shadowSquare", "Type": "Plane3D", "Properties": [ { "name": "FillColor", "value": "\"rgb(50,50,50)\"" }, { "name": "SizeX", "value": "shadowLengthX" }, { "name": "X", "value": "shadow.x" }, { "name": "Y", "value": "shadow.y" }, { "name": "Z", "value": "shadow.z" }, { "name": "SizeZ", "value": "1" }, { "name": "Visibility", "value": "objectType == \"cube\"" }, { "name": "SizeY", "value": "shadowLengthY" } ] }, { "Name": "shadowCircle", "Type": "Disk3D", "Properties": [ { "name": "BottomRadius", "value": "shadowLengthX" }, { "name": "FillColor", "value": "\"rgb(50,50,50)\"" }, { "name": "X", "value": "shadow.x" }, { "name": "Y", "value": "shadow.y" }, { "name": "Visibility", "value": "objectType == \"sphere\"" }, { "name": "Z", "value": "shadow.z" }, { "name": "Resolution", "value": "36" } ] }, { "Name": "screen", "Type": "Plane3D", "Properties": [ { "name": "FillColor", "value": "\"rgb(200,220,208,1)\"" }, { "name": "SizeX", "value": "30" }, { "name": "X", "value": "0" }, { "name": "Y", "value": "0" }, { "name": "Z", "value": "screenZ - 0.1" }, { "name": "SizeZ", "value": "1" }, { "name": "SizeY", "value": "30" }, { "name": "DrawFill", "value": "true" }, { "name": "Resolution", "value": "36" } ] }, { "Name": "torch", "Type": "Group3D", "Expanded": "true", "Properties": [ { "name": "X", "value": "lightX" }, { "name": "Y", "value": "lightY" }, { "name": "Z", "value": "lightZ+0.5" } ], "Children": [ { "Name": "cylinder3Dtorch", "Type": "Cylinder3D", "Properties": [ { "name": "FillColor", "value": "\"Orange\"" }, { "name": "Transformation", "value": "[[0,1,0,0],[0,0,1,0],[0,0,0,1]]" }, { "name": "SizeX", "value": "0.35" }, { "name": "SizeZ", "value": "1" }, { "name": "SizeY", "value": "0.35" } ] }, { "Name": "button2", "Type": "Box3D", "Properties": [ { "name": "FillColor", "value": "\"Magenta\"" }, { "name": "SizeX", "value": "0.1" }, { "name": "Y", "value": "0.15" }, { "name": "SizeZ", "value": "0.1" }, { "name": "SizeY", "value": "0.1" } ] }, { "Name": "group3D", "Type": "Group3D", "Expanded": "true", "Properties": [ { "name": "Z", "value": "-0.5" } ], "Children": [ { "Name": "light2", "Type": "Cylinder3D", "Properties": [ { "name": "Transformation", "value": "[[0,1,0,0],[0,0,1,0],[0,0,0,1]]" }, { "name": "FillColor", "value": "\"Yellow\"" }, { "name": "SizeX", "value": "0.4" }, { "name": "X", "value": "0" }, { "name": "SizeZ", "value": "0.1" }, { "name": "SizeY", "value": "0.4" } ] } ] } ] } ] } ] }, { "Name": "debug2", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Display", "value": "\"none\"" } ], "Children": [ { "Name": "a", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"CameraX=\"" } ] }, { "Name": "field42", "Type": "ParsedField", "Properties": [ { "name": "Format", "value": "\"0.00\"" }, { "name": "Value", "value": "_view.drawingPanel3D.getProperty(\"CameraX\")" }, { "name": "OnChange", "value": "_view.drawingPanel3D.setCamLocX(_view.field42.getValue());" }, { "name": "Width", "value": "30" } ] }, { "Name": "a2", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"CameraY=\"" } ] }, { "Name": "field43", "Type": "ParsedField", "Properties": [ { "name": "Format", "value": "\"0.00\"" }, { "name": "Value", "value": "_view.drawingPanel3D.getProperty(\"CameraY\")" }, { "name": "OnChange", "value": "_view.drawingPanel3D.setCamLocY(_view.field43.getValue());" }, { "name": "Width", "value": "30" } ] }, { "Name": "a22", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"CameraZ=\"" } ] }, { "Name": "field4", "Type": "ParsedField", "Properties": [ { "name": "Format", "value": "\"0.00\"" }, { "name": "Value", "value": "_view.drawingPanel3D.getProperty(\"CameraZ\")" }, { "name": "OnChange", "value": "_view.drawingPanel3D.setCamLocZ(_view.field4.getValue());" }, { "name": "Width", "value": "30" } ] } ] }, { "Name": "debug22", "Type": "Panel", "Expanded": "false", "Properties": [ { "name": "Display", "value": "\"none\"" } ], "Children": [ { "Name": "a23", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"CameraTilt=\"" } ] }, { "Name": "field432", "Type": "ParsedField", "Properties": [ { "name": "Format", "value": "\"0.00\"" }, { "name": "Value", "value": "_view.drawingPanel3D.getProperty(\"CameraTilt\")" }, { "name": "OnChange", "value": "_view.drawingPanel3D.setCamTilt(_view.field432.getValue());" }, { "name": "Width", "value": "30" } ] }, { "Name": "a3", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"CameraAltitude\"" } ] }, { "Name": "field422", "Type": "ParsedField", "Properties": [ { "name": "Format", "value": "\"0.00\"" }, { "name": "Value", "value": "_view.drawingPanel3D.getProperty(\"CameraAltitude\")" }, { "name": "OnChange", "value": "_view.drawingPanel3D.setCamAltitude(_view.field422.getValue());" }, { "name": "Width", "value": "30" } ] }, { "Name": "a222", "Type": "Label", "Properties": [ { "name": "Text", "value": "\"CameraAzimuth=\"" } ] }, { "Name": "field44", "Type": "ParsedField", "Properties": [ { "name": "Format", "value": "\"0.00\"" }, { "name": "Value", "value": "_view.drawingPanel3D.getProperty(\"CameraAzimuth\")" }, { "name": "OnChange", "value": "_view.drawingPanel3D.setCamAzimuth(_view.field44.getValue());" }, { "name": "Width", "value": "30" } ] } ] }, { "Name": "html", "Type": "Panel", "Properties": [ { "name": "Html", "value": "

Light\u2013Object\u2013Screen Shadow 3D Interactive

\n\n

\n This interactive is a 3D simulation of light, an object, and a screen that helps learners\n explore how shadows are formed. It shows a light source shining toward an object placed in front of a screen,\n allowing students to see how the object blocks light and creates a shadow.\n

\n\n

What the interactive demonstrates

\n \n\n

What learners can explore

\n \n\n

Learning value

\n

\n This interactive helps students build a stronger understanding of\n shadow formation, rectilinear propagation of light, and\n spatial relationships in optics. Because the model is animated and interactive,\n students can make predictions, test them immediately, and refine their understanding through inquiry.\n

\n\n

Suggested classroom use

\n

\n Teachers can use this simulation for demonstrations, guided inquiry, or student exploration.\n It is useful for prompting questions such as:\n \u201cWhat happens to the shadow when the object moves closer to the light?\u201d\n or \u201cWhy does the shadow size change when the screen is moved?\u201d\n

\n\n

\n Interactive link:
\n \n https://iwant2study.org/lookangejss/04waves_13light/ejss_model_Light_Object_Screen_Shadow_3D_animate/index.html\n \n

\n

Additional Resources

\n
\n

\n Explore more related light simulations and teaching resources:\n

\n \n https://sg.iwant2study.org/ospsg/index.php/interactive-resources/physics/04-waves/04-light\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/" } }