{"id":247,"date":"2026-04-13T00:49:03","date_gmt":"2026-04-13T00:49:03","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=247"},"modified":"2026-04-13T00:54:03","modified_gmt":"2026-04-13T00:54:03","slug":"sine-cos-perforation","status":"publish","type":"page","link":"https:\/\/metaartron.com\/?page_id=247","title":{"rendered":"sine cos perforation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"247\" class=\"elementor elementor-247\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5c9b1d2 e-flex e-con-boxed e-con e-parent\" data-id=\"5c9b1d2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99a07f5 elementor-widget elementor-widget-html\" data-id=\"99a07f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- META ARTRON SIGNATURE BACKGROUND -->\r\n\r\n<canvas id=\"meta-bg\"><\/canvas>\r\n\r\n<style>\r\n#meta-bg{\r\n  position: fixed;\r\n  top:0;\r\n  left:0;\r\n  width:100%;\r\n  height:100%;\r\n  z-index:-1;\r\n  pointer-events:none;\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r134\/three.min.js\"><\/script>\r\n\r\n<script>\r\n(function(){\r\n\r\n\/\/ SCENE\r\nconst scene = new THREE.Scene();\r\n\r\nconst camera = new THREE.PerspectiveCamera(\r\n  55,\r\n  window.innerWidth\/window.innerHeight,\r\n  0.1,\r\n  1000\r\n);\r\n\r\n\/\/ \ud83d\udd34 CAMERA (FRAGMENT VIEW)\r\ncamera.position.z = 3.8;\r\n\r\nconst renderer = new THREE.WebGLRenderer({\r\n  canvas: document.getElementById(\"meta-bg\"),\r\n  alpha: true,\r\n  antialias: true\r\n});\r\n\r\nrenderer.setSize(window.innerWidth, window.innerHeight);\r\nrenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n\r\n\/\/ GEOMETRY (HIGH DENSITY = SMOOTH FORM)\r\nconst geometry = new THREE.PlaneGeometry(10, 10, 300, 300);\r\n\r\n\/\/ UNIFORMS\r\nconst uniforms = {\r\n  time: { value: 0 },\r\n  mouse: { value: new THREE.Vector2(0,0) }\r\n};\r\n\r\n\/\/ \ud83d\udd34 SHADER (PARAMETRIC + CUT SURFACE)\r\nconst material = new THREE.ShaderMaterial({\r\n  uniforms: uniforms,\r\n  transparent: true,\r\n  side: THREE.DoubleSide,\r\n\r\n  vertexShader: `\r\n    uniform float time;\r\n    uniform vec2 mouse;\r\n\r\n    varying float vElevation;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      vUv = uv;\r\n      vec3 pos = position;\r\n\r\n      vec2 p = pos.xy;\r\n\r\n      \/\/ \ud83d\udd34 PRIMARY FLOW (ARCHITECTURAL WAVE)\r\n      float wave1 = sin(p.x * 1.2 + time * 1.5);\r\n      float wave2 = cos(p.y * 1.0 + time * 1.3);\r\n\r\n      \/\/ \ud83d\udd34 SECONDARY DETAIL (FACET LOGIC)\r\n      float wave3 = sin((p.x + p.y) * 0.6 + time * 0.8);\r\n\r\n      float elevation = (wave1 + wave2 + wave3) * 0.6;\r\n\r\n      \/\/ \ud83d\udd34 MOUSE DISTORTION (INTERACTION)\r\n      float dist = length(p);\r\n      elevation += sin(dist * 2.5 - time * 2.0) * mouse.x * 0.6;\r\n\r\n      pos.z += elevation;\r\n\r\n      vElevation = elevation;\r\n\r\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);\r\n    }\r\n  `,\r\n\r\n  fragmentShader: `\r\n    uniform float time;\r\n\r\n    varying float vElevation;\r\n    varying vec2 vUv;\r\n\r\n    void main(){\r\n\r\n      \/\/ \ud83d\udd34 CUTOUT PATTERN (PERFORATED FACADE)\r\n      float pattern = sin(vUv.x * 40.0) * sin(vUv.y * 40.0);\r\n\r\n      \/\/ animate holes slightly\r\n      pattern += sin(time + vUv.x * 10.0) * 0.2;\r\n\r\n      \/\/ threshold \u2192 creates holes\r\n      if(pattern > 0.6){\r\n        discard;\r\n      }\r\n\r\n      \/\/ \ud83d\udd34 BASE DARK\r\n      vec3 base = vec3(0.02,0.02,0.02);\r\n\r\n      \/\/ \ud83d\udd34 RED GLOW (DEPTH)\r\n      float glow = smoothstep(0.0,1.2,abs(vElevation));\r\n      vec3 red = vec3(0.9,0.05,0.05) * glow;\r\n\r\n      \/\/ \ud83d\udd34 GLASS SHEEN\r\n      float glass = pow(1.0 - abs(vElevation), 3.0);\r\n      vec3 highlight = vec3(1.0,0.25,0.25) * glass * 0.4;\r\n\r\n      \/\/ \ud83d\udd34 EDGE LIGHT (CINEMATIC)\r\n      float edge = smoothstep(0.3,0.9,abs(vElevation));\r\n      vec3 edgeGlow = vec3(1.0,0.1,0.1) * edge * 0.6;\r\n\r\n      vec3 color = base + red + highlight + edgeGlow;\r\n\r\n      gl_FragColor = vec4(color, 0.9);\r\n    }\r\n  `\r\n});\r\n\r\nconst mesh = new THREE.Mesh(geometry, material);\r\nscene.add(mesh);\r\n\r\n\/\/ \ud83d\udd34 MOUSE INTERACTION\r\nwindow.addEventListener(\"mousemove\", (e)=>{\r\n  uniforms.mouse.value.x = (e.clientX\/window.innerWidth - 0.5)*2;\r\n  uniforms.mouse.value.y = (e.clientY\/window.innerHeight - 0.5)*2;\r\n});\r\n\r\n\/\/ \ud83d\udd34 ANIMATION LOOP\r\nfunction animate(){\r\n  requestAnimationFrame(animate);\r\n\r\n  uniforms.time.value += 0.01;\r\n\r\n  \/\/ \ud83d\udd34 ARCHITECTURAL CAMERA FEEL\r\n  mesh.rotation.x = -0.85 + uniforms.mouse.value.y * 0.2;\r\n  mesh.rotation.y = uniforms.mouse.value.x * 0.25;\r\n\r\n  renderer.render(scene, camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ \ud83d\udd34 RESPONSIVE\r\nwindow.addEventListener(\"resize\", ()=>{\r\n  renderer.setSize(window.innerWidth, window.innerHeight);\r\n  camera.aspect = window.innerWidth\/window.innerHeight;\r\n  camera.updateProjectionMatrix();\r\n});\r\n\r\n})();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-247","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=247"}],"version-history":[{"count":7,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/247\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/247\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}