jpt/artworld.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

spiral example ported!

Browse Source
This commit is contained in:
James Turk 2024-07-06 15:21:35 -05:00
parent fc12f05e3a
commit 440d531f0e
7 changed files with 97 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
artworld/drawable.js
View File

@ -15,7 +15,7 @@ export class Drawable {
_register() { _register() {
if (this._parent) { if (this._parent) {
this._parent.push(this); this._parent._register(this);
} }
artworld.register(this); artworld.register(this);
} }
@ -26,6 +26,12 @@ export class Drawable {
return obj; return obj;
} }
draw() {
// TODO: log/raise?
}
// setters
fill(color) { fill(color) {
this._fill = color; this._fill = color;
return this; return this;
@ -73,7 +79,10 @@ export class Drawable {
// getters ///////////////////////////// // getters /////////////////////////////
get worldPos() { get worldPos() {
return this._parent ? this._parent.worldPos.add(this._pos) : this._pos; // offset from parent if needed
return this._parent
? this._parent.worldPos.add(this._posVec)
: this._posVec;
} }
} }

5
artworld/index.js
View File

@ -1,4 +1,7 @@
export { artworld } from "./world.js"; export { artworld } from "./world.js";
export { Color } from "./color.js"; export { Color } from "./color.js";
export { Vector2 } from "./math.js"; export { Vector2, degToRad, radToDeg } from "./math.js";
export { Line } from "./shapes.js"; export { Line } from "./shapes.js";
export { Group } from "./drawable.js";
export { Random } from "./random.js";
console.log("here");

20
artworld/math.js
View File

@ -1,4 +1,12 @@
export const TO_RADIANS = 180 / Math.PI; const PI_180 = Math.PI / 180;
export function degToRad(degrees) {
return degrees * PI_180;
}
export function radToDeg(rad) {
return rad / PI_1i0;
}
export class Vector2 { export class Vector2 {
constructor(x, y) { constructor(x, y) {
@ -7,15 +15,15 @@ export class Vector2 {
} }
add(other) { add(other) {
return Vector2(this.x + other.x, this.y + other.y); return new Vector2(this.x + other.x, this.y + other.y);
} }
sub(other) { sub(other) {
return Vector2(this.x - other.x, this.y - other.y); return new Vector2(this.x - other.x, this.y - other.y);
} }
scale(s) { scale(s) {
return Vector2(s * this.x, s * this.y); return new Vector2(s * this.x, s * this.y);
} }
static random(x, y) { static random(x, y) {
@ -28,10 +36,10 @@ export class Vector2 {
if (y === undefined) { if (y === undefined) {
y = x; y = x;
} }
return Vector2(x * cos(theta), y * sin(theta)); return new Vector2(x * cos(theta), y * sin(theta));
} }
static polar(mag, angle) { static polar(mag, angle) {
return Vector2(mag * Math.cos(angle), mag * Math.sin(angle)); return new Vector2(mag * Math.cos(angle), mag * Math.sin(angle));
} }
} }

5
artworld/random.js Normal file
View File

@ -0,0 +1,5 @@
export class Random {
static chance(odds) {
return Math.random() < odds;
}
}

6
artworld/shapes.js
View File

@ -10,7 +10,7 @@ export class Line extends Drawable {
draw() { draw() {
artworld.setStrokeColor(this._stroke); artworld.setStrokeColor(this._stroke);
artworld.setStrokeWeight(this._strokeWeight); artworld.setStrokeWeight(this._strokeWeight);
artworld.drawLine(this._posVec, this._offsetVec); artworld.drawLine(this.worldPos, this.worldPos.add(this._offsetVec));
} }
to(vec) { to(vec) {
@ -18,10 +18,6 @@ export class Line extends Drawable {
return this; return this;
} }
polar(mag, angle) {
return this.to(Vector2.polar(mag, angle));
}
angle(angle) { angle(angle) {
let mag = this._offsetVec.magnitude; let mag = this._offsetVec.magnitude;
return this.to(Vector2.polar(mag, angle)); return this.to(Vector2.polar(mag, angle));

6
artworld/world.js
View File

@ -25,11 +25,13 @@ export class World {
} }
setStrokeColor(color) { setStrokeColor(color) {
this.ctx.strokeStyle = color.toStr(); if (color && color.toStr) this.ctx.strokeStyle = color.toStr();
else this.ctx.strokeStyle = color;
} }
setFillColor(color) { setFillColor(color) {
this.ctx.fillStyle = color.toStr(); if (color && color.toStr) this.ctx.fillStyle = color.toStr();
else this.ctx.fillStyle = color;
} }
fillRect(rect) { fillRect(rect) {

58
examples/spiral.html Normal file
View File

@ -0,0 +1,58 @@
<html>
<head> </head>
<body>
<canvas id="mainCanvas" width="800" height="800"></canvas>
<script type="module">
import {
artworld,
Color,
Group,
Line,
Random,
Vector2,
degToRad,
} from "../artworld/index.js";
artworld.bindCanvas("mainCanvas");
window.artworld = artworld;
function* spirals() {
while (true) {
let g = new Group();
for (let d = 0; d < 180; d += 10) {
if (Random.chance(0.9)) {
new Line(g).to(Vector2.polar(190 - d, degToRad(d)));
}
}
yield g;
}
}
function makeGrid(iterable, rows, cols, opts) {
opts = opts || {};
let width = opts.width || 50;
let height = opts.height || 50;
let xOff = opts.xOff || 0;
let yOff = opts.yOff || 0;
for (let c = 0; c < cols; c++) {
for (let r = 0; r < rows; r++) {
let result = iterable.next().value;
if (result === undefined) {
return;
} else {
result.pos(new Vector2(width * c + xOff, height * r + yOff));
}
}
}
}
makeGrid(spirals(), 4, 3, {
width: 220,
height: 120,
xOff: 80,
yOff: 10,
});
artworld.draw();
</script>
</body>
</html>