I don't know why the code does not work on the Internet Explorer 11 browser, but in the Google Chrome browser it does work.
To check, you just need copy and save this code as an HTML file and open by your browser.
I need to run in the Internet Explorer browser. I check to much many ways, but I can't solve it.
The Internet Explorer browser report me an error in line 48 of this code, but I don't know why!
<!doctype html>
<head><meta http-equiv="X-UA-Compatible" content="IE=11" charset="uft-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
</head>
<body>
<style>
html,
body {
height: 100%;
}
body {
color: #222;
background: #ededed;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.3;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
canvas {
border: 1px solid silver;
background: white;
cursor: -webkit-grab;
display: block;
}
</style>
<script>
let nouvelle,
ancienne,
pression;
let themeCouleur = [
'#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
'#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
'#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
'#FF5722'
];
class Particule {
constructor(parent) {
this.parent = parent;
this.gravite = parent.gravite;
this.reinit();
this.forme = round(random(0, 1));
this.etape = 0;
this.prise = 0;
this.priseFacteur = random(-0.02, 0.02);
this.multFacteur = random(0.01, 0.08);
this.priseAngle = 0;
this.priseVitesse = 0.05;
}
reinit() {
this.position = this.parent.position.copy();
this.position.y = random(-20, -100);
this.position.x = random(0, width);
this.velocite = createVector(random(-6, 6), random(-10, 2));
this.friction = random(0.995, 0.98);
this.taille = round(random(5, 15));
this.moitie = this.taille / 2;
this.couleur = color(random(themeCouleur));
}
dessiner() {
this.etape = 0.5 + Math.sin(this.velocite.y * 20) * 0.5;
this.prise = this.priseFacteur + Math.cos(this.priseAngle) * this.multFacteur;
this.priseAngle += this.priseVitesse;
translate(this.position.x, this.position.y);
rotate(this.velocite.x * 2);
scale(1, this.etape);
noStroke();
fill(this.couleur);
if (this.forme === 0) {
rect(-this.moitie, -this.moitie, this.taille, this.taille);
}
else {
ellipse(0, 0, this.taille, this.taille);
}
resetMatrix();
}
integration() {
this.velocite.add(this.gravite);
this.velocite.x += this.prise;
this.velocite.mult(this.friction);
this.position.add(this.velocite);
if (this.position.y > height) {
this.reinit();
}
if (this.position.x < 0) {
this.reinit();
}
if (this.position.x > width + 10) {
this.reinit();
}
}
rendu() {
this.integration();
this.dessiner();
}
}
class SystemeDeParticules {
constructor(nombreMax, position, gravite) {
this.position = position.copy();
this.nombreMax = nombreMax;
this.gravite = createVector(0, 0.1);
this.friction = 0.98;
// Le tableau
this.particules = [];
for (var i = 0; i < this.nombreMax; i++) {
this.particules.push(new Particule(this));
}
}
rendu() {
if (pression) {
var force = p5.Vector.sub(nouvelle, ancienne);
this.gravite.x = force.x / 20;
this.gravite.y = force.y / 20;
}
this.particules.forEach(particules => particules.rendu());
}
}
let confettis;
function setup() {
createCanvas(windowWidth, windowHeight);
frameRate(60);
ancienne = createVector(0, 0);
nouvelle = createVector(0, 0);
confettis = new SystemeDeParticules(500, createVector(width / 2, -20));
}
function draw() {
background(color("#222"));
nouvelle.x = mouseX;
nouvelle.y = mouseY;
confettis.rendu();
ancienne.x = nouvelle.x;
ancienne.y = nouvelle.y;
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
confettis.position = createVector(width / 2, -40);
}
function mousePressed() {
next = 0;
pression = true;
}
function mouseReleased() {
pression = false;
confettis.gravite.y = 0.1;
confettis.gravite.x = 0;
}
</script>
</body>
</html>
Internet Explorer 11 does not recognize this syntax for classes because of the ES6 specification: https://kangax.github.io/compat-table/es6/
Your code is in ES6 syntax. Convert it to ES5 using the below link and try.