Skip to content

Commit c5d98b2

Browse files
committed
new stuff
1 parent f0162c0 commit c5d98b2

File tree

4 files changed

+278
-0
lines changed

4 files changed

+278
-0
lines changed

bug.mjs

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import {WIDTH, HEIGHT, bugCountMax} from './canvas.mjs';
2+
import {Vector2} from './vector2.mjs';
3+
4+
const maxAge = 16;
5+
6+
class Bug {
7+
8+
radius = 7;
9+
trailLength = 7;
10+
waggleScale = 0.5;
11+
speed = 0.8;
12+
trail = [];
13+
pathDelta = 50;
14+
remToPath = this.pathDelta;
15+
lifetime = 0;
16+
17+
constructor(x, y, size) {
18+
this.pos = new Vector2(x, y);
19+
// randomize the waggles
20+
this.lifetime = Math.floor(Math.random() * 200);
21+
this.radius -= Math.floor(Math.random() * 4);
22+
this.trailLength = this.radius;
23+
this.ageEvery = Math.floor(Math.random() * 3000) + 5000;
24+
this.ageTimer = this.ageEvery;
25+
this.maxAge = 16 + Math.floor(Math.random() * 3);
26+
this.dead = false;
27+
this.color = 'rgb(' + Math.floor(Math.random() * 100) + ',' + Math.floor(Math.random() * 100) + ','
28+
+ Math.floor(Math.random() * 100) + ')';
29+
this.chooseGoal();
30+
31+
}
32+
33+
pathOffset(delta, offset)
34+
{
35+
return delta.normalTo().scale(Math.sin(offset) * this.waggleScale)
36+
37+
}
38+
39+
drawCircle(cxt, pos, rad)
40+
{
41+
var hr = rad / 2;
42+
cxt.beginPath();
43+
cxt.arc(pos.x - hr, pos.y - hr, rad, 0, 2 * Math.PI);
44+
cxt.stroke();
45+
}
46+
47+
draw(cxt) {
48+
cxt.strokeStyle = this.color;
49+
if (this.dead) {
50+
return;
51+
}
52+
for (var i = 0; i < this.trail.length; i++)
53+
{
54+
var from = this.trail[i];
55+
this.drawCircle(cxt, from, this.radius * (i / this.trailLength))
56+
}
57+
var pos = this.pos;
58+
cxt.beginPath();
59+
cxt.arc(pos.x - this.radius / 2, pos.y - this.radius / 2, this.radius, 0, 2 * Math.PI);
60+
cxt.stroke();
61+
}
62+
63+
ageTick() {
64+
this.radius += 1;
65+
this.trailLength += 1;
66+
if (this.radius > this.maxAge) {
67+
this.dead = true;
68+
}
69+
}
70+
71+
tick(dt) {
72+
if(this.dead) {
73+
return;
74+
}
75+
if (this.atGoal()) {
76+
this.chooseGoal();
77+
}
78+
//console.log(dt);
79+
var dif = this.goal.sub(this.pos).normalize();
80+
var deltas = dif.scale(this.speed);
81+
this.remToPath -= dt;
82+
this.lifetime += dt;
83+
this.ageTimer -= dt;
84+
if(this.remToPath <= 0) {
85+
this.remToPath = this.pathDelta;
86+
this.trail.push(this.pos);
87+
}
88+
if(this.ageTimer <= 0) {
89+
this.ageTick();
90+
this.ageTimer = this.ageEvery;
91+
}
92+
this.move(deltas);
93+
if(this.trail.length > this.trailLength) {
94+
this.trail.shift();
95+
}
96+
}
97+
98+
chooseGoal() {
99+
var hr = Math.round(this.radius / 2);
100+
this.goal = new Vector2(hr + Math.floor(Math.random() * (WIDTH - this.radius)),
101+
hr + Math.floor(Math.random() * (HEIGHT - this.radius)));
102+
}
103+
104+
atGoal() {
105+
return Vector2.distance(this.pos, this.goal) < 2;
106+
}
107+
108+
move(deltas) {
109+
var start = this.pos
110+
this.pos = this.pos.add(deltas);
111+
this.boundsCheck();
112+
if(deltas.magnitude() == 0)
113+
{
114+
return;
115+
}
116+
// waggle 1
117+
this.pos = this.pos.add(this.pathOffset(deltas, this.lifetime / 200));
118+
}
119+
120+
boundsCheck() {
121+
var hr = this.radius / 2;
122+
if(this.pos.x < hr) {
123+
this.pos.x = hr;
124+
}
125+
if (this.pos.x >= WIDTH - hr) {
126+
this.pos.x = WIDTH - hr -1;
127+
}
128+
if (this.pos.y < hr) {
129+
this.pos.y = hr;
130+
}
131+
if (this.pos.y >= HEIGHT - hr) {
132+
this.pos.y = HEIGHT - hr - 1;
133+
}
134+
}
135+
}
136+
137+
export { Bug }

