CODEWITHSUNDEEP
javascriptfor-loop
dana Carlin
dana Carlin

Reputation: 35

Creating a for loop for a bezier curve

I can't figure out how to create a for loop that allows me to make 100 bezier curves across my canvas from left to right. I have the code to make the shape of the curve I want, I just can't figure out how to have it replicate across the page. Please help! This is what I am trying to do, but without having to repeat the code a 100 times. 

var canvas       
var canvas = document.getElementById("c");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx;
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(10,10,40,10,80,10);
ctx.stroke();
ctx.shadowColor;
ctx.fillStyle("#FF0000");

var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.moveTo(50,0);
ctx.bezierCurveTo(175,330,-15,600,0,600);
ctx.bezierCurveTo(-100,700,50,800,0,850);
ctx.moveTo(62.5,0);
ctx.bezierCurveTo(187.5,330,-2.5,600,12.5,600);
ctx.bezierCurveTo(-87.5,700,62.5,800,12.5,850);

ctx.moveTo(75,0);
ctx.bezierCurveTo(200,330,10,600,25,600);
ctx.bezierCurveTo(-75,700,75,800,25,850);
ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
ctx.stroke();

Upvotes: 0

Views: 662

Answers (3)

JohnH
JohnH

Reputation: 2133

You should use a for loop.

You may also want to replace some of the hard-coded constants in your function calls with variables that are incremented or decremented inside of the loop. This should make the output more dynamic.

Upvotes: 0

Durga
Durga

Reputation: 15614

Use a loop . And check for the pattern.

var c = document.getElementById("c");
var ctx = c.getContext("2d");
for(var i = 0; i<100; i++){
 var j = 12.5*i;
 ctx.moveTo(50+j, 0);
 ctx.bezierCurveTo(175+j, 330, -15+j, 600, j, 600);
 ctx.bezierCurveTo(-100+j, 700, 50+j, 800, j, 850);
}

ctx.lineWidth = 5;
ctx.strokeStyle = '#000000';
ctx.stroke();
<canvas id="c" width="1200" height="1000" style="border:1 px solid #c3c3c3; ">

Upvotes: 2

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18429

If you want the same curve repeated 100 times on the canvas, you need to adjust the position of all points, otherwise you will create multiple curves that looks exactly the same (so it will look like there is just one of them).

Also there were some syntactic errors in your code, e.g. fillStyle is a property, not a function.

Create a function for the drawing, that will take [x, y] coordinates from where to draw the curve:

function drawCurve(ctx, x, y) {
  ctx.beginPath();
  ctx.moveTo(x + 20, y + 20);
  ctx.bezierCurveTo(x + 10, y + 10, x + 40, y + 10, x + 80, y + 10);

  ctx.fillStyle = "#FF0000";
  ctx.lineWidth = 5;
  ctx.strokeStyle = '#000000';
  ctx.stroke();
}

var canvas = document.getElementById("c");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");

drawCurve(ctx, 50, 30);
drawCurve(ctx, 150, 130);
drawCurve(ctx, 0, 90);
<canvas id="c" width ="1200" height="1000" style="border: 1px solid #c3c3c3;"></canvas>

Upvotes: 0

Related Questions