Merge pull request #17 from acamposuribe/ES6

ES6 Ready
acamposuribe · Jan 11, 2024 · ed996d4 · ed996d4
2 parents 89a2241 + 5b49463
commit ed996d4
Show file tree

Hide file tree

Showing 17 changed files with 646 additions and 663 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-dist/
+node_modules/
+package-lock.json
diff --git a/LICENSE → LICENSE.md b/LICENSE → LICENSE.md
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Alejandro Campos Uribe
+Copyright (c) 2023-2024 Alejandro Campos Uribe
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -23,28 +23,43 @@ Embrace the full potential of your creative coding projects with p5.brush.js, wh
 
 ## Installation
 
-Before using p5.brush.js, ensure you include **[Spectral.js](https://github.com/rvanwijnen/spectral.js)**, which is a prerequisite library for color mixing features.
+### Local Installation
 
-### Standard Installation
-
-To set up your project, add both `p5.brush.js` and `Spectral.js` to your HTML file. Place the script tags in the following order:
+To set up your project, add `p5.min.js` `p5.brush.js` to your HTML file. You can download the last version of the p5.brush.js library in the [dist](/dist) folder.
+Place the script tags in the following order:
 
 ```html
 <!-- Commented version of p5.brush.js, with a Spectral.js dependency -->
-<script src="path_to/spectral.min.js"></script>
+<script src="path_to/p5.min.js"></script>
 <script src="path_to/p5.brush.js"></script>
 ```
-Replace path_to with the actual path to the minified script in your project directory or the URL if you are using a CDN.
+Replace path_to with the actual path to the script in your project directory or the URL if you are using a CDN.
 
-### Minified Version
+### Use a hosted version of the p5.brush.js library 
 
-For improved performance, use the minified version of `p5.brush.js` which bundles `Spectral.js`:
+Alternatively, you can link to a `p5.brush.js` file hosted online. All versions are stored in a CDN (Content Delivery Network). You can find a history of these versions in the p5.js CDN. In this case you can change the link to:
 
 ```html
-<!-- Minified version of p5.brush.js with Spectral.js included -->
-<script src="path_to/p5.brush.min.js"></script>
+<!-- Online version of p5.brush -->
+<script src="https://cdn.jsdelivr.net/npm/p5.brush@1.1/dist/p5.brush.js"></script>
+```
+
+### Install with NPM and other modular-based apps
+
+Install the npm package. p5.brush requires p5.js as a peer dependency.
+
+```
+npm install p5.brush --save
 ```
-Replace path_to with the actual path to the minified script in your project directory or the URL if you are using a CDN.
+
+After that, import p5.brush functions to your sketch:
+
+```
+import * as brush from 'p5.brush'
+```
+
+If you are using p5 and p5.brush as modules, you will need to use instance mode. Read below.
+
 
 ### Note for p5 instance mode
 

diff --git a/dependencies/p5.min.js b/dependencies/p5.min.js
diff --git a/dependencies/spectral.min.js b/dependencies/spectral.min.js
diff --git a/dist/p5.brush.js b/dist/p5.brush.js
diff --git a/brush_tips/brush.jpg → example/brush_tips/brush.jpg b/brush_tips/brush.jpg → example/brush_tips/brush.jpg
diff --git a/index.html → example/index.html b/index.html → example/index.html
@@ -2,9 +2,8 @@
 <html>
  <head> 
  <title>p5.brush.js Example</title>
- <script src="./dependencies/p5.min.js"></script>
- <script src="./dependencies/spectral.min.js"></script>
- <script src="./p5.brush.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/p5.brush@1.1/dist/p5.brush.js"></script>
  <link rel="stylesheet" href="./style.css">
  </head>
  <body>

diff --git a/sketch.js → example/sketch.js b/sketch.js → example/sketch.js
@@ -78,11 +78,13 @@ function setup () {
 
  translate(-width/2,-height/2)
 
- for (let i = 0; i < 5; i++) {
+ for (let i = 0; i < 6; i++) {
  x_values[i] = random(width)
  y_values[i] = random(width)
  }
 
+ brush.load()
+
  /*
  brush.field("seabed")
  // STANDARD PALETTE TEST
@@ -92,7 +94,7 @@ function setup () {
  brush.flowLine(30,60+i*10,195,0)
  i++
  }
- */
+ 
 
  brush.noStroke()
  brush.fill("black", 60)
@@ -111,28 +113,28 @@ function setup () {
  brush.vertex(200,150)
  brush.vertex(100,150)
  brush.endShape(CLOSE)
+
+ */
 
 }
 
 function draw() {
 
- /*
  background("#e2e7dc")
  translate(-width/2,-height/2)
  strokeWeight(2)
- brush.fill("#ff2702",70)
- brush.bleed(0.2)
- brush.beginShape(0 + frameCount * 0.01)
- for (let i = 0; i < 5; i++) {
- stroke(palette[i])
+ //brush.fill("#ff2702",70)
+ brush.bleed(0.4)
+ brush.beginShape(1)
+ for (let i = 0; i < 6; i++) {
+ stroke(random(palette))
  point(x_values[i],y_values[i])
  brush.vertex(x_values[i],y_values[i])
  }
  randomSeed(12133)
  brush.endShape(CLOSE)
 
  noLoop()
- */
 }
 
 function mouseDragged() {

diff --git a/style.css → example/style.css b/style.css → example/style.css
diff --git a/p5.brush.min.js b/p5.brush.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,35 +1,27 @@
 {
  "name": "p5.brush",
- "version": "0.0.1-beta",
+ "version": "1.1",
  "description": "Unlock custom brushes, natural fill effects and intuitive hatching in p5.js",
- "main": "p5.brush.js",
+ "main": "src/index.js",
+ "module": "src/index.js",
+ "browser": "dist/p5.brush.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
- "build:types": "tsc --project tsconfig.build.json"
+ "build": "rollup --config -w"
  },
+ "type": "module",
  "repository": {
  "type": "git",
  "url": "git+https://github.com/acamposuribe/p5.brush.git"
  },
- "typings": "dist/p5.brush.d.ts",
- "exports": {
- ".": {
- "import": "./p5.brush.js",
- "require": "./p5.brush.js",
- "types": "./dist/p5.brush.d.ts"
- },
- "./minified": "./p5.brush.min.js"
- },
  "keywords": [
  "brush",
- "children",
  "p5",
  "p5js",
  "brushes",
  "watercolor",
  "flowfield",
- "p5-library",
- "hatching"
+ "p5-library"
  ],
  "author": "Alejandro Campos Uribe",
  "license": "MIT",
@@ -38,7 +30,11 @@
  },
  "homepage": "https://p5-brush.cargo.site/",
  "devDependencies": {
- "@types/p5": "^1.7.3",
- "typescript": "^5.3.2"
+ "@rollup/plugin-terser": "^0.4.4",
+ "rollup": "^4.9.4",
+ "rollup-plugin-cleanup": "^3.2.1"
+ },
+ "peerDependencies": {
+ "p5": "^1.9.0"
  }
-}
+}
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,18 @@
+// rollup.config.js
+
+import terser from '@rollup/plugin-terser';
+import cleanup from 'rollup-plugin-cleanup';
+
+const config = {
+ input: 'src/index.js',
+ output: {
+ file: 'dist/p5.brush.js',
+ format: 'umd',
+ name: 'brush',
+ },
+ plugins: [terser(), cleanup({
+ comments: "none",
+ })],
+ };
+
+ export default config;