canvas.mjs

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
2+
import { Bug } from './bug.mjs';
3+
4+
var canvas;
5+
var dContext;
6+
var bugs;
7+
var curTime;
8+
export const WIDTH = 400;
9+
export const HEIGHT = 400;
10+
const bugCountMin = 8;
11+
export const bugCountMax = 16;
12+
13+
function tick(dt) {
14+
var trySpawnKids = 0;
15+
for(var i = 0; i < bugs.length; i++)
16+
{
17+
var b = bugs[i];
18+
b.tick(dt);
19+
if(b.dead) {
20+
bugs.splice(i, 1);
21+
trySpawnKids++;
22+
}
23+
}
24+
for(var i = 0; i < trySpawnKids; i++)
25+
{
26+
if(Math.random() > 0.5 && bugs.length < bugCountMax)
27+
{
28+
var b = new Bug(Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT))
29+
bugs.push(b);
30+
console.log("Dead bug had first kid");
31+
if(Math.random() > 0.5 && bugs.length < bugCountMax)
32+
{
33+
var b = new Bug(Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT))
34+
bugs.push(b);
35+
console.log("Dead bug had second kid");
36+
}
37+
}
38+
else {
39+
console.log("Dead bug had no kids");
40+
}
41+
}
42+
if(bugs.length < bugCountMin) {
43+
var b = new Bug(Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT))
44+
bugs.push(b);
45+
console.log("Adding bug to keep min");
46+
}
47+
}
48+
49+
function draw() {
50+
dContext.clearRect(0, 0, WIDTH, HEIGHT);
51+
for(var i = 0; i < bugs.length; i++)
52+
{
53+
var b = bugs[i];
54+
b.draw(dContext);
55+
}
56+
}
57+
58+
function loop() {
59+
var newTime = Date.now();
60+
var passedTime = newTime - curTime;
61+
curTime = newTime;
62+
tick(passedTime);
63+
draw();
64+
window.requestAnimationFrame(loop);
65+
}
66+
67+
function init() {
68+
bugs = [];
69+
for (var i = 0; i < (bugCountMin + bugCountMax) / 2; i++)
70+
{
71+
var b = new Bug(Math.floor(Math.random() * WIDTH), Math.floor(Math.random() * HEIGHT))
72+
bugs.push(b);
73+
}
74+
}
75+
76+
function run() {
77+
canvas = document.getElementById("myCanvas");
78+
dContext = canvas.getContext("2d");
79+
dContext.moveTo(0, 0);
80+
dContext.lineTo(200, 100);
81+
dContext.stroke();
82+
init();
83+
curTime = Date.now();
84+
window.requestAnimationFrame(loop);
85+
}
86+
87+
export { run };

index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<html>
2+
<head>
3+
<title>lol</title>
4+
</head>
5+
<body>
6+
<canvas id="myCanvas" width="400" height=400" style="border:1px solid #000000;">
7+
</canvas>
8+
<script type="module">
9+
import { run } from './canvas.mjs';
10+
run();
11+
</script>
12+
</body>
13+
</html>

vector2.mjs

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
class Vector2 {
2+
constructor(x, y) {
3+
this.x = x;
4+
this.y = y;
5+
}
6+
7+
add(v2) {
8+
return new Vector2(this.x + v2.x, this.y + v2.y);
9+
}
10+
11+
sub(v2) {
12+
return new Vector2(this.x - v2.x, this.y - v2.y);
13+
}
14+
15+
scale(amt) {
16+
return new Vector2(this.x * amt, this.y * amt);
17+
}
18+
19+
normalize() {
20+
var mag = this.magnitude();
21+
return new Vector2(this.x / mag, this.y / mag);
22+
}
23+
24+
magnitude() {
25+
return Math.sqrt(this.x * this.x + this.y * this.y);
26+
}
27+
28+
asInts() {
29+
return [Math.round(this.x), Math.round(this.y)];
30+
}
31+
32+
normalTo() {
33+
return new Vector2(-this.y, this.x).normalize();
34+
}
35+
36+
static distance(v1, v2) {
37+
return Math.sqrt(Math.pow((v1.x - v2.x), 2) + Math.pow(v1.y - v2.y, 2));
38+
}
39+
}
40+
41+
export {Vector2}

0 commit comments

Comments
 (0)