How to plot a imperfect circle in JS with p5

user_16978264 0
Viewed 355

I've created a script to calculate coordinates of a circle in JS. I'm using p5.js to draw the circle but when I run the script nothing happens. I assume it has to do with the way I'm plotting the vertices?

var xValues = [];
var yValues = [];

function setup() {
  createCanvas(400, 400);
  background(220);
  crookedCircle(10, 10, 10, 10);
}

function draw() {}

function crookedCircle(radius, steps, centerX, centerY) {
  for (var i = 0; i < steps; i++) {
    xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
    yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
    for (let x = 0; x < xValues.length; x++) {
      for (let y = 0; y < yValues.length; y++) {
        //console.log("x: "+xValues[x] + " y: "+yValues[y])
        beginShape();
        vertex(xValues[x] + random(-10, 10), yValues[y]) + random(-10, 10);
        endShape(CLOSE);
      }
    }
  }
}
p5.js geometry javascript
2 Answers

You draw many many shapes with just 1 point. beginShape and endShape encloses the vertices of a shape. Therefore you have to call beginShape before the loop and endShape after the loop:

function crookedCircle(radius, steps, centerX, centerY) {
    beginShape();
    for (var i = 0; i < steps; i++) {
        // [...]
    }
    endShape(CLOSE);  
}

One loop is enough if you want to draw 1 circle:

var xValues = [];
var yValues = [];

function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220);
    fill(255)
    crookedCircle(100, 90, 120, 120);
}

function crookedCircle(radius, steps, centerX, centerY) {
    for (var i = 0; i < steps; i++) {
        xValues[i] = centerX + radius * Math.cos(2 * Math.PI * i / steps);
        yValues[i] = centerY + radius * Math.sin(2 * Math.PI * i / steps);
    }
    beginShape();
    for(let i = 0; i < steps; i ++) {
        vertex(xValues[i] + random(-2, 2), yValues[i] + random(-2, 2));
    }
    endShape(CLOSE);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>

user_55777650

Here I cleaned what was written, I can annotate it to explain if you wish so. Also instead of random, I recommend you explore the noise() function here, which would make the circle look smoother.

function setup() {
  createCanvas(400, 400);
  background(220);
  crookedCircle(10, 10, width / 2, height / 2);
}

function draw() {}

function crookedCircle(radius, steps, centerX, centerY) {
  var xValues = [];
  var yValues = [];
  for (var i = 0; i < steps; i++) {
    let rad = radius + random(-radius / 10,radius / 10) // you can change the 10 here to how intense you want the change to be;
    xValues[i] = (centerX + rad * cos(2 * PI * i / steps));
    yValues[i] = (centerY + rad * sin(2 * PI * i / steps));
  }
  beginShape();
    for(let i = 0; i < xValues.length; i ++){
        curveVertex(xValues[i], yValues[i]);
    }
   endShape(CLOSE);
  
}
user_145239470
Related