feat update to optim perf and correct ts and dash drawing

README.md

@@ -6,7 +6,7 @@
 [![GitHub license](https://img.shields.io/github/license/peilingjiang/p5.bezier?style=flat-square)](https://github.com/peilingjiang/p5.bezier/blob/main/LICENSE)
 [![](https://data.jsdelivr.com/v1/package/npm/p5bezier/badge)](https://www.jsdelivr.com/package/npm/p5bezier)
 
-Introducing **p5.bezier**, a [p5.js](https://p5js.org) library, engineered to assist you in creating Bézier curves with ease. This library is an enhancement of the original p5.js `bezier()` function, extending its capabilities beyond the limitation of four control points.
+**p5.bezier** is a [p5.js](https://p5js.org) library engineered to assist you in creating Bézier curves. It is an enhancement of the original p5.js `bezier()` function, extending its capabilities beyond the limitation of _four_ control points.
 
 <!-- [**Try it now on p5.js Web Editor!**](https://editor.p5js.org/peilingjiang/sketches/7Z2pRG-TB) -->
 
@@ -41,7 +41,7 @@ To use the p5.bezier library, first download the [p5.bezier.min.js](https://raw.
 Alternatively, you can use the library through a content delivery network (CDN):
 
 ```HTML
-<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>
 ```
 
 Once included, the entire library is encapsulated within the `p5bezier` object. To call the functions provided by the library, prepend `p5bezier` to the function name:
@@ -80,7 +80,7 @@ function setup() {
 The simplest way to use the library is to call `newBezier()` in your `draw()` function. You can adjust the curve's style using `fill()` or `strokeWeight()` just like other shapes.
 
 ```
-newBezier(pointsArray [, closeType] [, fidelity]);
+newBezier(pointsArray [, closeType] [, accuracy]);
 ```
 
 **pointsArray**
@@ -91,7 +91,7 @@ This is an array of [x, y] pairs, each representing a control point for the curv
 
 This is a string, either `"OPEN"` or `"CLOSE"`. Use `"CLOSE"` to automatically close the curve. The default is `"OPEN"`.
 
-**fidelity** (Optional)
+**accuracy** (Optional)
 
 This is an integer between `0` and `10`, with a default value of `7`. This value determines the accuracy of the Bézier curve. Higher values mean more vertices are used, leading to a more accurate curve, but at the cost of additional computation.
 
@@ -102,7 +102,7 @@ For advanced operations, such as computing the shortest distance from a point to
 The usage of `newBezierObj()` is similar to `newBezier()`, but it returns a _Bézier Curve Object_ that can be stored in a variable:
 
 ```
-let bezierObject = newBezierObj(pointsArray [, closeType] [, fidelity]);
+let bezierObject = newBezierObj(pointsArray [, closeType] [, accuracy]);
 ```
 
 The call of `newBezierObj` will not draw the curve on canvas automatically. To draw the curve, use `.draw()` as one of many functions listed below:
@@ -154,7 +154,7 @@ Currently available examples:
 - **basic** draws a simple Bézier curve with 5 control points across the canvas.
 - **basic_object** create a simple Bézier object with 5 control points across the canvas.
 - **control_points** draws a curve and its control points, which can be dragged around.
-- **fidelity** showcases curves drawn with varying levels of fidelity.
+- **accuracy** showcases curves drawn with varying levels of accuracy.
 - **shortest_point** draws the shortest line from the mouse pointer to the curve.
 - **animation** draws animated Bézier curves.
 
@@ -164,7 +164,7 @@ More complex examples to be updated.
 
 - [**Hair**](https://no-loss.netlify.app/), a visualization. See the source code here: https://github.com/peilingjiang/hair.
 - _p5.bezier Example - Basic_ on [CodePen](https://codepen.io/peilingjiang/pen/ZEOLVPx).
-- _p5.bezier Example - Perlin_ on [CodePen](https://codepen.io/peilingjiang/pen/eYMRJax).
+- _p5.bezier Example - Animation_ on [CodePen](https://codepen.io/peilingjiang/pen/eYMRJax).
 
 Share your ideas and projects using the library!
 

examples/fidelity/index.html → examples/accuracy/index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta charset="utf-8" />
   </head>

examples/fidelity/sketch.js → examples/accuracy/sketch.js

@@ -1,5 +1,5 @@
 /*
-  p5.bezier.js fidelity example
+  p5.bezier.js accuracy example
   Peiling Jiang
   UCSD Design Lab 2023
 
@@ -37,12 +37,12 @@ function draw() {
   push()
   noStroke()
   fill(color('#FFB99A'))
-  text('Fidelity 0', 935, 540)
+  text('Accuracy 0', 935, 540)
   fill(color('#FF6464'))
-  text('Fidelity 1', 935, 555)
+  text('Accuracy 1', 935, 555)
   fill(color('#DB3056'))
-  text('Fidelity 3', 935, 570)
+  text('Accuracy 3', 935, 570)
   fill(color('#851D41'))
-  text('Fidelity 7', 935, 585)
+  text('Accuracy 7', 935, 585)
   pop()
 }

examples/animation/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -8,8 +8,8 @@
       rel="stylesheet"
     />
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta charset="utf-8" />
   </head>

examples/basic/index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta charset="utf-8" />
   </head>

examples/basic_object/index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta charset="utf-8" />
   </head>

examples/basic_object/sketch.js

@@ -16,12 +16,14 @@ function setup() {
     [800, 1000],
     [10, 300],
   ])
+
   console.log(bezierObject)
+
   noFill()
 }
 
 function draw() {
   background(235)
   strokeWeight(2)
-  bezierObject.draw()
+  bezierObject.draw([10, 10])
 }

examples/control_points/index.html

@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5bezier@latest"></script>
     <link rel="stylesheet" type="text/css" href="style.css" />
     <meta charset="utf-8" />
   </head>

examples/control_points/sketch.js

@@ -1,57 +1,103 @@
+/* eslint-disable no-undef */
+
 /*
-  p5.bezier.js control_points example
   Peiling Jiang
-  NYU ITP/IMA 2020
+  UCSD Design Lab 2023
 */
 
 // DRAG THE POINTS AROUND!
 
 let pa // a PointArray object
 
+// eslint-disable-next-line no-unused-vars
 function setup() {
   let c = createCanvas(windowWidth, windowHeight)
   p5bezier.initBezier(c)
   noFill()
 
   pa = new PointArray()
-  pa.add(100, 100)
-  pa.add(400, 600)
-  pa.add(500, 400)
-  pa.add(600, 600)
-  pa.add(900, 100)
+  pa.add(100, 400)
+  pa.add(400, 700)
+  pa.add(700, 100)
+  pa.add(1000, 400)
 }
 
+// eslint-disable-next-line no-unused-vars
 function draw() {
   background(255)
   stroke(color('#FD5E53'))
   strokeWeight(3)
-  // Draw an open Bezier curve with fidelity of 9 (highest)
-  p5bezier.newBezier(pa.get(), 'OPEN', 9)
-  pa.display()
+  // Draw an open Bezier curve with accuracy of 10 (highest)
+  p5bezier.newBezier(pa.get(), 'OPEN', 10)
+  pa.display(true)
 }
 
+let focusedPointInd = -1
+// eslint-disable-next-line no-unused-vars
+function mousePressed() {
+  const distances = pa.points.map(point =>
+    dist(mouseX, mouseY, point.position[0], point.position[1]),
+  )
+  const minDistance = Math.min(...distances)
+
+  if (minDistance < 60) {
+    const minIndex = distances.indexOf(minDistance)
+    focusedPointInd = minIndex
+  } else focusedPointInd = pa.add(mouseX, mouseY)
+}
+
+// eslint-disable-next-line no-unused-vars
 function mouseDragged() {
-  pa.update(mouseX, mouseY)
+  if (focusedPointInd > -1)
+    pa.pointArray[focusedPointInd].update(mouseX, mouseY)
+}
+
+// eslint-disable-next-line no-unused-vars
+function mouseUp() {
+  focusedPointInd = -1
 }
 
 class PointArray {
   constructor() {
     this.pointArray = []
   }
 
-  add(pX, pY) {
-    this.pointArray.push(new Point(pX, pY))
+  get points() {
+    return this.pointArray
   }
 
-  display() {
-    for (let point of this.pointArray) point.display()
+  add(pX, pY) {
+    let index = 0
+    for (let point of this.pointArray) {
+      if (pX < point.position[0]) break
+      index++
+    }
+    this.pointArray.splice(index, 0, new Point(pX, pY))
+
+    return index
   }
 
-  update(mX, mY) {
-    for (let point of this.pointArray) {
-      if (dist(mX, mY, point.position[0], point.position[1]) < 60)
-        point.update(mX, mY)
+  display(lines = false) {
+    if (lines) {
+      push()
+      stroke(50)
+      strokeWeight(1)
+      for (
+        let pointIndex = 0;
+        pointIndex < pa.pointArray.length - 1;
+        pointIndex++
+      ) {
+        line(
+          this.pointArray[pointIndex].position[0],
+          this.pointArray[pointIndex].position[1],
+          this.pointArray[pointIndex + 1].position[0],
+          this.pointArray[pointIndex + 1].position[1],
+        )
+      }
+      pop()
     }
+
+    for (let point of this.pointArray) point.display()
   }
 
   get() {
@@ -81,7 +127,7 @@ class Point {
     text(
       '(' + this.position[0] + ', ' + this.position[1] + ')',
       this.position[0] + 10,
-      this.position[1] - 10
+      this.position[1] - 10,
     )
     pop()
   }