Last active
March 20, 2019 03:46
-
-
Save kmancher/95b898b1f8180c94a3669a048ba76cb9 to your computer and use it in GitHub Desktop.
Blackout poetry maker
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let blackedOut = false; | |
| let sustainability, word, description, overlay, closeButton; | |
| function preload() { | |
| sustainability = loadStrings('sustainability-text.txt'); | |
| } | |
| function setup() { | |
| // createCanvas(windowWidth, windowHeight); | |
| // background(255); | |
| noStroke(); | |
| // text(sustainability, 0, 0, width, height); | |
| for (let i = 0; i < sustainability.length; i++) { | |
| word = createElement('span', sustainability[i]); | |
| word.parent('#no-select'); | |
| word.mouseClicked(blackout); | |
| } | |
| description = select('.prompt'); | |
| closeButton = select('.min'); | |
| closeButton.mousePressed(closeWindow); | |
| cursor(CROSS); | |
| } | |
| function draw() { | |
| } | |
| function keyPressed() { | |
| save('canvas.jpg') | |
| } | |
| function closeWindow() { | |
| description.hide(); | |
| overlay.hide(); | |
| } | |
| function blackout(){ | |
| if (blackedOut === false){ | |
| this.class('blackout'); | |
| blackedOut = !blackedOut; | |
| } else { | |
| this.removeClass('blackout'); | |
| blackedOut = !blackedOut; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rewrite the Story</title> | |
| <link rel="stylesheet" type="text/css" href="style.css" /> | |
| <script src="../p5.min.js"></script> | |
| <script src="../addons/p5.dom.min.js"></script> | |
| <script src="../addons/p5.sound.min.js"></script> | |
| <script src="interaction.js"></script> | |
| <script src="html2canvas.min.js"></script> | |
| <link rel="stylesheet" href="https://use.typekit.net/ngi3ruh.css"> | |
| </head> | |
| <body> | |
| <a href="index.html"><div id="icon"></div></a> | |
| <h1 class="title">Trash is Design</h1> | |
| <div id="photo"> | |
| <a id="a-make" href="#"></a> | |
| <a id="a-download" href="#" style="display:none;"></a> | |
| </div> | |
| <div class="content-container"> | |
| <h1>Rewrite the story <span class="min">-</span></h1> | |
| <div class="content-description"> | |
| <p>Don’t forget the context in which we make. Design is shaped by intermingled social, political, and economic conditions. There is a reason things look the way they do. There is a reason we continually take resources from the earth that are destined to become trash. None of these are natural or predetermined, which means the way we do things can change.</p> | |
| <p><strong>Read the article to the right. Click words to erase them. Start from what exists to write your own story about sustainability.</strong></p> | |
| </div> | |
| </div> | |
| <div id="main"> | |
| <div id="screenshot"> | |
| <p id="no-select"></p> | |
| </div> | |
| </div> | |
| <script> | |
| function makeScreenshot() { | |
| html2canvas(document.getElementById("screenshot"), {scale: 2}).then(canvas => | |
| { | |
| canvas.id = "canvasID"; | |
| var main = document.getElementById("main"); | |
| while (main.firstChild) { main.removeChild(main.firstChild); } | |
| main.appendChild(canvas); | |
| }); | |
| } | |
| document.getElementById("a-make").addEventListener('click', function() | |
| { | |
| document.getElementById("a-make").style.display = "none"; | |
| makeScreenshot(); | |
| document.getElementById("a-download").style.display = "inline"; | |
| }, false); | |
| document.getElementById("a-download").addEventListener('click', function() | |
| { | |
| this.href = document.getElementById("canvasID").toDataURL(); | |
| this.download = "canvas-image.png"; | |
| location.reload(); | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment