Sfere 3D con Sfondo Animato<\/title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: black;\n }\n canvas {\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n<canvas id=\"canvas\"><\/canvas>\n\n<script>\n const canvas = document.getElementById(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n let width, height;\n function resizeCanvas() {\n width = window.innerWidth;\n height = window.innerHeight;\n canvas.width = width;\n canvas.height = height;\n }\n window.addEventListener(\"resize\", resizeCanvas);\n resizeCanvas();\n\n class Ball3D {\n constructor() {\n this.reset(true);\n }\n\n reset(initial = false) {\n this.x = Math.random() * width;\n this.y = initial ? Math.random() * height : -50;\n this.z = Math.random();\n this.radius = 20 + Math.random() * 30;\n this.vx = (Math.random() - 0.5) * 4;\n this.vy = Math.random() * -5;\n this.gravity = 0.6;\n this.bounce = 0.9;\n this.color = `hsl(${Math.random() * 360}, 90%, 60%)`;\n }\n\n get perspective() {\n return 1 \/ (this.z + 0.3);\n }\n\n get screenRadius() {\n return this.radius * this.perspective;\n }\n\n update() {\n const r = this.screenRadius;\n\n this.vy += this.gravity;\n this.x += this.vx;\n this.y += this.vy;\n\n if (this.x < r) {\n this.x = r;\n this.vx *= -1;\n }\n if (this.x > width - r) {\n this.x = width - r;\n this.vx *= -1;\n }\n\n if (this.y > height - r) {\n this.y = height - r;\n this.vy *= -this.bounce;\n if (Math.abs(this.vy) < 1.2) {\n this.reset();\n }\n }\n\n if (this.y < r) {\n this.y = r;\n this.vy *= -this.bounce;\n }\n }\n\n draw(ctx) {\n const p = this.perspective;\n const r = this.screenRadius;\n const x = this.x;\n const y = this.y;\n\n \/\/ Ombra sul pavimento\n ctx.beginPath();\n const shadowY = height - 10;\n const shadowScale = Math.max(0.2, (1 - this.z)) * 0.5;\n ctx.ellipse(\n x,\n shadowY,\n r * 1.1,\n r * 0.4 * shadowScale,\n 0,\n 0,\n Math.PI * 2\n );\n ctx.fillStyle = \"rgba(0, 0, 0, 0.15)\";\n ctx.fill();\n\n \/\/ Gradiente corpo sfera\n const gradient = ctx.createRadialGradient(\n x - r * 0.4,\n y - r * 0.4,\n r * 0.2,\n x,\n y,\n r\n );\n gradient.addColorStop(0, \"white\");\n gradient.addColorStop(0.3, this.color);\n gradient.addColorStop(1, \"black\");\n\n ctx.beginPath();\n ctx.arc(x, y, r, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.shadowColor = \"rgba(0,0,0,0.25)\";\n ctx.shadowBlur = r * 0.4;\n ctx.fill();\n ctx.shadowBlur = 0;\n\n \/\/ Highlight lucido\n ctx.beginPath();\n ctx.arc(x - r * 0.3, y - r * 0.3, r * 0.1, 0, Math.PI * 2);\n ctx.fillStyle = \"rgba(255,255,255,0.6)\";\n ctx.fill();\n }\n }\n\n const balls = [];\n const ballCount = 30;\n\n for (let i = 0; i < ballCount; i++) {\n balls.push(new Ball3D());\n }\n\n let time = 0;\n\n function drawAnimatedBackground() {\n \/\/ Cambia HSL nel tempo per un gradiente dinamico\n const hue1 = (time * 20) % 360;\n const hue2 = (hue1 + 120) % 360;\n const hue3 = (hue1 + 240) % 360;\n\n const gradient = ctx.createLinearGradient(0, 0, width, height);\n gradient.addColorStop(0, `hsl(${hue1}, 80%, 80%)`);\n gradient.addColorStop(0.5, `hsl(${hue2}, 80%, 80%)`);\n gradient.addColorStop(1, `hsl(${hue3}, 80%, 80%)`);\n\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n function animate() {\n drawAnimatedBackground();\n\n \/\/ Ordinamento in profondit\u00e0\n balls.sort((a, b) => b.z - a.z);\n\n balls.forEach(ball => {\n ball.update();\n ball.draw(ctx);\n });\n\n time += 0.005;\n requestAnimationFrame(animate);\n }\n\n animate();\n<\/script>\n<\/body>\n<\/html>\n\n<\/details>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-215","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":44,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":4769,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages\/215\/revisions\/4769"}],"wp:attachment":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/media?parent=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":215,"date":"2025-05-08T01:03:15","date_gmt":"2025-05-08T02:03:15","guid":{"rendered":"https:\/\/incanto.mine.nu\/?page_id=215"},"modified":"2025-10-03T09:56:25","modified_gmt":"2025-10-03T08:56:25","slug":"multimediale","status":"publish","type":"page","link":"https:\/\/incanto.mine.nu\/index.php\/multimediale\/","title":{"rendered":"Multimedia"},"content":{"rendered":"\n

