{"id":1524,"date":"2024-12-12T04:18:29","date_gmt":"2024-12-12T04:18:29","guid":{"rendered":"https:\/\/sparkonelabs.com\/home\/?p=1524"},"modified":"2024-12-12T04:57:39","modified_gmt":"2024-12-12T04:57:39","slug":"webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate","status":"publish","type":"post","link":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/","title":{"rendered":"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate)"},"content":{"rendered":"\n<!DOCTYPE html>\n<html>\n<head>\n    <title>Electron Motion in Magnetic Field<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n    <style>\n        .magnetic-field-widget {\n            width: 100%;\n            max-width: 800px;\n            aspect-ratio: 4\/3;\n            margin: 20px auto;\n            border-radius: 8px;\n            overflow: hidden;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n        }\n        \n        .magnetic-field-widget canvas {\n            width: 100% !important;\n            height: 100% !important;\n            display: block;\n        }\n\n        @media screen and (max-width: 600px) {\n            .magnetic-field-widget {\n                aspect-ratio: 1\/1;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n<div class=\"magnetic-field-widget\" id=\"magnetic-field-container\"><\/div>\n\n<script>\nclass MagneticFieldWidget {\n    constructor(containerId) {\n        this.container = document.getElementById(containerId);\n        this.R = 1; \/\/ major radius\n        this.a = 0.3; \/\/ minor radius\n        this.current = 1;\n        this.mu0 = 1;\n        this.init();\n    }\n\n    init() {\n        this.scene = new THREE.Scene();\n        this.camera = new THREE.PerspectiveCamera(75, this.container.clientWidth \/ this.container.clientHeight, 0.1, 1000);\n        this.renderer = new THREE.WebGLRenderer({ antialias: true });\n        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);\n        this.container.appendChild(this.renderer.domElement);\n\n        this.camera.position.z = 5;\n\n        this.setupScene();\n        this.setupFieldLines();\n        this.setupElectrons();\n\n        window.addEventListener('resize', () => this.onWindowResize());\n        if (window.ResizeObserver) {\n            const resizeObserver = new ResizeObserver(() => this.onWindowResize());\n            resizeObserver.observe(this.container);\n        }\n\n        this.animate();\n    }\n\n    calculateMagneticField(x, y, z) {\n        const r = Math.sqrt(x*x + y*y);\n        const phi = Math.atan2(y, x);\n        const rho = Math.sqrt((r - this.R)*(r - this.R) + z*z);\n        \n        if (rho < 0.01) return new THREE.Vector3(0, 0, 0);\n        \n        const cosTheta = (r - this.R)\/rho;\n        const sinTheta = z\/rho;\n        \n        const Br = this.mu0 * this.current * (this.a*this.a)\/(4 * Math.PI * rho*rho*rho) * cosTheta;\n        const Btheta = this.mu0 * this.current * (this.a*this.a)\/(4 * Math.PI * rho*rho*rho) * sinTheta;\n        const Bphi = this.mu0 * this.current * this.R\/(2 * Math.PI * r);\n        \n        const Bx = Br * Math.cos(phi) - Bphi * Math.sin(phi);\n        const By = Br * Math.sin(phi) + Bphi * Math.cos(phi);\n        const Bz = Btheta;\n        \n        return new THREE.Vector3(Bx, By, Bz);\n    }\n\n    setupScene() {\n        \/\/ Toroid with pole coloring\n        const torusGeometry = new THREE.TorusGeometry(this.R, this.a, 32, 100);\n        const torusMaterial = new THREE.MeshPhongMaterial({ vertexColors: true });\n        this.torus = new THREE.Mesh(torusGeometry, torusMaterial);\n        \n        \/\/ Color the poles\n        const colors = new Float32Array(torusGeometry.attributes.position.count * 3);\n        for (let i = 0; i < torusGeometry.attributes.position.count; i++) {\n            const theta = i \/ torusGeometry.attributes.position.count * Math.PI * 2;\n            \/\/ Red for North pole (top), Blue for South pole (bottom)\n            const r = theta < Math.PI ? 1.0 : 0.2;\n            const b = theta < Math.PI ? 0.2 : 1.0;\n            colors[i * 3] = r;\n            colors[i * 3 + 1] = 0.2;\n            colors[i * 3 + 2] = b;\n        }\n        torusGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\n        \n        this.scene.add(this.torus);\n\n        \/\/ Lighting\n        const ambientLight = new THREE.AmbientLight(0x404040);\n        this.scene.add(ambientLight);\n        const pointLight = new THREE.PointLight(0xffffff, 1);\n        pointLight.position.set(5, 5, 5);\n        this.scene.add(pointLight);\n    }\n\n    generateFieldLine(startPoint, polarity) {\n        const points = [startPoint.clone()];\n        const stepSize = 0.1;\n        const steps = 100;\n        \n        for (let i = 0; i < steps; i++) {\n            const lastPoint = points[points.length - 1];\n            const field = this.calculateMagneticField(lastPoint.x, lastPoint.y, lastPoint.z);\n            if (polarity < 0) field.multiplyScalar(-1);\n            \n            field.normalize();\n            const nextPoint = lastPoint.clone().add(field.multiplyScalar(stepSize));\n            points.push(nextPoint);\n            \n            if (nextPoint.length() > 3 || nextPoint.length() < 0.1) break;\n        }\n        \n        return points;\n    }\n\n    setupFieldLines() {\n        this.fieldLines = new THREE.Group();\n        const numLayers = 8;\n        const linesPerLayer = 16;\n        const sphereRadius = 1.5;\n\n        for (let layer = 0; layer < numLayers; layer++) {\n            const layerAngle = (layer + 1) * Math.PI \/ (numLayers + 1);\n            const layerRadius = Math.sin(layerAngle) * sphereRadius;\n            const layerHeight = Math.cos(layerAngle) * sphereRadius;\n            \n            for (let i = 0; i < linesPerLayer; i++) {\n                const angle = (i \/ linesPerLayer) * Math.PI * 2;\n                \n                const startPoint = new THREE.Vector3(\n                    layerRadius * Math.cos(angle),\n                    layerRadius * Math.sin(angle),\n                    layerHeight\n                );\n                \n                \/\/ Generate field lines with color gradients\n                const points = this.generateFieldLine(startPoint, 1);\n                const colors = new Float32Array(points.length * 3);\n                \n                for (let j = 0; j < points.length; j++) {\n                    const t = j \/ (points.length - 1);\n                    \/\/ Gradient from red to blue\n                    colors[j * 3] = 1 - t; \/\/ Red\n                    colors[j * 3 + 1] = 0.2; \/\/ Green\n                    colors[j * 3 + 2] = t; \/\/ Blue\n                }\n                \n                const geometry = new THREE.BufferGeometry().setFromPoints(points);\n                geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));\n                \n                const material = new THREE.LineBasicMaterial({\n                    vertexColors: true,\n                    transparent: true,\n                    opacity: 0.6\n                });\n                \n                const line = new THREE.Line(geometry, material);\n                this.fieldLines.add(line);\n            }\n        }\n        \n        this.scene.add(this.fieldLines);\n    }\n\n    setupElectrons() {\n        this.electronCount = 500;\n        this.electrons = Array(this.electronCount).fill().map(() => {\n            const phi = Math.random() * Math.PI * 2;\n            const theta = Math.acos(2 * Math.random() - 1);\n            const r = 1.5 + Math.random() * 0.5;\n            \n            return {\n                position: new THREE.Vector3(\n                    r * Math.sin(theta) * Math.cos(phi),\n                    r * Math.sin(theta) * Math.sin(phi),\n                    r * Math.cos(theta)\n                ),\n                velocity: new THREE.Vector3(\n                    (Math.random() - 0.5) * 0.1,\n                    (Math.random() - 0.5) * 0.1,\n                    (Math.random() - 0.5) * 0.1\n                ),\n                phase: Math.random() * Math.PI * 2\n            };\n        });\n\n        const geometry = new THREE.BufferGeometry();\n        const positions = new Float32Array(this.electronCount * 3);\n        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n\n        const material = new THREE.PointsMaterial({\n            color: 0x00ffff,\n            size: 0.02,\n            transparent: true,\n            opacity: 0.8,\n            blending: THREE.AdditiveBlending\n        });\n\n        this.electronSystem = new THREE.Points(geometry, material);\n        this.scene.add(this.electronSystem);\n    }\n\n    updateElectrons() {\n        const positions = this.electronSystem.geometry.attributes.position.array;\n        const dt = 0.016; \/\/ Time step\n\n        for (let i = 0; i < this.electronCount; i++) {\n            const electron = this.electrons[i];\n            const field = this.calculateMagneticField(\n                electron.position.x,\n                electron.position.y,\n                electron.position.z\n            );\n            \n            \/\/ Calculate Lorentz force: F = q(v \u00d7 B)\n            const force = new THREE.Vector3();\n            force.crossVectors(electron.velocity, field);\n            force.multiplyScalar(0.5); \/\/ Scale force effect\n            \n            \/\/ Update velocity (using simplified dynamics)\n            electron.velocity.add(force.multiplyScalar(dt));\n            electron.velocity.multiplyScalar(0.99); \/\/ Damping\n            \n            \/\/ Add spiral motion\n            electron.phase += 0.1;\n            const spiral = new THREE.Vector3(\n                Math.cos(electron.phase) * 0.05,\n                Math.sin(electron.phase) * 0.05,\n                0\n            );\n            \n            \/\/ Update position\n            electron.position.add(electron.velocity);\n            electron.position.add(spiral);\n            \n            \/\/ Reset if out of bounds\n            if (electron.position.length() > 3 || electron.position.length() < 0.1) {\n                const phi = Math.random() * Math.PI * 2;\n                const theta = Math.acos(2 * Math.random() - 1);\n                const r = 1.5 + Math.random() * 0.5;\n                \n                electron.position.set(\n                    r * Math.sin(theta) * Math.cos(phi),\n                    r * Math.sin(theta) * Math.sin(phi),\n                    r * Math.cos(theta)\n                );\n                electron.velocity.set(\n                    (Math.random() - 0.5) * 0.1,\n                    (Math.random() - 0.5) * 0.1,\n                    (Math.random() - 0.5) * 0.1\n                );\n            }\n\n            positions[i * 3] = electron.position.x;\n            positions[i * 3 + 1] = electron.position.y;\n            positions[i * 3 + 2] = electron.position.z;\n        }\n\n        this.electronSystem.geometry.attributes.position.needsUpdate = true;\n    }\n\n    onWindowResize() {\n        this.camera.aspect = this.container.clientWidth \/ this.container.clientHeight;\n        this.camera.updateProjectionMatrix();\n        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);\n    }\n\n    animate() {\n        requestAnimationFrame(() => this.animate());\n        \n        this.scene.rotation.y += 0.002;\n        this.updateElectrons();\n        \n        this.renderer.render(this.scene, this.camera);\n    }\n}\n\ndocument.addEventListener('DOMContentLoaded', function() {\n    if (document.getElementById('magnetic-field-container')) {\n        new MagneticFieldWidget('magnetic-field-container');\n    }\n});\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\">Let me explain this magnetic field visualization in detail. You&#8217;re looking at a three-dimensional simulation that shows how magnetic fields behave around a toroidal (donut-shaped) magnet, along with the motion of electrons within this field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The central donut-shaped object represents the toroidal magnet itself. The magnet has two poles: the red region represents the north pole, and the blue region represents the south pole. This color coding helps visualize the magnetic polarity of different parts of the magnet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Emanating from the magnet, you can see curved lines that gradually transition from red to blue. These are magnetic field lines, which represent the paths that a compass needle would align with if placed at any point in space around the magnet. The color gradient of these lines helps show the direction of the magnetic field &#8211; flowing from north (red) to south (blue). These field lines form elegant, curved patterns that demonstrate a fundamental principle of magnetism: magnetic field lines always form closed loops, never beginning or ending at a point.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The most dynamic elements in the visualization are the bright cyan dots, which represent electrons. Their motion illustrates how charged particles behave in a magnetic field. Unlike the simple attractive or repulsive forces you might expect, electrons in a magnetic field exhibit a fascinating behavior called helical motion. They spiral around the magnetic field lines due to the Lorentz force &#8211; a force that acts perpendicular to both the particle&#8217;s velocity and the magnetic field direction.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The electron motion you&#8217;re seeing combines several effects:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">A primary spiral motion around the field lines<\/li>\n\n\n\n<li class=\"\">A drift along the field lines<\/li>\n\n\n\n<li class=\"\">Some random thermal motion to simulate real-world conditions<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The entire visualization slowly rotates to help you perceive its three-dimensional structure. Everything is contained within a bounded region (though the boundary might not be visible) to keep the simulation focused on the most interesting region around the magnet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This type of magnetic field configuration is similar to what you might find in certain types of plasma containment devices or particle accelerators, though greatly simplified for visualization purposes. The toroidal geometry is particularly interesting because it creates a continuous path for particles to follow, which has practical applications in devices like tokamaks used in fusion research.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Electron Motion in Magnetic Field Let me explain this magnetic field visualization in detail. You&#8217;re looking at a three-dimensional simulation that shows how magnetic fields behave around a toroidal (donut-shaped) magnet, along with the motion of electrons within this field. The central donut-shaped object represents the toroidal magnet itself. The magnet has two poles: the<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","om_disable_all_campaigns":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1524","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate) - SparkOne() Labs Official Site<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate) - SparkOne() Labs Official Site\" \/>\n<meta property=\"og:description\" content=\"Electron Motion in Magnetic Field Let me explain this magnetic field visualization in detail. You&#8217;re looking at a three-dimensional simulation that shows how magnetic fields behave around a toroidal (donut-shaped) magnet, along with the motion of electrons within this field. The central donut-shaped object represents the toroidal magnet itself. The magnet has two poles: the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/\" \/>\n<meta property=\"og:site_name\" content=\"SparkOne() Labs Official Site\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61551444286908\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-12T04:18:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-12T04:57:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png?fit=1152%2C896&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1152\" \/>\n\t<meta property=\"og:image:height\" content=\"896\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@sparkonelabs\" \/>\n<meta name=\"twitter:site\" content=\"@sparkonelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/person\\\/ee3bd21f007818ac04abf178e749642c\"},\"headline\":\"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate)\",\"datePublished\":\"2024-12-12T04:18:29+00:00\",\"dateModified\":\"2024-12-12T04:57:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/\"},\"wordCount\":392,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/\",\"name\":\"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate) - SparkOne() Labs Official Site\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#website\"},\"datePublished\":\"2024-12-12T04:18:29+00:00\",\"dateModified\":\"2024-12-12T04:57:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/2024\\\/12\\\/12\\\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/\",\"name\":\"SparkOne() Labs Official Site\",\"description\":\"SparkOne Labs is a Science, Art and Technology blog. Email: sparkonelabs@sparkonelabs.com\",\"publisher\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#organization\"},\"alternateName\":\"SparkOne Labs\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#organization\",\"name\":\"SparkOne() Labs\",\"alternateName\":\"SparkOne Labs\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/logo_sparkone_12.png\",\"contentUrl\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/logo_sparkone_12.png\",\"width\":1152,\"height\":896,\"caption\":\"SparkOne() Labs\"},\"image\":{\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=61551444286908\",\"https:\\\/\\\/x.com\\\/sparkonelabs\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/#\\\/schema\\\/person\\\/ee3bd21f007818ac04abf178e749642c\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\\\/\\\/sparkonelabs.com\\\/home\"],\"url\":\"https:\\\/\\\/sparkonelabs.com\\\/home\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate) - SparkOne() Labs Official Site","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/","og_locale":"en_US","og_type":"article","og_title":"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate) - SparkOne() Labs Official Site","og_description":"Electron Motion in Magnetic Field Let me explain this magnetic field visualization in detail. You&#8217;re looking at a three-dimensional simulation that shows how magnetic fields behave around a toroidal (donut-shaped) magnet, along with the motion of electrons within this field. The central donut-shaped object represents the toroidal magnet itself. The magnet has two poles: the","og_url":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/","og_site_name":"SparkOne() Labs Official Site","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61551444286908","article_published_time":"2024-12-12T04:18:29+00:00","article_modified_time":"2024-12-12T04:57:39+00:00","og_image":[{"width":1152,"height":896,"url":"https:\/\/i0.wp.com\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png?fit=1152%2C896&ssl=1","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@sparkonelabs","twitter_site":"@sparkonelabs","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/#article","isPartOf":{"@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/"},"author":{"name":"admin","@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/person\/ee3bd21f007818ac04abf178e749642c"},"headline":"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate)","datePublished":"2024-12-12T04:18:29+00:00","dateModified":"2024-12-12T04:57:39+00:00","mainEntityOfPage":{"@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/"},"wordCount":392,"commentCount":0,"publisher":{"@id":"https:\/\/sparkonelabs.com\/home\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/","url":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/","name":"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate) - SparkOne() Labs Official Site","isPartOf":{"@id":"https:\/\/sparkonelabs.com\/home\/#website"},"datePublished":"2024-12-12T04:18:29+00:00","dateModified":"2024-12-12T04:57:39+00:00","breadcrumb":{"@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sparkonelabs.com\/home\/2024\/12\/12\/webgl-experiments-toroid-field-lines-and-electron-behavior-may-not-be-accurate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sparkonelabs.com\/home\/"},{"@type":"ListItem","position":2,"name":"WebGL Experiments: Toroid Field Lines and electron behavior (May not be accurate)"}]},{"@type":"WebSite","@id":"https:\/\/sparkonelabs.com\/home\/#website","url":"https:\/\/sparkonelabs.com\/home\/","name":"SparkOne() Labs Official Site","description":"SparkOne Labs is a Science, Art and Technology blog. Email: sparkonelabs@sparkonelabs.com","publisher":{"@id":"https:\/\/sparkonelabs.com\/home\/#organization"},"alternateName":"SparkOne Labs","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sparkonelabs.com\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sparkonelabs.com\/home\/#organization","name":"SparkOne() Labs","alternateName":"SparkOne Labs","url":"https:\/\/sparkonelabs.com\/home\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/logo\/image\/","url":"https:\/\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png","contentUrl":"https:\/\/sparkonelabs.com\/home\/wp-content\/uploads\/2024\/01\/logo_sparkone_12.png","width":1152,"height":896,"caption":"SparkOne() Labs"},"image":{"@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61551444286908","https:\/\/x.com\/sparkonelabs"]},{"@type":"Person","@id":"https:\/\/sparkonelabs.com\/home\/#\/schema\/person\/ee3bd21f007818ac04abf178e749642c","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bc8a8c84ca952e624e7407ec63589bc91e7996574dee7a01c13a96c536c341e9?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/sparkonelabs.com\/home"],"url":"https:\/\/sparkonelabs.com\/home\/author\/admin\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts\/1524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/comments?post=1524"}],"version-history":[{"count":5,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts\/1524\/revisions"}],"predecessor-version":[{"id":1536,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/posts\/1524\/revisions\/1536"}],"wp:attachment":[{"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/media?parent=1524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/categories?post=1524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sparkonelabs.com\/home\/wp-json\/wp\/v2\/tags?post=1524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}