0
367
Visualizações¿Cómo crear formas redondeadas en p5.js?
Estoy tratando de codificar un jardín zen como un proyecto semestral. Trabajo con la biblioteca de JavaScript p5.js y mi pregunta es cómo crear formas redondeadas. Quiero usar esas formas como piedras en el jardín.
Aquí está mi código para una piedra.:
const x = 100; const y = 100; function setup() { createCanvas(400, 400); } function draw() { fill('green'); beginShape(); curveVertex(x+51,y+20); curveVertex(x+65,y+23); curveVertex(x+77,y+23); curveVertex(x+83,y+34); curveVertex(x+88,y+45); curveVertex(x+90,y+59); curveVertex(x+75,y+61); curveVertex(x+65,y+70); curveVertex(x+52,y+69); curveVertex(x+40,y+59); curveVertex(x+45,y+44); curveVertex(x+41,y+30); endShape(CLOSE); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>El problema es que la última curva no se ve redondeada, sino que se cierra abruptamente.
¿Alguien tiene una mejor idea de cómo podría generar piedras redondas para mi jardín en diferentes tamaños?
Por supuesto, cualquier otro aporte útil es bienvenido.
1 Respostas
Responde à pergunta0
Definitivamente estás en el camino correcto. Hay un detalle que te estás perdiendo accidentalmente: estás usando draw() sin borrar, usando background(255) .
Aquí está su código más lento: observe cómo cada cuadro los contornos se vuelven más nítidos
const x = 100; const y = 100; function setup() { createCanvas(400, 400); frameRate(3); } function draw() { scale(2); fill('green'); beginShape(); curveVertex(x+51,y+20); curveVertex(x+65,y+23); curveVertex(x+77,y+23); curveVertex(x+83,y+34); curveVertex(x+88,y+45); curveVertex(x+90,y+59); curveVertex(x+75,y+61); curveVertex(x+65,y+70); curveVertex(x+52,y+69); curveVertex(x+40,y+59); curveVertex(x+45,y+44); curveVertex(x+41,y+30); endShape(CLOSE); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>Y aquí está la diferencia al borrar el marco:
const x = 100; const y = 100; function setup() { createCanvas(400, 400); // smooth(); } function draw() { background(255); scale(2); fill('green'); beginShape(); curveVertex(x+51,y+20); curveVertex(x+65,y+23); curveVertex(x+77,y+23); curveVertex(x+83,y+34); curveVertex(x+88,y+45); curveVertex(x+90,y+59); curveVertex(x+75,y+61); curveVertex(x+65,y+70); curveVertex(x+52,y+69); curveVertex(x+40,y+59); curveVertex(x+45,y+44); curveVertex(x+41,y+30); endShape(CLOSE); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script> (Opcionalmente, smooth() puede ayudar un poco, pero en este caso no parece marcar una gran diferencia).
Buena idea y bocetos! ¡Buena suerte con tu proyecto!