<\/summary>\n\n\n\n \n Sfere 3D con Sfondo Animato<\/title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: black;\n }\n canvas {\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n<canvas id=\"canvas\"><\/canvas>\n\n<script>\n const canvas = document.getElementById(\"canvas\");\n const ctx = canvas.getContext(\"2d\");\n\n let width, height;\n function resizeCanvas() {\n width = window.innerWidth;\n height = window.innerHeight;\n canvas.width = width;\n canvas.height = height;\n }\n window.addEventListener(\"resize\", resizeCanvas);\n resizeCanvas();\n\n class Ball3D {\n constructor() {\n this.reset(true);\n }\n\n reset(initial = false) {\n this.x = Math.random() * width;\n this.y = initial ? Math.random() * height : -50;\n this.z = Math.random();\n this.radius = 20 + Math.random() * 30;\n this.vx = (Math.random() - 0.5) * 4;\n this.vy = Math.random() * -5;\n this.gravity = 0.6;\n this.bounce = 0.9;\n this.color = `hsl(${Math.random() * 360}, 90%, 60%)`;\n }\n\n get perspective() {\n return 1 \/ (this.z + 0.3);\n }\n\n get screenRadius() {\n return this.radius * this.perspective;\n }\n\n update() {\n const r = this.screenRadius;\n\n this.vy += this.gravity;\n this.x += this.vx;\n this.y += this.vy;\n\n if (this.x < r) {\n this.x = r;\n this.vx *= -1;\n }\n if (this.x > width - r) {\n this.x = width - r;\n this.vx *= -1;\n }\n\n if (this.y > height - r) {\n this.y = height - r;\n this.vy *= -this.bounce;\n if (Math.abs(this.vy) < 1.2) {\n this.reset();\n }\n }\n\n if (this.y < r) {\n this.y = r;\n this.vy *= -this.bounce;\n }\n }\n\n draw(ctx) {\n const p = this.perspective;\n const r = this.screenRadius;\n const x = this.x;\n const y = this.y;\n\n \/\/ Ombra sul pavimento\n ctx.beginPath();\n const shadowY = height - 10;\n const shadowScale = Math.max(0.2, (1 - this.z)) * 0.5;\n ctx.ellipse(\n x,\n shadowY,\n r * 1.1,\n r * 0.4 * shadowScale,\n 0,\n 0,\n Math.PI * 2\n );\n ctx.fillStyle = \"rgba(0, 0, 0, 0.15)\";\n ctx.fill();\n\n \/\/ Gradiente corpo sfera\n const gradient = ctx.createRadialGradient(\n x - r * 0.4,\n y - r * 0.4,\n r * 0.2,\n x,\n y,\n r\n );\n gradient.addColorStop(0, \"white\");\n gradient.addColorStop(0.3, this.color);\n gradient.addColorStop(1, \"black\");\n\n ctx.beginPath();\n ctx.arc(x, y, r, 0, Math.PI * 2);\n ctx.fillStyle = gradient;\n ctx.shadowColor = \"rgba(0,0,0,0.25)\";\n ctx.shadowBlur = r * 0.4;\n ctx.fill();\n ctx.shadowBlur = 0;\n\n \/\/ Highlight lucido\n ctx.beginPath();\n ctx.arc(x - r * 0.3, y - r * 0.3, r * 0.1, 0, Math.PI * 2);\n ctx.fillStyle = \"rgba(255,255,255,0.6)\";\n ctx.fill();\n }\n }\n\n const balls = [];\n const ballCount = 30;\n\n for (let i = 0; i < ballCount; i++) {\n balls.push(new Ball3D());\n }\n\n let time = 0;\n\n function drawAnimatedBackground() {\n \/\/ Cambia HSL nel tempo per un gradiente dinamico\n const hue1 = (time * 20) % 360;\n const hue2 = (hue1 + 120) % 360;\n const hue3 = (hue1 + 240) % 360;\n\n const gradient = ctx.createLinearGradient(0, 0, width, height);\n gradient.addColorStop(0, `hsl(${hue1}, 80%, 80%)`);\n gradient.addColorStop(0.5, `hsl(${hue2}, 80%, 80%)`);\n gradient.addColorStop(1, `hsl(${hue3}, 80%, 80%)`);\n\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, width, height);\n }\n\n function animate() {\n drawAnimatedBackground();\n\n \/\/ Ordinamento in profondit\u00e0\n balls.sort((a, b) => b.z - a.z);\n\n balls.forEach(ball => {\n ball.update();\n ball.draw(ctx);\n });\n\n time += 0.005;\n requestAnimationFrame(animate);\n }\n\n animate();\n<\/script>\n<\/body>\n<\/html>\n\n<\/details>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-215","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":44,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages\/215\/revisions"}],"predecessor-version":[{"id":4769,"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/pages\/215\/revisions\/4769"}],"wp:attachment":[{"href":"https:\/\/incanto.mine.nu\/index.php\/wp-json\/wp\/v2\/media?parent=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}