Japanese Cherry Blossom Scene<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+JP:wght@400;600;700&family=Playfair+Display:ital,wght@1,600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n height: 100dvh;\r\n overflow: hidden;\r\n background-color: #fbf9f5;\r\n font-family: \"Noto Serif JP\", \"Yu Mincho\", serif;\r\n user-select: none;\r\n }\r\n\r\n \/* Traditional Haiku *\/\r\n .haiku {\r\n position: absolute;\r\n top: 6vh;\r\n left: 60px;\r\n writing-mode: vertical-rl;\r\n text-orientation: upright;\r\n font-size: 28px;\r\n line-height: 2.2;\r\n letter-spacing: 0.15em;\r\n color: #1a1a1a;\r\n filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));\r\n z-index: 2;\r\n }\r\n\r\n \/* Silhouettes *\/\r\n .person-container {\r\n position: absolute;\r\n right: 45%;\r\n bottom: 0;\r\n height: 50vh;\r\n aspect-ratio: 1 \/ 1;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n\r\n .person {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n }\r\n\r\n \/* Arrow Name Tags anchored to the quiver tips *\/\r\n .arrow-name {\r\n position: absolute;\r\n font-family: 'Playfair Display', \"Noto Serif JP\", serif;\r\n font-style: italic;\r\n font-weight: 600;\r\n font-size: clamp(12px, 1.4vh, 17px);\r\n letter-spacing: 0.08em;\r\n color: #2b1f1d;\r\n background: rgba(255, 255, 255, 0.82);\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n border: 1px solid rgba(214, 97, 97, 0.4);\r\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Upper Right Arrow *\/\r\n .name-archana {\r\n top: 14%;\r\n right: 14%;\r\n transform: rotate(-15deg);\r\n }\r\n\r\n \/* Center Arrow *\/\r\n .name-arpita {\r\n top: 18%;\r\n right: 43%;\r\n transform: rotate(-35deg);\r\n }\r\n\r\n \/* Lower Left Arrow *\/\r\n .name-smruti {\r\n top: 48%;\r\n right: 48%;\r\n transform: rotate(-55deg);\r\n }\r\n\r\n .block {\r\n height: 100%;\r\n position: absolute;\r\n width: 50%;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: flex-end;\r\n pointer-events: none;\r\n }\r\n\r\n .roof {\r\n display: block;\r\n align-self: flex-start;\r\n height: 60vh;\r\n width: auto;\r\n object-fit: contain;\r\n }\r\n\r\n .girl {\r\n position: absolute;\r\n left: 30%;\r\n display: block;\r\n height: 70vh;\r\n width: auto;\r\n object-fit: contain;\r\n margin-right: 20px;\r\n }\r\n\r\n #scene {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"haiku\" lang=\"ja\">\r\n \u82b1\u306f\u6563\u308a<br>\r\n \u540d\u3092\u899a\u3048\u3066\u3044\u308b<br>\r\n \u98a8\u3070\u304b\u308a\r\n <\/div>\r\n\r\n \r\n <div class=\"person-container\">\r\n <img decoding=\"async\" class=\"person\" src=\"https:\/\/raw.githubusercontent.com\/BlackStar1991\/Pictures-for-sharing-\/master\/Japan\/person.png\" alt=\"man\">\r\n <div class=\"arrow-name name-archana\">Archana<\/div>\r\n <div class=\"arrow-name name-arpita\">Arpita<\/div>\r\n <div class=\"arrow-name name-smruti\">Smruti<\/div>\r\n <\/div>\r\n\r\n <div class=\"block\">\r\n <img decoding=\"async\" class=\"girl\" src=\"https:\/\/raw.githubusercontent.com\/BlackStar1991\/Pictures-for-sharing-\/master\/Japan\/girl.png\" alt=\"girl\">\r\n <img decoding=\"async\" class=\"roof\" src=\"https:\/\/raw.githubusercontent.com\/BlackStar1991\/Pictures-for-sharing-\/master\/Japan\/bg.png\" alt=\"roof\">\r\n <\/div>\r\n\r\n <canvas id=\"scene\"><\/canvas>\r\n\r\n <script>\r\n const canvas = document.getElementById(\"scene\");\r\n const ctx = canvas.getContext(\"2d\");\r\n\r\n let width = 0;\r\n let height = 0;\r\n let particles = [];\r\n\r\n const settings = {\r\n bgColor: \"#fbf9f5\",\r\n minWind: 1.5,\r\n maxWind: 7,\r\n minSize: 14,\r\n maxSize: 34,\r\n emitterY: 0.15,\r\n emitterSpread: 0.85,\r\n gravity: 0.45,\r\n turbulence: 0.8,\r\n rotationSpeed: 0.03,\r\n tumbleStrength: 0.4,\r\n staticTilt: 0,\r\n particleCount: 140,\r\n direction: -1\r\n };\r\n\r\n const cache = {\r\n minSize: 0,\r\n maxSize: 0,\r\n minWind: 0,\r\n maxWind: 0,\r\n tiltRad: 0\r\n };\r\n\r\n function updateCache() {\r\n cache.minSize = Math.min(settings.minSize, settings.maxSize);\r\n cache.maxSize = Math.max(settings.minSize, settings.maxSize);\r\n cache.minWind = Math.min(settings.minWind, settings.maxWind);\r\n cache.maxWind = Math.max(settings.minWind, settings.maxWind);\r\n cache.tiltRad = (settings.staticTilt * Math.PI) \/ 180;\r\n }\r\n\r\n function createPetalImage() {\r\n const tempCanvas = document.createElement(\"canvas\");\r\n tempCanvas.width = 64;\r\n tempCanvas.height = 64;\r\n const tCtx = tempCanvas.getContext(\"2d\");\r\n\r\n tCtx.translate(32, 32);\r\n tCtx.beginPath();\r\n tCtx.moveTo(0, -26);\r\n tCtx.bezierCurveTo(18, -20, 24, 8, 0, 26);\r\n tCtx.bezierCurveTo(-24, 8, -18, -20, 0, -26);\r\n tCtx.closePath();\r\n\r\n const grad = tCtx.createLinearGradient(0, -26, 0, 26);\r\n grad.addColorStop(0, \"#f8d7da\");\r\n grad.addColorStop(0.5, \"#e58e99\");\r\n grad.addColorStop(1, \"#c94b59\");\r\n\r\n tCtx.fillStyle = grad;\r\n tCtx.fill();\r\n\r\n const img = new Image();\r\n img.src = tempCanvas.toDataURL();\r\n return img;\r\n }\r\n\r\n const particleImage = createPetalImage();\r\n\r\n function rotateVector(x, y, z, ax, ay, az) {\r\n let cos = Math.cos(az);\r\n let sin = Math.sin(az);\r\n let x1 = x * cos - y * sin;\r\n let y1 = x * sin + y * cos;\r\n let z1 = z;\r\n\r\n cos = Math.cos(ay);\r\n sin = Math.sin(ay);\r\n let x2 = x1 * cos + z1 * sin;\r\n let y2 = y1;\r\n let z2 = -x1 * sin + z1 * cos;\r\n\r\n cos = Math.cos(ax);\r\n sin = Math.sin(ax);\r\n return {\r\n x: x2,\r\n y: y2 * cos - z2 * sin,\r\n z: y2 * sin + z2 * cos\r\n };\r\n }\r\n\r\n class Particle {\r\n constructor(initOnScreen = false) {\r\n this.reset(initOnScreen);\r\n }\r\n\r\n reset(initOnScreen = false) {\r\n this.image = particleImage;\r\n this.width = cache.minSize + Math.random() * (cache.maxSize - cache.minSize);\r\n this.height = this.width;\r\n\r\n const centerY = height * settings.emitterY;\r\n const spreadHeight = height * settings.emitterSpread;\r\n this.y = (centerY - spreadHeight \/ 2) + Math.random() * spreadHeight;\r\n\r\n if (initOnScreen) {\r\n this.x = Math.random() * width;\r\n } else {\r\n this.x = settings.direction === -1\r\n ? width + this.width + Math.random() * (width * 0.5)\r\n : -this.width - Math.random() * (width * 0.5);\r\n }\r\n\r\n const sizeFactor = (this.width - cache.minSize) \/ (cache.maxSize - cache.minSize || 1);\r\n this.windFactor = Math.max(0.1, Math.min(1, 1 - (sizeFactor * 0.5 + Math.random() * 0.5)));\r\n\r\n this.vx = 0;\r\n this.vy = 0;\r\n this.waveOffset = Math.random() * Math.PI * 2;\r\n this.angleZ = Math.random() * Math.PI * 2;\r\n this.spinZ = (Math.random() - 0.5) * settings.rotationSpeed;\r\n\r\n this.angleX = 0;\r\n this.angleY = 0;\r\n this.spinX = (Math.random() - 0.5) * 0.08;\r\n this.spinY = (Math.random() - 0.5) * 0.08;\r\n }\r\n\r\n update() {\r\n const targetSpeed = cache.minWind + (cache.maxWind - cache.minWind) * this.windFactor;\r\n this.vx += (targetSpeed - this.vx) * 0.08;\r\n this.x += this.vx * settings.direction;\r\n\r\n const gravityMod = 1.4 - this.windFactor;\r\n this.vy += settings.gravity * 0.04 * gravityMod;\r\n\r\n const wave = Math.sin(this.x * 0.008 * settings.direction + this.waveOffset);\r\n this.vy += wave * settings.turbulence * 0.04;\r\n this.vy *= 0.98;\r\n this.y += this.vy;\r\n\r\n this.angleZ += this.spinZ + this.vx * 0.0015;\r\n\r\n if (settings.tumbleStrength > 0) {\r\n this.angleX += this.spinX * settings.tumbleStrength;\r\n this.angleY += this.spinY * settings.tumbleStrength;\r\n }\r\n\r\n const buffer = 150;\r\n const outByX = settings.direction === -1 ? this.x < -buffer : this.x > width + buffer;\r\n\r\n if (outByX || this.y > height + buffer || this.y < -buffer) {\r\n this.reset(false);\r\n }\r\n }\r\n\r\n draw() {\r\n const vecU = rotateVector(1, 0, 0, this.angleX, this.angleY + cache.tiltRad, this.angleZ);\r\n const vecV = rotateVector(0, 1, 0, this.angleX, this.angleY + cache.tiltRad, this.angleZ);\r\n\r\n ctx.save();\r\n ctx.translate(this.x, this.y);\r\n ctx.transform(vecU.x, vecU.y, vecV.x, vecV.y, 0, 0);\r\n ctx.drawImage(this.image, -this.width \/ 2, -this.height \/ 2, this.width, this.height);\r\n ctx.restore();\r\n }\r\n }\r\n\r\n function resize() {\r\n width = canvas.width = window.innerWidth;\r\n height = canvas.height = window.innerHeight;\r\n ctx.imageSmoothingEnabled = true;\r\n ctx.imageSmoothingQuality = \"high\";\r\n }\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < settings.particleCount; i++) {\r\n const p = new Particle(true);\r\n particles.push(p);\r\n }\r\n }\r\n\r\n function animate() {\r\n ctx.fillStyle = settings.bgColor;\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n for (let i = 0; i < particles.length; i++) {\r\n particles[i].update();\r\n particles[i].draw();\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n function start() {\r\n updateCache();\r\n resize();\r\n initParticles();\r\n animate();\r\n window.addEventListener(\"resize\", resize);\r\n }\r\n\r\n start();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Japanese Cherry Blossom Scene \u82b1\u306f\u6563\u308a \u540d\u3092\u899a\u3048\u3066\u3044\u308b \u98a8\u3070\u304b\u308a Archana Arpita Smruti<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":7,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages\/45\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Japanese Cherry Blossom Scene<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+JP:wght@400;600;700&family=Playfair+Display:ital,wght@1,600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n margin: 0;\r\n padding: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n height: 100dvh;\r\n overflow: hidden;\r\n background-color: #fbf9f5;\r\n font-family: \"Noto Serif JP\", \"Yu Mincho\", serif;\r\n user-select: none;\r\n }\r\n\r\n \/* Traditional Haiku *\/\r\n .haiku {\r\n position: absolute;\r\n top: 6vh;\r\n left: 60px;\r\n writing-mode: vertical-rl;\r\n text-orientation: upright;\r\n font-size: 28px;\r\n line-height: 2.2;\r\n letter-spacing: 0.15em;\r\n color: #1a1a1a;\r\n filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));\r\n z-index: 2;\r\n }\r\n\r\n \/* Silhouettes *\/\r\n .person-container {\r\n position: absolute;\r\n right: 45%;\r\n bottom: 0;\r\n height: 50vh;\r\n aspect-ratio: 1 \/ 1;\r\n z-index: 2;\r\n pointer-events: none;\r\n }\r\n\r\n .person {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n }\r\n\r\n \/* Arrow Name Tags anchored to the quiver tips *\/\r\n .arrow-name {\r\n position: absolute;\r\n font-family: 'Playfair Display', \"Noto Serif JP\", serif;\r\n font-style: italic;\r\n font-weight: 600;\r\n font-size: clamp(12px, 1.4vh, 17px);\r\n letter-spacing: 0.08em;\r\n color: #2b1f1d;\r\n background: rgba(255, 255, 255, 0.82);\r\n padding: 2px 8px;\r\n border-radius: 4px;\r\n border: 1px solid rgba(214, 97, 97, 0.4);\r\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);\r\n white-space: nowrap;\r\n pointer-events: auto;\r\n transform-origin: center center;\r\n }\r\n\r\n \/* Upper Right Arrow *\/\r\n .name-archana {\r\n top: 14%;\r\n right: 14%;\r\n transform: rotate(-15deg);\r\n }\r\n\r\n \/* Center Arrow *\/\r\n .name-arpita {\r\n top: 18%;\r\n right: 43%;\r\n transform: rotate(-35deg);\r\n }\r\n\r\n \/* Lower Left Arrow *\/\r\n .name-smruti {\r\n top: 48%;\r\n right: 48%;\r\n transform: rotate(-55deg);\r\n }\r\n\r\n .block {\r\n height: 100%;\r\n position: absolute;\r\n width: 50%;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-end;\r\n align-items: flex-end;\r\n pointer-events: none;\r\n }\r\n\r\n .roof {\r\n display: block;\r\n align-self: flex-start;\r\n height: 60vh;\r\n width: auto;\r\n object-fit: contain;\r\n }\r\n\r\n .girl {\r\n position: absolute;\r\n left: 30%;\r\n display: block;\r\n height: 70vh;\r\n width: auto;\r\n object-fit: contain;\r\n margin-right: 20px;\r\n }\r\n\r\n #scene {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"haiku\" lang=\"ja\">\r\n \u82b1\u306f\u6563\u308a<br>\r\n \u540d\u3092\u899a\u3048\u3066\u3044\u308b<br>\r\n \u98a8\u3070\u304b\u308a\r\n <\/div>\r\n\r\n \r\n <div class=\"person-container\">\r\n <img decoding=\"async\" class=\"person\" src=\"https:\/\/raw.githubusercontent.com\/BlackStar1991\/Pictures-for-sharing-\/master\/Japan\/person.png\" alt=\"man\">\r\n <div class=\"arrow-name name-archana\">Archana<\/div>\r\n <div class=\"arrow-name name-arpita\">Arpita<\/div>\r\n <div class=\"arrow-name name-smruti\">Smruti<\/div>\r\n <\/div>\r\n\r\n <div class=\"block\">\r\n <img decoding=\"async\" class=\"girl\" src=\"https:\/\/raw.githubusercontent.com\/BlackStar1991\/Pictures-for-sharing-\/master\/Japan\/girl.png\" alt=\"girl\">\r\n <img decoding=\"async\" class=\"roof\" src=\"https:\/\/raw.githubusercontent.com\/BlackStar1991\/Pictures-for-sharing-\/master\/Japan\/bg.png\" alt=\"roof\">\r\n <\/div>\r\n\r\n <canvas id=\"scene\"><\/canvas>\r\n\r\n <script>\r\n const canvas = document.getElementById(\"scene\");\r\n const ctx = canvas.getContext(\"2d\");\r\n\r\n let width = 0;\r\n let height = 0;\r\n let particles = [];\r\n\r\n const settings = {\r\n bgColor: \"#fbf9f5\",\r\n minWind: 1.5,\r\n maxWind: 7,\r\n minSize: 14,\r\n maxSize: 34,\r\n emitterY: 0.15,\r\n emitterSpread: 0.85,\r\n gravity: 0.45,\r\n turbulence: 0.8,\r\n rotationSpeed: 0.03,\r\n tumbleStrength: 0.4,\r\n staticTilt: 0,\r\n particleCount: 140,\r\n direction: -1\r\n };\r\n\r\n const cache = {\r\n minSize: 0,\r\n maxSize: 0,\r\n minWind: 0,\r\n maxWind: 0,\r\n tiltRad: 0\r\n };\r\n\r\n function updateCache() {\r\n cache.minSize = Math.min(settings.minSize, settings.maxSize);\r\n cache.maxSize = Math.max(settings.minSize, settings.maxSize);\r\n cache.minWind = Math.min(settings.minWind, settings.maxWind);\r\n cache.maxWind = Math.max(settings.minWind, settings.maxWind);\r\n cache.tiltRad = (settings.staticTilt * Math.PI) \/ 180;\r\n }\r\n\r\n function createPetalImage() {\r\n const tempCanvas = document.createElement(\"canvas\");\r\n tempCanvas.width = 64;\r\n tempCanvas.height = 64;\r\n const tCtx = tempCanvas.getContext(\"2d\");\r\n\r\n tCtx.translate(32, 32);\r\n tCtx.beginPath();\r\n tCtx.moveTo(0, -26);\r\n tCtx.bezierCurveTo(18, -20, 24, 8, 0, 26);\r\n tCtx.bezierCurveTo(-24, 8, -18, -20, 0, -26);\r\n tCtx.closePath();\r\n\r\n const grad = tCtx.createLinearGradient(0, -26, 0, 26);\r\n grad.addColorStop(0, \"#f8d7da\");\r\n grad.addColorStop(0.5, \"#e58e99\");\r\n grad.addColorStop(1, \"#c94b59\");\r\n\r\n tCtx.fillStyle = grad;\r\n tCtx.fill();\r\n\r\n const img = new Image();\r\n img.src = tempCanvas.toDataURL();\r\n return img;\r\n }\r\n\r\n const particleImage = createPetalImage();\r\n\r\n function rotateVector(x, y, z, ax, ay, az) {\r\n let cos = Math.cos(az);\r\n let sin = Math.sin(az);\r\n let x1 = x * cos - y * sin;\r\n let y1 = x * sin + y * cos;\r\n let z1 = z;\r\n\r\n cos = Math.cos(ay);\r\n sin = Math.sin(ay);\r\n let x2 = x1 * cos + z1 * sin;\r\n let y2 = y1;\r\n let z2 = -x1 * sin + z1 * cos;\r\n\r\n cos = Math.cos(ax);\r\n sin = Math.sin(ax);\r\n return {\r\n x: x2,\r\n y: y2 * cos - z2 * sin,\r\n z: y2 * sin + z2 * cos\r\n };\r\n }\r\n\r\n class Particle {\r\n constructor(initOnScreen = false) {\r\n this.reset(initOnScreen);\r\n }\r\n\r\n reset(initOnScreen = false) {\r\n this.image = particleImage;\r\n this.width = cache.minSize + Math.random() * (cache.maxSize - cache.minSize);\r\n this.height = this.width;\r\n\r\n const centerY = height * settings.emitterY;\r\n const spreadHeight = height * settings.emitterSpread;\r\n this.y = (centerY - spreadHeight \/ 2) + Math.random() * spreadHeight;\r\n\r\n if (initOnScreen) {\r\n this.x = Math.random() * width;\r\n } else {\r\n this.x = settings.direction === -1\r\n ? width + this.width + Math.random() * (width * 0.5)\r\n : -this.width - Math.random() * (width * 0.5);\r\n }\r\n\r\n const sizeFactor = (this.width - cache.minSize) \/ (cache.maxSize - cache.minSize || 1);\r\n this.windFactor = Math.max(0.1, Math.min(1, 1 - (sizeFactor * 0.5 + Math.random() * 0.5)));\r\n\r\n this.vx = 0;\r\n this.vy = 0;\r\n this.waveOffset = Math.random() * Math.PI * 2;\r\n this.angleZ = Math.random() * Math.PI * 2;\r\n this.spinZ = (Math.random() - 0.5) * settings.rotationSpeed;\r\n\r\n this.angleX = 0;\r\n this.angleY = 0;\r\n this.spinX = (Math.random() - 0.5) * 0.08;\r\n this.spinY = (Math.random() - 0.5) * 0.08;\r\n }\r\n\r\n update() {\r\n const targetSpeed = cache.minWind + (cache.maxWind - cache.minWind) * this.windFactor;\r\n this.vx += (targetSpeed - this.vx) * 0.08;\r\n this.x += this.vx * settings.direction;\r\n\r\n const gravityMod = 1.4 - this.windFactor;\r\n this.vy += settings.gravity * 0.04 * gravityMod;\r\n\r\n const wave = Math.sin(this.x * 0.008 * settings.direction + this.waveOffset);\r\n this.vy += wave * settings.turbulence * 0.04;\r\n this.vy *= 0.98;\r\n this.y += this.vy;\r\n\r\n this.angleZ += this.spinZ + this.vx * 0.0015;\r\n\r\n if (settings.tumbleStrength > 0) {\r\n this.angleX += this.spinX * settings.tumbleStrength;\r\n this.angleY += this.spinY * settings.tumbleStrength;\r\n }\r\n\r\n const buffer = 150;\r\n const outByX = settings.direction === -1 ? this.x < -buffer : this.x > width + buffer;\r\n\r\n if (outByX || this.y > height + buffer || this.y < -buffer) {\r\n this.reset(false);\r\n }\r\n }\r\n\r\n draw() {\r\n const vecU = rotateVector(1, 0, 0, this.angleX, this.angleY + cache.tiltRad, this.angleZ);\r\n const vecV = rotateVector(0, 1, 0, this.angleX, this.angleY + cache.tiltRad, this.angleZ);\r\n\r\n ctx.save();\r\n ctx.translate(this.x, this.y);\r\n ctx.transform(vecU.x, vecU.y, vecV.x, vecV.y, 0, 0);\r\n ctx.drawImage(this.image, -this.width \/ 2, -this.height \/ 2, this.width, this.height);\r\n ctx.restore();\r\n }\r\n }\r\n\r\n function resize() {\r\n width = canvas.width = window.innerWidth;\r\n height = canvas.height = window.innerHeight;\r\n ctx.imageSmoothingEnabled = true;\r\n ctx.imageSmoothingQuality = \"high\";\r\n }\r\n\r\n function initParticles() {\r\n particles = [];\r\n for (let i = 0; i < settings.particleCount; i++) {\r\n const p = new Particle(true);\r\n particles.push(p);\r\n }\r\n }\r\n\r\n function animate() {\r\n ctx.fillStyle = settings.bgColor;\r\n ctx.fillRect(0, 0, width, height);\r\n\r\n for (let i = 0; i < particles.length; i++) {\r\n particles[i].update();\r\n particles[i].draw();\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n function start() {\r\n updateCache();\r\n resize();\r\n initParticles();\r\n animate();\r\n window.addEventListener(\"resize\", resize);\r\n }\r\n\r\n start();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Japanese Cherry Blossom Scene \u82b1\u306f\u6563\u308a \u540d\u3092\u899a\u3048\u3066\u3044\u308b \u98a8\u3070\u304b\u308a Archana Arpita Smruti<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-45","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/comments?post=45"}],"version-history":[{"count":7,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages\/45\/revisions"}],"predecessor-version":[{"id":52,"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/pages\/45\/revisions\/52"}],"wp:attachment":[{"href":"https:\/\/subhasissahoo.com\/index.php\/wp-json\/wp\/v2\/media?parent=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}