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/[email protected]/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/[email protected]/lib/p5.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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;