feat: Minimal working p5/CoffeeScript setup
This commit is contained in:
parent
d94c749830
commit
63dfa62ffd
2
.gitignore
vendored
2
.gitignore
vendored
@ -49,4 +49,6 @@ flycheck_*.el
|
||||
# network security
|
||||
/network-security.data
|
||||
|
||||
# Javascript from CoffeeScript files in main directory
|
||||
/*.js
|
||||
|
||||
|
25
README.md
25
README.md
@ -4,4 +4,27 @@ Starting from a central polygon, one can imagine a tree _P_ of polygons created
|
||||
|
||||
## Implementation
|
||||
|
||||
As a first pass, PolyTree will consist of a Processing sketch written in CoffeeScript and intended to be served with HarpJS.
|
||||
As a first pass, PolyTree will consist of a Processing sketch written in CoffeeScript along with a minimal framework for deploying it (a bit of HTML and JavaScript).
|
||||
|
||||
## Running
|
||||
|
||||
Although you can use any server and CoffeeScript compiler you like, one path of low resistance for running PolyTree is to use Node.js. Hence, the following procedure assumes you have the node package manager (npm) already installed.
|
||||
|
||||
Make sure you have http-server and CoffeeScript installed globally (note you may need to run the following with sudo depending on your setup):
|
||||
```bash
|
||||
npm install -g http-server coffeescript
|
||||
```
|
||||
|
||||
Clone this repository and enter its top-level directory:
|
||||
```
|
||||
git clone https://code.studioinfinity.org/glen/polytree.git
|
||||
cd polytree
|
||||
```
|
||||
|
||||
Set coffee to compile the main script (the "--watch" flag is only necessary if you may be editing the script and would like the files being served to update automatically), and start serving the files:
|
||||
```
|
||||
coffee --watch -c polytree.coffee &
|
||||
http-server
|
||||
```
|
||||
|
||||
Now visit http://localhost:8080 in your browser.
|
||||
|
5
index.html
Normal file
5
index.html
Normal file
@ -0,0 +1,5 @@
|
||||
<html>
|
||||
<head>
|
||||
<script type="module" src="polytree.js"></script></head>
|
||||
<body>
|
||||
<h1>PolyTree</h1></body></html>
|
17
lib/loadp5.js
Normal file
17
lib/loadp5.js
Normal file
@ -0,0 +1,17 @@
|
||||
export var p5;
|
||||
export var p5loaded = new Promise(async function(resolve, reject) {
|
||||
var success = false;
|
||||
try {
|
||||
p5 = await import('https://cdn.jsdelivr.net/npm/p5/lib/p5.js');
|
||||
console.log('CDN import of p5 OK');
|
||||
success = true; }
|
||||
catch(err) {
|
||||
console.log('CDN import of p5 failed: ' + JSON.stringify(err));
|
||||
try {
|
||||
p5 = await import('./p5.js');
|
||||
success = true; }
|
||||
catch {}
|
||||
console.log('Used local fallback for p5'); }
|
||||
p5 = window.p5;
|
||||
delete window.p5;
|
||||
if (success) { resolve(); } else { reject(); }});
|
15
polytree.coffee
Normal file
15
polytree.coffee
Normal file
@ -0,0 +1,15 @@
|
||||
# PolyTree, intended to be loaded as a module
|
||||
|
||||
import {p5, p5loaded} from './lib/loadp5.js'
|
||||
|
||||
sketch = (p) ->
|
||||
p.setup = =>
|
||||
p.createCanvas window.innerWidth, 575, p.WEBGL
|
||||
p.background 224
|
||||
p.ellipse 0, 0, 100, 50
|
||||
p.ellipse p.width/4, -p.height/4, 50, 100
|
||||
|
||||
show = () ->
|
||||
P5 = new p5 sketch
|
||||
|
||||
p5loaded.then show
|
Loading…
Reference in New Issue
Block a user