0.1.0 • Published 4 years ago
p5.popup v0.1.0
p5.popup.js
p5.js simple popup library used for displaying instructions for sketches
by oran collins
github.com/wisehackermonkey
oranbusiness@gmail.com
20200629
Live Example
P5.js live editor
P5.js live editable version
CDN Example
CDN links
How to use CDN links
Add one of the following two CDN options to your p5.js sketches html file
Replace X.X.X with the latest version number
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/X.XX.X/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/X.XX.X/addons/p5.sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5.popup@0.0.9/p5.popup.min.js"></script>
OR
<script src="https://unpkg.com/p5.popup@0.0.9/p5.popup.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Brain storm
inital idea
p5.js popup for instructions on how to play game, mobile and desktop friendly
add: one liner
example
instructions("arrows to move, goal is to get the blocks")
//have templates for common input types
instructions([ARROWS,MOUSE],"e key breaks the walls")
example v2
popup("arrows to move, goal is to get the blocks", <show for n seconds>)
//have templates for common input types
popup([ARROWS,MOUSE],"e key breaks the walls", <show for n seconds>)
publish npm package
npm version patch
npm publish
how to publish local tag
Sharing Tags
git push origin v0.0.4
TODO
- github action minifiy
- auto lint
- todo add popupMode(BOTTOM)