Thisd3poweredvisualizationpackageprovidesatomicanimationswhicharehighlycustomizable.Anexampleappusingthispackagecanbefoundhere:https://acollectionofatoms.github.io/atomic-bohr-model-examples/index.html
FeaturesResponsiveBuiltwithd3.jsinES6Easilymodifiednucleus,orbital,andelectronradii,colorAnimatedinitializationOrbitalrotationalpatterns:linearPositivelinearNegativecubedPositivecubedNegativeparabolaUpparabolaDownrandomuniformOrbitalpatternscanbeentirelyclockwise,counter-clockwise,oralternatingDynamic"address"systemprovidesdistinctID'sforeachcomponentoftheAtom(Helpfulforanimationandstyling.See:Properties)WikipediasummaryandlinksprovidedforeachAtomobject(See:Properties)Electronconfigurationsprovidedbyhttps://en.wikipedia.org/wiki/Electron_shellInstallationnpminstallatomic-bohr-model--save
UsageIncludethisscriptelementinyourmark-up:
<scripttype="text/javascript"src="./node_modules/atomic-bohr-model/dist/atomicBohrModel.min.js"charset="utf-8"></script>alongwithadivtocontainyouratom.
<divid="bohr-model-container"></div>`YouMUSTensureyourdivhasawidthandheight
Theatomsprovidedarerestrictedtothosewhichexistandhavebeendiscovered,therefore:
1<=numElectrons<=118
(passinganything<1or>118willresultineitherHydrogenorUnunoctium)
AtminimumnumElectrons,containerId,andauniqueidNumbermustbeprovided.
varatomicConfig={containerId:"#bohr-model-container",numElectrons:88,idNumber:1}varmyAtom=newAtom(atomicConfig)OptionsvarmyAtom=newAtom({containerId:'#my-container',numElectrons:1,//Anintegerbetween1and118nucleusRadius:30,//Ifnotsuppliedwillbe1/12ofthecontainerswidthnucleusColor:'rgba(124,240,10,0.5)',//Hex,stringorrbgaelectronRadius:3,//Defaultvalueis3electronColor:'blue',//SeenucleusColororbitalSpacing:10,//Ifnotspecifiedwillbea1/3rdofthenucleusRadiusorbitalWidth:1,//widthoforbitalpaths,defaultis0.1orbitalColor:'black',//seeelectronColoridNumber:1,//RequiredinttoprovideuniqueAtomsanimationTime:1300,//TimeinmillisecondsforinitialelectronanimationrotateConfig:{speed:50,clockwise:true},//RotatesentireAtomwithgivenparamsorbitalRotationConfig:{//Invokesorbitalrotationsatinitializationpattern:{alternating:false,//Alternateorbitaldirectionclockwise:false,//Directionforallorbitalspreset:'cubedPositive',//Stringtosetpattern(seeFeaturessection)}},symbolOffset:8,//WhenmodifyingnucleusradiusthismayneedadjustingdrawSymbol:true//Renderatomicsymbolornot})MethodsmyAtom.removeElectrons(2)Removesagivennumberofelectrons
myAtom.addElectrons(7)Addsagivennumberofelectrons
myAtom.setNumElectrons(33)Setsthenumberofelectrons
varorbitalRotationConfig={pattern:{alternating:true,clockwise:false,preset:'parabolaUp',}}myAtom.rotateOrbitals(orbitalRotationConfig)Rotatesorbitalswithgivenconfiguration
myAtom.destroy()Destroysthe<g>elementhousingtheAtombut,NOTtheparent<svg>
varrotateConfig={speed:50,clockwise:true}myAtom.rotate(rotateConfig)Rotatesentireatomwithgivenconfiguration
Properties//WikipediadatamyAtom.elementNamemyAtom.wikiSummarymyAtom.wikiUrlmyAtom.electronConfigmyAtom.atomicSymbol//IdentifyingAtomsandtheircomponentsmyAtom.atomId//ex:atom-0varfirstOrb=myAtom.orbitals[0]//d3selectionfirstOrb.orbitalId//ex:atom-0-orbital-0firstOrb.electrons[0].eId//ex:atom-0-oribital-0-electron-0
评论