Skip to content

Instantly share code, notes, and snippets.

@sabha

sabha/circlePattern.html

Last active March 22, 2018 15:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sabha/b881db660c68ff53d93a7a11f62df7d5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sabha/b881db660c68ff53d93a7a11f62df7d5 to your computer and use it in GitHub Desktop.
Download ZIP
Circle Pattern
Raw
circlePattern.html
<!DOCTYPE html>
<html>
<body>
<script>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function bootstrap(canvas, r, offset, c1, c2){
var canv = document.createElement('canvas');
canv.id = canvas;
canv.width = 300;
canv.height = 300;
canv.style="border:1px solid #d3d3d3;margin: 10px;"+"background-color: "+"#000033"+";"
document.body.appendChild(canv);
var c = document.getElementById(canvas);
var ctx = c.getContext("2d");
ctx.lineWidth=.8;
var angle = 0;
var cx = c.width/2;
var cy = c.height/2;
ctx.strokeStyle=getRandomColor();
while(angle<360) {
var radians = angle * Math.PI / 180.0;
var cos = (r+c1)* Math.cos(radians);
var sin = (r+c2)* Math.sin(radians);
ctx.beginPath();
ctx.arc(cos+cx, sin+cy, r, 0, 2 * Math.PI);
ctx.stroke();
angle+=offset;
}
}
//Radius , Number of Circles
bootstrap("myCanvas1", 100, 20,0,0);
bootstrap("myCanvas2", 500, 20,0,0);
bootstrap("myCanvas4", 30, 30,0,0);
bootstrap("myCanvasb5", 1000, 4,50,30);
bootstrap("myCanvas5", 1000, 4,0,0);
bootstrap("myCanvasb3", 2000, 4,500,30);
bootstrap("myCanvas6", 60, 5,4,40);
bootstrap("myCanvasa1", 100, 20,30,30);
bootstrap("myCanvasa3", 100, 4,30,30);
bootstrap("myCanvasb6", 60, 2.5,50,30);
bootstrap("myCanvasa4", 30, 30,30,30);
bootstrap("myCanvasa5", 1000, 4,30,30);
bootstrap("myCanvasa2", 500, 20,30,30);
bootstrap("myCanvasa6", 60, 2,80,80);
bootstrap("myCanvas3", 100, 4,0,0);
bootstrap("myCanvasb1", 100, 20,50,30);
bootstrap("myCanvasb2", 500, 20,50,30);
bootstrap("myCanvasb4", 30, 30,50,30);
bootstrap("myCanvasc1", 100, 30,30,50);
bootstrap("myCanvasc2", 500, 20,30,50);
bootstrap("myCanvasc3", 100, 4,30,50);
bootstrap("myCanvasc4", 30, 30,30,50);
bootstrap("myCanvasc5", 1000, 4,90,30);
bootstrap("myCanvasc6", 300, 2,30,50);
bootstrap("myCanvasd3", 200, 4,90,90);
</script>
</body>
</html>
@sabha

sabha commented Mar 21, 2018

Copy link
Copy Markdown
Author

circles

@sabha

sabha commented Mar 21, 2018

Copy link
Copy Markdown
Author

circles

@sabha

sabha commented Mar 22, 2018 •
edited
Loading

Copy link
Copy Markdown
Author 
`<!DOCTYPE html>
<html>
<body>

<script>
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
function bootstrap(canvas, r, offset, c1, c2, degree = 2){
	return function(func = Math.cos) {
    var canv = document.createElement('canvas');
  	canv.id = canvas;
    canv.width = 300;
    canv.height = 300;
    canv.style="border:1px solid #d3d3d3;margin: 10px;"+"background-color: "+"#000033"+";"

  	document.body.appendChild(canv);

  	var c = document.getElementById(canvas);
      var ctx = c.getContext("2d");
  	   ctx.lineWidth=.8;
      var angle = 0;
      var cx = c.width/2;
      var cy = c.height/2;
  		ctx.strokeStyle=getRandomColor();


      // var radians = angle * Math.PI / 180.0;
      // var cos = (r+c1)* func(radians);
      // var sin = (r+c2)* Math.sin(radians);
      ctx.moveTo(cos+cx, sin+cy);
      while(angle<360) {
          var radians = angle * Math.PI / 180.0;
          var cos = (r+c1)* func(radians);
          var sin = (r+c2)* Math.sin(radians);
          ctx.beginPath();
          ctx.arc(cos+cx, sin+cy, r, 0, degree * Math.PI);

          // ctx.lineWidth=1;
          // ctx.strokeStyle="#ffffff"
          // ctx.lineTo(cos+cx, sin+cy);
          ctx.stroke();

          angle+=offset;
      }
  }
}
//Radius , Number of Circles

bootstrap("Canvas01", 50, 20,0,0)(Math.tan);
bootstrap("Canvas02", 50, 2,50,50,1)(Math.tan);
bootstrap("Canvas03", 50, 2,70,0,1.5)(Math.tan);
bootstrap("Canvas04", 70, 6,0,0,1.8)(Math.tan);
bootstrap("Canvas05", 50, 8,90,90,2)(Math.tan);


bootstrap("Canvas1", 50, 20,0,0)();
bootstrap("Canvas2", 50, 2,50,50,1)();
bootstrap("Canvas3", 50, 2,70,0,1.5)();
bootstrap("Canvas4", 70, 6,0,0,1.8)();
bootstrap("Canvas5", 50, 8,90,90,2)();

bootstrap("myCanvas1", 100, 20,0,0)();
bootstrap("myCanvas2", 500, 20,0,0)();
bootstrap("myCanvas3", 100, 4,0,0)();
bootstrap("myCanvas4", 30, 30,0,0)();
bootstrap("myCanvas5", 1000, 4,0,0)();

bootstrap("myCanvas6", 60, 5,4,40)();

bootstrap("myCanvasa1", 100, 20,30,30)();
bootstrap("myCanvasa2", 500, 20,30,30)();

bootstrap("myCanvasa3", 100, 4,30,30)();

bootstrap("myCanvasa4", 30, 30,30,30)();
bootstrap("myCanvasa5", 1000, 4,30,30)();
bootstrap("myCanvasa6", 60, 2,80,80)();

bootstrap("myCanvasb1", 100, 20,50,30)();
bootstrap("myCanvasb2", 500, 20,50,30)();
bootstrap("myCanvasb3", 2000, 4,500,30)();
bootstrap("myCanvasb4", 30, 30,50,30)();
bootstrap("myCanvasb5", 1000, 4,50,30)();
bootstrap("myCanvasb6", 60, 2.5,50,30)();



bootstrap("myCanvasc1", 100, 30,30,50)();
bootstrap("myCanvasc2", 500, 20,30,50)();
bootstrap("myCanvasc3", 100, 4,30,50)();
bootstrap("myCanvasc4", 30, 30,30,50)();
bootstrap("myCanvasc5", 1000, 4,90,30)();
bootstrap("myCanvasc6", 300, 2,30,50)();

bootstrap("myCanvasd3", 200, 4,90,90)();
</script>

</body>
</html>
`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment