Browse Source

feat: Minimal working p5/CoffeeScript setup

main
Glen Whitney 7 months ago
parent
commit
63dfa62ffd
  1. 2
      .gitignore
  2. 25
      README.md
  3. 5
      index.html
  4. 17
      lib/loadp5.js
  5. 109185
      lib/p5.js
  6. 15
      polytree.coffee

2
.gitignore

@ -49,4 +49,6 @@ flycheck_*.el
# network security
/network-security.data
# Javascript from CoffeeScript files in main directory
/*.js

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

@ -0,0 +1,5 @@
<html>
<head>
<script type="module" src="polytree.js"></script></head>
<body>
<h1>PolyTree</h1></body></html>

17
lib/loadp5.js

@ -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(); }});

109185
lib/p5.js

File diff suppressed because one or more lines are too long

15
polytree.coffee

@ -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…
Cancel
Save