├── .DS_Store ├── LICENSE ├── README.md ├── app ├── .DS_Store ├── .idea │ ├── .gitignore │ ├── app.iml │ ├── misc.xml │ ├── modules.xml │ └── vcs.xml ├── defaultSketches.json ├── fonts │ ├── .DS_Store │ ├── Inconsolata-Bold.otf │ └── Inconsolata-Regular.otf ├── icons │ ├── .DS_Store │ ├── circle.png │ ├── close-round.png │ ├── close-square.png │ ├── color-fill-tool.png │ ├── cross-arrows.png │ ├── edit-document.png │ ├── font.png │ ├── icon_P1.png.icon_P1.png │ ├── long-arrow-left.png │ ├── magic.png │ ├── magnifying-glass-zoom.png │ ├── monitor.png │ ├── object-selected.png │ ├── p5-asterisk.png │ ├── p5-sq-reverse-filled.png │ ├── paint-palette.png │ ├── play-round.png │ ├── play.png │ ├── plus-round-line.png │ ├── plus-square-line.png │ ├── recycle-bin-line.png │ ├── recycle-bin.png │ ├── save.png │ ├── sketches │ │ ├── .DS_Store │ │ ├── DefaultIcon.png │ │ ├── KaleidoParticles.png │ │ ├── Perlin Circle.png │ │ ├── Perlin Rectangle.png │ │ └── PlaneToSphere.png │ ├── slideshow-line.png │ ├── slideshow.png │ ├── spark.png │ ├── square.png │ ├── text-document-add (1).png │ ├── text-document-add.png │ ├── text.png │ └── triangle-top-arrow.png ├── index.html ├── p5.slides.js ├── slideDashboard.js └── style.css └── p5_slides.png /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/.DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Garrett Flynn 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # [**p5.slides**](https://github.com/GarrettMFlynn/p5.js-slides) 3 | Interactive Presentations for the Web 4 | 5 | Garrett Flynn (gflynn@usc.edu) 6 | IML 288: Critical Thinking and Procedural Media 7 | University of Southern California 8 | 9 | **p5.slides** is a [p5.js](https://p5js.org/) application for the design of custom slide decks with dynamic content. You may find this useful for everything from class presentations to professional keynotes. Press [here](https://garrettmflynn.github.io/p5.js-slides/app/) to try it out! 10 | 11 | ## Getting Started 12 | [![Youtube Video](p5_slides.png)](https://youtu.be/AZN1mE8sXXU) 13 | **Video Introduction:** 10 Most Common Actions, Skills Learned, Lessons Learned, and How to Contribute. 14 | 15 | Try out the [Alpha Release](https://garrettmflynn.github.io/p5.js-slides/app/). 16 | 17 | ## Known Bugs 18 | ### Saving 19 | 1. Does not maintain shapes or transitions 20 | 2. Does not allow for presenting 21 | 22 | ### Editing 23 | 1. Content (i.e. text boxes, sketches, shapes, etc) cannot be removed once added 24 | 2. Content (i.e. text boxes, sketches, shapes, etc) cannot be translated once added 25 | 3. No way to change color palette 26 | 27 | ### Presenting 28 | 1. Severe performance issues when adding many sketches to a slide deck 29 | 30 | ## Reference 31 | 32 | **P5.slides** contains three objects: 33 | 1. **p5.slidesUI()**: The GUI and deck holder 34 | 2. **p5.slideDeck()**: Individual decks 35 | 3. **p5.PresentationAssets()**: Holder for P5 parameters (text/shapes) 36 | 37 | ### p5.slidesUI 38 | #### Methods 39 | ##### Global Variables 40 | * **allGlobalVariables**: Initialize global variables 41 | 42 | ##### Main Looping Functions 43 | * **display**: Display current slide on the GUI 44 | * **checkInteraction**: Check whether any interactions have occurred during the past loop 45 | 46 | ##### Populate the UI with Buttons 47 | * **createSidebars**: Create and populate GUI sidebars 48 | * **showDeckTabs**: Update existing deck tabs 49 | 50 | ##### Display Modes 51 | * **editMode**: Switch GUI to edit mode 52 | * **presentMode**: Switch GUI to present mode 53 | 54 | ##### Change the Elements on the Screen 55 | * **textResizer**: Resize text to (sub)header or body text specifications 56 | * **toggleCanvases**: Remove and add canvases to the GUI 57 | * **toggleEditText**: Remove p5 text text and add HTML input boxes to the GUI 58 | * **togglePresentationAssets**: Convert HTML to P5 (for use in animations/transitions) 59 | * **togglePresentText**: Remove HTML input boxes and add p5 text to the GUI 60 | * **drawFromTouch**: Place text OR sketches based on mouse input 61 | 62 | ##### Remap Current Elements after Window Size Changes 63 | * **iframeRemapper**: Resize iframe objects in relation to current window 64 | * **textRemapper**: Resize current text objects in relation to current window 65 | 66 | ##### Save Slides 67 | * **saveSlides**: Save all slide decks 68 | * **JSONify**: Convert deck array into a JSON-able format 69 | * **unpackJSON**: Convert a saved JSON into the deck array for a new GUI session 70 | 71 | ### p5.slideDeck 72 | #### Methods 73 | * **addSlides**: Add new slide to deck 74 | * **slideTemplates**: Determine which template to apply to current slide 75 | 76 | ### p5.PresentationAssets 77 | #### Methods 78 | * **display**: Display presentation assets in the specified format 79 | * Current formats include shapes and text (which can further be converted into particles) 80 | * **particleDraw**: Calculate particle animations 81 | -------------------------------------------------------------------------------- /app/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/.DS_Store -------------------------------------------------------------------------------- /app/.idea/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Default ignored files 3 | /workspace.xml -------------------------------------------------------------------------------- /app/.idea/app.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /app/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /app/.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /app/defaultSketches.json: -------------------------------------------------------------------------------- 1 | { 2 | "Perlin Rectangle": "https://editor.p5js.org/gflynn/embed/GqaBRT1hi", 3 | "Perlin Circle": "https://editor.p5js.org/gflynn/embed/3LLp5nyXP", 4 | "KaleidoParticles": "https://editor.p5js.org/gflynn/embed/9HUV7T5IN", 5 | "PlaneToSphere": "https://editor.p5js.org/gflynn/embed/JabdDVj1V" 6 | } 7 | -------------------------------------------------------------------------------- /app/fonts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/fonts/.DS_Store -------------------------------------------------------------------------------- /app/fonts/Inconsolata-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/fonts/Inconsolata-Bold.otf -------------------------------------------------------------------------------- /app/fonts/Inconsolata-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/fonts/Inconsolata-Regular.otf -------------------------------------------------------------------------------- /app/icons/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/.DS_Store -------------------------------------------------------------------------------- /app/icons/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/circle.png -------------------------------------------------------------------------------- /app/icons/close-round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/close-round.png -------------------------------------------------------------------------------- /app/icons/close-square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/close-square.png -------------------------------------------------------------------------------- /app/icons/color-fill-tool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/color-fill-tool.png -------------------------------------------------------------------------------- /app/icons/cross-arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/cross-arrows.png -------------------------------------------------------------------------------- /app/icons/edit-document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/edit-document.png -------------------------------------------------------------------------------- /app/icons/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/font.png -------------------------------------------------------------------------------- /app/icons/icon_P1.png.icon_P1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/icon_P1.png.icon_P1.png -------------------------------------------------------------------------------- /app/icons/long-arrow-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/long-arrow-left.png -------------------------------------------------------------------------------- /app/icons/magic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/magic.png -------------------------------------------------------------------------------- /app/icons/magnifying-glass-zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/magnifying-glass-zoom.png -------------------------------------------------------------------------------- /app/icons/monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/monitor.png -------------------------------------------------------------------------------- /app/icons/object-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/object-selected.png -------------------------------------------------------------------------------- /app/icons/p5-asterisk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/p5-asterisk.png -------------------------------------------------------------------------------- /app/icons/p5-sq-reverse-filled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/p5-sq-reverse-filled.png -------------------------------------------------------------------------------- /app/icons/paint-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/paint-palette.png -------------------------------------------------------------------------------- /app/icons/play-round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/play-round.png -------------------------------------------------------------------------------- /app/icons/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/play.png -------------------------------------------------------------------------------- /app/icons/plus-round-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/plus-round-line.png -------------------------------------------------------------------------------- /app/icons/plus-square-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/plus-square-line.png -------------------------------------------------------------------------------- /app/icons/recycle-bin-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/recycle-bin-line.png -------------------------------------------------------------------------------- /app/icons/recycle-bin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/recycle-bin.png -------------------------------------------------------------------------------- /app/icons/save.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/save.png -------------------------------------------------------------------------------- /app/icons/sketches/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/sketches/.DS_Store -------------------------------------------------------------------------------- /app/icons/sketches/DefaultIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/sketches/DefaultIcon.png -------------------------------------------------------------------------------- /app/icons/sketches/KaleidoParticles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/sketches/KaleidoParticles.png -------------------------------------------------------------------------------- /app/icons/sketches/Perlin Circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/sketches/Perlin Circle.png -------------------------------------------------------------------------------- /app/icons/sketches/Perlin Rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/sketches/Perlin Rectangle.png -------------------------------------------------------------------------------- /app/icons/sketches/PlaneToSphere.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/sketches/PlaneToSphere.png -------------------------------------------------------------------------------- /app/icons/slideshow-line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/slideshow-line.png -------------------------------------------------------------------------------- /app/icons/slideshow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/slideshow.png -------------------------------------------------------------------------------- /app/icons/spark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/spark.png -------------------------------------------------------------------------------- /app/icons/square.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/square.png -------------------------------------------------------------------------------- /app/icons/text-document-add (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/text-document-add (1).png -------------------------------------------------------------------------------- /app/icons/text-document-add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/text-document-add.png -------------------------------------------------------------------------------- /app/icons/text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/text.png -------------------------------------------------------------------------------- /app/icons/triangle-top-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/app/icons/triangle-top-arrow.png -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /app/p5.slides.js: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | PS.SLIDES 4 | Written by Garrett Flynn | December 2019 5 | */ 6 | 7 | 8 | // ============================================================================= 9 | // p5.SlidesUI 10 | // ============================================================================= 11 | /** 12 | * Base class for the p5.slides user interface 13 | * 14 | * @class p5.SlidesUI 15 | * @constructor 16 | */ 17 | p5.SlidesUI = function(savedDecks,sketchesToLoad) { 18 | this.decks = []; 19 | this.loadedSketches = []; 20 | 21 | // load supplied sketches 22 | keys = Object.keys(sketchesToLoad); 23 | for (let i = 0; i < keys.length; i++){ 24 | this.loadedSketches.push([keys[i],sketchesToLoad[keys[i]]]); 25 | } 26 | 27 | this.allGlobalVariables(1); 28 | 29 | // load old decks if available, or create a new deck 30 | if (savedDecks === undefined || savedDecks.length == 0) { 31 | this.margins = MAIN_CANVAS.width/24; 32 | this.allGlobalVariables(2); 33 | this.createSidebars(); 34 | 35 | this.decks.push(new p5.SlideDeck('Intro to P5.Slides')); 36 | 37 | // add template slides 38 | let slides_to_create = 4; 39 | this.decks[CURRENTDECK - 1].addSlides(slides_to_create); 40 | 41 | // create first deck tab 42 | this.showDeckTabs(this.decks); 43 | } else { 44 | this.unpackJSON(savedDecks); 45 | this.allGlobalVariables(2); 46 | this.createSidebars(); 47 | this.showDeckTabs(this.decks); 48 | } 49 | 50 | this.allGlobalVariables(3); 51 | } 52 | p5.prototype.registerPreloadMethod('SlidesUI', p5.SlidesUI); 53 | 54 | p5.SlidesUI.prototype.allGlobalVariables = function(set){ 55 | 56 | 57 | 58 | if (set == 1) { 59 | MAIN_CANVAS = createCanvas(windowWidth, windowHeight); 60 | TRACKED_TOUCHES = ''; 61 | TEXTCOUNT = 0; 62 | if (this.margins !== undefined) { 63 | MARGINS = this.margins; 64 | } else { 65 | MARGINS = null; 66 | } 67 | } else if (set == 2) { 68 | if (this.margins !== undefined) { 69 | MARGINS = this.margins; 70 | } 71 | CANVAS_TRANSPORTER = null; 72 | TOGGLED = true; 73 | TOGGLE_SAVE = false; 74 | DRAW_FROM_TOUCH = ''; 75 | REVISION_TOGGLE = false; 76 | CURRENTDECK = 1; 77 | CURRENTSLIDE = 1; 78 | PREVSLIDE = null; 79 | Y_BOUNDS = []; 80 | X_BOUNDS = []; 81 | TOGGLED = true; 82 | CHOSEN_OBJ = null; 83 | NEWOBJS_ = null; 84 | DRAWNOW = false; 85 | IN_OR_OUT = ''; 86 | 87 | // fonts 88 | FONTS_2 = createElement('link'); 89 | FONTS_2.attribute('href','https://fonts.googleapis.com/css?family=Inconsolata:400,700&display=swap'); 90 | FONTS_2.attribute('rel','stylesheet'); 91 | FONTS = [loadFont('fonts/Inconsolata-Bold.otf'), loadFont('fonts/Inconsolata-Regular.otf')]; 92 | 93 | SIDEBAR_SIZEY = height/20; 94 | SIDEBAR_SIZEX = width/6; 95 | 96 | START_ANIMATION = [[]]; 97 | } else if (set == 3){ 98 | DECKS = this.decks; 99 | NUMDECKS = this.decks.length; 100 | MAXSLIDE = this.decks[CURRENTDECK-1].deckLength; 101 | LOGGED_SIZES = []; 102 | } 103 | } 104 | 105 | // Main Looping Functions 106 | p5.SlidesUI.prototype.display = function() { 107 | 108 | if (this.decks.length != 0) { 109 | background('#ffffff'); 110 | 111 | 112 | // Toggles 113 | 114 | // resize existing text 115 | this.textResizer(); 116 | 117 | // toggle drawing from user input 118 | if (DRAWNOW) { 119 | this.drawFromTouch(); 120 | TRACKED_TOUCHES = ''; 121 | DRAWNOW = false; 122 | } 123 | 124 | // toggle slide addition 125 | if (REVISION_TOGGLE || this.decks[CURRENTDECK - 1].deckLength == 0) { 126 | this.decks[CURRENTDECK - 1].addSlides(1); 127 | REVISION_TOGGLE = null; 128 | } 129 | 130 | // toggle save 131 | if (TOGGLE_SAVE){ 132 | this.saveSlides(); 133 | TOGGLE_SAVE = false; 134 | } 135 | 136 | // toggle non-HTML elements 137 | this.togglePresentationAssets(); 138 | 139 | // toggle created elements 140 | if (TOGGLED) { 141 | this.toggleCanvases(); 142 | this.iframeRemapper(); 143 | this.inputRemapper(); 144 | this.toggleEditText(); 145 | } 146 | 147 | 148 | // turn off toggle 149 | if (TOGGLED) { 150 | TOGGLED = false; 151 | } 152 | 153 | // Variable Passing 154 | NUMDECKS = this.decks.length; 155 | this.decks[CURRENTDECK-1].currentSlide = CURRENTSLIDE; 156 | MAXSLIDE = this.decks[CURRENTDECK-1].deckLength; 157 | MARGINS = this.decks[CURRENTDECK-1].margins; 158 | 159 | // Show available slides at the bottom left 160 | textSize(20); 161 | textAlign(RIGHT,BOTTOM); 162 | stroke('#eb7899'); 163 | fill('#eb7899'); 164 | strokeWeight(1); 165 | text(CURRENTSLIDE + '/' + MAXSLIDE,width-15,height-10); 166 | } 167 | } 168 | p5.SlidesUI.prototype.checkInteraction = function(){ 169 | 170 | drawShapeOutlines(); 171 | DECKS = this.decks; 172 | 173 | if (NEWOBJS_ != null) { 174 | this.decks.push(NEWOBJS_); 175 | this.decks[this.decks.length-1].addSlides(1); 176 | this.showDeckTabs(this.decks); 177 | } 178 | 179 | for (let i = 0; i < DECK_TABS.length; i++){ 180 | DECK_TABS[i].mousePressed(SWITCHDECK); 181 | } 182 | 183 | 184 | NEWOBJS_ = null; 185 | 186 | } 187 | 188 | // Populate the UI 189 | p5.SlidesUI.prototype.createSidebars = function(){ 190 | // Create Sidebars 191 | 192 | SIDEBAR = createDiv(); 193 | SIDEBAR.id('sidebar'); 194 | SIDEBAR.size(SIDEBAR_SIZEX,height); 195 | SIDEBAR.position(0,0); 196 | SIDEBAR.style('background-color','#282828'); 197 | SIDEBAR.style('z-index', 10); 198 | 199 | // resize main canvas 200 | MAIN_CANVAS.size(windowWidth-SIDEBAR_SIZEX,height); 201 | MAIN_CANVAS.position(SIDEBAR_SIZEX,0); 202 | 203 | EDITSIDEBAR = createDiv(); 204 | EDITSIDEBAR.id('editbar'); 205 | EDITSIDEBAR.parent('sidebar'); 206 | EDITSIDEBAR.size(SIDEBAR_SIZEX,height); 207 | EDITSIDEBAR.position(0,0); 208 | EDITSIDEBAR.style('background-color','#282828'); 209 | EDITSIDEBAR.style('z-index', 10) 210 | 211 | SKETCHBAR = createDiv(); 212 | SKETCHBAR.id('sketchbar'); 213 | SKETCHBAR.parent('sidebar'); 214 | SKETCHBAR.size(SIDEBAR_SIZEX,height); 215 | SKETCHBAR.position(0,0); 216 | SKETCHBAR.style('background-color','#282828'); 217 | SKETCHBAR.style('z-index', 10); 218 | SKETCHBAR.hide(); 219 | 220 | TEXTBAR1 = createDiv(); 221 | TEXTBAR1.id('textbar1'); 222 | TEXTBAR1.parent('sidebar'); 223 | TEXTBAR1.size(SIDEBAR_SIZEX,height); 224 | TEXTBAR1.position(0,0); 225 | TEXTBAR1.style('background-color','#282828'); 226 | TEXTBAR1.style('z-index', 10); 227 | TEXTBAR1.hide(); 228 | 229 | TEXTBAR2 = createDiv(); 230 | TEXTBAR2.id('textbar2'); 231 | TEXTBAR2.size(SIDEBAR_SIZEX,SIDEBAR_SIZEX/4); 232 | TEXTBAR2.style('background-color','transparent'); 233 | TEXTBAR2.style('z-index', 10); 234 | TEXTBAR2.hide(); 235 | 236 | DECKBAR = createDiv(); 237 | DECKBAR.id('deckbar'); 238 | DECKBAR.parent('sidebar'); 239 | DECKBAR.size(SIDEBAR_SIZEX,height); 240 | DECKBAR.position(0,0); 241 | DECKBAR.style('background-color','#282828'); 242 | DECKBAR.style('z-index', 10); 243 | DECKBAR.hide(); 244 | 245 | SHAPEBAR = createDiv(); 246 | SHAPEBAR.id('shapebar'); 247 | SHAPEBAR.parent('sidebar'); 248 | SHAPEBAR.size(SIDEBAR_SIZEX,height); 249 | SHAPEBAR.position(0,0); 250 | SHAPEBAR.style('background-color','#282828'); 251 | SHAPEBAR.style('z-index', 10); 252 | SHAPEBAR.hide(); 253 | 254 | // create 'edit mode' button 255 | EDIT_BUTTON = createImg('icons/edit-document.png'); 256 | EDIT_BUTTON.position(0, 0); 257 | EDIT_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 258 | EDIT_BUTTON.style('z-index', 11); 259 | EDIT_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 260 | EDIT_BUTTON.style('opacity','0'); 261 | EDIT_BUTTON.style('background-color','#eb7899'); 262 | EDIT_BUTTON.hide(); 263 | EDIT_BUTTON.mousePressed(this.editMode); 264 | EDIT_BUTTON.mouseOver(ON_HOVER); 265 | EDIT_BUTTON.mouseOut(OFF); 266 | 267 | // create 'present mode' button 268 | PRESENT_BUTTON = createImg('icons/monitor.png'); 269 | PRESENT_BUTTON.parent('editbar'); 270 | PRESENT_BUTTON.style('box-sizing','border-box'); 271 | PRESENT_BUTTON.size(2*SIDEBAR_SIZEX/3,2*SIDEBAR_SIZEX/3); 272 | PRESENT_BUTTON.style('padding',SIDEBAR_SIZEX/6 + 'px'); 273 | PRESENT_BUTTON.style('background-color','#eb7899'); 274 | PRESENT_BUTTON.mousePressed(this.presentMode); 275 | 276 | // create new deck button 277 | VIEWDECKS_BUTTON = createImg('icons/slideshow-line.png'); 278 | VIEWDECKS_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 279 | VIEWDECKS_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 280 | VIEWDECKS_BUTTON.parent('editbar') 281 | VIEWDECKS_BUTTON.style('position','absolute'); 282 | VIEWDECKS_BUTTON.style('left','0'); 283 | VIEWDECKS_BUTTON.style('bottom','0'); 284 | VIEWDECKS_BUTTON.style('background-color','#eb7899'); 285 | VIEWDECKS_BUTTON.mousePressed(TOGGLE_DECKBAR); 286 | 287 | NEWDECK_BUTTON = createImg('icons/text-document-add.png'); 288 | NEWDECK_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 289 | NEWDECK_BUTTON.parent('deckbar'); 290 | NEWDECK_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 291 | NEWDECK_BUTTON.style('position','absolute'); 292 | NEWDECK_BUTTON.style('left','0'); 293 | NEWDECK_BUTTON.style('bottom',str((SIDEBAR_SIZEX/3)) + 'px'); 294 | NEWDECK_BUTTON.style('background-color','#6c6c6c'); 295 | NEWDECK_BUTTON.mousePressed(NEWDECK); 296 | 297 | // create add slides button 298 | ADDSLIDE_BUTTON = createImg('icons/plus-round-line.png'); 299 | ADDSLIDE_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 300 | ADDSLIDE_BUTTON.parent('editbar'); 301 | ADDSLIDE_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 302 | ADDSLIDE_BUTTON.style('position','absolute'); 303 | ADDSLIDE_BUTTON.style('left',str((SIDEBAR_SIZEX/3)) + 'px'); 304 | ADDSLIDE_BUTTON.style('bottom','0'); 305 | ADDSLIDE_BUTTON.style('background-color','#6c6c6c'); 306 | ADDSLIDE_BUTTON.mousePressed(ADDSLIDE); 307 | 308 | // create save button 309 | SAVE_BUTTON = createImg('icons/save.png'); 310 | SAVE_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 311 | SAVE_BUTTON.parent('editbar'); 312 | SAVE_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 313 | SAVE_BUTTON.style('position','absolute'); 314 | SAVE_BUTTON.style('right','0'); 315 | SAVE_BUTTON.style('bottom','0'); 316 | SAVE_BUTTON.style('background-color','#9aaab1'); 317 | SAVE_BUTTON.mousePressed(SAVE_DECKS); 318 | 319 | // create button to add text to your slides 320 | TEXT_BUTTON = createImg('icons/text.png'); 321 | TEXT_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 322 | TEXT_BUTTON.parent('editbar'); 323 | TEXT_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 324 | TEXT_BUTTON.style('position','absolute'); 325 | TEXT_BUTTON.style('top','0'); 326 | TEXT_BUTTON.style('right','0'); 327 | TEXT_BUTTON.style('background-color','#ED225D'); 328 | TEXT_BUTTON.mousePressed(TOGGLE_TEXTBAR1); 329 | 330 | // create button to add text to your slides 331 | SHAPE_BUTTON = createImg('icons/circle.png'); 332 | SHAPE_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 333 | SHAPE_BUTTON.parent('editbar'); 334 | SHAPE_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 335 | SHAPE_BUTTON.style('position','absolute'); 336 | SHAPE_BUTTON.style('top',SIDEBAR_SIZEX/3 + 'px'); 337 | SHAPE_BUTTON.style('right','0'); 338 | SHAPE_BUTTON.style('background-color','#ED225D'); 339 | SHAPE_BUTTON.mousePressed(TOGGLE_SHAPEBAR); 340 | 341 | // create button to animate text 342 | TRANSITION_BUTTON = createImg('icons/spark.png'); 343 | TRANSITION_BUTTON.parent('editbar'); 344 | TRANSITION_BUTTON.id('animate'); 345 | TRANSITION_BUTTON.size(SIDEBAR_SIZEX/6,SIDEBAR_SIZEX/6); 346 | TRANSITION_BUTTON.style('padding',SIDEBAR_SIZEX/12 + 'px'); 347 | TRANSITION_BUTTON.style('position','absolute'); 348 | TRANSITION_BUTTON.style('top',2*SIDEBAR_SIZEX/3 + 'px'); 349 | TRANSITION_BUTTON.style('left','0'); 350 | TRANSITION_BUTTON.style('background-color','#ED225D'); 351 | TRANSITION_BUTTON.mousePressed(TOGGLE_TRANSITION); 352 | 353 | // empty button 354 | EMPTY_DIV = createDiv(); 355 | EMPTY_DIV.parent('editbar'); 356 | EMPTY_DIV.size(SIDEBAR_SIZEX/3,SIDEBAR_SIZEX/3); 357 | EMPTY_DIV.style('position','absolute'); 358 | EMPTY_DIV.style('top',2*SIDEBAR_SIZEX/3 + 'px'); 359 | EMPTY_DIV.style('right','0'); 360 | EMPTY_DIV.style('background-color','#eb7899'); 361 | 362 | // buttons to place sketches into the canvas 363 | ADDSKETCH_BUTTON = createImg('icons/p5-sq-reverse-filled.png'); 364 | ADDSKETCH_BUTTON.size(SIDEBAR_SIZEX/4,SIDEBAR_SIZEX/4); 365 | ADDSKETCH_BUTTON.parent('editbar'); 366 | ADDSKETCH_BUTTON.style('padding',SIDEBAR_SIZEX/24 + 'px'); 367 | ADDSKETCH_BUTTON.style('position','absolute'); 368 | ADDSKETCH_BUTTON.style('top',2*SIDEBAR_SIZEX/3 + 'px'); 369 | ADDSKETCH_BUTTON.style('left',SIDEBAR_SIZEX/3 + 'px'); 370 | ADDSKETCH_BUTTON.style('background-color','#ED225D'); 371 | ADDSKETCH_BUTTON.mousePressed(TOGGLE_SKETCHBAR); 372 | 373 | // create & display (text) types 374 | let cOptions = ['#ED225D','#eb7899']; 375 | 376 | // header text 377 | TEXT_TYPES = []; 378 | TEXT_TYPES[0] = createButton('Header'); 379 | TEXT_TYPES[0].id('headerbutton') 380 | TEXT_TYPES[0].size(SIDEBAR_SIZEX,2*SIDEBAR_SIZEY); 381 | TEXT_TYPES[0].parent('textbar1'); 382 | TEXT_TYPES[0] = formatAllText(TEXT_TYPES[0]); 383 | TEXT_TYPES[0] = formatHeader(TEXT_TYPES[0]); 384 | TEXT_TYPES[0].style('font-size', str(2*SIDEBAR_SIZEY/3) + 'px'); 385 | TEXT_TYPES[0].style('background-color',cOptions[1]); 386 | TEXT_TYPES[0].style('border','none'); 387 | TEXT_TYPES[0].mousePressed(TEXT_HEADER); 388 | 389 | // subheader text 390 | TEXT_TYPES[1] = createButton('Subheader'); 391 | TEXT_TYPES[1].size(SIDEBAR_SIZEX,2*SIDEBAR_SIZEY); 392 | TEXT_TYPES[1].id('subheaderbutton') 393 | TEXT_TYPES[1].parent('textbar1'); 394 | TEXT_TYPES[1] = formatAllText(TEXT_TYPES[1]); 395 | TEXT_TYPES[1] = formatSubheader(TEXT_TYPES[1]); 396 | TEXT_TYPES[1].style('background-color',cOptions[0]); 397 | TEXT_TYPES[1].style('border','none'); 398 | TEXT_TYPES[1].style('font-size', str(2*SIDEBAR_SIZEY/3) + 'px'); 399 | TEXT_TYPES[1].mousePressed(TEXT_SUBHEADER); 400 | 401 | // body text 402 | TEXT_TYPES[2] = createButton('Body Text'); 403 | TEXT_TYPES[2].size(SIDEBAR_SIZEX,2*SIDEBAR_SIZEY); 404 | TEXT_TYPES[1].id('bodybutton') 405 | TEXT_TYPES[2].parent('textbar1'); 406 | TEXT_TYPES[2] = formatAllText(TEXT_TYPES[2]); 407 | TEXT_TYPES[2] = formatBody(TEXT_TYPES[2]); 408 | TEXT_TYPES[2].style('font-size', str(2*SIDEBAR_SIZEY/3) + 'px'); 409 | TEXT_TYPES[2].style('background-color',cOptions[1]); 410 | TEXT_TYPES[2].style('border','none'); 411 | TEXT_TYPES[2].mousePressed(TEXT_BODY); 412 | 413 | 414 | // create tabs to signify loaded sketch URLs 415 | SKETCH_TABS = []; 416 | let l = this.loadedSketches.length 417 | let y_iter = SIDEBAR_SIZEX/4; 418 | let path = ''; 419 | for (let s = 0; s < l; s++) { 420 | if (s < 4) { 421 | path = 'icons/sketches/' + this.loadedSketches[s][0] + '.png'; 422 | } else{ 423 | path = 'icons/sketches/DefaultIcon.png'; 424 | } 425 | SKETCH_TABS[s] = createImg(path) ; 426 | SKETCH_TABS[s].attribute('url', this.loadedSketches[s][1]); 427 | SKETCH_TABS[s].id('sketchtab' + s); 428 | SKETCH_TABS[s].position(0,(s)*y_iter); 429 | SKETCH_TABS[s].style('box-sizing','border-box'); 430 | //SKETCH_TABS[s].style('background-color',cOptions[s%2]); 431 | SKETCH_TABS[s].mousePressed(OBJ_CHOSEN); 432 | SKETCH_TABS[s].size(5*SIDEBAR_SIZEX/6, y_iter); 433 | SKETCH_TABS[s].parent('sketchbar'); 434 | } 435 | 436 | SKETCH_TABS[l] = createInput('Input your URL here'); 437 | SKETCH_TABS[l].id('url_input') 438 | SKETCH_TABS[l].parent('sketchbar'); 439 | SKETCH_TABS[l].position(0,(l)*y_iter); 440 | SKETCH_TABS[l].size(5*SIDEBAR_SIZEX/6, y_iter); 441 | SKETCH_TABS[l].style('text-align','center'); 442 | SKETCH_TABS[l].style('box-sizing','border-box'); 443 | SKETCH_TABS[l].mousePressed(OBJ_CHOSEN); 444 | 445 | SKETCH_TABS[l+1] = createImg('icons/object-selected.png'); 446 | SKETCH_TABS[l+1].parent('sketchbar'); 447 | let y_extent = (l+1)*y_iter; 448 | let x_extent = SIDEBAR_SIZEX/6; 449 | let x_pad = SIDEBAR_SIZEX/24; 450 | let s_ = x_extent- 2*x_pad; 451 | let y_pad = (y_extent - s_)/2; 452 | SKETCH_TABS[l+1].style('padding-left',x_pad + 'px'); 453 | SKETCH_TABS[l+1].style('padding-right',x_pad + 'px'); 454 | SKETCH_TABS[l+1].style('padding-top',y_pad + 'px'); 455 | SKETCH_TABS[l+1].style('padding-bottom',y_pad + 'px'); 456 | SKETCH_TABS[l+1].size(s_, s_); 457 | SKETCH_TABS[l+1].style('background-color','#ED225D'); 458 | SKETCH_TABS[l+1].style('text-align','center'); 459 | SKETCH_TABS[l+1].style('position','absolute'); 460 | SKETCH_TABS[l+1].style('top','0'); 461 | SKETCH_TABS[l+1].style('right','0'); 462 | SKETCH_TABS[l+1].mousePressed(SKETCH_PLACEMENT); 463 | 464 | 465 | // create tabs to signify text manipulation 466 | // TEXT_TABS = []; 467 | // TEXT_TABS[0] = createImg('icons/cross-arrows.png'); 468 | // TEXT_TABS[0].parent('textbar2'); 469 | // TEXT_TABS[0].id('move'); 470 | // TEXT_TABS[0].size(SIDEBAR_SIZEX/4,SIDEBAR_SIZEX/4); 471 | // //TEXT_TABS[0].style('padding',SIDEBAR_SIZEX/6 + 'px'); 472 | // TEXT_TABS[0].style('box-sizing','border-box'); 473 | // TEXT_TABS[0].style('opacity',.6); 474 | // TEXT_TABS[0].style('background-color',cOptions[0]); 475 | // TEXT_TABS[0].mousePressed(OBJ_CHOSEN); 476 | 477 | // create button to color text 478 | // TEXT_TABS[1] = createImg('icons/color-fill-tool.png'); 479 | // TEXT_TABS[1].parent('textbar2'); 480 | // TEXT_TABS[1].id('color'); 481 | // TEXT_TABS[1].size(SIDEBAR_SIZEX/4,SIDEBAR_SIZEX/4); 482 | // TEXT_TABS[1].style('box-sizing','border-box'); 483 | // TEXT_TABS[1].style('opacity',.6); 484 | // //TEXT_TABS[1].style('padding',SIDEBAR_SIZEX/6 + 'px'); 485 | // TEXT_TABS[1].style('background-color',cOptions[1]); 486 | // TEXT_TABS[1].mousePressed(OBJ_CHOSEN); 487 | 488 | // create button to scale text (box) 489 | // TEXT_TABS[2] = createImg('icons/magnifying-glass-zoom.png'); 490 | // TEXT_TABS[2].parent('textbar2'); 491 | // TEXT_TABS[2].id('scale'); 492 | // TEXT_TABS[2].size(SIDEBAR_SIZEX/4,SIDEBAR_SIZEX/4); 493 | // TEXT_TABS[2].style('box-sizing','border-box'); 494 | // TEXT_TABS[2].style('opacity',.6); 495 | // //TEXT_TABS[2].style('padding',SIDEBAR_SIZEX/12 + 'px'); 496 | // TEXT_TABS[2].style('background-color',cOptions[1]); 497 | // TEXT_TABS[2].mousePressed(OBJ_CHOSEN); 498 | 499 | 500 | // create tabs to signify shape creation 501 | SHAPE_TABS = []; 502 | SHAPE_TABS[0] = createImg('icons/circle.png'); 503 | SHAPE_TABS[0].parent('shapebar'); 504 | SHAPE_TABS[0].size(SIDEBAR_SIZEX/8,SIDEBAR_SIZEX/8); 505 | SHAPE_TABS[0].style('padding',SIDEBAR_SIZEX/16 + 'px'); 506 | SHAPE_TABS[0].style('background-color',cOptions[0]); 507 | SHAPE_TABS[0].mousePressed(SHAPE_ELLIPSE); 508 | 509 | // create button to create rectangle 510 | SHAPE_TABS[1] = createImg('icons/square.png'); 511 | SHAPE_TABS[1].parent('shapebar'); 512 | SHAPE_TABS[1].size(SIDEBAR_SIZEX/8,SIDEBAR_SIZEX/8); 513 | SHAPE_TABS[1].style('padding',SIDEBAR_SIZEX/16 + 'px'); 514 | SHAPE_TABS[1].style('background-color',cOptions[1]); 515 | SHAPE_TABS[1].mousePressed(SHAPE_RECT); 516 | 517 | 518 | // create button to create triangle 519 | SHAPE_TABS[2] = createImg('icons/triangle-top-arrow.png'); 520 | SHAPE_TABS[2].parent('shapebar'); 521 | SHAPE_TABS[2].size(SIDEBAR_SIZEX/8,SIDEBAR_SIZEX/8); 522 | SHAPE_TABS[2].style('padding',SIDEBAR_SIZEX/16 + 'px'); 523 | SHAPE_TABS[2].style('background-color',cOptions[0]); 524 | SHAPE_TABS[2].mousePressed(SHAPE_TRIANGLE); 525 | 526 | 527 | // create button to create arrow 528 | SHAPE_TABS[3] = createImg('icons/long-arrow-left.png'); 529 | SHAPE_TABS[3].parent('shapebar'); 530 | SHAPE_TABS[3].size(SIDEBAR_SIZEX/8,SIDEBAR_SIZEX/8); 531 | SHAPE_TABS[3].style('padding',SIDEBAR_SIZEX/16 + 'px'); 532 | SHAPE_TABS[3].style('background-color',cOptions[1]); 533 | SHAPE_TABS[3].mousePressed(SHAPE_ARROW); 534 | 535 | 536 | GOBACK_BUTTON = createImg('icons/close-round.png'); 537 | GOBACK_BUTTON.size(2*SIDEBAR_SIZEX/12,SIDEBAR_SIZEX/6); 538 | GOBACK_BUTTON.style('padding-left',5*SIDEBAR_SIZEX/12 + 'px'); 539 | GOBACK_BUTTON.style('padding-right',5*SIDEBAR_SIZEX/12 + 'px'); 540 | GOBACK_BUTTON.style('padding-top',SIDEBAR_SIZEX/12+ 'px'); 541 | GOBACK_BUTTON.style('padding-bottom',SIDEBAR_SIZEX/12 + 'px'); 542 | GOBACK_BUTTON.hide(); 543 | GOBACK_BUTTON.mousePressed(BACK_TO_SIDEBAR); 544 | GOBACK_BUTTON.style('position','absolute'); 545 | GOBACK_BUTTON.style('bottom','0'); 546 | GOBACK_BUTTON.style('background-color','#9f9498'); 547 | GOBACK_BUTTON.style('z-index', 11); 548 | 549 | DECK_TABS = []; 550 | } 551 | p5.SlidesUI.prototype.showDeckTabs = function(decks){ 552 | let cOptions = ['#eb7899','#6c6c6c']; 553 | let tabDiff = (decks.length - DECK_TABS.length); 554 | let tab = null; 555 | // add new tabs if necessary 556 | for (let j = tabDiff; j > 0; j--){ 557 | tab = createButton(decks[decks.length-j].name); 558 | tab.id('decktab' + DECK_TABS.length); 559 | tab.style('z-index', 7); 560 | tab.parent('deckbar'); 561 | tab.size(SIDEBAR_SIZEX,SIDEBAR_SIZEY); 562 | tab = formatAllText(tab); 563 | tab = formatHeader(tab); 564 | tab.style('color','#fff') 565 | DECK_TABS.push(tab); 566 | } 567 | 568 | for (let j = 0; j < decks.length; j++){ 569 | DECK_TABS[j].style('background-color',cOptions[j%2]); 570 | } 571 | } 572 | 573 | // Display Modes 574 | p5.SlidesUI.prototype.editMode = function() { 575 | PRESENT_BUTTON.show(); 576 | EDIT_BUTTON.hide(); 577 | SIDEBAR.show(); 578 | MAIN_CANVAS.size(windowWidth - SIDEBAR_SIZEX, windowHeight); 579 | MAIN_CANVAS.position(SIDEBAR_SIZEX, 0); 580 | TOGGLED = true; 581 | PREVSLIDE = CURRENTSLIDE; 582 | } 583 | p5.SlidesUI.prototype.presentMode = function() { 584 | PRESENT_BUTTON.hide(); 585 | EDIT_BUTTON.show(); 586 | TEXTBAR2.hide(); 587 | SIDEBAR.hide(); 588 | TOGGLED = true; 589 | PREVSLIDE = CURRENTSLIDE; 590 | IN_OR_OUT = ''; 591 | 592 | MAIN_CANVAS.size(windowWidth,windowHeight); 593 | MAIN_CANVAS.position(0,0); 594 | } 595 | 596 | // Effect changes (in the current display loop) 597 | p5.SlidesUI.prototype.textResizer = function() { 598 | 599 | let val = null; 600 | let s = null; 601 | let w = null; 602 | let font = null; 603 | let currentText = null; 604 | 605 | 606 | if (this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1] !== undefined) { 607 | for (let j = 0; j < this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1].length; j++) { 608 | // j = specific bit of text 609 | currentText = this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1][j]; 610 | textSize(1); 611 | 612 | val = currentText.value(); 613 | if (currentText.attribute('type') == 'header') { 614 | w = textWidth(val.toUpperCase()); 615 | } else { 616 | w = textWidth(val); 617 | } 618 | s = currentText.size(); 619 | font = min([(s.width / w)*.9, s.height*.8]); 620 | currentText.style('font-size', font + 'px'); 621 | currentText.mousePressed(TOGGLE_TEXTBAR2); 622 | } 623 | } 624 | } 625 | p5.SlidesUI.prototype.toggleCanvases = function(){ 626 | 627 | // initialize empty canvas holders 628 | 629 | if (this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1] === undefined) { 630 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1] = []; 631 | } 632 | 633 | // hide previous sketches 634 | if (PREVSLIDE != null) { 635 | let canvases = this.decks[CURRENTDECK - 1].canvases[PREVSLIDE - 1]; 636 | for (let c = 0; c < canvases.length; c++) { 637 | this.decks[CURRENTDECK - 1].canvases[PREVSLIDE - 1][c].hide(); 638 | } 639 | } 640 | 641 | 642 | 643 | if (this.decks[CURRENTDECK - 1].sketches[CURRENTSLIDE - 1] === undefined){ 644 | this.decks[CURRENTDECK - 1].sketches[CURRENTSLIDE - 1] = []; 645 | } 646 | 647 | let sketchesForSlide = this.decks[CURRENTDECK - 1].sketches[CURRENTSLIDE - 1]; 648 | 649 | // initialize sketch canvases 650 | 651 | if (this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1].length == 0 && sketchesForSlide.length > 0) { 652 | 653 | // place new sketches 654 | let x_off; 655 | let p = this.decks[CURRENTDECK - 1].sketches[CURRENTSLIDE - 1].length; 656 | let frame = null; 657 | if (SIDEBAR.style('display') == 'block') { 658 | x_off = SIDEBAR_SIZEX; 659 | } else { 660 | x_off = SIDEBAR_SIZEX; 661 | } 662 | let spacing = null; 663 | 664 | 665 | if (p > 1){ 666 | spacing = MARGINS; 667 | } else { 668 | spacing = 0; 669 | } 670 | 671 | let dx = (MAIN_CANVAS.width - 2*MARGINS- ((p-1)*spacing))/p; 672 | 673 | 674 | for (let i = 0; i < p; i++){ 675 | frame = createElement('iframe'); 676 | frame.attribute('src',this.loadedSketches[sketchesForSlide[i]][1]); 677 | frame.size(abs(dx*(i+1)-dx*(i)),abs(Y_BOUNDS[1]-Y_BOUNDS[0])); 678 | if (i == 0) { 679 | frame.position(x_off + MARGINS + (dx*i), min(Y_BOUNDS) + MARGINS); 680 | } else { 681 | frame.position(x_off + MARGINS + (spacing*i) + (dx*i), min(Y_BOUNDS) + MARGINS); 682 | } 683 | frame = frameRels(frame); 684 | frame.style('border','transparent'); 685 | frame.style('overflow', 'hidden'); 686 | frame.style('scrolling','no'); 687 | frame.style('z-index', 1); 688 | frame.style('pointer-events','none'); 689 | frame.show(); 690 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1].push(frame); 691 | } 692 | } else { 693 | let canvases = this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1]; 694 | for (let c = 0; c < canvases.length; c++) { 695 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1][c].show(); 696 | } 697 | } 698 | } 699 | p5.SlidesUI.prototype.toggleEditText = function() { 700 | 701 | LOGGED_SIZES = []; 702 | 703 | if (SIDEBAR.style('display') == 'block') { 704 | 705 | let allText = this.decks[CURRENTDECK - 1].created_text; 706 | // hide previous text 707 | if (PREVSLIDE != null) { 708 | let text = allText[PREVSLIDE - 1]; 709 | if (text !== undefined) { 710 | if (text.length != 0) { 711 | for (let t = 0; t < text.length; t++) { 712 | this.decks[CURRENTDECK - 1].created_text[PREVSLIDE - 1][t].hide(); 713 | } 714 | } 715 | } 716 | } 717 | 718 | let textForSlide = allText[CURRENTSLIDE - 1]; 719 | 720 | // initialize text if necessary 721 | if (textForSlide !== undefined) { 722 | if (textForSlide.length != 0) { 723 | for (let t = 0; t < textForSlide.length; t++) { 724 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1][t].show(); 725 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1][t].style('z-index', 4); 726 | } 727 | } 728 | } 729 | } 730 | } 731 | p5.SlidesUI.prototype.togglePresentationAssets = function() { 732 | 733 | if (this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE - 1] !== undefined) { 734 | let shapes = this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE - 1]; 735 | for (let i = 0; i < shapes.length; i++) { 736 | shapes[i].display(); 737 | } 738 | } 739 | 740 | if (SIDEBAR.style('display') == 'none') { 741 | 742 | let currentText = null; 743 | if (this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1] !== undefined) { 744 | for (let t = 0; t < this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1].length; t++) { 745 | currentText = this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1][t]; 746 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1][t].text = select('#' + currentText.parent).value(); 747 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1][t].font = select('#' + currentText.parent).style('font-family'); 748 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1][t].animation = select('#' + currentText.parent).attribute('animation'); 749 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1][t].transitions = this.decks[CURRENTDECK - 1].transitions[CURRENTSLIDE - 1]; 750 | 751 | // draw presentation text 752 | if (IN_OR_OUT != '') { 753 | currentText.display(false,IN_OR_OUT); 754 | }else if (START_ANIMATION.length != 0){ 755 | currentText.display(START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE - 1],IN_OR_OUT); 756 | } else{ 757 | currentText.display(); 758 | } 759 | } 760 | } 761 | 762 | if (TOGGLED) { 763 | let inputText = this.decks[CURRENTDECK - 1].created_text; 764 | // hide input boxes 765 | if (PREVSLIDE != null) { 766 | let text = inputText[PREVSLIDE - 1]; 767 | if (text !== undefined) { 768 | for (let t = 0; t < text.length; t++) { 769 | this.decks[CURRENTDECK - 1].created_text[PREVSLIDE - 1][t].hide(); 770 | } 771 | } 772 | } 773 | } 774 | } 775 | } 776 | p5.SlidesUI.prototype.drawFromTouch = function() { 777 | let field = null; 778 | let xRatio = null; 779 | let yRatio = null; 780 | let xRel = null; 781 | let yRel = null; 782 | let label = null; 783 | 784 | switch (DRAW_FROM_TOUCH) { 785 | case 'header': 786 | label = 'Your header here'; 787 | field = createElement('textarea',label); 788 | field = textRels(field,TRACKED_TOUCHES,true); 789 | field = formatAllText(field); 790 | field = formatHeader(field); 791 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE-1].push(field); 792 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE-1].push(new p5.PresentationAssets(field.attribute('xRelative'), field.attribute('yRelative'), field.attribute('xRatio'), field.attribute('yRatio'),DRAW_FROM_TOUCH,field.id())); 793 | break; 794 | 795 | case 'subheader': 796 | label = 'Your subheader here'; 797 | field = createElement('textarea',label); 798 | field = textRels(field,TRACKED_TOUCHES,true); 799 | field = formatAllText(field); 800 | field = formatSubheader(field); 801 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE-1].push(field); 802 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE-1].push(new p5.PresentationAssets(field.attribute('xRelative'), field.attribute('yRelative'), field.attribute('xRatio'), field.attribute('yRatio'),DRAW_FROM_TOUCH,field.id())) 803 | break; 804 | 805 | 806 | case 'body': 807 | label = 'Your body text here'; 808 | field = createElement('textarea',label); 809 | field = textRels(field,TRACKED_TOUCHES,true); 810 | field = formatAllText(field); 811 | field = formatBody(field); 812 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE-1].push(field); 813 | this.decks[CURRENTDECK - 1].presentationText[CURRENTSLIDE-1].push(new p5.PresentationAssets(field.attribute('xRelative'), field.attribute('yRelative'), field.attribute('xRatio'), field.attribute('yRatio'),DRAW_FROM_TOUCH,field.id())) 814 | break; 815 | 816 | 817 | case 'sketch': 818 | let frame = createElement('iframe'); 819 | let i_ = null; // holder for sketch choice 820 | let id = CHOSEN_OBJ; 821 | 822 | // if chosen sketch was not pre-loaded 823 | if (id == 'url_input'){ 824 | i_ = this.loadedSketches.length; 825 | SKETCH_TABS[i_] = createButton(this.loadedSketches[this.loadedSketches.length-1][0]); 826 | SKETCH_TABS[i_].attribute('url', select('#' + id).value()); 827 | SKETCH_TABS[i_].id('loaded sketch #' + i_); 828 | this.loadedSketches.push([SKETCH_TABS[i_].id(),select('#' + id).value()]); 829 | SKETCH_TABS[i_].style('border','none'); 830 | SKETCH_TABS[i_].mousePressed(OBJ_CHOSEN); 831 | SKETCH_TABS[i_].size(SIDEBAR_SIZEX, SIDEBAR_SIZEY); 832 | SKETCH_TABS[i_].parent('sketchbar'); 833 | } else { 834 | let regex = '\\d+'; 835 | i_= match(id,regex); 836 | i_ = i_[0]; 837 | } 838 | 839 | frame.attribute('src',this.loadedSketches[i_][1]); 840 | frame = frameRels(frame,TRACKED_TOUCHES); 841 | frame.style('box-sizing','border-box'); 842 | frame.style('border','transparent'); 843 | frame.style('overflow', 'hidden'); 844 | frame.style('z-index', 1); 845 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1].push(frame); 846 | this.decks[CURRENTDECK - 1].sketches[CURRENTSLIDE - 1].push(this.loadedSketches.length); 847 | break; 848 | } 849 | 850 | let shapeTypes = ['ellipse','rectangle','triangle','arrow'] 851 | if (shapeTypes.indexOf(DRAW_FROM_TOUCH) !== -1){ 852 | let relLC_X = (TRACKED_TOUCHES[0]-MARGINS)/MAIN_CANVAS.width; 853 | let relLC_Y = (TRACKED_TOUCHES[1]-MARGINS)/MAIN_CANVAS.height; 854 | let relW = (TRACKED_TOUCHES[2]-TRACKED_TOUCHES[0])/(MAIN_CANVAS.width-2*MARGINS); 855 | let relH = (TRACKED_TOUCHES[3]-TRACKED_TOUCHES[1])/(MAIN_CANVAS.height-2*MARGINS); 856 | 857 | if (this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE-1] === undefined){ 858 | this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE-1] = []; 859 | } 860 | 861 | OBJ = new p5.PresentationAssets(relLC_X,relLC_Y,relW,relH,DRAW_FROM_TOUCH) 862 | this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE-1].push(OBJ); 863 | this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE-1][this.decks[CURRENTDECK - 1].shapes[CURRENTSLIDE-1].length-1].display(); 864 | } 865 | 866 | TRACKED_TOUCHES = ''; 867 | UI.textResizer(); 868 | UI.toggleCanvases(); 869 | UI.iframeRemapper(); 870 | UI.inputRemapper(); 871 | } 872 | 873 | // Make elements responsive to window size 874 | p5.SlidesUI.prototype.iframeRemapper = function(){ 875 | // Dynamically Resize IFrames 876 | if (this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1] === undefined) { 877 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE-1] = []; 878 | } 879 | 880 | 881 | let len = this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1].length; 882 | let currentFrame = null; 883 | let xRel = null; 884 | let yRel = null; 885 | let yRatio = null; 886 | let xRatio = null; 887 | 888 | if (len != 0) { 889 | for (let i = 0; i < len; i++) { 890 | currentFrame = this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1][i]; 891 | yRatio = float(currentFrame.attribute('yRatio')); 892 | xRatio = float(currentFrame.attribute('xRatio')); 893 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1][i].size(MAIN_CANVAS.width*xRatio, MAIN_CANVAS.height*yRatio); 894 | xRel = float(currentFrame.attribute('xRelative')) * MAIN_CANVAS.width; 895 | yRel = float(currentFrame.attribute('yRelative'))* MAIN_CANVAS.height; 896 | if (SIDEBAR.style('display') == 'none') { 897 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1][i].position(xRel, yRel); 898 | } else { 899 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1][i].position(SIDEBAR_SIZEX + xRel, yRel); 900 | } 901 | this.decks[CURRENTDECK - 1].canvases[CURRENTSLIDE - 1][i].style('z-index', 1); 902 | } 903 | } 904 | } 905 | p5.SlidesUI.prototype.inputRemapper = function() { 906 | 907 | 908 | let textForSlide = this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1]; 909 | if (textForSlide !== undefined) { 910 | for (let t = 0; t < textForSlide.length; t++) { 911 | let ySize = null; 912 | let xSize = null; 913 | let xRel = null; 914 | let yRel = null; 915 | let text = null; 916 | 917 | text = this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1][t]; 918 | ySize = (MAIN_CANVAS.height-2*MARGINS) * float(text.attribute('yRatio')); 919 | xSize = (MAIN_CANVAS.width-2*MARGINS) * float(text.attribute('xRatio')); 920 | if (SIDEBAR.style('display') == 'none') { 921 | xRel = (float(text.attribute('xRelative')) * MAIN_CANVAS.width) + MARGINS; 922 | } else { 923 | xRel = SIDEBAR_SIZEX + MARGINS + (float(text.attribute('xRelative')) * MAIN_CANVAS.width); 924 | } 925 | yRel = (float(text.attribute('yRelative')) * MAIN_CANVAS.height) + MARGINS; 926 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1][t].size(xSize, ySize); 927 | this.decks[CURRENTDECK - 1].created_text[CURRENTSLIDE - 1][t].position(xRel, yRel); 928 | 929 | } 930 | } 931 | } 932 | 933 | // Saving functionality 934 | p5.SlidesUI.prototype.saveSlides = function() { 935 | 936 | // save JSON of current decks 937 | this.JSONify(this.decks); 938 | 939 | // save JSON of loaded sketches 940 | let sketchJSON = {} 941 | for (let i = 0; i < this.loadedSketches.length; i++) { 942 | sketchJSON[this.loadedSketches[i][0]] = this.loadedSketches[i][1] 943 | } 944 | saveJSON(sketchJSON, 'defaultSketches.json'); 945 | 946 | } 947 | p5.SlidesUI.prototype.JSONify = function(deckObj){ 948 | let deckJSON = {} 949 | let keys = (Object.keys(deckObj)); 950 | for (let deck = 0; deck < keys.length;deck++){ 951 | let firstIndex = keys[deck]; 952 | let topKey = deckObj[firstIndex].name; 953 | deckJSON[topKey] = {}; 954 | 955 | // insert color options 956 | deckJSON[topKey]['colorOptions'] = deckObj[deck].colorOptions; 957 | 958 | // insert deck length 959 | deckJSON[topKey]['deckLength'] = deckObj[deck].deckLength; 960 | 961 | // insert margins 962 | deckJSON[topKey]['margins'] = deckObj[deck].margins; 963 | 964 | for (let slide = 0; slide < deckObj[firstIndex].deckLength; slide++){ 965 | let subKey = 'slide'+slide; 966 | deckJSON[topKey][subKey] = {}; 967 | 968 | // initialize shapes object 969 | deckJSON[topKey][subKey]['shapes'] = {}; 970 | 971 | // initialize created text object 972 | deckJSON[topKey][subKey]['createdText'] = {}; 973 | 974 | // initialize canvas object 975 | deckJSON[topKey][subKey]['canvases'] = {}; 976 | 977 | // insert background colors 978 | deckJSON[topKey][subKey]['bColors'] = deckObj[deck].bColors[slide]; 979 | 980 | // insert created text 981 | deckJSON[topKey][subKey]['createdText'] = {}; 982 | for (let type = 0; type < deckObj[deck].created_text.length;type++) { 983 | 984 | let numBoxes = deckObj[deck].created_text[slide].length; 985 | for (let box = 0; box < numBoxes; box++) { 986 | 987 | if (deckJSON[topKey][subKey]['createdText'] === undefined){ 988 | deckJSON[topKey][subKey]['createdText'] = {}; 989 | } 990 | 991 | deckJSON[topKey][subKey]['createdText'][box] = {}; 992 | deckJSON[topKey][subKey]['createdText'][box]['yRatio'] = deckObj[deck].created_text[slide][box].attribute('yRatio'); 993 | deckJSON[topKey][subKey]['createdText'][box]['xRatio'] =deckObj[deck].created_text[slide][box].attribute('xRatio'); 994 | deckJSON[topKey][subKey]['createdText'][box]['xRelative'] = deckObj[deck].created_text[slide][box].attribute('xRelative'); 995 | deckJSON[topKey][subKey]['createdText'][box]['yRelative'] =deckObj[deck].created_text[slide][box].attribute('yRelative'); 996 | deckJSON[topKey][subKey]['createdText'][box]['text'] = deckObj[deck].created_text[slide][box].value(); 997 | deckJSON[topKey][subKey]['createdText'][box]['type'] = deckObj[deck].created_text[slide][box].attribute('type'); 998 | deckJSON[topKey][subKey]['createdText'][box]['id'] = deckObj[deck].created_text[slide][box].id(); 999 | deckJSON[topKey][subKey]['createdText'][box]['animation'] = deckObj[deck].created_text[slide][box].attribute('animation'); 1000 | } 1001 | } 1002 | 1003 | // insert canvases 1004 | deckJSON[topKey][subKey]['canvases'] = {}; 1005 | 1006 | if (deckObj[deck].canvases[slide] !== undefined) { 1007 | for (let element = 0; element < deckObj[deck].canvases[slide].length; element++) { 1008 | deckJSON[topKey][subKey]['canvases']['frame' + element] = {}; 1009 | deckJSON[topKey][subKey]['canvases']['frame' + element]['yRatio'] = deckObj[deck].canvases[slide][element].attribute('yRatio'); 1010 | deckJSON[topKey][subKey]['canvases']['frame' + element]['xRatio'] = deckObj[deck].canvases[slide][element].attribute('xRatio'); 1011 | deckJSON[topKey][subKey]['canvases']['frame' + element]['xRelative'] = deckObj[deck].canvases[slide][element].attribute('xRelative'); 1012 | deckJSON[topKey][subKey]['canvases']['frame' + element]['yRelative'] = deckObj[deck].canvases[slide][element].attribute('yRelative'); 1013 | deckJSON[topKey][subKey]['canvases']['frame' + element]['url'] = deckObj[deck].canvases[slide][element].attribute('src'); 1014 | } 1015 | } 1016 | 1017 | 1018 | // insert shapes 1019 | deckJSON[topKey][subKey]['shapes'] = {}; 1020 | 1021 | if (deckObj[deck].shapes[slide] !== undefined) { 1022 | for (let element = 0; element < deckObj[deck].shapes[slide].length; element++) { 1023 | deckJSON[topKey][subKey]['shapes']['shape' + element] = {}; 1024 | deckJSON[topKey][subKey]['shapes']['shape' + element]['relX'] = deckObj[deck].shapes[slide][element].relX; 1025 | deckJSON[topKey][subKey]['shapes']['shape' + element]['relY'] = deckObj[deck].shapes[slide][element].relY; 1026 | deckJSON[topKey][subKey]['shapes']['shape' + element]['relW'] = deckObj[deck].shapes[slide][element].relW 1027 | deckJSON[topKey][subKey]['shapes']['shape' + element]['relH'] = deckObj[deck].shapes[slide][element].relH; 1028 | deckJSON[topKey][subKey]['shapes']['shape' + element]['type'] = deckObj[deck].shapes[slide][element].type; 1029 | } 1030 | } 1031 | 1032 | // insert presentation text 1033 | deckJSON[topKey][subKey]['presentationText'] = {}; 1034 | 1035 | if (deckObj[deck].presentationText[slide] !== undefined) { 1036 | for (let element = 0; element < deckObj[deck].presentationText[slide].length; element++) { 1037 | deckJSON[topKey][subKey]['presentationText']['text' + element] = {}; 1038 | deckJSON[topKey][subKey]['presentationText']['text' + element]['relX'] = deckObj[deck].presentationText[slide][element].relX; 1039 | deckJSON[topKey][subKey]['presentationText']['text' + element]['relY'] = deckObj[deck].presentationText[slide][element].relY; 1040 | deckJSON[topKey][subKey]['presentationText']['text' + element]['relW'] = deckObj[deck].presentationText[slide][element].relW 1041 | deckJSON[topKey][subKey]['presentationText']['text' + element]['relH'] = deckObj[deck].presentationText[slide][element].relH; 1042 | deckJSON[topKey][subKey]['presentationText']['text' + element]['type'] = deckObj[deck].presentationText[slide][element].type; 1043 | deckJSON[topKey][subKey]['presentationText']['text' + element]['parent'] = deckObj[deck].presentationText[slide][element].parent; 1044 | } 1045 | } 1046 | 1047 | } 1048 | } 1049 | 1050 | saveJSON(deckJSON, 'myDecks.json'); 1051 | } 1052 | p5.SlidesUI.prototype.unpackJSON = function(JSON) { 1053 | let myDecks = []; 1054 | 1055 | let keys = (Object.keys(JSON)); 1056 | for (let deck = 0; deck < keys.length; deck++) { 1057 | let firstIndex = keys[deck]; 1058 | myDecks[deck] = new p5.SlideDeck(firstIndex); 1059 | 1060 | let secondKeys = Object.keys(JSON[firstIndex]); 1061 | for (let key2_ = 0; key2_ < secondKeys.length; key2_++) 1062 | if (match(secondKeys[key2_],'slide')) { 1063 | let regex = '\\d+'; 1064 | let slideNum = int(match(secondKeys[key2_],regex)); 1065 | let tertiaryKeys = Object.keys(JSON[firstIndex][secondKeys[key2_]]); 1066 | for (let key3_ = 0; key3_ < tertiaryKeys.length; key3_++){ 1067 | 1068 | // load background colors 1069 | if (match(tertiaryKeys[key3_], 'bColors')) { 1070 | myDecks[deck][tertiaryKeys[key3_]][slideNum] = color(JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]]); 1071 | } 1072 | 1073 | // load created text 1074 | 1075 | else if (match(tertiaryKeys[key3_], 'createdText')) { 1076 | myDecks[deck].created_text[slideNum] = []; 1077 | let boxes = Object.keys(JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]]); 1078 | for (let box = 0; box < boxes.length; box++) { 1079 | let textToPlace = JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]][boxes[box]]; 1080 | let thisText = createElement('textarea', textToPlace['text']); 1081 | thisText.attribute('type', textToPlace['type']); 1082 | thisText = formatAllText(thisText); 1083 | if (thisText.attribute('type') == 'header'){ 1084 | thisText = formatHeader(thisText) 1085 | } else if (thisText.attribute('type') == 'subheader'){ 1086 | thisText = formatSubheader(thisText) 1087 | } else if (thisText.attribute('type') == 'body'){ 1088 | thisText = formatBody(thisText) 1089 | } 1090 | thisText.attribute('xRatio', textToPlace['xRatio']); 1091 | thisText.attribute('yRatio', textToPlace['yRatio']); 1092 | thisText.attribute('xRelative', textToPlace['xRelative']); 1093 | thisText.attribute('yRelative', textToPlace['yRelative']); 1094 | thisText.id(textToPlace['id']); 1095 | if (textToPlace['animation'] != null) { 1096 | thisText.attribute('animation', textToPlace['animation']); 1097 | } 1098 | thisText.hide(); 1099 | myDecks[deck].created_text[slideNum].push(thisText); 1100 | } 1101 | 1102 | 1103 | // load canvases 1104 | 1105 | } else if (match(tertiaryKeys[key3_], 'canvases')) { 1106 | 1107 | let frames = Object.keys(JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]]); 1108 | myDecks[deck].canvases[slideNum] = []; 1109 | 1110 | for (let frame = 0; frame < frames.length; frame++) { 1111 | let selectedFrame = JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]][frames[frame]]; 1112 | let thisFrame = createElement('iframe'); 1113 | thisFrame.attribute('src',selectedFrame['url']); 1114 | thisFrame.attribute('xRatio',selectedFrame['xRatio']); 1115 | thisFrame.attribute('yRatio',selectedFrame['yRatio']); 1116 | thisFrame.attribute('xRelative',selectedFrame['xRelative']); 1117 | thisFrame.attribute('yRelative',selectedFrame['yRelative']); 1118 | thisFrame.style('border','transparent'); 1119 | thisFrame.style('overflow', 'hidden'); 1120 | thisFrame.style('scrolling','no'); 1121 | thisFrame.style('z-index', 1); 1122 | thisFrame.hide(); 1123 | myDecks[deck].canvases[slideNum].push(thisFrame); 1124 | } 1125 | } else if (match(tertiaryKeys[key3_], 'shapes')) { 1126 | 1127 | let shapes = Object.keys(JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]]); 1128 | myDecks[deck].shapes[slideNum] = []; 1129 | 1130 | for (let shape = 0; shape < shapes.length; shape++) { 1131 | let selectedShape = JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]][shapes[shape]]; 1132 | let thisShape = new p5.PresentationAssets(selectedShape['relX'],selectedShape['relY'],selectedShape['relW'],selectedShape['relH'],selectedShape['type']); 1133 | myDecks[deck].shapes[slideNum].push(thisShape); 1134 | } 1135 | } else if (match(tertiaryKeys[key3_], 'presentationText')) { 1136 | 1137 | let texts = Object.keys(JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]]); 1138 | myDecks[deck].presentationText[slideNum] = []; 1139 | 1140 | for (let text = 0; text < texts.length; text++) { 1141 | let selectedText = JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]][texts[text]]; 1142 | let thisText = new p5.PresentationAssets(selectedText['relX'],selectedText['relY'],selectedText['relW'],selectedText['relH'],selectedText['type'],selectedText['parent']); 1143 | myDecks[deck].presentationText[slideNum].push(thisText); 1144 | } 1145 | } else if (match(tertiaryKeys[key3_], 'transitions')) { 1146 | 1147 | let transitions = Object.keys(JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]]); 1148 | myDecks[deck].transitions[slideNum] = []; 1149 | 1150 | for (let t = 0; t < transitions.length; t++) { 1151 | let selectedT = JSON[firstIndex][secondKeys[key2_]][tertiaryKeys[key3_]][transitions[t]]; 1152 | myDecks[deck].transitions[slideNum] = selectedT; 1153 | } 1154 | } 1155 | } 1156 | }else { 1157 | myDecks[deck][secondKeys[key2_]] = JSON[firstIndex][secondKeys[key2_]]; 1158 | } 1159 | } 1160 | this.decks = myDecks; 1161 | return; 1162 | } 1163 | 1164 | // ============================================================================= 1165 | // p5.SlideDeck 1166 | // ============================================================================= 1167 | /** 1168 | * Base class for a single slide deck 1169 | * 1170 | * @class p5.SlideDeck 1171 | * @constructor 1172 | */ 1173 | 1174 | p5.SlideDeck = function(name) { 1175 | 1176 | if (MARGINS !== null){ 1177 | this.margins = MARGINS; 1178 | } else { 1179 | this.margins = MAIN_CANVAS.width/24; 1180 | } 1181 | this.name = name; 1182 | this.sketches = []; // initialize the sketch array 1183 | this.deckLength = 0; 1184 | this.templates = []; 1185 | this.headings = []; 1186 | this.subheadings = []; 1187 | this.created_text = []; 1188 | this.currentSlide = 1; 1189 | this.presentationText = []; 1190 | this.transitions = []; 1191 | this.transitions[CURRENTSLIDE-1] = {}; 1192 | this.shapes = []; 1193 | this.canvases = []; 1194 | this.bColors = []; 1195 | this.colorOptions = ['#ffffff', '#ED225D']; 1196 | } 1197 | 1198 | p5.SlideDeck.prototype.slideTemplates = function(slide) { 1199 | 1200 | 1201 | let template = this.templates[slide]; 1202 | let header = this.headings[slide]; 1203 | let subheader = this.subheadings[slide]; 1204 | let corners = []; 1205 | 1206 | // Determine header length for automatic sizing 1207 | if (template == 'full-text') { 1208 | 1209 | // header 1210 | let H = createElement('textarea',header); 1211 | corners[0] = 0; 1212 | corners[1] = (MAIN_CANVAS.height/4); 1213 | corners[2] = corners[0] + (MAIN_CANVAS.width); 1214 | corners[3] = corners[1] + ((MAIN_CANVAS.height)/3); 1215 | H = textRels(H,corners); 1216 | H = formatAllText(H); 1217 | H = formatHeader(H); 1218 | H.hide(); 1219 | 1220 | this.created_text[slide].push(H); 1221 | this.presentationText[slide].push(new p5.PresentationAssets(H.attribute('xRelative'),H.attribute('yRelative'),H.attribute('xRatio'),H.attribute('yRatio'),'header',H.id())); 1222 | 1223 | // subheader 1224 | let S = createElement('textarea',subheader); 1225 | corners[0] = 0; 1226 | corners[1] = corners[1] + (MAIN_CANVAS.height/4); 1227 | corners[2] = corners[0] + (MAIN_CANVAS.width); 1228 | corners[3] = corners[1] + ((MAIN_CANVAS.height)/12); 1229 | S = textRels(S,corners); 1230 | S = formatAllText(S); 1231 | S = formatSubheader(S); 1232 | S.hide(); 1233 | this.created_text[slide].push(S); 1234 | this.presentationText[slide].push(new p5.PresentationAssets(S.attribute('xRelative'),S.attribute('yRelative'),S.attribute('xRatio'),S.attribute('yRatio'),'subheader',S.id())); 1235 | 1236 | // image 1237 | let img = createImg('icons/p5-asterisk.png'); 1238 | img.size(MAIN_CANVAS.height,MAIN_CANVAS.height); 1239 | img.style('opacity',.2); 1240 | img.style('pointer-events','none'); 1241 | img.position(SIDEBAR_SIZEX + MAIN_CANVAS.width-MAIN_CANVAS.height,0); 1242 | } 1243 | 1244 | if (template == 'low-header') { 1245 | 1246 | // subheader 1247 | let S = createElement('textarea',subheader); 1248 | corners[0] = 0; 1249 | corners[1] = 9*MAIN_CANVAS.height/12; 1250 | corners[2] = corners[0] + (MAIN_CANVAS.width); 1251 | corners[3] = 10*MAIN_CANVAS.height/12; 1252 | S = textRels(S,corners); 1253 | S = formatAllText(S); 1254 | S = formatSubheader(S); 1255 | S.hide(); 1256 | this.created_text[slide].push(S); 1257 | this.presentationText[slide].push(new p5.PresentationAssets(S.attribute('xRelative'),S.attribute('yRelative'),S.attribute('xRatio'),S.attribute('yRatio'),'subheader',S.id())); 1258 | 1259 | // header 1260 | 1261 | let H = createElement('textarea',header); 1262 | corners[0] = 0; 1263 | corners[3] = corners[1]; 1264 | corners[1] = corners[1] - ((MAIN_CANVAS.height)/12); 1265 | corners[2] = corners[0] + (MAIN_CANVAS.width); 1266 | H = textRels(H,corners); 1267 | H = formatAllText(H); 1268 | H = formatHeader(H); 1269 | H.hide(); 1270 | 1271 | this.created_text[slide].push(H); 1272 | this.presentationText[slide].push(new p5.PresentationAssets(H.attribute('xRelative'),H.attribute('yRelative'),H.attribute('xRatio'),H.attribute('yRatio'),'header',H.id())); 1273 | 1274 | Y_BOUNDS = [0, corners[1] - MARGINS]; 1275 | } 1276 | } 1277 | 1278 | p5.SlideDeck.prototype.addSlides = function(num) { 1279 | // add new slide to SlideDeck object 1280 | 1281 | let len = this.deckLength; 1282 | for (let j = len; j < len + num; j++) { 1283 | this.presentationText[j] = []; 1284 | this.created_text[j] = []; 1285 | this.transitions[j] = {'in':'', 'out':''}; 1286 | START_ANIMATION[CURRENTDECK-1][j] = {'in':'', 'out':''}; 1287 | START_ANIMATION[CURRENTDECK-1][j+1] = {'in':'', 'out':''}; 1288 | 1289 | // define template creation order 1290 | if (j == 1){ 1291 | this.sketches[j] = [0]; //[blankSketch]; // 1292 | this.templates[j] = 'low-header'; 1293 | this.headings[j] = 'Showcase Mode'; 1294 | this.subheadings[j] = 'Show off a single sketch'; 1295 | } else if (j == 0) { 1296 | this.sketches[j] = []; //[blankSketch]; // 1297 | this.templates[j] = 'full-text'; 1298 | this.headings[j] = 'P5.SLIDES'; 1299 | this.subheadings[j] = 'INTERACTIVE PRESENTATIONS FOR THE WEB'; 1300 | } else if (j > 2) { 1301 | this.sketches[j] = []; 1302 | this.templates[j] = 'full-sketch'; 1303 | this.headings[j] = ''; 1304 | this.subheadings[j] = ''; 1305 | } else if (j == 2) { 1306 | this.sketches[j] = [1,2,1]; 1307 | this.templates[j] = 'low-header'; 1308 | this.headings[j] = 'Panel Mode'; 1309 | this.subheadings[j] = 'Expand your visual repertoire'; 1310 | } 1311 | 1312 | this.bColors[this.deckLength] = this.colorOptions[0]; 1313 | this.slideTemplates(this.deckLength); 1314 | this.deckLength += 1; 1315 | } 1316 | } 1317 | 1318 | // ============================================================================= 1319 | // p5.PresentationAssets 1320 | // ============================================================================= 1321 | 1322 | /** 1323 | * Base class for P5 elements displayed during Presentation Mode 1324 | * 1325 | * @class p5.PresentationAssets 1326 | * @constructor 1327 | */ 1328 | 1329 | p5.PresentationAssets = function(relX,relY,relW,relH,type,parent) { 1330 | this.relX = relX; 1331 | this.relY = relY; 1332 | this.relW = relW; 1333 | this.relH = relH; 1334 | this.type = type; 1335 | if (parent !== undefined) { 1336 | this.parent = parent; 1337 | } 1338 | this.text = null; 1339 | this.font = null; 1340 | this.color = color('#ED225D'); 1341 | this.transitions = {}; 1342 | this.animation = null; 1343 | this.toTransition = ''; 1344 | this.animatedObjects = []; 1345 | this.startTime = null; 1346 | this.nextPos = null; 1347 | } 1348 | p5.PresentationAssets.prototype.display = function(animate) { 1349 | 1350 | let lX = (this.relX * MAIN_CANVAS.width) + MARGINS; 1351 | let lY = (this.relY * MAIN_CANVAS.height) + MARGINS; 1352 | let w = this.relW * (MAIN_CANVAS.width - 2 * MARGINS); 1353 | let h = this.relH * (MAIN_CANVAS.height - 2 * MARGINS); 1354 | let a = atan2(h, w); 1355 | 1356 | push(); 1357 | translate(lX, lY); 1358 | 1359 | let shapes = ['ellipse', 'rectangle', 'triangle', 'arrow']; 1360 | let texts = ['header', 'subheader', 'body']; 1361 | if (shapes.indexOf(this.type) !== -1) { 1362 | noStroke(); 1363 | fill(this.color); 1364 | 1365 | switch (this.type) { 1366 | case ('rectangle'): 1367 | rect(0, 0, w, h); 1368 | break; 1369 | 1370 | case ('ellipse'): 1371 | ellipse(w / 2, h / 2, abs(w), abs(h)); 1372 | break; 1373 | 1374 | case ('triangle'): 1375 | let d = int(dist(lX, lY, abs(lX + w), abs(lY + h))); 1376 | let x = (d / (sqrt(3))); 1377 | rotate(a); 1378 | triangle(0, 0, d, x, d, -x); 1379 | break; 1380 | 1381 | 1382 | case ('arrow'): 1383 | rotate(a); 1384 | let d_tot = int(dist(lX, lY, lX + w, lY + h)); 1385 | let d_tri = (d_tot / 3); 1386 | let x_tri = (d_tri / (sqrt(3))); 1387 | triangle(0, 0, d_tri, x_tri, d_tri, -x_tri); 1388 | rect(d_tri, x_tri / 3, d_tot, -2 * x_tri / 3); 1389 | break; 1390 | } 1391 | } else if (texts.indexOf(this.type) !== -1) { 1392 | 1393 | switch (this.type) { 1394 | case('header'): 1395 | textAlign(LEFT, TOP); 1396 | textStyle(BOLD); 1397 | fill('#ED225D'); 1398 | stroke('#ED225D'); 1399 | strokeWeight(1); 1400 | break; 1401 | 1402 | 1403 | case ('subheader'): 1404 | textAlign(LEFT, TOP); 1405 | fill('#6c6c6c'); 1406 | stroke('#6c6c6c'); 1407 | strokeWeight(1); 1408 | textStyle(ITALIC); 1409 | break; 1410 | 1411 | 1412 | case ('body'): 1413 | textStyle(NORMAL); 1414 | textAlign(LEFT, TOP); 1415 | fill('#282828'); 1416 | stroke('#282828'); 1417 | break; 1418 | } 1419 | 1420 | let t = null; 1421 | let tW = null; 1422 | if (this.type == 'header') { 1423 | t = this.text.toUpperCase() 1424 | tW = textWidth(t); 1425 | this.fontSize = min([(w / tW) * .9, h * .8]); 1426 | textFont(FONTS[0]); 1427 | } else { 1428 | t = this.text; 1429 | tW = textWidth(t); 1430 | this.fontSize = min([(w / tW) * .9, h * .8]); 1431 | textFont(this.font); 1432 | } 1433 | textSize(this.fontSize); 1434 | 1435 | if (IN_OR_OUT == '') { 1436 | text(t, 0, 0); 1437 | } 1438 | } 1439 | 1440 | pop(); 1441 | 1442 | // do transitions 1443 | let t = null; 1444 | this.transitions = START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE-1][IN_OR_OUT]; 1445 | 1446 | switch (this.transitions) { 1447 | case (''): 1448 | if (IN_OR_OUT == 'in') { 1449 | this.startTime = null; 1450 | IN_OR_OUT = ''; 1451 | this.toTransition = ''; 1452 | this.animatedObjects = []; 1453 | }else if (IN_OR_OUT == 'out') { 1454 | if (PREVSLIDE != CURRENTSLIDE || CURRENTSLIDE == 1) { 1455 | PREVSLIDE = CURRENTSLIDE; 1456 | CURRENTSLIDE++; 1457 | } 1458 | TOGGLED = true; 1459 | this.toTransition = 'in'; 1460 | IN_OR_OUT = 'in'; 1461 | this.startTime = millis(); 1462 | this.animatedObjects = []; 1463 | } 1464 | 1465 | case ('particles'): 1466 | if (this.animatedObjects.length == 0) { 1467 | if (this.type == 'header') { 1468 | t = this.text.toUpperCase(); 1469 | } else { 1470 | t = this.text; 1471 | } 1472 | textAlign(LEFT, TOP); 1473 | let points = FONTS[0].textToPoints(t, lX, lY + this.fontSize, this.fontSize); 1474 | if (IN_OR_OUT == 'in') { 1475 | this.animatedObjects = []; 1476 | for (let p = 0; p < points.length; p++) { 1477 | this.animatedObjects[p] = {}; 1478 | this.animatedObjects[p].homeX = points[p].x; 1479 | this.animatedObjects[p].homeY = points[p].y; 1480 | this.animatedObjects[p].x = 0; 1481 | this.animatedObjects[p].y = 0; 1482 | } 1483 | }else{ 1484 | this.animatedObjects = points; 1485 | } 1486 | } else if ((IN_OR_OUT != '') && (this.animatedObjects.length != 0)) { 1487 | 1488 | if (abs(this.startTime - millis()) < 3000) { 1489 | this.particleDraw(IN_OR_OUT); 1490 | } else if ((abs(millis()-this.startTime) > 1000) && IN_OR_OUT == 'out') { 1491 | PREVSLIDE = CURRENTSLIDE; 1492 | CURRENTSLIDE++; 1493 | TOGGLED = true; 1494 | IN_OR_OUT = 'in'; 1495 | this.startTime = millis(); 1496 | this.animatedObjects = []; 1497 | } else if ((abs(millis()-this.startTime) > 1000) && IN_OR_OUT == 'in') { 1498 | this.startTime = null; 1499 | IN_OR_OUT = ''; 1500 | this.animatedObjects = []; 1501 | } 1502 | } 1503 | } 1504 | } 1505 | p5.PresentationAssets.prototype.particleDraw = function(movement) { 1506 | for (let p = 0; p < this.animatedObjects.length; p++) { 1507 | 1508 | // // Initialize particle variables 1509 | // if (this.animatedObjects[p].noiseStart === undefined){ 1510 | // this.animatedObjects[p].noiseStart = random(0,1000); 1511 | // } 1512 | if (this.animatedObjects[p].ax === undefined) { 1513 | if (movement == 'out') { 1514 | this.animatedObjects[p].ax = 0; 1515 | this.animatedObjects[p].ay = .5; 1516 | } else { 1517 | this.animatedObjects[p].ax = this.animatedObjects[p].homeX - this.animatedObjects[p].x; 1518 | this.animatedObjects[p].ay = this.animatedObjects[p].homeY - this.animatedObjects[p].y; 1519 | } 1520 | } 1521 | 1522 | if (this.animatedObjects[p].vx === undefined){ 1523 | this.animatedObjects[p].vx = 0; 1524 | this.animatedObjects[p].vy = 0; 1525 | } 1526 | 1527 | ellipse(this.animatedObjects[p].x,this.animatedObjects[p].y,(MAIN_CANVAS.height/100)); 1528 | 1529 | 1530 | this.animatedObjects[p].vx += this.animatedObjects[p].ax; 1531 | this.animatedObjects[p].vy += this.animatedObjects[p].ay; 1532 | this.animatedObjects[p].x += this.animatedObjects[p].vx; 1533 | this.animatedObjects[p].y += this.animatedObjects[p].vy; 1534 | 1535 | if (this.animatedObjects[p].y >= MAIN_CANVAS.height){ 1536 | this.animatedObjects[p].vy = -(1*this.animatedObjects[p].vy/3); 1537 | } 1538 | if (this.animatedObjects[p].x >= MAIN_CANVAS.width){ 1539 | this.animatedObjects[p].vx = -(1*this.animatedObjects[p].vx/3); 1540 | } 1541 | } 1542 | } 1543 | 1544 | // ============================================================================= 1545 | // Functions that Govern Button Functionality 1546 | // ============================================================================= 1547 | 1548 | 1549 | // Navigation 1550 | function keyReleased() { 1551 | if ((key === 'ArrowRight') && (CURRENTSLIDE < MAXSLIDE)) { 1552 | 1553 | if (SIDEBAR.style('display') == 'none') { 1554 | let currentText = DECKS[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1]; 1555 | 1556 | if (START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE-1]['out'] != '') { 1557 | for (let t = 0; t < currentText.length; t++) { 1558 | DECKS[CURRENTDECK - 1].presentationText[CURRENTSLIDE - 1][t].startTime = millis(); 1559 | IN_OR_OUT = 'out'; 1560 | TOGGLED = true; 1561 | } 1562 | }else { 1563 | PREVSLIDE = CURRENTSLIDE; 1564 | CURRENTSLIDE++; 1565 | TOGGLED = true; 1566 | } 1567 | } else{ 1568 | PREVSLIDE = CURRENTSLIDE; 1569 | CURRENTSLIDE++; 1570 | TOGGLED = true; 1571 | } 1572 | } else if ((key === 'ArrowLeft')) { 1573 | if ((CURRENTSLIDE > 1)) { 1574 | PREVSLIDE = CURRENTSLIDE; 1575 | CURRENTSLIDE--; 1576 | TOGGLED = true; 1577 | IN_OR_OUT = ''; 1578 | // for (let t = 0; t < currentText.length; t++) { 1579 | // currentText[t].toAnimate = false; 1580 | // } 1581 | } 1582 | } 1583 | } 1584 | function SWITCHDECK() { 1585 | let ID_ = this.id(); 1586 | let regexp = '\\d+'; 1587 | ID_ = match(ID_, regexp); 1588 | CURRENTDECK = int(ID_); 1589 | CURRENTSLIDE = 1; 1590 | TOGGLED = true; 1591 | PREVSLIDE = null; 1592 | Y_BOUNDS = []; 1593 | X_BOUNDS = []; 1594 | } 1595 | 1596 | // Edit Button 1597 | function ON_HOVER() { 1598 | this.style('opacity','.3'); 1599 | } 1600 | function OFF() { 1601 | this.style('opacity','0'); 1602 | } 1603 | 1604 | // Go Back to Main Sidebar 1605 | function BACK_TO_SIDEBAR() { 1606 | SKETCHBAR.hide(); 1607 | TEXTBAR1.hide(); 1608 | TEXTBAR2.hide(); 1609 | DECKBAR.hide(); 1610 | SHAPEBAR.hide(); 1611 | EDITSIDEBAR.show(); 1612 | GOBACK_BUTTON.hide(); 1613 | } 1614 | 1615 | // Toggle Alternative Sidebars 1616 | function TOGGLE_SKETCHBAR() { 1617 | SKETCHBAR.show(); 1618 | EDITSIDEBAR.hide(); 1619 | GOBACK_BUTTON.show(); 1620 | } 1621 | function TOGGLE_TEXTBAR1() { 1622 | TEXTBAR1.show(); 1623 | EDITSIDEBAR.hide(); 1624 | GOBACK_BUTTON.show(); 1625 | } 1626 | function TOGGLE_TEXTBAR2() { 1627 | TEXTBAR2.show(); 1628 | let tb2 = select('#textbar2'); 1629 | tb2.position(this.x,this.y - tb2.height); 1630 | tb2.attribute('currentText',this.id()); 1631 | } 1632 | function TOGGLE_DECKBAR() { 1633 | DECKBAR.show(); 1634 | EDITSIDEBAR.hide(); 1635 | GOBACK_BUTTON.show(); 1636 | } 1637 | function TOGGLE_SHAPEBAR() { 1638 | SHAPEBAR.show(); 1639 | EDITSIDEBAR.hide(); 1640 | GOBACK_BUTTON.show(); 1641 | } 1642 | function TOGGLE_TRANSITION() { 1643 | START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE] = {}; 1644 | START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE]['in'] = 'particles'; 1645 | START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE]['out'] = ''; 1646 | START_ANIMATION[CURRENTDECK - 1][CURRENTSLIDE - 1]['out'] = 'particles'; 1647 | } 1648 | 1649 | 1650 | // Trigger Events when Objects are Chosen 1651 | function OBJ_CHOSEN() { 1652 | 1653 | if (CHOSEN_OBJ != null){ 1654 | select('#' + CHOSEN_OBJ).style('border','none'); 1655 | } 1656 | 1657 | CHOSEN_OBJ = this.id(); 1658 | let ids = ['move','color','scale','animate']; 1659 | if (ids.indexOf(CHOSEN_OBJ) !== -1) { 1660 | let tb2 = select('#textbar2'); 1661 | let text = select('#' + tb2.attribute('currentText')); 1662 | 1663 | if (CHOSEN_OBJ == ids[0]){ 1664 | // text.position(tb2.position().x,tb2.position().y + tb2.height); 1665 | // text = textRels(text,[mouseX + SIDEBAR_SIZEX,mouseY,mouseX+ SIDEBAR_SIZEX+ text.width,mouseY+ text.height]); 1666 | // tb2.position(text.x,text.y - tb2.height); 1667 | } else if (CHOSEN_OBJ == ids[1]){ 1668 | text.style('color','#000'); 1669 | } else if (CHOSEN_OBJ == ids[2]){ 1670 | // text.size(text.width + (text.x - mouseX),text.height + (text.y - mouseY)); 1671 | // text = textRels(text,[text.x,text.y,text.x + text.width,text.y + text.height]); 1672 | } else if (CHOSEN_OBJ == ids[3]){ 1673 | text.attribute('animation', 'particles'); 1674 | } 1675 | } 1676 | 1677 | this.style('border','solid'); 1678 | this.style('border-color','#aeaeae'); 1679 | } 1680 | function SAVE_DECKS(){ 1681 | TOGGLE_SAVE = true; 1682 | } 1683 | function ADDSLIDE() { 1684 | REVISION_TOGGLE = true; 1685 | TOGGLE = true; 1686 | } 1687 | function NEWDECK() { 1688 | if (NUMDECKS == 0){ 1689 | TOGGLE = true; 1690 | } 1691 | NEWOBJS_ = new p5.SlideDeck('Deck ' + NUMDECKS); 1692 | } 1693 | 1694 | // Draw from Touch (labels) 1695 | function TEXT_HEADER() { 1696 | TRACKED_TOUCHES = 'waituntilended'; 1697 | DRAW_FROM_TOUCH = 'header'; 1698 | } 1699 | function TEXT_SUBHEADER() { 1700 | TRACKED_TOUCHES = 'waituntilended'; 1701 | DRAW_FROM_TOUCH = 'subheader'; 1702 | } 1703 | function TEXT_BODY() { 1704 | TRACKED_TOUCHES = 'waituntilended'; 1705 | DRAW_FROM_TOUCH = 'body'; 1706 | } 1707 | function SKETCH_PLACEMENT() { 1708 | TRACKED_TOUCHES = 'waituntilended'; 1709 | DRAW_FROM_TOUCH = 'sketch'; 1710 | } 1711 | function SHAPE_ELLIPSE() { 1712 | TRACKED_TOUCHES = 'waituntilended'; 1713 | DRAW_FROM_TOUCH = 'ellipse'; 1714 | } 1715 | function SHAPE_RECT() { 1716 | TRACKED_TOUCHES = 'waituntilended'; 1717 | DRAW_FROM_TOUCH = 'rectangle'; 1718 | } 1719 | function SHAPE_TRIANGLE() { 1720 | TRACKED_TOUCHES = 'waituntilended'; 1721 | DRAW_FROM_TOUCH = 'triangle'; 1722 | } 1723 | function SHAPE_ARROW() { 1724 | TRACKED_TOUCHES = 'waituntilended'; 1725 | DRAW_FROM_TOUCH = 'arrow'; 1726 | } 1727 | 1728 | // Draw from Touch (functions) 1729 | function touchStarted(){ 1730 | if (TRACKED_TOUCHES == 'onstart') { 1731 | TRACKED_TOUCHES = [mouseX,mouseY]; 1732 | } 1733 | } 1734 | function drawShapeOutlines(){ 1735 | if (TRACKED_TOUCHES.length == 2) { 1736 | noFill(); 1737 | let c = color('#ED225D'); 1738 | strokeWeight(5); 1739 | stroke(c); 1740 | let rects = ['header', 'subheader', 'body', 'sketch', 'rectangle']; 1741 | let x_shift = TRACKED_TOUCHES[0]; 1742 | let y_shift = TRACKED_TOUCHES[1]; 1743 | let x_diff = (mouseX - x_shift); 1744 | let y_diff = (mouseY - y_shift) 1745 | let a = atan2(y_diff,x_diff); 1746 | 1747 | push(); 1748 | translate(x_shift,y_shift); 1749 | 1750 | if (rects.indexOf(DRAW_FROM_TOUCH) !== -1) { 1751 | rect(0, 0, x_diff, y_diff); 1752 | } else if (DRAW_FROM_TOUCH == 'ellipse') { 1753 | ellipse(x_diff / 2, y_diff / 2, abs(x_diff), abs(y_diff)); 1754 | } else if (DRAW_FROM_TOUCH == 'triangle') { 1755 | let d = int(dist(TRACKED_TOUCHES[0], TRACKED_TOUCHES[1], mouseX, mouseY)); 1756 | let x = (d / (sqrt(3))); 1757 | rotate(a); 1758 | triangle(0, 0,d, x,d, -x); 1759 | 1760 | } else if (DRAW_FROM_TOUCH == 'arrow') { 1761 | rotate(a); 1762 | let d_tot = int(dist(TRACKED_TOUCHES[0], TRACKED_TOUCHES[1], mouseX, mouseY)); 1763 | let d_tri = (d_tot / 3); 1764 | let x_tri = (d_tri / (sqrt(3))); 1765 | triangle(0, 0,d_tri, x_tri,d_tri, -x_tri); 1766 | rect(d_tri,x_tri/3,d_tot,-2*x_tri/3); 1767 | } 1768 | endShape(CLOSE); 1769 | pop(); 1770 | } 1771 | } 1772 | function touchEnded() { 1773 | if (TRACKED_TOUCHES == 'waituntilended') { 1774 | TRACKED_TOUCHES = 'onstart'; 1775 | } else if (TRACKED_TOUCHES.length == 2) { 1776 | TRACKED_TOUCHES.push(mouseX, mouseY); 1777 | DRAWNOW = true; 1778 | } 1779 | } 1780 | 1781 | // Text Formatting 1782 | function formatHeader(t) { 1783 | t.style('text-transform', 'uppercase'); 1784 | t.attribute('type', 'header'); 1785 | t.style('font-weight', 'bold'); 1786 | t.style('font-family', 'Inconsolata','monospace'); 1787 | t.style('color', '#ED225D') 1788 | t.style('z-index', 4); 1789 | return t 1790 | } 1791 | function formatSubheader(t) { 1792 | t.style('font-style', 'italic'); 1793 | t.attribute('type', 'subheader'); 1794 | t.style('font-family', 'sans-serif') 1795 | t.style('z-index', 3); 1796 | t.style('color','#6c6c6c') 1797 | 1798 | return t 1799 | } 1800 | function formatBody(t) { 1801 | t.attribute('type', 'body'); 1802 | t.style('color','#282828'); 1803 | t.style('font-family', 'times') 1804 | t.style('z-index', 2); 1805 | 1806 | return t 1807 | } 1808 | function formatAllText(t) { 1809 | let id_ = 'text' + TEXTCOUNT; 1810 | t.id(id_); 1811 | t.style('border', 'none'); 1812 | t.style('overflow', 'hidden'); 1813 | t.style('box-sizing','border-box'); 1814 | t.style('wrap', 'hard'); 1815 | t.style('background-color', 'transparent'); 1816 | t.style('text-align', 'left'); 1817 | TEXTCOUNT++; 1818 | 1819 | return t 1820 | } 1821 | 1822 | // Resizing Functions 1823 | function windowResized() { 1824 | if (SIDEBAR.style('display') == 'block') { 1825 | //SIDEBAR_SIZEX = windowWidth/6; 1826 | MAIN_CANVAS.size(windowWidth-SIDEBAR_SIZEX, windowHeight); 1827 | MAIN_CANVAS.position(SIDEBAR_SIZEX, 0); 1828 | } else { 1829 | MAIN_CANVAS.size(windowWidth, windowHeight); 1830 | MAIN_CANVAS.position(0, 0); 1831 | } 1832 | 1833 | let ids = ['sidebar','editbar','sketchbar', 'textbar1', 'textbar2', 'deckbar','shapebar']; 1834 | for (i = 0; i < ids.length; i++) { 1835 | select('#' + ids[i]).size(SIDEBAR_SIZEX,windowHeight); 1836 | } 1837 | 1838 | UI.textResizer(); 1839 | UI.toggleCanvases(); 1840 | UI.iframeRemapper(); 1841 | UI.inputRemapper(); 1842 | } 1843 | function frameRels(frame,touches){ 1844 | 1845 | if (touches === undefined) { 1846 | frame.attribute('xRatio', frame.width / MAIN_CANVAS.width); 1847 | frame.attribute('yRatio', frame.height / MAIN_CANVAS.height); 1848 | frame.attribute('xRelative', (frame.position().x - SIDEBAR_SIZEX) / MAIN_CANVAS.width); 1849 | frame.attribute('yRelative', (frame.position().y) / MAIN_CANVAS.height); 1850 | } else{ 1851 | frame.attribute('xRatio',abs(touches[2]-touches[0])/MAIN_CANVAS.width); 1852 | frame.attribute('yRatio',abs(touches[3]-touches[1])/MAIN_CANVAS.height); 1853 | frame.attribute('xRelative',min(touches[0],touches[2])/MAIN_CANVAS.width); 1854 | frame.attribute('yRelative',min(touches[1],touches[3])/MAIN_CANVAS.height); 1855 | } 1856 | 1857 | return frame 1858 | } 1859 | function textRels(text, corners,flag){ 1860 | 1861 | if (flag) { 1862 | text.attribute('xRatio', abs(corners[2] - corners[0]) / (MAIN_CANVAS.width-2*MARGINS)); 1863 | text.attribute('yRatio', abs(corners[3] - corners[1]) / (MAIN_CANVAS.height-2*MARGINS)); 1864 | text.attribute('xRelative', (min(corners[0], corners[2]) - MARGINS) / MAIN_CANVAS.width); 1865 | text.attribute('yRelative', (min(corners[1], corners[3]) - MARGINS) / MAIN_CANVAS.height); 1866 | } else{ 1867 | text.attribute('xRatio', abs(corners[2] - corners[0]) / MAIN_CANVAS.width); 1868 | text.attribute('yRatio', abs(corners[3] - corners[1]) / MAIN_CANVAS.height); 1869 | text.attribute('xRelative', min(corners[0], corners[2]) / MAIN_CANVAS.width); 1870 | text.attribute('yRelative', min(corners[1], corners[3]) / MAIN_CANVAS.height); 1871 | } 1872 | 1873 | return text 1874 | 1875 | } -------------------------------------------------------------------------------- /app/slideDashboard.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let sketches = {}; 4 | let myDecks = {}; 5 | let UI; 6 | 7 | function preload() { 8 | sketches = loadJSON('defaultSketches.json'); 9 | //myDecks = loadJSON('myDecks.json'); 10 | } 11 | 12 | function setup() { 13 | UI = new p5.SlidesUI([],sketches); 14 | } 15 | 16 | // START PRESENTATION LOOP 17 | 18 | function draw() { 19 | UI.display(); 20 | UI.checkInteraction(); 21 | } -------------------------------------------------------------------------------- /app/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | canvas { 6 | display: block; 7 | } 8 | -------------------------------------------------------------------------------- /p5_slides.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/garrettmflynn/p5.js-slides/aec0bf9a60251fb477f5f30b1180d190bcdf3964/p5_slides.png --------------------------------------------------------------------------------