107 lines
2.5 KiB
JavaScript
107 lines
2.5 KiB
JavaScript
//////////////////////////////////
|
|
// COURSERA GRAPHICS PROGRAMMING
|
|
//////////////////////////////////
|
|
// Adapted from https://github.com/nature-of-code/
|
|
// released under MIT license
|
|
|
|
var ball;
|
|
///////////////////////////////////////////////
|
|
function setup() {
|
|
createCanvas(900, 600);
|
|
balls = [];
|
|
}
|
|
///////////////////////////////////////////////
|
|
function draw() {
|
|
background(0);
|
|
|
|
fill(255, 0, 0, 150);
|
|
rectMode(CENTER);
|
|
let boxW = 100;
|
|
rect(width/2, height/2, boxW, boxW);
|
|
|
|
let gravity = createVector(0, 0.1);
|
|
for (let i = 0; i < balls.length; i++) {
|
|
let ball = balls[i];
|
|
|
|
//collision with red box
|
|
//ball y location
|
|
let ballY = ball.location.y;
|
|
let ballX = ball.location.x;
|
|
let ballRadius = ball.size/2;
|
|
let boxUpperY = height/2 - boxW/2;
|
|
let boxLowerY = height/2 + boxW/2;
|
|
let boxRightX = width/2 + boxW/2;
|
|
let boxLeftX = width/2 - boxW/2;
|
|
|
|
if(ballY + ballRadius >= boxUpperY && ballX + ballRadius >= boxLeftX && ballX - ballRadius <= boxRightX)
|
|
ball.color = '#FF0000';
|
|
//accelerations
|
|
let friction = ball.velocity.copy();
|
|
friction.mult(-1);
|
|
friction.normalize();
|
|
friction.mult(0.03);
|
|
|
|
ball.applyForce(gravity);
|
|
ball.applyForce(friction);
|
|
ball.run();
|
|
}
|
|
}
|
|
|
|
function mouseClicked() {
|
|
//ball.location = new createVector(width / 2, height / 2);
|
|
mouseDragged();
|
|
}
|
|
|
|
function mouseDragged() {
|
|
|
|
if(mouseButton === LEFT)
|
|
balls.push(new Ball(mouseX, mouseY));
|
|
else
|
|
balls = [];
|
|
}
|
|
|
|
///////////////////////////////////////////////
|
|
class Ball {
|
|
color = "#666666";
|
|
constructor(x, y) {
|
|
this.acceleration = new createVector(0, 0);
|
|
this.velocity = new createVector(random(-3, 3), random(-3, 3));
|
|
this.location = new createVector(x, y);
|
|
this.size = random (10, 60);
|
|
}
|
|
|
|
run() {
|
|
this.draw();
|
|
this.move();
|
|
this.bounce();
|
|
}
|
|
|
|
draw() {
|
|
fill(this.color);
|
|
ellipse(this.location.x, this.location.y, this.size, this.size);
|
|
}
|
|
|
|
move() {
|
|
this.velocity.add(this.acceleration);
|
|
this.location.add(this.velocity);
|
|
this.acceleration.mult(0);
|
|
}
|
|
|
|
bounce() {
|
|
if (this.location.x > width - this.size / 2) {
|
|
this.location.x = width - this.size / 2;
|
|
this.velocity.x *= -1;
|
|
} else if (this.location.x < this.size / 2) {
|
|
this.velocity.x *= -1;
|
|
this.location.x = this.size / 2;
|
|
}
|
|
if (this.location.y > height - this.size / 2) {
|
|
this.velocity.y *= -1;
|
|
this.location.y = height - this.size / 2;
|
|
}
|
|
}
|
|
applyForce(force) {
|
|
this.acceleration.add(force);
|
|
}
|
|
}
|