class Balloon {
constructor(p5, limits) {
this.p5 = p5;
this.size = this.p5.random(40, 90);
this.limits = limits;
this.mass = this.size / 10;
this.location = new P5.Vector(this.p5.width / 2, this.p5.height / 2);
this.acceleration = new P5.Vector();
this.velocity = new P5.Vector();
this.t = this.p5.random(0, 100000000);
}
wrap() {
if (this.location.x <= 0) this.location.x = 0;
if (this.location.x <= 0) this.location.x = this.p5.width;
// if (this.location.y >= this.p5.height) this.location.y = 0;
// if (this.location.y <= 0) this.location.y = this.p5.height;
}
bounce() {
if (this.location.y - this.size / 2 <= this.limits.minY) {
this.location.y = this.limits.minY + this.size / 2;
this.velocity.y *= -1;
}
if (this.location.y + this.size / 2 >= this.limits.maxY) {
this.location.y = this.limits.maxY - this.size / 2;
this.velocity.y *= -0.25;
}
}
update() {
this.wrap();
this.bounce();
// this.acceleration = P5.Vector.random2D();
this.applyForce(this.accumulateForces());
this.velocity.add(this.acceleration);
// console.log(this.acceleration.array());
this.velocity.limit(this.maxVelocity);
this.location.add(this.velocity);
this.acceleration.mult(0);
this.t += 0.01;
// console.log(this.t);
}
blink() {
const count = this.p5.frameCount % (100 + this.size / 2);
return count < 10 ? true : false;
}
drawFace() {
const xOffset = this.p5.map(this.p5.mouseX, 0, width, -5, 5);
const yOffset = this.p5.map(this.p5.mouseY, 0, height, -2, 2);
this.p5.push();
this.p5.translate(xOffset, yOffset);
this.drawEyes();
this.drawMouth();
this.p5.pop();
}
drawMouth() {
this.p5.stroke("black");
this.p5.strokeWeight(2);
this.p5.noFill();
this.p5.arc(
0,
this.size / 10,
this.size * 0.4,
this.size * 0.33,
Math.PI * 0.25,
Math.PI * 0.75
);
}
drawEyes() {
if (this.blink()) return;
const eyeRadius = 5;
const offset = this.size / 5;
this.p5.noStroke();
this.p5.fill("black");
this.p5.circle(-offset, this.size / 10, eyeRadius);
this.p5.circle(offset, this.size / 10, eyeRadius);
}
display() {
this.p5.push();
this.p5.translate(this.location.x, this.location.y);
this.p5.stroke("black");
this.p5.fill("rgba(255,0,0,.75)");
this.p5.strokeWeight(4);
this.p5.circle(0, 0, this.size);
this.p5.push();
this.p5.translate(0, this.size / 2);
this.p5.strokeJoin(this.p5.ROUND);
this.p5.triangle(0, 0, 5, 5, -5, 5);
this.p5.pop();
this.drawFace();
this.p5.pop();
}
accumulateForces() {
const wind = this.p5.keyIsDown(this.p5.UP_ARROW)
? new P5.Vector(0, -0.1)
: new P5.Vector();
const x = this.p5.map(this.p5.noise(this.t), 0, 1, -0.005, 0.005);
const y = this.p5.map(this.p5.noise(this.t + 100000000), 0, 1, -0.01, 0.01);
const breeze = new P5.Vector(x, y);
const gravity = new P5.Vector(0, 0.01);
return new P5.Vector.add(wind, breeze).add(gravity).div(this.mass);
}
applyForce(force) {
this.acceleration.add(force);
}
}
function drawFace(p5, faceDiameter) {
const xOffset = p5.map(this.p5.mouseX, 0, width, -5, 5);
const yOffset = p5.map(this.p5.mouseY, 0, height, -2, 2);
p5.push();
p5.translate(xOffset, yOffset);
drawEyes();
drawMouth();
p5.pop();
function drawMouth() {
p5.stroke("black");
p5.strokeWeight(2);
p5.noFill();
p5.arc(
0,
faceDiameter / 2,
faceDiameter * 0.4,
faceDiameter * 0.3,
Math.PI * 0.25,
Math.PI * 0.75
);
}
function drawEyes() {
if (this.blink()) return;
const eyeRadius = 5;
const offset = faceDiameter / 5;
p5.noStroke();
p5.fill("black");
p5.circle(-offset, faceDiameter / 5, eyeRadius);
p5.circle(offset, faceDiameter / 5, eyeRadius);
}
}
import { task, intro, height, todoList } from "85dc677b160fa289"
import { P5, p5 } from "@tmcw/p5"
import {Mover} from "eafba010e0780077"
import { buttons } from "@observablehq/keys"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
