# 8 bezier parameters to 12 bezier parameters in 3d

**URL:** <https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595>\
**Category:** Coding Questions\
**Created:** [November 18, 2021, 2:40pm UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595 "2021-11-18T14:40:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![medikid](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@medikid](https://discourse.processing.org/u/medikid)\
**Post date:** [November 18, 2021, 2:40pm UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/1 "2021-11-18T14:40:48Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

hi,  
i have old piece of code which i somehow transported to newest processing.  
it makes piles of bezier curves, circles in this case.  
from there i tried to port it to p5js, and it works, tho  
the choppy little curves are not my nice circles i had before.  
8 points of bezier curve need to be 12 points in 3d.  
i don’t know where to anchor them.

code Processing:

```auto

import processing.opengl.*;
import controlP5.*;

// tweakings
float minR = 30; // minimum radius
float maxR = 120; // maximum radius
float minA = 1.2; // min angle step in radians
float maxA = 1.9; // max angle step in radians
float randomFactor = 0.3; // factor of randomness of the thread
float changeRate = 0.01; // possibility of a new circle in each step
float wanderRate = 0.7; // possibility of a wondering thread. less creates closer circles
int stepsPerFrame = 1; // steps done in each frame. control speed here. 1 is minimum
int stepsPerCircle = 777; // max steps per each circle after which it forces change
float threadAlpha = 128; // alpha of the thread stroke
float threadWeight = 2; // thickness of the thread
float colorChangeSpeed = 0.5; // speed of color cycle. 1.0 is maximum speed

// helper variables
float c = 0, x, y, r, a;
float pbx = 0, pby = 0, px = 0, py = 0;
boolean clockwise = false;
int step = 0;

void setup(){
  size(1024, 680, OPENGL); // for present mode
  smooth();
  colorMode(HSB); // easier color cycling
  background(255);
  noFill();
  // initial values
  x = screenWidth / 2;
  y = screenHeight / 2;
  r = random(minR, maxR);
  a = random(TWO_PI);
  px = pbx = x + cos(a) * r;
  py = pby = y + sin(a) * r;
}

void draw(){
  
  for (int i = 0; i < stepsPerFrame; i++){
    float dir = clockwise ? 1 : -1;
    a = a + random(minA, maxA) * dir;
    float rmin = - randomFactor * r;
    float rmax = randomFactor * r;
    float x2 = (x + cos(a) * r) + random(rmin, rmax); 
    float y2 = (y + sin(a) * r) + random(rmin, rmax); 
    float d = sqrt(pow(x2 - px, 2) + pow(y2 - py, 2)) / 3;
    float bx = (x2 + cos(a - HALF_PI * dir) * d) + random(rmin, rmax); 
    float by = (y2 + sin(a - HALF_PI * dir) * d) + random(rmin, rmax);
    strokeWeight(threadWeight);
    stroke(c, 0, 0, threadAlpha / 2);
    float sshift = threadWeight / 2;
    bezier(px + sshift, py + sshift, px + (px - pbx) + sshift, py + (py - pby) + sshift, bx + sshift, by + sshift, x2 + sshift, y2 + sshift);
    c = (c + colorChangeSpeed) % 16;
    stroke(c, 16, 16, threadAlpha);
    bezier(px, py, px + (px - pbx), py + (py - pby), bx, by, x2, y2);
    strokeWeight(threadWeight / 2);
    stroke(c, 32, 255, threadAlpha / 2);
    bezier(px - 1, py - 1, px + (px - pbx) - 1, py + (py - pby) - 1, bx - 1, by - 1, x2 - 1, y2 - 1);
    px = x2;
    py = y2;
    pbx = bx;
    pby = by;
    if (random(1) < changeRate || step > stepsPerCircle || step == 1 && random(1) < wanderRate){
      createCircleParameters();
    }
    step++;
  }
}

void createCircleParameters(){
  
  float new_r = random(minR, maxR);
  float new_x = x + cos(a) * (r + new_r);
  float new_y = y + sin(a) * (r + new_r);
  if (new_x - new_r > 0 && new_x + new_r < width && new_y - new_r > 0 && new_y + new_r < height){
    x = new_x;
    y = new_y;
    r = new_r;
    a = a + PI;
    clockwise = !clockwise;
    step = 0;
  }
}

```

code P5js:

```auto
/* OpenProcessing Tweak of *@*http://www.openprocessing.org/sketch/78564*@* */

var minR = 30; // minimum radius
var maxR = 120; // maximum radius
var minA = 1.2; // min angle step in radians
var maxA = 1.9; // max angle step in radians
var randomFactor = 0.3; // factor of randomness of the thread
var changeRate = 0.01; // possibility of a new circle in each step
var wanderRate = 0.7; // possibility of a wondering thread. less creates closer circles
var stepsPerFrame = 1; // steps done in each frame. control speed here. 1 is minimum
var stepsPerCircle = 777; // max steps per each circle after which it forces change
var threadAlpha = 128; // alpha of the thread stroke
var threadWeight = 2; // thickness of the thread
var colorChangeSpeed = 0.5; // speed of color cycle. 1.0 is maximum speed

// helper variables
var c = 0;
var x = 0;
var y = 0;
var r = 0;
var a = 0;
var pbx = 0;
var pby = 0;
var px = 0;
var py = 0;
var clockwise = false;
var step = 0;

var new_r;
var new_x;
var new_y;
var sshift;

function setup() {
    //createCanvas(1024, 680, WEBGL); // Z coordinates on beziers are missing! Mind the different location of the animation in 3D
    createCanvas(1024, 680);
    smooth();
    colorMode(HSB, 360, 255, 255, 1); // HSB works with the Hue being 0-260, Saturation 0-100, and Brightness being 0-100. Alpha has to be 0-1. So the maximum color looks like this (360,100,100,1).

// I've marked where you can influence the "intensity" of the color in the code
    background(0);
    stroke(255);
    noFill();

}

function draw() {

    // initial values // restructured by me
    var x = width / 2;
    var y = height / 2;
    var r = random(minR, maxR);
    var a = random(TWO_PI);
    var px = pbx = x + cos(a) * r;
    var py = pby = y + sin(a) * r;

    for (var i = 0; i < stepsPerFrame; i++) {

        var c = 180;
        var c = (c + colorChangeSpeed) % 16;

        var dir = clockwise ? 1 : -1;
        var a = a + random(minA, maxA) * dir;
        var rmin = -randomFactor * r;
        var rmax = randomFactor * r;
        var x2 = (x + cos(a) * r) + random(rmin, rmax);
        var y2 = (y + sin(a) * r) + random(rmin, rmax);
        var d = sqrt(pow(x2 - px, 2) + pow(y2 - py, 2)) / 3;
        var bx = (x2 + cos(a - HALF_PI * dir) * d) + random(rmin, rmax);
        var by = (y2 + sin(a - HALF_PI * dir) * d) + random(rmin, rmax);
        console.log(c);
        strokeWeight(threadWeight);
        stroke(c, 0, 0, threadAlpha / 2);
        var sshift = threadWeight / 2;

        bezier(px + sshift, py + sshift, px + (px - pbx) + sshift, py + (py - pby) + sshift, bx + sshift, by + sshift, x2 + sshift, y2 + sshift);

        stroke(c, 16, 16, threadAlpha); // Here you have low Saturation and Brightness

        bezier(px, py, px + (px - pbx), py + (py - pby), bx, by, x2, y2);
        strokeWeight(threadWeight / 2);

        stroke(c, 32, 255, threadAlpha / 2); // Here, Brightness is over 100 and saturation is low.

        bezier(px - 1, py - 1, px + (px - pbx) - 1, py + (py - pby) - 1, bx - 1, by - 1, x2 - 1, y2 - 1);

        var px = x2;
        var py = y2;
        var pbx = bx;
        var pby = by;
        if (random(1) < changeRate || step > stepsPerCircle || step == 1 && random(1) < wanderRate) {
            createCircleParameters();
            console.log('works1');
        }

        step++;
    }

}

function createCircleParameters() {

    //console.log('works');

    var new_r = random(minR, maxR);
    var new_x = x + cos(a) * (r + new_r);
    var new_y = y + sin(a) * (r + new_r);

    if (new_x - new_r > 0 && new_x + new_r < width && new_y - new_r > 0 && new_y + new_r < height) {

        x = new_x;
        y = new_y;
        r = new_r;
        a = a + PI;
        clockwise = !clockwise;
        step = 0;

    }
}

```

--- i need to have dynamic x4, y4, and z4, but i do not see any example of code with those 12 parametars. thnx for any pointers!

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 18, 2021, 9:40pm UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/2 "2021-11-18T21:40:14Z")

