{"id":264,"date":"2026-04-13T01:07:48","date_gmt":"2026-04-13T01:07:48","guid":{"rendered":"https:\/\/metaartron.com\/?page_id=264"},"modified":"2026-04-13T01:26:11","modified_gmt":"2026-04-13T01:26:11","slug":"parametric-facade","status":"publish","type":"page","link":"https:\/\/metaartron.com\/?page_id=264","title":{"rendered":"parametric facade"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"264\" class=\"elementor elementor-264\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d13fe6 e-flex e-con-boxed e-con e-parent\" data-id=\"3d13fe6\" 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-2da8645 elementor-widget elementor-widget-html\" data-id=\"2da8645\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- META ARTRON \u2014 GLASS FRAGMENT 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  50,\r\n  window.innerWidth\/window.innerHeight,\r\n  0.1,\r\n  1000\r\n);\r\n\r\n\/\/ \ud83d\udd34 CLOSE FRAGMENT VIEW\r\ncamera.position.z = 2.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\/\/ \ud83d\udd34 HIGH DENSITY GEOMETRY\r\nconst geometry = new THREE.PlaneGeometry(10,10,280,280);\r\n\r\n\/\/ \ud83d\udd34 MATERIALS\r\n\r\n\/\/ GLASS SURFACE\r\nconst glassMaterial = new THREE.MeshPhysicalMaterial({\r\n  color: 0x050505,\r\n  metalness: 0.1,\r\n  roughness: 0.15,\r\n  transmission: 0.9,   \/\/ glass effect\r\n  thickness: 1.2,\r\n  transparent: true,\r\n  opacity: 0.6,\r\n  clearcoat: 1,\r\n  clearcoatRoughness: 0.1,\r\n  side: THREE.DoubleSide\r\n});\r\n\r\n\/\/ STRUCTURAL RIBS\r\nconst ribMaterial = new THREE.MeshBasicMaterial({\r\n  color: 0xcc0000,\r\n  wireframe: true,\r\n  transparent: true,\r\n  opacity: 0.9\r\n});\r\n\r\n\/\/ MESHES\r\nconst surface = new THREE.Mesh(geometry, glassMaterial);\r\nconst ribs = new THREE.Mesh(geometry, ribMaterial);\r\n\r\n\/\/ OFFSET FOR DEPTH\r\nribs.position.z = 0.02;\r\n\r\nscene.add(surface);\r\nscene.add(ribs);\r\n\r\n\/\/ \ud83d\udd34 LIGHTING (CINEMATIC)\r\nconst light1 = new THREE.DirectionalLight(0xff2222, 1.5);\r\nlight1.position.set(5,5,5);\r\nscene.add(light1);\r\n\r\nconst light2 = new THREE.PointLight(0xff0000, 1.2);\r\nlight2.position.set(-3,-2,4);\r\nscene.add(light2);\r\n\r\nconst ambient = new THREE.AmbientLight(0x220000, 1.5);\r\nscene.add(ambient);\r\n\r\n\/\/ \ud83d\udd34 INTERACTION\r\nlet t = 0;\r\nlet mouseX = 0;\r\nlet mouseY = 0;\r\n\r\nwindow.addEventListener(\"mousemove\",(e)=>{\r\n  mouseX = (e.clientX \/ window.innerWidth - 0.5) * 2;\r\n  mouseY = (e.clientY \/ window.innerHeight - 0.5) * 2;\r\n});\r\n\r\n\/\/ \ud83d\udd34 ANIMATION\r\nfunction animate(){\r\n  requestAnimationFrame(animate);\r\n  t += 0.01;\r\n\r\n  let pos = geometry.attributes.position;\r\n\r\n  for(let i=0;i<pos.count;i++){\r\n\r\n    let x = pos.getX(i);\r\n    let y = pos.getY(i);\r\n\r\n    \/\/ \ud83d\udd34 PARAMETRIC ARCHITECTURAL SURFACE\r\n    let wave1 = Math.sin(x * 0.9 + t * 1.1);\r\n    let wave2 = Math.cos(y * 0.8 + t * 1.0);\r\n    let wave3 = Math.sin((x + y) * 0.5 + t * 0.7);\r\n\r\n    let elevation = (wave1 + wave2 + wave3) * 0.6;\r\n\r\n    \/\/ \ud83d\udd34 RADIAL FRAGMENT CURVE\r\n    let dist = Math.sqrt(x*x + y*y);\r\n    elevation += Math.sin(dist * 2.0 - t * 1.5) * 0.35;\r\n\r\n    \/\/ \ud83d\udd34 SUBTLE INTERACTION\r\n    elevation += mouseX * 0.3 * Math.sin(x * 0.4);\r\n    elevation += mouseY * 0.3 * Math.cos(y * 0.4);\r\n\r\n    pos.setZ(i, elevation);\r\n  }\r\n\r\n  pos.needsUpdate = true;\r\n\r\n  \/\/ \ud83d\udd34 ARCHITECTURAL CAMERA FEEL\r\n  surface.rotation.x = -0.9 + mouseY * 0.15;\r\n  surface.rotation.y = mouseX * 0.2;\r\n\r\n  ribs.rotation.x = surface.rotation.x;\r\n  ribs.rotation.y = surface.rotation.y;\r\n\r\n  renderer.render(scene, camera);\r\n}\r\n\r\nanimate();\r\n\r\n\/\/ 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-264","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/264","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=264"}],"version-history":[{"count":10,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/264\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/metaartron.com\/index.php?rest_route=\/wp\/v2\/pages\/264\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/metaartron.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}