Scene 1
21 | 22 |One Fish
23 |Two Fish
26 |Scene 2
39 | 40 |Red Fish
41 | 42 |Blue Fish
43 | 44 |├── LICENSE
├── README.md
├── data-watching
├── index.html
├── sketch.js
└── vue-definitions.js
├── interactive-narrative-2
├── index.html
├── p5-vue-component.js
├── scene-logic.js
├── sketch1.js
├── sketch2.js
├── sketch3.js
└── style.css
├── interactive-narrative
├── index.html
├── p5-vue-component.js
├── scene-logic.js
├── sketch.js
└── style.css
├── one-way-binding
├── index.html
├── sketch1.js
├── sketch2.js
└── vue-definitions.js
├── two-way-binding
├── index.html
├── sketch1.js
├── sketch2.js
└── vue-definitions.js
└── whale-story
├── index.html
├── normalize.css
├── p5-vue-component.js
├── scene-logic.js
├── sketch.js
├── style.css
└── whalestory.txt
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Aatish Bhatia
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 | # p5-vue-starter
2 |
3 | This is a set of examples for how to use [Vue.js](https://vuejs.org/) and [p5.js](https://p5js.org/) together, so that you can build interactive documents that include p5.js sketches as components.
4 |
5 | ## Try it out
6 | - [One way binding](https://aatishb.com/p5-vue-starter/one-way-binding/)
7 | - [Two way binding](https://aatishb.com/p5-vue-starter/two-way-binding/)
8 | - [Data Watching](https://aatishb.com/p5-vue-starter/data-watching/)
9 | - [Interactive Narrative (Single Canvas in background)](https://aatishb.com/p5-vue-starter/interactive-narrative/)
10 | - [Interactive Narrative (Multiple Canvases)](https://aatishb.com/p5-vue-starter/interactive-narrative-2/)
11 | - [Interactive Narrative (Whale Story)](https://aatishb.com/p5-vue-starter/whale-story/)
12 |
13 | ## One Way Binding Between Parent & p5 Sketch
14 |
15 | In [this example](https://aatishb.com/p5-vue-starter/one-way-binding/), the p5 sketch reacts to data in the top layer. The p5 sketches are loaded in a [custom component](https://vuejs.org/v2/guide/components.html), created using the following command:
16 |
17 | ```
18 |
In this p5 program, we have disabled the draw() loop. So how is the animation being updated? A custom dataChanged() function is run every time that the data changes, which updates the canvas.
35 | 36 |This is possible thanks to Vue's ability to 'watch' data. Data watchers are useful if you want to perform a computationally expensive operation in response to changing data. The alternative approach would be to check for a change in data on each frame of the draw() loop, which can be less efficient.
37 | 38 | 39 | 40 |One Fish
23 |Two Fish
26 |Red Fish
41 | 42 |Blue Fish
43 | 44 |Hello traveller. What is your name?
24 | 25 | 26 | 27 | 28 |{{name}}, you are drifting in space.
36 | 37 | 38 | 39 | 40 |{{name}}, you are drifting towards Earth.
49 | 50 | 51 | 52 |{{name}}, you are drifting towards the Sun.
61 | 62 | 63 | 64 |{{name}}, you have arrived.
72 |THE END.
73 | 74 | 75 | 76 | 77 | 78 |Hello. You have been turned into a whale.
40 | 41 |What kind of whale would you rather be?
46 | 47 | 51 | 52 | 53 | 54 |Congratulations! You are now a {{sketch.whale}}.
61 | 62 |A swarm of fish approach.
63 | 64 |In the background, you hear a faint whale song.
65 | 66 |oooooOOOOOOOOooooooo
67 | 68 |Mmmmmm. That was delicious.
80 | 81 |You have eaten {{sketch.fishEaten}} fish.
82 | 83 |Uh-oh.
95 |One of the fish you ate was a poisonous puffer fish.
96 |You start to feel dizzy.
97 | 98 |You arrive at the surface and spout water through your blowhole.
110 | 111 |People in a boat see you and wave.
112 | 113 |You feel much better.
114 | 115 | 116 | 117 |The whale song grows louder.
124 |ooooooooOOOOOOOOooooooo
125 | 126 | 127 | 128 |The whale song grows even louder.
136 |ooooooooOOOOOOOOoooooooOOOOOOOOoooooooooo
137 | 138 | 139 | 140 |The whale song grows louder still.
148 |ooooooooOOOOOOOOoooooooOOOOOOOOooooooooooOOOOOOOOoooooooooo
149 | 150 | 151 | 152 |The sun has set. The ocean turns dark.
160 | 161 |You are somewhat lost and no longer hear the song.
162 | 163 |It is now morning.
175 | 176 |Another whale hears your whale song!!
177 | 178 |You approach the other whale.
190 | 191 |"Hi!", says the other whale.
192 | 193 |"Would you like to follow me to a secret underwater garden?"
194 | 195 |The other whale approaches.
206 | 207 |"Hi!", says the other whale.
208 | 209 |"Would you like to follow me to a secret underwater garden?"
210 | 211 |Together, you frolick in the garden.
222 | 223 |This is an example of an interactive narrative.
241 | 242 |You can find the source code here.
243 | 244 |To remix:
245 |Download the code and run it on your own computer.
Modify the story
Change the animations
Publish your own story
This work is released into the public domain, so you can do what you like with it, and use it however you want.
253 | 254 |Have fun!
255 | 256 |