I am working on a project these days. My goal is to change the color of the intersecting areas of the two squares. I have written the code which detects whenever two squares intersect but I cant figure out how to change the color of the intersecting area. Kindly help me with this.
var sketch = function (p) {
with(p) {
let squares = [];
let dragObject = null; // variable to hold the object being dragged
p.setup = function() {
createCanvas(600, 520);
button1 = createButton("Alpha");
button2 = createButton("Bravo");
button3 = createButton("Charlie");
button4 = createButton("Delta");
button5 = createButton("Echo");
button6 = createButton("Foxtrot");
button7 = createButton("Golf");
button8 = createButton("Hotel");
button9 = createButton("India");
button10 = createButton("Juliet");
button1.mousePressed(doSomething);
};
p.draw = function() {
background(25, 240, 255);
// if a square is being dragged, update its position
if (this.dragObject != null) {
this.dragObject.position.x = mouseX;
this.dragObject.position.y = mouseY;
}
//draw all squares
for (let i = 0; i < squares.length; i++) {
let s = squares[i];
s.show();
}
for (let i = 0; i < squares.length; i++) {
for (let j = i + 1; j < squares.length; j++) {
if (i != j && squares[i].collides(squares[j])) {
squares[i].changecolor();
}
}
}
};
p.mousePressed = function () {
if (this.dragObject == null) {
//ask every square if they are being "hit"
for (let i = 0; i < squares.length; i++) {
let s = squares[i];
if (s.hitTest()) {
//if so, set the drag object as this square and return
this.dragObject = s;
return;
}
}
//no squares are hit, create a new square.
let square = new Square(mouseX, mouseY);
squares.push(square);
}
};
//mouse is released, release the current dragged object if there is one
p.mouseReleased = function () {
this.dragObject = null;
};
class Square {
constructor(InitialX, InitialY) {
this.w = 60;
this.h = 60;
this.position = {
x: InitialX,
y: InitialY
};
}
//basic test of mouse position against square position and if its inside the rectangle
hitTest() {
let x = mouseX - this.position.x;
let y = mouseY - this.position.y;
return (x > 0 && x < this.w) && (y > 0 && y < this.h);
}
show() {
fill(50);
rect(this.position.x, this.position.y, this.w, this.h);
}
collides(sqr) {
if (this.position.x < sqr.position.x + sqr.w &&
this.position.x + this.w > sqr.position.x &&
this.position.y < sqr.position.y + sqr.h &&
this.position.y + this.h > sqr.position.y) {
return true;
}
return false;
}
changecolor() {
fill(random(255), random(255), random(255));
background(200, 255, 100);
for (let i = 0; i < squares.length; i++) {
let s = squares[i];
s.show();
}
}
}
function doSomething() {
// fill(230, 170, 90);
// ellipse(random(600), random(410), 30, 30);
squares.pop();
}
}
};
let node = document.createElement('div');
window.document.getElementById('p5-container').appendChild(node);
new p5(sketch, node);
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<div id="p5-container"></div>
Lets think a bit how we could represent the intersecting area between two squares. Surely, one of the ways to do is simply to represent it as another rectangle, whose color we simply change based on the intercepting area. To draw a rectangle, we need to know the coordinates of the upper left corner, the width and the height. Therefore the challenge is to calculate those as we drag our squares around. This should be done in the draw() function. You already have the intersection check implemented, whats left is to calculate the new rectangle upper left point (newX, newY), width (newW) and height (newH).
In order to calculate the upper left corner, the width and height, we can add this to the block where we check for collision:
...
//block checking collision
if (i != j && squares[i].collides(squares[j])) {
squares[i].changecolor();
//set intersection color
fill(50);
//calculate parameters
newX = Math.max(squares[i].position.x, squares[j].position.x);
newY = Math.max(squares[i].position.y, squares[j].position.y);
newW = Math.min(squares[i].position.x + squares[i].w, squares[j].position.x + squares[j].w) - newX;
newH = Math.min(squares[i].position.y + squares[i].h, squares[j].position.y + squares[j].h) - newY;
//draw rectangle
rect(newX, newY, newW, newH);
}
Result:
Related
I have a problem in p5.js. I was creating this for a school project, and everything works (I think). However, when I run it, it shows me "Unexpected end of input." And the error says "Unrecoverable syntax error (100% scanned). I'm not sure what's wrong.
I included the code below in case if there's something wrong with my code. Thanks for your time!
/* GLOBAL VARIABLES */
let meteorX = []; // Store X position of the meteor
let meteorY = [0, 0 ,0 ,0 ,0]; // Store Y position of the meteor
let meteorDiameter = []; // Store diameter of the meteor
let catcherWidth = 40; // Store diameter of the catcher
let catcherHeight = 60
let distance; //distance between catcher and meteor
let speed = []; //Speed of meteor
let score = 0; //number of meteor caught
//Declare a variables to store the image files
let bgImage;
let meteorImage;
let catcherImage;
// Only runs once
function setup() {
createCanvas(400, 400);
//Load the images into the sketch and store in variables
bgImage = loadImage('bgImage.jpg');
meteorImage = loadImage('meteor.png');
catcherImage = loadImage('rocketship.png');
}
//populate meteorX values
for(let i = 0; i < 5; i++){
meteorX[i] = random(0, width);
}
//populate initial diameter
for(let i = 0; i < 5; i++){
meteorDiameter[i] = random(10,40)
}
//populate initial speed
for(let i = 0; i < 5; i++){
speed[i] = random(0.5,4)
}
// Runs over and over in a loop
function draw() {
// Draws the image starting from the top left corner
imageMode(CORNER);
background(bgImage);
noStroke();
//Draw meteors to screen
for(let i = 0; i < 5; i++){
ellipse(meteorX[i], meteorY[i], meteorDiameter[i],meteorDiameter[i])
}
for(let i = 0; i <5; i++){
meteorY[i] = meteorY[i] + speed[i]
}
// Draw the catcher to follow the mouse
image(catcherImage, mouseX, mouseY, catcherWidth, catcherHeight);
for(let i = 0; i < 5; i++){
distance[i] = dist(meteorX[i], meteorY[i], mouseX, mouseY);
//whenever a meteor intersects with catcher
for(let i = 0; i < 5; i++){
if(distance[i] < 15){
meteorY[i] = 0
meteorX[i] = random(0,width)
meteorDiameter = random(10,40)
score = score + 1
}
}
//when meteor touches bottom of screen
for(let i = 0; i < 5; i++){
if(distance[i] > height){
meteorY[i] = 0;
meteorX[i] = random(0, width);
meteorDiameter[i] = random(10,40)
}
}
// Test to see if cat has intersected with screen bottom
if(meteorY > height) {
meteorY = 0;
meteorX = random(width);
speed = random(1,4);
meteorDiameter = random(10,30);
}
// put score on bottom
fill(0, 254, 202);
textAlign(RIGHT);
textSize(15);
text('Score: ' + score, 80, 385);
if(score == 10){
meteorY = width + 10;
meteorX = height + 10;
speed = 0;
//win message
textAlign(CENTER);
textSize(20);
text('You Win!', width/2, height/2);
textSize(14);
text('Click the mouse anywhere to restart.', width/2, height/2 + 30);
// Restart the game if player clicks the mouse.
if(mouseIsPressed){
restart();
}
}
}
function restart(){
meteorY = 0
meteorX = 100
speed = 0.5
score = 0
}```
Just close the draw function with }, you opened but not closed.
function draw() {
// Draws the image starting from the top left corner
imageMode(CORNER);
background(bgImage);
noStroke();
//Draw meteors to screen
for(let i = 0; i < 5; i++){
ellipse(meteorX[i], meteorY[i], meteorDiameter[i],meteorDiameter[i])
}
for(let i = 0; i <5; i++){
meteorY[i] = meteorY[i] + speed[i]
}
// Draw the catcher to follow the mouse
image(catcherImage, mouseX, mouseY, catcherWidth, catcherHeight);
for(let i = 0; i < 5; i++){
distance[i] = dist(meteorX[i], meteorY[i], mouseX, mouseY);
//whenever a meteor intersects with catcher
for(let i = 0; i < 5; i++){
if(distance[i] < 15){
meteorY[i] = 0
meteorX[i] = random(0,width)
meteorDiameter = random(10,40)
score = score + 1
}
}
//when meteor touches bottom of screen
for(let i = 0; i < 5; i++){
if(distance[i] > height){
meteorY[i] = 0;
meteorX[i] = random(0, width);
meteorDiameter[i] = random(10,40)
}
}
// Test to see if cat has intersected with screen bottom
if(meteorY > height) {
meteorY = 0;
meteorX = random(width);
speed = random(1,4);
meteorDiameter = random(10,30);
}
// put score on bottom
fill(0, 254, 202);
textAlign(RIGHT);
textSize(15);
text('Score: ' + score, 80, 385);
if(score == 10){
meteorY = width + 10;
meteorX = height + 10;
speed = 0;
//win message
textAlign(CENTER);
textSize(20);
text('You Win!', width/2, height/2);
textSize(14);
text('Click the mouse anywhere to restart.', width/2, height/2 + 30);
// Restart the game if player clicks the mouse.
if(mouseIsPressed){
restart();
}
}
}
} <--- This one is missing
I'm trying to achieve that, everytime you type a different letter key, the lines of the letters 'merge' into eachother instead of just 'jumping' to the next letter like it's doing now. I'm looking into the lerp() function but i'm not sure how to apply this to my code. Can someone help me into the right direction? This is what i have untill now:
var redtown;
var fontSize = 500;
var myArray;
var r = 3;
function preload(){
redtown = loadFont('redtown.otf');
}
function setup(){
createCanvas(windowWidth,windowHeight);
textFont(redtown);
textSize(fontSize);
}
function draw(){
background(0);
myArray = redtown.textToPoints(key, width/2, 500, fontSize, {
sampleFactor:0.5
});
// text(key, width/2, height/2 );
for (var i = 0; i < myArray.length; i++) {
// ellipse(myArray[i].x, myArray[i].y, 10, 10)
push();
translate(myArray[i].x, myArray[i].y);
rotate(r);
r++;
stroke(255);
strokeWeight(1);
line(-10,-10,10,10,10);
frameRate(17);
pop();
}
}
Here is a snippet that transitions from one character to another by using textToPoints to get the points from the last two keys that have been pressed and then slides each point in the old character to its position in the new character.
It uses this formula to get the x and y positions of points along a line from the point in the old character to the point in the new character.
x = (1-t)*x+t*nextX;
y = (1-t)*y+t*nextY;
It also uses the spinning lines idea from the question to give the points some motion although it pins the line size to a constant.
rotate(r+=0.1);
line(-1,-1,1,1);
You can see it in action here Fonts Transition
var myFont;
var fontSize = 160;
var fontPoints =[];
var previousFontPoints = [];
var r = 0;
var oldKey = ' ';
function preload(){
myFont = loadFont('inconsolata.otf');
}
function setup(){
createCanvas(500, 500);
textFont(myFont);
textSize(fontSize);
frameRate(30);
stroke(255);
strokeWeight(1);
background(0);
}
function draw(){
if (oldKey != key){
previousFontPoints =
myFont.textToPoints(oldKey, width/10, height/2, fontSize, {
sampleFactor:1
});
oldKey = key;
fontPoints = myFont.textToPoints(key, width/10, height/2, fontSize, {
sampleFactor:1
});
t = 0.025;
}
t += .01;
if (fontPoints.length > 0 && t< 1.0){
background(0);
for (i = 0; i < fontPoints.length; i++){
let x = 0;
let y = 0;
// if we don't have enought points we will just float in from 0,0
let nextX = 0;
let nextY = 0;
push();
if (previousFontPoints.length > i){
x = previousFontPoints[i].x;
y = previousFontPoints[i].y;
// in case the new array does not have enough points
nextX = x;
nextY = y;
}
if (fontPoints.length > i){
nextX = fontPoints[i].x;
nextY = fontPoints[i].y;
}
x = (1-t)*x+t*nextX;
y = (1-t)*y+t*nextY;
translate(x, y);
rotate(r+=0.1);
line(-1,-1,1,1);
pop();
}
}
}
I am making a p5.js project. In it I am generating a list (with 8 elements) and setting them to 1/0. Each one represents a bit (1,2,4,8,16,32,64,128) and if the element is 1, I add the index of the bit array.
For example i = 3, states[i] = 1, bit[i] = 8 so I add 8 to a number because the current state of that bit is 1.
Another thing is that it draws a circle that is red/green based on bit state.
Now that you know the basic idea, I want to add the ability for the user to press a circle to change its state (from 1 to 0 and from 0 to 1). I know how to change the state, but how do i test if the user has actually pressed the button (notice that the button is a circle)?
Here is my code so far:
var array = [0,1,0,1,1,1,1,1];
var values = [128,64,32,16,8,4,2,1];
function setup(){
//console.log(array);
createCanvas(600,600);
textStyle(BOLDITALIC);
textSize(50);
}
function draw(){
clear();
var a = calculate(array);
background(51);
fill(255);
text(a,250,500);
let crcl = 50;
let d = 20;
let r = d/2;
for (let i = 0; i < 8; i++){
}
for (let i = 0; i < 8; i++){
if (array[i] === 1){
fill(0,255,0);
circle(crcl, 50, d);
} else {
fill(255,0,0);
circle(crcl, 50, d);
}
crcl += 50;
}
}
function calculate(array){
let a = 0;
for (let i = 0; i < 8; i++){
if (array[i] === 1){
a += values[i];
}
}
return a;
}
My finished code for everyone who just wants to see the code!:
var array = [0,1,0,1,1,1,1,1];
var values = [128,64,32,16,8,4,2,1];
var positonsX = [50,100,150,200,250,300,350,400];
var crcl = 50;
var d = 20;
var r = d/2;
function setup(){
//console.log(array);
createCanvas(600,600);
textStyle(BOLDITALIC);
textSize(50);
}
function draw(){
clear();
let crcl = 50;
d = 20;
r = d/2;
a = calculate(array);
background(51);
fill(255);
text(a,250,500);
for (let i = 0; i < 8; i++){
if (array[i] === 1){
fill(0,255,0);
circle(crcl, 50, d);
} else {
fill(255,0,0);
circle(crcl, 50, d);
}
crcl += 50;
}
}
function calculate(array){
let a = 0;
for (let i = 0; i < 8; i++){
if (array[i] === 1){
a += values[i];
}
}
return a;
}
function mouseClicked(){
for (let i = 0; i < 8; i++){
if (dist(mouseX,mouseY,positonsX[i],50) <= d){
array[i] = 1 - array[i];
}
}
}
You can detect whether a point (in your case, mouseX, mouseY) is in a circle by comparing the distance between the point and the center of the circle, and comparing it to the radius of the circle. If the distance is less than the radius, then the point is inside the circle.
You can google "detect if point is inside circle" for a ton of results. Shameless self-promotion: this tutorials explains collision detection, including point-circle collision detection.
I'd check for mouseClicked (https://p5js.org/reference/#/p5/mouseClicked), and then mouseX, mouseY to see if a circle got clicked.
I had created this class to add circular buttons for one of my projects. Sharing a link to the sketch, might save others some time: p5.js web editor sketch
To check if the mouse pointer is within a circle:
Get the distance between the center of the circle and the mouse pointer
const distance = dist(circleX, circleY, mouseX, mouseY)
Mouse is within the circle if that distance is less that the circle's radius
const isInside = (distance < circleRadius)
I'm trying to have my Particle object collide and reflect off my Slate object.
If I wanted to use an ellipse, it would be simple because I could just create a radius variable - can't do that with a rectangle.
It's something to do with the distance variable, I just can't figure it out.
var div;
var movers;
function setup() {
createCanvas(windowWidth,windowHeight);
background("#FDEDEB");
div = new Slate();
movers = new Particle();
}
function draw() {
background("#FDEDEB");
div.display();
movers.display();
movers.update();
movers.move();
if (movers.hits(div)) {
console.log("hit");
}
}
function Slate() {
this.x = 30;
this.y = height/2;
this.display = function() {
noStroke();
fill("#DF4655");
rect(this.x,this.y, 700, 200);
}
}
function Particle() {
this.pos = createVector(10,0);
this.vel = createVector(0,0);
this.acc = createVector(0.01,0.01);
this.history = [];
this.display = function() {
fill("#DF4655");
point(this.pos.x,this.pos.y);
//beginShape();
for(var j = 0; j < this.history.length; j++) {
var pos = this.history[j];
ellipse(pos.x,pos.y, 5, 3);
}
//endShape();
}
this.update = function() {
var v = createVector(this.pos.x,this.pos.y);
this.history.push(v);
if (this.history.length > 10) {
this.history.splice(0,1);
}
}
this.hits = function(div) {
// BOUNCE OFF SLATE
var d = dist(this.pos.x,this.pos.y,div.x,div.y);
if (d < 0) {
console.log('hits');
}
}
this.move = function() {
this.pos.add(this.vel);
this.vel.add(this.acc);
this.vel.limit(10);
for (var i = 0; i < this.history.length; i++) {
this.history[i].x += random(-2,2);
this.history[i].y += random(-2,2);
}
}
}
If the particle is a point (or can be represented as a point), you need to use point-rectangle collision detection. Basically you would need to check whether the point is between the left and right edges and the top and bottom edges of the rectangle.
if(pointX > rectX && pointX < rectX + rectWidth && pointY > rectY && pointY < rectY + rectHeight){
//the point is inside the rectangle
}
If the particle is an ellipse and you need to factor in the radius of that ellipse, then you're better off representing the particle as a rectangle, just for collision purposes. Then you can use rectangle-rectangle collision detection. This is also called a bounding box, and it's one of the most common ways to handle collision detection.
if(rectOneRight > rectTwoLeft && rectOneLeft < rectTwoRight && rectOneBottom > rectTwoTop && rectOneTop < rectTwoBottom){
//the rectangles are colliding
}
Shameless self-promotion: I wrote a tutorial on collision detection available here. It's for Processing, but everything is the same for P5.js.
I am trying to create a animation where circles run from right to left. The circles' colours are selected randomly by a function. I have created a fiddle where one circle runs from right to left. Now my function creates a random colour. This function is executed every second and the circle changes its colour every second, instead of a new circle with the random picked colour become created. How can I change it so that it draws a new circle every second on the canvas and doesn't only change the colour of the circle?
This is my function:
function getRandomElement(array) {
if (array.length == 0) {
return undefined;
}
return array[Math.floor(Math.random() * array.length)];
}
var circles = [
'#FFFF00',
'#FF0000',
'#0000FF'
];
function drawcircles() {
ctx.beginPath();
ctx.arc(ballx * 108, canvasHeight / 2, x*5, 0, 2*Math.PI, false);
ctx.fillStyle = getRandomElement(circles);
ctx.fill();
ctx.closePath;
}
Comments on your question:
You are changing the color of the fillStyle to a random color at each frame. This is the reason why it keeps "changing" color. Set it to the color of the circle:
context.fillStyle = circle.color;
make circles with x, y, diameter, bounciness, speed, and color using an array
draw and update them with requestAnimationFrame (mine is a custom function)
My answer:
I made this just last night, where some circles follow the cursor and "bounce" off the edges of the screen. I tested the code and it works.
I might post a link later, but here is all of the code right now...
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<script>
var lastTime = 0;
function requestMyAnimationFrame(callback, time)
{
var t = time || 16;
var currTime = new Date().getTime();
var timeToCall = Math.max(0, t - (currTime - lastTime));
var id = window.setTimeout(function(){ callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
var circles = [];
var mouse =
{
x: 0,
y: 0
}
function getCoordinates(x, y)
{
return "(" + x + ", " + y + ")";
}
function getRatio(n, d)
{
// prevent division by 0
if (d === 0 || n === 0)
{
return 0;
}
else
{
return n/d;
}
}
function Circle(x,y,d,b,s,c)
{
this.x = x;
this.y = y;
this.diameter = Math.round(d);
this.radius = Math.round(d/2);
this.bounciness = b;
this.speed = s;
this.color = c;
this.deltaX = 0;
this.deltaY = 0;
this.drawnPosition = "";
this.fill = function()
{
context.beginPath();
context.arc(this.x+this.radius,this.y+this.radius,this.radius,0,Math.PI*2,false);
context.closePath();
context.fill();
}
this.clear = function()
{
context.fillStyle = "#ffffff";
this.fill();
}
this.draw = function()
{
if (this.drawnPosition !== getCoordinates(this.x, this.y))
{
context.fillStyle = this.color;
// if commented, the circle will be drawn if it is in the same position
//this.drawnPosition = getCoordinates(this.x, this.y);
this.fill();
}
}
this.keepInBounds = function()
{
if (this.x < 0)
{
this.x = 0;
this.deltaX *= -1 * this.bounciness;
}
else if (this.x + this.diameter > canvas.width)
{
this.x = canvas.width - this.diameter;
this.deltaX *= -1 * this.bounciness;
}
if (this.y < 0)
{
this.y = 0;
this.deltaY *= -1 * this.bounciness;
}
else if (this.y+this.diameter > canvas.height)
{
this.y = canvas.height - this.diameter;
this.deltaY *= -1 * this.bounciness;
}
}
this.followMouse = function()
{
// deltaX/deltaY will currently cause the circles to "orbit" around the cursor forever unless it hits a wall
var centerX = Math.round(this.x + this.radius);
var centerY = Math.round(this.y + this.radius);
if (centerX < mouse.x)
{
// circle is to the left of the mouse, so move the circle to the right
this.deltaX += this.speed;
}
else if (centerX > mouse.x)
{
// circle is to the right of the mouse, so move the circle to the left
this.deltaX -= this.speed;
}
else
{
//this.deltaX = 0;
}
if (centerY < mouse.y)
{
// circle is above the mouse, so move the circle downwards
this.deltaY += this.speed;
}
else if (centerY > mouse.y)
{
// circle is under the mouse, so move the circle upwards
this.deltaY -= this.speed;
}
else
{
//this.deltaY = 0;
}
this.x += this.deltaX;
this.y += this.deltaY;
this.x = Math.round(this.x);
this.y = Math.round(this.y);
}
}
function getRandomDecimal(min, max)
{
return Math.random() * (max-min) + min;
}
function getRoundedNum(min, max)
{
return Math.round(getRandomDecimal(min, max));
}
function getRandomColor()
{
// array of three colors
var colors = [];
// go through loop and add three integers between 0 and 255 (min and max color values)
for (var i = 0; i < 3; i++)
{
colors[i] = getRoundedNum(0, 255);
}
// return rgb value (RED, GREEN, BLUE)
return "rgb(" + colors[0] + "," + colors[1] + ", " + colors[2] + ")";
}
function createCircle(i)
{
// diameter of circle
var minDiameter = 25;
var maxDiameter = 50;
// bounciness of circle (changes speed if it hits a wall)
var minBounciness = 0.2;
var maxBounciness = 0.65;
// speed of circle (how fast it moves)
var minSpeed = 0.3;
var maxSpeed = 0.45;
// getRoundedNum returns a random integer and getRandomDecimal returns a random decimal
var x = getRoundedNum(0, canvas.width);
var y = getRoundedNum(0, canvas.height);
var d = getRoundedNum(minDiameter, maxDiameter);
var c = getRandomColor();
var b = getRandomDecimal(minBounciness, maxBounciness);
var s = getRandomDecimal(minSpeed, maxSpeed);
// create the circle with x, y, diameter, bounciness, speed, and color
circles[i] = new Circle(x,y,d,b,s,c);
}
function makeCircles()
{
var maxCircles = getRoundedNum(2, 5);
for (var i = 0; i < maxCircles; i++)
{
createCircle(i);
}
}
function drawCircles()
{
var ii = 0;
for (var i = 0; ii < circles.length; i++)
{
if (circles[i])
{
circles[i].draw();
ii++;
}
}
}
function clearCircles()
{
var ii = 0;
for (var i = 0; ii < circles.length; i++)
{
if (circles[i])
{
circles[i].clear();
ii++;
}
}
}
function updateCircles()
{
var ii = 0;
for (var i = 0; ii < circles.length; i++)
{
if (circles[i])
{
circles[i].keepInBounds();
circles[i].followMouse();
ii++;
}
}
}
function update()
{
requestMyAnimationFrame(update,10);
updateCircles();
}
function draw()
{
requestMyAnimationFrame(draw,1000/60);
context.clearRect(0,0,canvas.width,canvas.height);
drawCircles();
}
function handleError(e)
{
//e.preventDefault();
//console.error(" ERROR ------ " + e.message + " ------ ERROR ");
}
window.addEventListener("load", function()
{
window.addEventListener("error", function(e)
{
handleError(e);
});
window.addEventListener("resize", function()
{
canvas.width = window.innerWidth - 20;
canvas.height = window.innerHeight - 20;
});
window.addEventListener("mousemove", function(e)
{
mouse.x = e.layerX || e.offsetX;
mouse.y = e.layerY || e.offsetY;
});
makeCircles();
update();
draw();
});
</script>
</body>
</html>