// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {
// Set number of Dots
var count = 100;
var w = 0.9; //Speed
var wz = 0.5; //Speed z
// Build float array to store circle properties d
var e = new Array(count);
//bullets! -------
var bcount = 4;
var b = new Array(bcount);
var bc = 0; //num bullets
//-------------------
//Create random dots
for (var j = 0; j < count; j++) {
e[j] = new Array(9);
var xAux = processing.random(20, processing.width - 20);
var yAux = processing.random(20, processing.height - 20);
e[j][0] = xAux; // X circle
e[j][1] = yAux; // Y circle
e[j][2] = 10; // Radius
e[j][3] = 1; //alive?
e[j][4] = processing.random(20, 250);
e[j][5] = processing.random(20, 250);
e[j][6] = processing.random(20, 250);
e[j][7] = processing.random(1, 3);
e[j][8] = processing.random(1, 3);
}
processing.draw = function() {
function drawDot(j) {
//TIME BULLET!!!!!!!!!
if (bc >= 0) for (var i = 0; i < bc; i++) {
if (b[i][3] == 0) {
processing.fill(255, 0, 0);
processing.ellipse(b[i][0], b[i][1], 1, 1);
//mov bullet
b[i][0] = b[i][0] + processing.cos(b[i][2]) * 0.01;
b[i][1] = b[i][1] + processing.sin(b[i][2]) * 0.01;
}
}
//If alive
if (e[j][3] == 1) {
processing.fill(e[j][4], e[j][5], e[j][6]);
processing.noStroke();
processing.ellipse(e[j][0], e[j][1], e[j][2], e[j][2]);
var mindist = 99999999999999; //Integuer.MaxValue exist?
var follow = 0;
for (var i = 0; i < bc; i++) {
if (b[i][3] == 0) {
var dist = processing.dist(e[j][0], e[j][1], b[i][0], b[i][1]);
if (dist < 5) { //Explode!!
e[j][3] = 2;
b[i][3] = 1;
}
}
}
if (e[j][3] == 1) { //Move
// Update ball
e[j][0] += e[j][7];
e[j][1] += e[j][8];
if (e[j][0] > canvas.width - e[j][2]) {
e[j][0] = canvas.width - e[j][2];
e[j][7] = -Math.abs(e[j][7]);
}
else if (e[j][0] < e[j][2]) {
e[j][0] = e[j][2];
e[j][7] = Math.abs(e[j][7]);
}
if (e[j][1] > canvas.height - e[j][2]) {
e[j][1] = canvas.height - e[j][2];
e[j][8] = -Math.abs(e[j][8]);
}
else if (e[j][1] < e[j][2]) {
e[j][1] = e[j][2];
e[j][8] = Math.abs(e[j][8]);
}
}
} else {
//Explode
if (e[j][3] > 1 && e[j][3] < 6) {
processing.fill(e[j][4], e[j][5], e[j][6]);
processing.noStroke();
processing.ellipse(e[j][0], e[j][1], e[j][2] * e[j][3], e[j][2] * e[j][3]);
//Chain reaction
for (var i = 0; i < count; i++) {
if (e[i][3] == 1) {
var dist = processing.dist(e[j][0], e[j][1], e[i][0], e[i][1]);
if (dist < (e[j][2] * e[j][3])) { //Explode!!
e[i][3] = 2;
}
}
}
e[j][3] = e[j][3] + 1;
} else {
e[j][3] = 0; //DIED
}
}
}
//erase background
processing.background(0);
for (var i = 0; i < count; i++)
drawDot(i);
};
processing.mousePressed = function() {
var i = bc % (bcount - 1);
if (bc < bcount - 1) {
b[i] = new Array(4);
}
var dx = 0 - processing.mouseX;
var dy = 300 - processing.mouseY;
var angle = processing.atan2(dy, dx);
b[i][0] = processing.mouseX - processing.cos(angle);
b[i][1] = processing.mouseY - processing.sin(angle);
b[i][2] = angle;
b[i][3] = 0;
i = i + 1;
if (bc < bcount - 1) {
b[i] = new Array(4);
}
var dx = 300 - processing.mouseX;
var dy = 0 - processing.mouseY;
var angle = processing.atan2(dy, dx);
b[i][0] = processing.mouseX - processing.cos(angle);
b[i][1] = processing.mouseY - processing.sin(angle);
b[i][2] = angle;
b[i][3] = 0;
bc = i + 1;
i = i + 1;
if (bc < bcount - 1) {
b[i] = new Array(4);
}
var dx = 300 - processing.mouseX;
var dy = 400 - processing.mouseY;
var angle = processing.atan2(dy, dx);
b[i][0] = processing.mouseX - processing.cos(angle);
b[i][1] = processing.mouseY - processing.sin(angle);
b[i][2] = angle;
b[i][3] = 0;
bc = i + 1;
//stroke(23, 79, 4, 220);
};
}
var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it*/
<html>
<head>
<script src="processing.js"></script>
</head>
<p><canvas id="canvas1" width="600" height="400"></canvas></p>