🐣 Brunch P5 skeleton

2025-07-25 14:26:09 +00:00 · 2019-11-03 10:11:03 -05:00 · 2019-11-03 10:11:03 -05:00 · 3402feb22c
commit 3402feb22c
9 changed files with 7607 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+node_modules/
+public/
--- a/README.md
+++ b/README.md
@ -0,0 +1,25 @@
+# p5-brunch
+[Brunch](http://brunch.io/) skeleton for [p5.js](https://p5js.org/)
+
+## Start
+Start a new p5 project in seconds. Here's how:
+- If you don't have brunch, get it with `npm i -g brunch`.
+- Run `brunch new -s mattpilla/p5-brunch`.
+
+## Develop
+`npm start` will start your app at http://localhost:3333, complete with hot reload.
+
+## Build for Production
+`npm run build` will build your app to the `public/` directory, with babel, uglify, and cache-prevention.
+
+## Boring Stuff
+- All source code goes in the `app/` directory.
+- Start your sketch in `app/sketch.js`.
+- p5 is in [instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode) here, not global. Interface with p5 through the `sketch` object.
+- Your JS is ES2015 ready. Write all the `require`s you want.
+- Everything in the `app/assets/` directory will be copied to `public/` for builds.
+- All CSS in `app/` will be concatenated and minified for builds.
+- All JS in `app/` will be concatenated and minified for builds.
+- By default, `p5.min.js` and `p5.sound.min.js` are included. They are copied from `node_modules/` as is (intentionally).
+- Want to add another p5 plugin? In `brunch-config.js`, include its path in `exports.plugins.copycat.modules`. Then, include the relevant script tag in `app/assets/index.html`.
+- Don't forget to edit `package.json`!
--- a/app/assets/index.html
+++ b/app/assets/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title></title>
+        <link rel="stylesheet" href="DIGEST(app.css)">
+    </head>
+    <body>
+        <script src="modules/p5.min.js"></script>
+        <script src="modules/p5.sound.min.js"></script>
+        <script src="DIGEST(app.js)"></script>
+    </body>
+</html>
--- a/app/initialize.js
+++ b/app/initialize.js
@ -0,0 +1,3 @@
+document.addEventListener('DOMContentLoaded', function() {
+  require('sketch');
+});
--- a/app/sketch.js
+++ b/app/sketch.js
@ -0,0 +1,14 @@
+new p5(sketch => {
+  sketch.preload = () => {
+    /* load images and music */
+  }
+
+  sketch.setup = () => {
+    sketch.createCanvas(640, 480);
+    sketch.background('#fff');
+  }
+
+  sketch.draw = () => {
+    //
+  }
+});
--- a/app/styles.css
+++ b/app/styles.css
@ -0,0 +1,12 @@
+html, body {
+    height: 100%;
+}
+
+body {
+    background-color: #000;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
--- a/brunch-config.js
+++ b/brunch-config.js
@ -0,0 +1,29 @@
+exports.files = {
+  javascripts: {
+    joinTo: {
+      'app.js': /^app/
+    }
+  },
+  stylesheets: {joinTo: 'app.css'}
+};
+
+exports.modules = {
+  autoRequire: {
+    'app.js': ['initialize']
+  }
+};
+
+exports.plugins = {
+  babel: {
+    presets: ['env'],
+    ignore: /^node_modules/
+  },
+  uglify: {
+    ignored: /^node_modules/
+  },
+  copycat:{
+    modules: ['node_modules/p5/lib/p5.min.js', 'node_modules/p5/lib/addons/p5.sound.min.js'],
+    verbose : true,
+    onlyChanged: true
+  }
+};
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,24 @@
+{
+    "author": "",
+    "description": "",
+    "name": "p5-brunch",
+    "repository": "",
+    "scripts": {
+        "build": "rm -rf public/ && brunch build --production",
+        "start": "brunch watch --server"
+    },
+    "version": "1.0.0",
+    "dependencies": {
+        "p5": "^0.10.2"
+    },
+    "devDependencies": {
+        "auto-reload-brunch": "^2.7.1",
+        "babel-brunch": "^7.0.1",
+        "babel-preset-env": "^1.6.1",
+        "brunch": "^2.10.17",
+        "clean-css-brunch": "^2.10.0",
+        "copycat-brunch": "^1.1.1",
+        "digest-brunch": "^1.6.0",
+        "uglify-js-brunch": "^2.10.0"
+    }
+}