Creé un script para calcular las coordenadas de un círculo en JS. Estoy usando p5.js para dibujar el círculo, pero cuando ejecuto el script no sucede nada. Supongo que tiene que ver con la forma en que estoy trazando los vértices.
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); } } } }Dibujas muchas formas con solo 1 punto. beginShape y endShape encierran los vértices de una forma. Por lo tanto, debe llamar a beginShape antes del ciclo y endShape después del ciclo:
function crookedCircle(radius, steps, centerX, centerY) { beginShape(); for (var i = 0; i < steps; i++) { // [...] } endShape(CLOSE); }Un bucle es suficiente si quieres dibujar 1 círculo:
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>Aquí limpié lo escrito, lo puedo anotar para explicar si así lo deseas. Además, en lugar de aleatorio, te recomiendo que explores la función noise() aquí , lo que haría que el círculo se viera más suave.
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); }