andre/UoL
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add collition with box and color change

Browse Source
This commit is contained in:
Lev
2021-06-07 01:15:19 -05:00
parent 111adc1dea
commit 791b4e02d6
4 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
CM2030 Graphics Programming/Topic 3/3.3.3/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>graphicsProgramming - Coursera</title>
<script src="libraries/p5.min.js" type="text/javascript"></script>
<script src="libraries/p5.sound.min.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>

3
CM2030 Graphics Programming/Topic 3/3.3.3/libraries/p5.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
CM2030 Graphics Programming/Topic 3/3.3.3/libraries/p5.sound.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

106
CM2030 Graphics Programming/Topic 3/3.3.3/sketch.js Normal file
View File

@ -0,0 +1,106 @@
//////////////////////////////////
// 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);
}
}