Skip to content

Rename curvePoint/curveTangent to splinePoint/splineTangent #7703

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 5, 2025
Merged

Rename curvePoint/curveTangent to splinePoint/splineTangent #7703

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 32 additions & 37 deletions src/shape/curves.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,7 +505,7 @@ function curves(p5, fn){
* noFill();
* strokeWeight(1);
* stroke(0);
* curve(5, 26, 73, 24, 73, 61, 15, 65);
* spline(5, 26, 73, 24, 73, 61, 15, 65);
*
* // Draw red spline curves from the anchor points to the control points.
* stroke(255, 0, 0);
Expand Down Expand Up @@ -653,8 +653,6 @@ function curves(p5, fn){
* @chainable
*/
fn.spline = function(...args) {
// p5._validateParameters('curve', args);

if (!this._renderer.states.strokeColor && !this._renderer.states.fillColor) {
return this;
}
Expand All @@ -666,9 +664,9 @@ function curves(p5, fn){
/**
* Calculates coordinates along a spline curve using interpolation.
*
* `curvePoint()` calculates coordinates along a spline curve using the
* `splinePoint()` calculates coordinates along a spline curve using the
* anchor and control points. It expects points in the same order as the
* <a href="#/p5/curve">curve()</a> function. `curvePoint()` works one axis
* <a href="#/p5/spline">spline()</a> function. `splinePoint()` works one axis
* at a time. Passing the anchor and control points' x-coordinates will
* calculate the x-coordinate of a point on the curve. Passing the anchor and
* control points' y-coordinates will calculate the y-coordinate of a point on
Expand All @@ -685,7 +683,7 @@ function curves(p5, fn){
* is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
* between them.
*
* @method curvePoint
* @method splinePoint
* @param {Number} a coordinate of first anchor point.
* @param {Number} b coordinate of first control point.
* @param {Number} c coordinate of second control point.
Expand Down Expand Up @@ -713,24 +711,24 @@ function curves(p5, fn){
*
* // Draw the curve.
* noFill();
* curve(x1, y1, x2, y2, x3, y3, x4, y4);
* spline(x1, y1, x2, y2, x3, y3, x4, y4);
*
* // Draw circles along the curve's path.
* fill(255);
*
* // Top.
* let x = curvePoint(x1, x2, x3, x4, 0);
* let y = curvePoint(y1, y2, y3, y4, 0);
* let x = splinePoint(x1, x2, x3, x4, 0);
* let y = splinePoint(y1, y2, y3, y4, 0);
* circle(x, y, 5);
*
* // Center.
* x = curvePoint(x1, x2, x3, x4, 0.5);
* y = curvePoint(y1, y2, y3, y4, 0.5);
* x = splinePoint(x1, x2, x3, x4, 0.5);
* y = splinePoint(y1, y2, y3, y4, 0.5);
* circle(x, y, 5);
*
* // Bottom.
* x = curvePoint(x1, x2, x3, x4, 1);
* y = curvePoint(y1, y2, y3, y4, 1);
* x = splinePoint(x1, x2, x3, x4, 1);
* y = splinePoint(y1, y2, y3, y4, 1);
* circle(x, y, 5);
*
* describe('A black curve on a gray square. The endpoints and center of the curve are marked with white circles.');
Expand Down Expand Up @@ -761,12 +759,12 @@ function curves(p5, fn){
*
* // Draw the curve.
* noFill();
* curve(x1, y1, x2, y2, x3, y3, x4, y4);
* spline(x1, y1, x2, y2, x3, y3, x4, y4);
*
* // Calculate the circle's coordinates.
* let t = 0.5 * sin(frameCount * 0.01) + 0.5;
* let x = curvePoint(x1, x2, x3, x4, t);
* let y = curvePoint(y1, y2, y3, y4, t);
* let x = splinePoint(x1, x2, x3, x4, t);
* let y = splinePoint(y1, y2, y3, y4, t);
*
* // Draw the circle.
* fill(255);
Expand All @@ -775,8 +773,7 @@ function curves(p5, fn){
* </code>
* </div>
*/
fn.curvePoint = function(a, b, c, d, t) {
// p5._validateParameters('curvePoint', arguments);
fn.splinePoint = function(a, b, c, d, t) {
const s = this._renderer.states.splineProperties.tightness,
t3 = t * t * t,
t2 = t * t,
Expand All @@ -793,9 +790,9 @@ function curves(p5, fn){
* Tangent lines skim the surface of a curve. A tangent line's slope equals
* the curve's slope at the point where it intersects.
*
* `curveTangent()` calculates coordinates along a tangent line using the
* `splineTangent()` calculates coordinates along a tangent line using the
* spline curve's anchor and control points. It expects points in the same
* order as the <a href="#/p5/curve">curve()</a> function. `curveTangent()`
* order as the <a href="#/p5/spline">spline()</a> function. `splineTangent()`
* works one axis at a time. Passing the anchor and control points'
* x-coordinates will calculate the x-coordinate of a point on the tangent
* line. Passing the anchor and control points' y-coordinates will calculate
Expand All @@ -812,7 +809,7 @@ function curves(p5, fn){
* is the first anchor point, 1 is the second anchor point, and 0.5 is halfway
* between them.
*
* @method curveTangent
* @method splineTangent
* @param {Number} a coordinate of first control point.
* @param {Number} b coordinate of first anchor point.
* @param {Number} c coordinate of second anchor point.
Expand Down Expand Up @@ -840,48 +837,48 @@ function curves(p5, fn){
*
* // Draw the curve.
* noFill();
* curve(x1, y1, x2, y2, x3, y3, x4, y4);
* spline(x1, y1, x2, y2, x3, y3, x4, y4);
*
* // Draw tangents along the curve's path.
* fill(255);
*
* // Top circle.
* stroke(0);
* let x = curvePoint(x1, x2, x3, x4, 0);
* let y = curvePoint(y1, y2, y3, y4, 0);
* let x = splinePoint(x1, x2, x3, x4, 0);
* let y = splinePoint(y1, y2, y3, y4, 0);
* circle(x, y, 5);
*
* // Top tangent line.
* // Scale the tangent point to draw a shorter line.
* stroke(255, 0, 0);
* let tx = 0.2 * curveTangent(x1, x2, x3, x4, 0);
* let ty = 0.2 * curveTangent(y1, y2, y3, y4, 0);
* let tx = 0.2 * splineTangent(x1, x2, x3, x4, 0);
* let ty = 0.2 * splineTangent(y1, y2, y3, y4, 0);
* line(x + tx, y + ty, x - tx, y - ty);
*
* // Center circle.
* stroke(0);
* x = curvePoint(x1, x2, x3, x4, 0.5);
* y = curvePoint(y1, y2, y3, y4, 0.5);
* x = splinePoint(x1, x2, x3, x4, 0.5);
* y = splinePoint(y1, y2, y3, y4, 0.5);
* circle(x, y, 5);
*
* // Center tangent line.
* // Scale the tangent point to draw a shorter line.
* stroke(255, 0, 0);
* tx = 0.2 * curveTangent(x1, x2, x3, x4, 0.5);
* ty = 0.2 * curveTangent(y1, y2, y3, y4, 0.5);
* tx = 0.2 * splineTangent(x1, x2, x3, x4, 0.5);
* ty = 0.2 * splineTangent(y1, y2, y3, y4, 0.5);
* line(x + tx, y + ty, x - tx, y - ty);
*
* // Bottom circle.
* stroke(0);
* x = curvePoint(x1, x2, x3, x4, 1);
* y = curvePoint(y1, y2, y3, y4, 1);
* x = splinePoint(x1, x2, x3, x4, 1);
* y = splinePoint(y1, y2, y3, y4, 1);
* circle(x, y, 5);
*
* // Bottom tangent line.
* // Scale the tangent point to draw a shorter line.
* stroke(255, 0, 0);
* tx = 0.2 * curveTangent(x1, x2, x3, x4, 1);
* ty = 0.2 * curveTangent(y1, y2, y3, y4, 1);
* tx = 0.2 * splineTangent(x1, x2, x3, x4, 1);
* ty = 0.2 * splineTangent(y1, y2, y3, y4, 1);
* line(x + tx, y + ty, x - tx, y - ty);
*
* describe(
Expand All @@ -891,9 +888,7 @@ function curves(p5, fn){
* </code>
* </div>
*/
fn.curveTangent = function(a, b, c, d, t) {
// p5._validateParameters('curveTangent', arguments);

fn.splineTangent = function(a, b, c, d, t) {
const s = this._renderer.states.splineProperties.tightness,
tt3 = t * t * 3,
t2 = t * 2,
Expand Down
16 changes: 8 additions & 8 deletions test/unit/core/curves.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,27 +57,27 @@ suite('Curves', function() {
});
});

suite('p5.prototype.curvePoint', function() {
suite('p5.prototype.splinePoint', function() {
var result;
test('should be a function', function() {
assert.ok(mockP5Prototype.curvePoint);
assert.typeOf(mockP5Prototype.curvePoint, 'function');
assert.ok(mockP5Prototype.splinePoint);
assert.typeOf(mockP5Prototype.splinePoint, 'function');
});
test('should return the correct point on a Catmull-Rom Curve', function() {
result = mockP5Prototype.curvePoint(5, 5, 73, 73, 0.5);
result = mockP5Prototype.splinePoint(5, 5, 73, 73, 0.5);
assert.equal(result, 39);
assert.notEqual(result, -1);
});
});

suite('p5.prototype.curveTangent', function() {
suite('p5.prototype.splineTangent', function() {
var result;
test('should be a function', function() {
assert.ok(mockP5Prototype.curveTangent);
assert.typeOf(mockP5Prototype.curveTangent, 'function');
assert.ok(mockP5Prototype.splineTangent);
assert.typeOf(mockP5Prototype.splineTangent, 'function');
});
test('should return the correct point on a Catmull-Rom Curve', function() {
result = mockP5Prototype.curveTangent(95, 73, 73, 15, 0.5);
result = mockP5Prototype.splineTangent(95, 73, 73, 15, 0.5);
assert.equal(result, 10);
assert.notEqual(result, -1);
});
Expand Down