</div>

Regardless of 3d vs 2d you need 4 points to make a Bezier curve (start, control1, control2, end). If you’re using WEBGL but you are doing everything in the Z=0 plane you should still be able to use the 8 argument overload. So it’s not clear what you are trying to do, or what issue you are facing.

Please edit your post to properly format your code. The best way to do this is using a line with three back ticks before and after your code:

````
```
// Your Code Here
```
````

---

<div class="post-metadata">

**Author:** ![medikid](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@medikid](https://discourse.processing.org/u/medikid)\
**Post date:** [November 19, 2021, 7:30am UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/3 "2021-11-19T07:30:40Z")

</div>

Thank you for your answer!  
I corrected and put full code above, both examples.  
That is what I was thinking too, z is 0. But is it?

But to be more clear, here you can see how it should look:

[![](https://img.youtube.com/vi/gZPw0KCGfKg/hqdefault.jpg "Waiting for fullfilment II / Patience") ](https://www.youtube.com/watch?v=gZPw0KCGfKg)

and code for that is from 2011 here:  
openprocessing online editor sketch/78564  
(first piece above)

It works nicely in processing.exe , but on openprocessing editor gives error:  
Uncaught You must use 12 parameters for bezier() in 3D mode

Then code is translated to P5js and it kinda works, meaning it does not throws error but  
visually is nothing like the original.

I am guessing because bezier points are wrong, you can see here:

> **[My Confinement - maja - OpenProcessing](https://openprocessing.org/sketch/1034368)**

(second piece of code above)

It makes nest-like drawing, but I can’t make that long continuous thread.

It has 8 points for bezier. I am playing on another account with that nest, trying to get it into first shape:  
sketch 1359452 on openprocessing

Embarrassing, yep, and I thought I shoud better ask here!

Thank you so much for reading this! Anyone, pls?

---

<div class="post-metadata">

**Author:** ![medikid](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@medikid](https://discourse.processing.org/u/medikid)\
**Post date:** [December 11, 2021, 7:08am UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/4 "2021-12-11T07:08:11Z")

</div>

@KumuPaul pls do you have any idea how to solve this! thousand thanx!

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [December 11, 2021, 8:16am UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/5 "2021-12-11T08:16:52Z")

</div>

1. I think you have simply made some kind of transcription error converting the processing sketch to p5.js

https://openprocessing.org/sketch/1393789/embed/?plusEmbedHash=ZWUxZDEzYjQyMWUyNGY2YjM3ODMwNGY5MGQ4NzA2NzljMDE4NjEzNmM5YTNkZjM5ZWQ1OTQxNjg3Mzg1ZWQzNGE0NDBkMmI5NmEwZWFiZmQ0YTk1N2M2NjI2NzQ2NGIyZjk2YmJiOGRlZTdiMGViYWY4YTM3Y2M1Y2EzYTU2MmE4dENVOVloTkhyTFhUNExKSmI2TXlmTHhIVXFOckFYWGtsbFYzaU1CcWpabklkNEFBYnY1NGVWRHRHK2EzbGVLbUFqSGZQVnFEazQ2MFFsQTNPNnlzZz09&plusEmbedTitle=true
1. I also don’t think you will want to use WebGL. Strokes cannot have transparency in WebGL, so you will get a better result with a normal canvas:

https://openprocessing.org/sketch/1393792/embed/?plusEmbedHash=ODg4OWM4ZGMzYTJkOTQwZmRlNDBkNDE0MGYwMzhiNDdkZWM0YmI5MDhkODM3NzYxNTVlMjYzYjI5MmUyZGQwZWE5YzkyZDZjMmExZjZhMmE3NTY4OGMyZjhlZTk1ODhiODZhYTg3MWU2Mzc4ZTFkZTAxNjk4YWNhYWQ5OGJlNzBlVnl2aWZuR0svWFJxNFVWVmlBc2VVSDZnamYrbEQ0Q1BFWFJGWWhuZDM4KzhQSE1hUDRVWGcrMzI3Yk9yV0YzSTdET3dFMGxOTW5yZ0gzdGxwWFFUUT09&plusEmbedTitle=true

Your code has numerous variable scoping issues that I’m guessing relate to the difference in behavior. You should stop using `var` ever again. Most of your declarations should use `let` it will make it more clear where you have redeclared a variable that already existed in the parent scope, or when you’ve used a variable before it was declared.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 11, 2021, 10:29am UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/6 "2021-12-11T10:29:05Z")

</div>

> [@KumuPaul](#):
>
> Most of your declarations should use `let`…

Actually `const` is the most advisable if we don’t intend to reassign a variable later on: 😉

> **[const - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)**
>
> The const declaration declares block-scoped local variables. The value of a constant can't be changed through reassignment using the assignment operator, but if a constant is an object, its properties can be added, updated, or removed.

Another useful tip is to always place ‘use strict’ as the 1st statement on a JS file, so we can’t inadvertently create variables w/o declaring them 1st:

> **[Strict mode - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)**
>
> JavaScript's strict mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of "sloppy mode". Strict mode isn't just a subset: it intentionally has different semantics from normal code. Browsers not supporting...

---

<div class="post-metadata">

**Author:** ![medikid](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@medikid](https://discourse.processing.org/u/medikid)\
**Post date:** [December 11, 2021, 3:09pm UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/7 "2021-12-11T15:09:35Z")

</div>

omg omg thank you so much, i was literally stuck for ages.

---

<div class="post-metadata">

**Author:** ![medikid](https://avatars.discourse-cdn.com/v4/letter/m/b5ac83/32.png) [@medikid](https://discourse.processing.org/u/medikid)\
**Post date:** [December 11, 2021, 3:10pm UTC](https://discourse.processing.org/t/8-bezier-parameters-to-12-bezier-parameters-in-3d/33595/8 "2021-12-11T15:10:39Z")

</div>

thank you so much, so much to learn, left brain, right brain, i hope it will enter somewhere!  
mk