Creating random shapes in canvas

Question

I'm currently trying to create a canvas animation with random shapes floating around. I am currently work on this codepen (https://codepen.io/mikeddev/pen/xxboORV) which more or less has the type of animation I'm looking for however I would like to figure out how to create random shapes such as shown in the image below instead of circles.

Thank you all for any guidance you may have how I can achieve this vision.

Image of randomized particles

Code so far...

var canvas = document.querySelector('canvas');
// Dimensions Of The Canvas
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Get The Context 2d Dimensions
var c = canvas.getContext('2d');

var maxRadius = 40;
// var minRadius = 2;

// colors Array
var colorArray = ['#2C3E50','#E74C3C','#ECF0F1','#3498DB','#2980B9'];

window.addEventListener('resize', function() {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

 init();
})

function Circle(x, y, dx, dy, radius) {
 this.x = x;
 this.y = y;
 this.dx = dx;
 this.dy = dy;
 this.radius = radius;
 this.minRadius = radius;
 this.color = colorArray[Math.floor(Math.random() * colorArray.length)];

 this.draw = function() {
  c.beginPath();
  c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
  c.fillStyle = this.color;
  c.fill();
 }
 this.update = function() {
  if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
  this.dx = -this.dx;
  }
  if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
  this.dy = -this.dy;
  }
  this.x += this.dx;
  this.y += this.dy;

  this.draw();
 }
}

var circleArray = [];

function init() {
 circleArray = [];
 for (var i = 0; i < 300; i++) {
  var radius = Math.random() * 3 + 1;
  var x = Math.random() * (innerWidth - radius * 2) + radius;
  var y = Math.random() * (innerHeight - radius * 2) + radius;
  var dx = (Math.random() - 0.5);
  var dy = (Math.random() - 0.5);
  circleArray.push(new Circle(x, y, dx, dy, radius));
 }
}

function animate() {
 requestAnimationFrame(animate);
 c.clearRect(0, 0, innerWidth, innerHeight);

 for (var i = 0; i < circleArray.length; i++) {
  circleArray[i].update();
 }

}
init();
animate();

* {
 margin: 0;
 box-sizing: border-box;
}
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden
}
body {
 padding: 0;
 text-align: center;
 background-color: #fff;
}

<canvas></canvas>

Replace the `Circle` function with a function to draw the shape you want. I suggest using `moveTo` like in [this answer](https://stackoverflow.com/questions/4839993/how-to-draw-polygons-on-an-html5-canvas) — snek_case, Jan 30 '20 at 18:26

score 2 · Answer 1 · answered Jan 30 '20 at 18:40

Before I get into the answer, the code snippet you showed has a lot of errors. you might want to try to fix those.

anyways, you should make a random number function using Math.random()

function randomNumber(min,max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}

then maybe use if/then statements to get a random shape:

int rand = randomNumber(1,2)
if (rand === 1) {
    //code for circle
} else if (rand === 2) {
    //code for square
}  //etc

you can have there be as many shapes as you want, having the max for the randomNumber() be equal to the amount of if/then statements.

you can also have some be more common than others by doing:

if (rand === 1 || rand === 2) {
    //code for shape
}

Thank you for you comment Julian, I think going forward from here is maybe have a set of 10 predefined shapes, and change their size, color and rotation withing a set of predefined parameters as you suggested. — mddev, Jan 30 '20 at 19:28

Creating random shapes in canvas

1 Answers1