{"id":67519,"date":"2026-08-12T14:10:23","date_gmt":"2026-08-12T07:10:23","guid":{"rendered":"https:\/\/www.greenpeace.org\/indonesia\/?page_id=67519"},"modified":"2026-08-12T15:50:30","modified_gmt":"2026-08-12T08:50:30","slug":"suarakan-pesanmu","status":"publish","type":"page","link":"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/","title":{"rendered":"SUARAKAN PESANMU"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n<style>\n  #comic-forest-wrapper {\n    position: relative;\n    width: 100%;\n    min-height: 500px;\n    height: 60vh;\n    background-color: #1a1a1a;\n    border-radius: 8px;\n    overflow: hidden;\n  }\n\n  #canvas-container {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  #form-panel {\n    position: absolute;\n    bottom: 15px;\n    left: 15px;\n    background: rgba(255, 255, 255, 0.95);\n    border: 3px solid #000;\n    border-radius: 8px;\n    padding: 12px;\n    box-shadow: 4px 4px 0px #000;\n    max-width: 280px;\n    z-index: 10;\n  }\n\n  #form-panel h3 {\n    margin: 0 0 8px 0;\n    font-size: 14px;\n    text-transform: uppercase;\n    color: #000;\n  }\n\n  #form-panel input, #form-panel textarea {\n    width: 100%;\n    padding: 6px;\n    margin-bottom: 6px;\n    border: 2px solid #000;\n    border-radius: 4px;\n    box-sizing: border-box;\n    font-size: 13px;\n  }\n\n  #form-panel button {\n    width: 100%;\n    padding: 8px;\n    background: #ffde59;\n    border: 2px solid #000;\n    font-weight: bold;\n    cursor: pointer;\n    box-shadow: 2px 2px 0px #000;\n  }\n\n  .forest-counter {\n    position: absolute;\n    top: 15px;\n    left: 15px;\n    background: #000;\n    color: #fff;\n    padding: 6px 14px;\n    font-weight: bold;\n    font-size: 13px;\n    border-radius: 20px;\n    box-shadow: 0 4px 6px rgba(0,0,0,0.3);\n    z-index: 10;\n  }\n\n  #forest-error-status {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: #ffffff;\n    font-weight: bold;\n    font-family: sans-serif;\n    text-align: center;\n    z-index: 20;\n  }\n<\/style>\n\n<div id=\"comic-forest-wrapper\">\n  <div id=\"forest-error-status\">Loading 3D Engine&#8230;<\/div>\n  <div id=\"canvas-container\"><\/div>\n  <div class=\"forest-counter\">Attendees: <span id=\"attendee-count\">0<\/span><\/div>\n\n  <div id=\"form-panel\">\n    <h3>Isi Pesanmu<\/h3>\n    <input type=\"text\" id=\"name-input\" placeholder=\"Name\" value=\"Samantha\">\n    <textarea id=\"message-input\" rows=\"2\" placeholder=\"Message...\">Hello from the woods!<\/textarea>\n    <button id=\"send-btn\">Send Message<\/button>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  function init3D() {\n    var statusEl = document.getElementById('forest-error-status');\n    var wrapper = document.getElementById('comic-forest-wrapper');\n    var container = document.getElementById('canvas-container');\n\n    var width = wrapper.clientWidth || 800;\n    var height = wrapper.clientHeight || 500;\n\n    try {\n      var scene = new THREE.Scene();\n      scene.background = new THREE.Color(0xa0d8ef);\n      scene.fog = new THREE.FogExp2(0xa0d8ef, 0.015);\n\n      var camera = new THREE.PerspectiveCamera(60, width \/ height, 0.1, 1000);\n      camera.position.set(0, 5, 25);\n\n      var renderer = new THREE.WebGLRenderer({ antialias: true });\n      renderer.setSize(width, height);\n      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n      renderer.shadowMap.enabled = true;\n\n      container.innerHTML = '';\n      container.appendChild(renderer.domElement);\n      if (statusEl) statusEl.style.display = 'none';\n\n      var ambientLight = new THREE.AmbientLight(0xffffff, 0.7);\n      scene.add(ambientLight);\n\n      var dirLight = new THREE.DirectionalLight(0xffffff, 0.6);\n      dirLight.position.set(20, 40, 20);\n      dirLight.castShadow = true;\n      scene.add(dirLight);\n\n      var groundGeo = new THREE.PlaneGeometry(200, 200);\n      var groundMat = new THREE.MeshToonMaterial({ color: 0x4e8752 });\n      var ground = new THREE.Mesh(groundGeo, groundMat);\n      ground.rotation.x = -Math.PI \/ 2;\n      ground.receiveShadow = true;\n      scene.add(ground);\n\n      function createTree(x, z) {\n        var treeGroup = new THREE.Group();\n        var trunk = new THREE.Mesh(\n          new THREE.CylinderGeometry(0.4, 0.6, 4, 8),\n          new THREE.MeshToonMaterial({ color: 0x5a3d28 })\n        );\n        trunk.position.y = 2;\n        treeGroup.add(trunk);\n\n        var folMat = new THREE.MeshToonMaterial({ color: 0x2e6f40 });\n        var fol1 = new THREE.Mesh(new THREE.ConeGeometry(2.5, 4, 8), folMat);\n        fol1.position.y = 4.5;\n        treeGroup.add(fol1);\n\n        var fol2 = new THREE.Mesh(new THREE.ConeGeometry(2, 3.5, 8), folMat);\n        fol2.position.y = 6;\n        treeGroup.add(fol2);\n\n        treeGroup.position.set(x, 0, z);\n        return treeGroup;\n      }\n\n      for (var i = 0; i < 65; i++) {\n        var x = (Math.random() - 0.5) * 120;\n        var z = (Math.random() - 0.5) * 120;\n        if (Math.abs(x) < 8 &#038;&#038; z > 0) continue;\n        scene.add(createTree(x, z));\n      }\n\n      function createComicPersonTexture(name, message) {\n        var canvas = document.createElement('canvas');\n        canvas.width = 512;\n        canvas.height = 512;\n        var ctx = canvas.getContext('2d');\n\n        ctx.fillStyle = \"#ffffff\";\n        ctx.strokeStyle = \"#000000\";\n        ctx.lineWidth = 6;\n\n        var bx = 40, by = 40, bw = 432, bh = 200, radius = 20;\n        ctx.beginPath();\n        ctx.moveTo(bx + radius, by);\n        ctx.lineTo(bx + bw - radius, by);\n        ctx.quadraticCurveTo(bx + bw, by, bx + bw, by + radius);\n        ctx.lineTo(bx + bw, by + bh - radius);\n        ctx.quadraticCurveTo(bx + bw, by + bh, bx + bw - radius, by + bh);\n        ctx.lineTo(bx + bw \/ 2 + 30, by + bh);\n        ctx.lineTo(bx + bw \/ 2, by + bh + 40);\n        ctx.lineTo(bx + bw \/ 2 - 30, by + bh);\n        ctx.lineTo(bx + radius, by + bh);\n        ctx.quadraticCurveTo(bx, by + bh, bx, by + bh - radius);\n        ctx.lineTo(bx, by + radius);\n        ctx.quadraticCurveTo(bx, by, bx + radius, by);\n        ctx.closePath();\n        ctx.fill();\n        ctx.stroke();\n\n        ctx.fillStyle = \"#000000\";\n        ctx.font = \"bold 26px sans-serif\";\n        ctx.textAlign = \"center\";\n        ctx.fillText(name, 256, 85);\n\n        ctx.font = \"20px sans-serif\";\n        ctx.fillText(message.substring(0, 30), 256, 135);\n\n        var cx = 256, cy = 380;\n        ctx.fillStyle = '#ffdbac';\n        ctx.beginPath();\n        ctx.arc(cx, cy - 40, 22, 0, Math.PI * 2);\n        ctx.fill();\n        ctx.stroke();\n\n        ctx.fillStyle = '#3498db';\n        ctx.fillRect(cx - 20, cy - 15, 40, 55);\n        ctx.strokeRect(cx - 20, cy - 15, 40, 55);\n\n        return new THREE.CanvasTexture(canvas);\n      }\n\n      var attendeeCount = 0;\n      function addAttendee(name, message) {\n        var texture = createComicPersonTexture(name, message);\n        var spriteMaterial = new THREE.SpriteMaterial({ map: texture, transparent: true });\n        var sprite = new THREE.Sprite(spriteMaterial);\n\n        var angle = Math.random() * Math.PI * 2;\n        var distance = 5 + Math.random() * 20;\n        sprite.position.x = Math.sin(angle) * distance;\n        sprite.position.z = Math.cos(angle) * distance - 5;\n        sprite.position.y = 3.5;\n        sprite.scale.set(6, 6, 1);\n\n        scene.add(sprite);\n        attendeeCount++;\n        document.getElementById('attendee-count').innerText = attendeeCount;\n      }\n\n      document.getElementById('send-btn').addEventListener('click', function() {\n        var n = document.getElementById('name-input').value;\n        var m = document.getElementById('message-input').value;\n        if (n && m) addAttendee(n, m);\n      });\n\n      var cameraAngle = 0;\n      function animate() {\n        requestAnimationFrame(animate);\n        cameraAngle += 0.001;\n        camera.position.x = Math.sin(cameraAngle) * 30;\n        camera.position.z = Math.cos(cameraAngle) * 30;\n        camera.lookAt(0, 2, 0);\n        renderer.render(scene, camera);\n      }\n      animate();\n\n      setTimeout(function() { addAttendee(\"Maya\", \"Excited to be here!\"); }, 800);\n      setTimeout(function() { addAttendee(\"Budi\", \"Greetings!\"); }, 1600);\n\n    } catch (e) {\n      if (statusEl) statusEl.innerText = 'WebGL Render Error: ' + e.message;\n    }\n  }\n\n  \/\/ Inject script programmatically to bypass CDN restrictions and script stripping\n  if (typeof THREE !== 'undefined') {\n    init3D();\n  } else {\n    var s = document.createElement('script');\n    s.src = 'https:\/\/unpkg.com\/three@0.128.0\/build\/three.min.js';\n    s.onload = init3D;\n    s.onerror = function() {\n      var statusEl = document.getElementById('forest-error-status');\n      if (statusEl) statusEl.innerText = 'CDN Script Blocked by Server CSP. Please load Three.js via theme settings.';\n    };\n    document.head.appendChild(s);\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Loading 3D Engine&#8230; Attendees: 0 Isi Pesanmu Hello from the woods! Send Message<\/p>\n","protected":false},"author":82,"featured_media":66514,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ep_exclude_from_search":false,"p4_hide_page_title_checkbox":"on","p4_title":"","p4_subtitle":"","p4_description":"","background_image_id":"","background_image":"","p4_button_title":"","p4_button_link":"","p4_button_link_checkbox":"","p4_og_title":"Suarakan Pesanmu","p4_og_description":"Suarakan Pesanmu!","p4_og_image":"","p4_og_image_id":"66514","p4_seo_canonical_url":"","p4_seo_meta_title":"","p4_seo_meta_description":"","p4_campaign_name":"","p4_local_project":"","p4_basket_name":"","p4_department":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-67519","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>SUARAKAN PESANMU - Greenpeace Indonesia<\/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:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SUARAKAN PESANMU - Greenpeace Indonesia\" \/>\n<meta property=\"og:description\" content=\"Loading 3D Engine&#8230; Attendees: 0 Isi Pesanmu Hello from the woods! Send Message\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/\" \/>\n<meta property=\"og:site_name\" content=\"Greenpeace Indonesia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreenpeaceIndonesia\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-12T08:50:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.greenpeace.org\/static\/planet4-indonesia-stateless\/2026\/06\/f8ed9a7e-gp0stto0e.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@GreenpeaceID\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/\",\"url\":\"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/\",\"name\":\"SUARAKAN PESANMU - Greenpeace Indonesia\",\"isPartOf\":{\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/#website\"},\"datePublished\":\"2026-08-12T07:10:23+00:00\",\"dateModified\":\"2026-08-12T08:50:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.greenpeace.org\/indonesia\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SUARAKAN PESANMU\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/#website\",\"url\":\"https:\/\/www.greenpeace.org\/indonesia\/\",\"name\":\"Greenpeace Indonesia\",\"description\":\"Greenpeace\",\"publisher\":{\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.greenpeace.org\/indonesia\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/#organization\",\"name\":\"Greenpeace Indonesia\",\"url\":\"https:\/\/www.greenpeace.org\/indonesia\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.greenpeace.org\/static\/planet4-indonesia-stateless\/2023\/11\/23919a5e-gp_avatar_whiteongreen.png\",\"contentUrl\":\"https:\/\/www.greenpeace.org\/static\/planet4-indonesia-stateless\/2023\/11\/23919a5e-gp_avatar_whiteongreen.png\",\"width\":500,\"height\":500,\"caption\":\"Greenpeace Indonesia\"},\"image\":{\"@id\":\"https:\/\/www.greenpeace.org\/indonesia\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/GreenpeaceIndonesia\",\"https:\/\/twitter.com\/GreenpeaceID\",\"https:\/\/www.instagram.com\/greenpeaceid\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SUARAKAN PESANMU - Greenpeace Indonesia","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:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/","og_locale":"id_ID","og_type":"article","og_title":"SUARAKAN PESANMU - Greenpeace Indonesia","og_description":"Loading 3D Engine&#8230; Attendees: 0 Isi Pesanmu Hello from the woods! Send Message","og_url":"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/","og_site_name":"Greenpeace Indonesia","article_publisher":"https:\/\/www.facebook.com\/GreenpeaceIndonesia","article_modified_time":"2026-08-12T08:50:30+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/www.greenpeace.org\/static\/planet4-indonesia-stateless\/2026\/06\/f8ed9a7e-gp0stto0e.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@GreenpeaceID","twitter_misc":{"Est. reading time":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/","url":"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/","name":"SUARAKAN PESANMU - Greenpeace Indonesia","isPartOf":{"@id":"https:\/\/www.greenpeace.org\/indonesia\/#website"},"datePublished":"2026-08-12T07:10:23+00:00","dateModified":"2026-08-12T08:50:30+00:00","breadcrumb":{"@id":"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.greenpeace.org\/indonesia\/suarakan-pesanmu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.greenpeace.org\/indonesia\/"},{"@type":"ListItem","position":2,"name":"SUARAKAN PESANMU"}]},{"@type":"WebSite","@id":"https:\/\/www.greenpeace.org\/indonesia\/#website","url":"https:\/\/www.greenpeace.org\/indonesia\/","name":"Greenpeace Indonesia","description":"Greenpeace","publisher":{"@id":"https:\/\/www.greenpeace.org\/indonesia\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.greenpeace.org\/indonesia\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/www.greenpeace.org\/indonesia\/#organization","name":"Greenpeace Indonesia","url":"https:\/\/www.greenpeace.org\/indonesia\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.greenpeace.org\/indonesia\/#\/schema\/logo\/image\/","url":"https:\/\/www.greenpeace.org\/static\/planet4-indonesia-stateless\/2023\/11\/23919a5e-gp_avatar_whiteongreen.png","contentUrl":"https:\/\/www.greenpeace.org\/static\/planet4-indonesia-stateless\/2023\/11\/23919a5e-gp_avatar_whiteongreen.png","width":500,"height":500,"caption":"Greenpeace Indonesia"},"image":{"@id":"https:\/\/www.greenpeace.org\/indonesia\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreenpeaceIndonesia","https:\/\/twitter.com\/GreenpeaceID","https:\/\/www.instagram.com\/greenpeaceid\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/pages\/67519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/comments?post=67519"}],"version-history":[{"count":15,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/pages\/67519\/revisions"}],"predecessor-version":[{"id":67713,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/pages\/67519\/revisions\/67713"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/media\/66514"}],"wp:attachment":[{"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/media?parent=67519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/categories?post=67519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greenpeace.org\/indonesia\/wp-json\/wp\/v2\/tags?post=67519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}