Создание случайных фигур на холсте

Question

В настоящее время я пытаюсь создать анимацию холста с плавающими вокруг случайными фигурами. В настоящее время я работаю над этим кодом (https://codepen.io/mikeddev/pen/xxboORV), который более или менее имеет тот тип анимации, который я ищу, однако я хотел бы выяснить, как создавать случайные фигуры, как показано на рисунке. ниже вместо кругов.

Спасибо всем за любые советы, которые вы можете дать, как я могу достичь этого видения.

Изображение рандомизированных частиц

Код до сих пор ...

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>

Answer 1

Прежде чем перейти к ответу, во фрагменте кода, который вы показали, много ошибок. вы можете попытаться исправить их. В любом случае,

, вы должны сделать функцию случайного числа, используя Math.random ()

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

, затем, возможно, использовать операторы if / then для получения случайного числа. shape:

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

Вы можете иметь столько фигур, сколько захотите, и максимум для randomNumber() будет равен количеству операторов if / then.

вы можете Также некоторые из них могут быть более распространенными, чем другие:

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