Re:Grow

Queen's Park History

Wander Queen's Park reflects on the unceded territory of the Halq'eméylem speaking peoples. This refers to a language group that more widely encompasses the Indigenous people who used and continue to use this land, and includes nations such as the Qayqayt, qʼʷa:n̓ƛʼən̓ (Kwantlen), Katzie, kʷikʷəƛw̓əm (Kwikwetlem), xʷməθkʷəy̓əm (Musqueam), Stó:lō, sc̓əwaθn məsteyəxʷ (Tsawwassen), and Tsleil-Waututh.

The Re:Grow AR Experience draws from ecology indigenous to these lands. We acknowledge these plants are an important part of the living traditions, history, and knowledge of the Halq'eméylem speaking peoples.

Welcome to the Wander the Park Re:Grow AR experience. All of the plants seen in your AR window are indigenous to Queen's Park

Tap the screen to change plants. Hold the green ring in place and a plant will grow.

AFRAME.registerComponent('color-toggle', { init: function(){ let el = this.el; this.togglecolor = function(){ el.setAttribute('color', 'blue'); } this.el.addEventListener('click', this.togglecolor); }, remove: function(){ this.el.removeEventListener('click', this.togglecolor); } }) AFRAME.registerComponent('cursor-listener', { init: function () { this.el.addEventListener('raycaster-intersected', evt => { this.raycaster = evt.detail.el; }); this.el.addEventListener('raycaster-intersected-cleared', evt => { this.raycaster = null; }); }, tick: function () { let cursor = document.querySelector('#mark'); function success(pos) { var crd = pos.coords; cursor.setAttribute("lat",crd.latitude); cursor.setAttribute("lng",crd.longitude); //console.log("Your current position is:"); //console.log(`Latitude : ${crd.latitude}`); //console.log(`Longitude: ${crd.longitude}`); //console.log(`More or less ${crd.accuracy} meters.`); } function error(err) { console.warn(`ERROR(${err.code}): ${err.message}`); } navigator.geolocation.getCurrentPosition(success, error); if (!this.raycaster) { cursor.setAttribute("material","opacity:0"); return; } // Not intersecting. let intersection = this.raycaster.components.raycaster.getIntersection(this.el); if (!intersection) { return; } // Not intersecting cursor.setAttribute("material","opacity:1"); cursor.setAttribute("position", intersection.point);// intersecting //console.log(intersection); } }); Wander The Park
Re:Grow

Queen's Park History

Wander Queen's Park reflects on the unceded territory of the Halq'eméylem speaking peoples. This refers to a language group that more widely encompasses the Indigenous people who used and continue to use this land, and includes nations such as the Qayqayt, qʼʷa:n̓ƛʼən̓ (Kwantlen), Katzie, kʷikʷəƛw̓əm (Kwikwetlem), xʷməθkʷəy̓əm (Musqueam), Stó:lō, sc̓əwaθn məsteyəxʷ (Tsawwassen), and Tsleil-Waututh.

The Re:Grow AR Experience draws from ecology indigenous to these lands. We acknowledge these plants are an important part of the living traditions, history, and knowledge of the Halq'eméylem speaking peoples.

Welcome to the Wander the Park Re:Grow AR experience. All of the plants seen in your AR window are indigenous to Queen's Park

Tap the screen to change plants. Hold the green ring in place and a plant will grow.

clear // Defaults const defaultOptions = { format: 'image/png', quality: 0.92, width: undefined, height: undefined, Canvas: undefined, crossOrigin: undefined }; // Return Promise const mergeImages = (sources = [], options = {}) => new Promise(resolve => { options = Object.assign({}, defaultOptions, options); // Setup browser/Node.js specific variables const canvas = options.Canvas ? new options.Canvas() : window.document.createElement('canvas'); const Image = options.Image || window.Image; // Load sources const images = sources.map(source => new Promise((resolve, reject) => { // Convert sources to objects if (source.constructor.name !== 'Object') { source = { src: source }; } // Resolve source and img when loaded const img = new Image(); img.crossOrigin = options.crossOrigin; img.onerror = () => reject(new Error('Couldn\'t load image')); img.onload = () => resolve(Object.assign({}, source, { img })); img.src = source.src; })); // Get canvas context const ctx = canvas.getContext('2d'); // When sources have loaded resolve(Promise.all(images) .then(images => { // Set canvas dimensions const getSize = dim => options[dim] || Math.max(...images.map(image => image.img[dim])); canvas.width = getSize('width'); canvas.height = getSize('height'); // Draw images to canvas images.forEach(image => { ctx.globalAlpha = image.opacity ? image.opacity : 1; return ctx.drawImage(image.img, image.x || 0, image.y || 0); }); if (options.Canvas && options.format === 'image/jpeg') { // Resolve data URI for node-canvas jpeg async return new Promise((resolve, reject) => { canvas.toDataURL(options.format, { quality: options.quality, progressive: false }, (err, jpeg) => { if (err) { reject(err); return; } resolve(jpeg); }); }); } // Resolve all other data URIs sync return canvas.toDataURL(options.format, options.quality); })); }); # Hello Website (mvp) This is a basic static HTML starter project you can build on however you like. No need to save. While you develop your site, your changes will happen 🪄 immediately in the preview window. You can upload assets like images or audio in `assets` to the left. The rest is up to you and your imagination. ## What's in this project? ← `README.md`: That's this file, where you can tell people what your cool website does and how you built it. ← `index.html`: This is the main HTML page for your site. ← `style.css`: CSS files add styling rules to your content. ← `script.js`: If you're feeling fancy you can add interactivity to your site with JavaScript. ![Glitch](https://cdn.glitch.com/a9975ea6-8949-4bab-addb-8a95021dc2da%2FLogo_Color.svg?v=1602781328576) ## You built this with Glitch! [Glitch](https://glitch.com) is a friendly community where millions of people come together to build web apps and websites. - Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions. - Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more. AFRAME.registerComponent('rotation-reader', { /** * We use IIFE (immediately-invoked function expression) to only allocate one * vector or euler and not re-create on every tick to save memory. */ tick: (function () { var position = new THREE.Vector3(); var quaternion = new THREE.Quaternion(); return function () { this.el.object3D.getWorldPosition(position); this.el.object3D.getWorldQuaternion(quaternion); // position and rotation now contain vector and quaternion in world space. }; })() }); var models = [ {id: "rose", obj:"obj: #rose-obj;", mtl:"mtl: rose-mtl", scale:"0.02 0.02 0.02", color: "#9103CC" }, //trillium doesn't load very well. {id: "trillium", obj:"obj: #trillium-obj;", mtl:"mtl: trillium-mtl", scale:"0.0175 0.0175 0.0175", color: "white" }, {id: "bush", obj:"obj: #bush-obj;", mtl:"mtl: bush-mtl", scale:"0.0175 0.0175 0.0175", color: "#71B2C9" }, {id: "fern", obj:"obj: #fern-obj;", mtl:"mtl: fern-mtl", scale:"0.0175 0.0175 0.0175", color: "#006747" }, {id: "buttercup", obj:"obj: #buttercup-obj;", mtl:" mtl: buttercup-mtl", scale:"0.03 0.03 0.03", color: "#F7D54C" }, {id: "", obj:"", mtl:"", scale:"0 0 0" } ]; var modelIndex=0; var lat=0; var long=0; function toggleReady() { document.querySelector(".splash2").classList.toggle("ready"); //document.querySelector(".splash").classList.toggle("hidden"); console.log("clicked"); } function clearInfo(){ document.querySelector(".splash").classList.toggle("hidden"); document.querySelector(".AR-UI").classList.toggle("hidden"); } function download(){ var download=this.el; var canvas = document.querySelector('a-scene').components.screenshot.getCanvas('equirectangular'); var image = canvas.toDataURL("image/png"); download.setAttribute("href", image); } document.addEventListener('DOMContentLoaded', function() { //var camera = document.querySelector('a-camera'); //var assets = document.querySelector('a-assets'); console.log("dom loaded"); var btn = document.querySelector('.btn'); var scene = document.querySelector('a-scene'); if (navigator.share) { document.querySelector("#share-button").classList.toggle("hidden"); document.querySelector("#share-button").addEventListener("click", function() { navigator.share({ title: "Re: Growth", url: "https://qpcd.glitch.me/" }).then(() => { console.log('Thanks for sharing!'); }) .catch(console.error); }); } scene.addEventListener('renderstart', enableBtn); // once rendering starts, allow user to click the enter ar button //handling model swap on tap of scene scene.addEventListener('touchend', function () { console.log("touchEnd"); var preview = document.querySelector('#preview'); var model = document.querySelector('#model'); preview.removeChild(model); var newModel = document.createElement("a-entity"); modelIndex++; var newIndex = modelIndex % models.length; var nextModel = models[newIndex]; console.log(nextModel.id); if (nextModel.id.length) { // if it's not the empty option console.log(nextModel.obj); newModel.setAttribute("obj-model", nextModel.obj); newModel.setAttribute("class", nextModel.id); newModel.setAttribute("scale", nextModel.scale); newModel.setAttribute("animation", "property: rotation; to: 0 360; dur: 10000; easing: linear; loop: true"); newModel.setAttribute("material", "shader: flat; transparent:true; opacity: 0.5; wireframe: true; wireframeLinewidth:1; color: "+ nextModel.color); } else { newModel.setAttribute("class", "hidden"); } newModel.setAttribute("id", "model"); preview.appendChild(newModel); }); function enableBtn(){ btn.disabled=false; } }); function resizeCanvas(origCanvas, width, height) { let resizedCanvas = document.createElement("canvas"); let resizedContext = resizedCanvas.getContext("2d"); resizedCanvas.height = width; resizedCanvas.width = height; resizedContext.drawImage(origCanvas, 0, 0, width, height); return resizedCanvas.toDataURL(); } /* a minimalist set of CSS resets */ @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400&family=Merriweather:wght@300;400&family=Open+Sans:ital,wght@0,400;0,600;1,300&display=swap'); @font-face { font-family: 'DistrictPro'; src: url('https://cdn.glitch.com/c3c464b0-7f1e-4247-a634-705a8584a72f%2FDistrictPro-Book%202.otf?v=1624402106293'); } /* default to border-box */ html { } /* adjust typography defaults */ body{ background-color: #fff; font-family: 'DistrictPro','Open Sans', sans-serif; overflow:hidden; } .splash { margin: 0; width: 100%; height: 100%; position: fixed; z-index: 100; left: 0; top: 0; } .splash1{ z-index: 98; position: fixed; overflow:hidden; top: 0; left: 0; height: 100%; width: 100%; background-color: #006747; font-size: 2em; display: flex; align-items: center; justify-content: center; animation-name: slideLeft; animation-duration: 2s; animation-delay: 4s; animation-fill-mode: forwards; } .splash1>.mainTitle{ color: transparent; font-size:72px; position: absolute; top: 33%; animation-name: fadeIn; animation-duration: 2s; animation-delay: 1.6s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .logo { } #left{ width: 50vw; height: 50vw; background-color: #71B2C9; clip-path: polygon(0 0, 0% 100%, 100% 100%); position: absolute; bottom: 0; left: 0; transform: translate(-100%,100%); animation-name: slideInL; animation-duration: 1.25s; animation-delay: 0.25s; animation-fill-mode: forwards; animation-timing-function: ease-out; } #right{ width: 75vw; height: 75vw; background-color: #E5B53B; clip-path: polygon(100% 0, 0% 100%, 100% 100%); position: absolute; bottom: 0px; right: 0px; transform: translate(100%,100%); animation-name: slideInR; animation-duration: 1.5s; animation-delay: 0s; animation-fill-mode: forwards; animation-timing-function: ease-out; } #right > div { display: flex; width: 50vw; position: absolute; bottom: 3vw; right: 2vw; color: white; opacity: 0; font-size: 2vw; text-align: right; animation-name: fill; animation-duration: 1s; animation-delay: 2.5s; animation-fill-mode: forwards; animation-timing-function: linear; } #nmg-logo{ position: absolute; bottom: 3.5vw; left: 2vw; width: 35vw; opacity: 0; animation-name: fill; animation-duration: 1s; animation-delay: 2.5s; animation-fill-mode: forwards; animation-timing-function: ease-out; } #cnw-logo{ position: absolute; bottom: 6vw; right: 0%; width: 33vw; animation-name: fill; animation-duration: 1s; animation-delay: 2.5s; animation-fill-mode: forwards; animation-timing-function: ease-out; } .sliderWrapper{ position: absolute; filter: drop-shadow(0 -.25em 10px rgba(50, 50, 50, 0.5)); width: 100%; height: 100%; } .splash2{ z-index:95; position: fixed; overflow:hidden; height: 100%; width: 100%; background-color: #54585A; display: flex; align-items: center; justify-content: center; } button { width: 40vw; height: 10vw; background-color: #54585A; color: #71B2C9; border-radius:5px; border: 3px solid #71B2C9; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font-size:5vw; font-weight:bold; align-self: center; margin:auto } button:disabled { border-color: #9EA2A2; color: transparent; background-image: url("https://cdn.glitch.com/c3c464b0-7f1e-4247-a634-705a8584a72f%2Fdot.gif?v=1624506545113"); background-repeat: no-repeat; background-size: contain; background-position: center; background-blend-mode: exclusion; } .ready { animation-name: slideUp; animation-duration: 2s; animation-delay: 0.1s; animation-fill-mode: forwards; } .splash-content{ margin-left: 5vw; margin-right: 5vw; color: white; align-content: center; justify-content:center; align-items: center; display:inline-block; position: absolute; text-align:left; } .splash2 h1{ font-size: 32px; color: white; margin: 0; padding: 0; } .splash3{ z-index: 70; height: 100%; width: 100%; background-color: transparent; color: #71B2C9; background-blend-mode: overlay; display: flex; align-items: center; justify-content: center; } .splash3 > div { display: flex; flex-direction: column; background-color: #54585AAA; background-blend-mode: darken; color: white; border-radius: 5vw; border: 3px solid #71B2C9; padding: 5vw; align-items: flex-start; } #clearInfo { display: flex; align-items: center; justify-content: center; border: 1px solid #71B2C9; background-color: inherit; width: 1em; height: 1.5em; border-radius: 50%; font-size: 2em; background-color: rgba(0, 0, 0, 0.4); color: #71B2C9; outline: none; } .hidden { display: none; } .AR-UI { height: 20%; position: fixed; top: 0%; display: flex; flex-direction: row; width: 100%; margin: 0px auto; left: 0; right: 0; } .AR-UI>a{ font-size:48px; color: white; text-shadow: 2px 2px #54585A99; position: absolute; right:2vw; top:2vw; } @keyframes fadeIn{ 0%{ padding-top: 20px; color: transparent; } 100%{ padding-top: 0; color: white; } } @keyframes slideLeft{ 0%{ transform: translate(0, 0); } 100%{ transform: translate(100%, 0); } } @keyframes slideUp{ 0%{ transform: translate(0, 0); } 100%{ transform: translate(0, -100%); } } @keyframes slideInR{ 0%{ transform: translate(100, 100); } 100%{ transform: translate(0, 0); } } @keyframes slideInL{ 0%{ transform: translate(-100, 100); } 100%{ transform: translate(0, 0); } } @keyframes fill { 0%{ opacity:0; } 100%{ opacity:1; } } @keyframes slidebg { 0% { background-image: linear-gradient(0deg, #71B2C9 0%, #5D87A1 49%, #5D87A1 80%, #71B2C9 100%); } 20% { background-image: linear-gradient(72deg, #71B2C9 0%, #5D87A1 49%, #5D87A1 80%, #71B2C9 100%); } 40% { background-image: linear-gradient(144deg, #71B2C9 0%, #5D87A1 49%, #5D87A1 80%, #71B2C9 100%; } 60% { background-image: linear-gradient(216deg, #71B2C9 0%, #5D87A1 49%, #5D87A1 80%, #71B2C9 100%); } 80% { background-image: linear-gradient(288deg, #71B2C9 0%, #5D87A1 49%, #5D87A1 80%, #71B2C9 100%); } 100% { background-image: linear-gradient(360deg, #71B2C9 0%, #5D87A1 49%, #5D87A1 80%, #71B2C9 100%); } /* images and videos max out at full width */ img, video { height: auto; max-width: 100%; } .a-dialog-allow-button { background-color: #71B2C9; } .a-dialog-deny-button { background-color: #54585A; } .a-dialog-ok-button { background-color: #71B2C9; } AFRAME.registerComponent("target-marker", { init: function() { let el = this.el; this.addMarker = function(e) { let scene = document.querySelector("a-scene"); let ground = document.querySelector("#ground"); let mark = document.querySelector("#mark"); let modelName = document.querySelector('#model').getAttribute("class"); //let p = e.detail.intersection.point; let p = mark.object3D.getWorldPosition(mark.object3D.position); //console.log(p); var px = mark.getAttribute("lat")-p.x; var py = mark.getAttribute("lng")-p.z; let modelObj = "obj:#"+modelName + "-obj; mtl:#" +modelName +"-mtl;" //console.log(modelObj); let newMark = document.createElement("a-entity"); newMark.setAttribute( "obj-model", modelObj ); let randRotation= Math.floor(Math.random()*360); newMark.setAttribute("rotation", "0 "+randRotation+" 0"); newMark.setAttribute("scale", "0.0001 0.0001 0.0001"); newMark.setAttribute("shadow", "cast: true"); newMark.setAttribute("position", p); newMark.setAttribute("class", "placed"); scene.appendChild(newMark); newMark.addEventListener('model-loaded', () => { // Once the model is loaded, we are ready to show it popping in using an animation newMark.setAttribute('visible', 'true'); newMark.setAttribute('animation', { property: 'scale', to: '0.3 0.3 0.3', easing: 'easeOutElastic', dur: 800, }) }) mark.setAttribute("scale", "1 1 1"); }; this.el.addEventListener("click", this.addMarker); }, remove: function() { this.el.removeEventListener("click", this.addMarker); } });
clear