# Bezier curve strength weight points

**URL:** <https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629>\
**Category:** Coding Questions\
**Created:** [November 8, 2022, 4:38pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629 "2022-11-08T16:38:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [November 8, 2022, 4:38pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/1 "2022-11-08T16:38:33Z")

</div>

Hi everyone,

I have a simple bezier code here and would like to know if it is possible to give the weight point that shapes the line into a curve more weight? Let the curve be pulled closer to the point. Is there a way to get a weight value? Like I tried to mockup in this image:

 ![Drag Weight](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/0/7021ccf11fa660119206451b2350a0ac7a513e81.png)

Here is the simple code:

```auto
function setup() {
  createCanvas(600, 600);
  p0 = createVector(0, 300);
  p1 = createVector(300, 0);
  p2 = createVector(600, 300);
}

function draw() {
  background(0);
  strokeWeight(20);
  point(mouseX, mouseY);
  stroke(255);
  noFill();
  strokeWeight(1);
  p1.x = mouseX;
  p1.y = mouseY;

  beginShape();
  for (let t = 0; t <= 1; t += 0.01) {
    let x1 = lerp(p0.x, p1.x, t);
    let y1 = lerp(p0.y, p1.y, t);
    let x2 = lerp(p1.x, p2.x, t);
    let y2 = lerp(p1.y, p2.y, t);
    //line(x1,y1,x2, y2);
    let x = lerp(x1, x2, t);
    let y = lerp(y1, y2, t);
    vertex(x, y);
  }
  endShape();
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 10, 2022, 9:21am UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/2 "2022-11-10T09:21:12Z")

</div>

Hi @Tilman,

if you want to get the curve through your points you can use curveVertex…

> **[Reference](https://processing.org/reference/curveVertex_.html)**
>
> Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The…

Example:

```auto
ArrayList<PVector> points;

void setup() {
  size(600,300);
  
  // some points for the curve 
  points=new ArrayList<PVector>();
  points.add(new PVector(width*.5,height)); // start-Point
  points.add(new PVector(width*.5,height)); // full curve visible
  
  points.add(new PVector(width*.5,height*.75));    
  points.add(new PVector(width*.75,height*.75));
  points.add(new PVector(width*.75,height*.5));
  points.add(new PVector(width*.5,height*.5));
  points.add(new PVector(width*.25,height*.5));
  points.add(new PVector(width*.25,height*.25));
  points.add(new PVector(width*.5,height*.25));
  
  points.add(new PVector(width*.5,0)); // full curve visible
  points.add(new PVector(width*.5,0)); // end-Point
}

void draw() {
  background(0);
  
  // draw curve
  stroke(255);
  strokeWeight(2);
  noFill();
  beginShape();
  for (int i = 0; i < points.size(); i++) {
      PVector p = points.get(i);
      curveVertex(p.x, p.y);
  }
  endShape();
  
  // draw dots
  noStroke();
  fill(255,0,0);
  for (int i = 0; i < points.size(); i++) {
      PVector p = points.get(i);
      ellipse(p.x, p.y, 10, 10);
  }
}

```

![dummy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/e/aea3c526b406ac86d38e07f0be2547c2ebfe8567.png)

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 10, 2022, 12:28pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/3 "2022-11-10T12:28:31Z")

</div>

Hi @Tilman,

Sorry! just noticed, that we are in p5js here 🥴 😂

> **[reference | p5.js](https://p5js.org/reference/#/p5/curveVertex)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

Here’s the same for p5js …

```auto
let points = [];

function setup() {
  createCanvas(600,300);
  
  // some points for the curve   
  points = [new p5.Vector(width*.5,height) // start-Point
           ,new p5.Vector(width*.5,height) // full curve visible  

           ,new p5.Vector(width*.5,height*.75)    
           ,new p5.Vector(width*.75,height*.75)
           ,new p5.Vector(width*.75,height*.5)
           ,new p5.Vector(width*.5,height*.5)
           ,new p5.Vector(width*.25,height*.5)
           ,new p5.Vector(width*.25,height*.25)
           ,new p5.Vector(width*.5,height*.25)
  
           ,new p5.Vector(width*.5,0) // full curve visible
           ,new p5.Vector(width*.5,0) // end-Point
           ];
}

function draw() {
  background(0);
  
  // draw curve
  stroke(255);
  strokeWeight(2);
  noFill();
  beginShape();
  points.forEach(p => curveVertex(p.x , p.y));
  endShape();
  
  // draw dots
  noStroke();
  fill(255,0,0);
  points.forEach(p => ellipse(p.x , p.y, 10, 10));
}

```

https://editor.p5js.org/mnse_forum/full/Uw6M9xiSd

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [November 10, 2022, 1:59pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/4 "2022-11-10T13:59:57Z")

</div>

> [@mnse](#):
>
> ```auto
> let points = [];
> 
> function setup() {
> createCanvas(600,300);
>   
> // some points for the curve   
> points = [new p5.Vector(width*.5,height) // start-Point
> ,new p5.Vector(width*.5,height) // full curve visible  
> 
> ,new p5.Vector(width*.5,height*.75)    
> ,new p5.Vector(width*.75,height*.75)
> ,new p5.Vector(width*.75,height*.5)
> ,new p5.Vector(width*.5,height*.5)
> ,new p5.Vector(width*.25,height*.5)
> ,new p5.Vector(width*.25,height*.25)
> ,new p5.Vector(width*.5,height*.25)
>   
> ,new p5.Vector(width*.5,0) // full curve visible
> ,new p5.Vector(width*.5,0) // end-Point
> ];
> }
> 
> function draw() {
> background(0);
>   
> // draw curve
> stroke(255);
> strokeWeight(2);
> noFill();
> beginShape();
> points.forEach(p => curveVertex(p.x , p.y));
> endShape();
>   
> // draw dots
> noStroke();
> fill(255,0,0);
> points.forEach(p => ellipse(p.x , p.y, 10, 10));
> }
> 
> ```

Thank you! @mnse  
but I am seeking a way to increase the amount of curvature. Pull the curve closer to the dot. I have a specific application where I try to match a specific behavior. This is a screenshot from that app:  
 ![Bildschirmfoto 2022-11-10 um 14.42.16](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/c/2caaf1e0862ad543bd59b1913b31e2dc19d12baf.png)  
and this is how it looks with my code in comparison  
 ![Bildschirmfoto 2022-11-10 um 14.54.58](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/9/2988453df22ee1a32767b89f9f2b21339f35a7f8.png)

I try to find out how to match the curvature from the example… It seems to be more attracted and the curve is a bit steaper towards the weight point.

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [November 16, 2022, 9:57am UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/5 "2022-11-16T09:57:15Z")

</div>

Anyone an idea? Thank you!

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 16, 2022, 1:40pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/6 "2022-11-16T13:40:56Z")

</div>

Yes it’s possible, and the [P5.Vector class](https://p5js.org/reference/#/p5.Vector) offers many helpful methods to enhance the capabilities of vectors. In your original post you use vectors to save x- & y-coordinates, but you could do much more with it such as calculating its [angle](https://p5js.org/reference/#/p5.Vector/heading) and [magnitude](https://p5js.org/reference/#/p5.Vector/mag). Combined with P5’s build-in bezier methods you can achieve your goal.

From the midpoint of the anchor points —which are the begin and end vectors— you can calculate the angle between the midpoint and your mouse coordinates. Your new, ‘weighted’ control point is an amplification of the magnitude between those two.

The code below is done with Processing, so you’ll have to convert it to P5 yourself.

```auto
PVector ap1; // anchor point 1
PVector ap2; // anchor point 2
PVector mid; // midpoint of anchors

void setup() {
  size(600, 600);
  ap1 = new PVector(0, height/2);
  ap2 = new PVector(width, height/2);
  mid = PVector.lerp(ap1, ap2, 0.5);
  noLoop();
  strokeWeight(2);
  noFill();
}

void draw() {
  background(0);
  stroke(#00FF00);
  point(mid.x, mid.y);
  drawBezier(#FFFFFF, calcControlPoint(1.0));
  drawBezier(#FF0000, calcControlPoint(1.4));
}

PVector calcControlPoint(float weight) {
  PVector base = new PVector(mouseX, mouseY);
  PVector diff = PVector.sub(base, mid);
  float magnitude = diff.mag() * weight;
  float angle = diff.heading();
  println("'cp' is now at an angle of", degrees(angle), "degrees towards 'mid'");  
  return PVector.fromAngle(angle).setMag(magnitude).add(mid);
}

void drawBezier(color c, PVector cp) {  
  stroke(c);
  beginShape();
  vertex(ap1.x, ap1.y);
  quadraticVertex(cp.x, cp.y, ap2.x, ap2.y);
  endShape();
}

void mouseMoved() {
  redraw();
}

```

---

<div class="post-metadata">

**Author:** ![Tilman](https://avatars.discourse-cdn.com/v4/letter/t/90db22/32.png) [@Tilman](https://discourse.processing.org/u/Tilman)\
**Post date:** [November 16, 2022, 3:34pm UTC](https://discourse.processing.org/t/bezier-curve-strength-weight-points/39629/7 "2022-11-16T15:34:00Z")

</div>

> [@Tiemen](#):
>
> bezier methods

Thank you @Tiemen! this does help me explore further!