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

circles and fixes for draw/stroke logic

Browse Source
This commit is contained in:
James Turk 2024-07-06 17:15:25 -05:00
parent 28b9ef054c
commit 6532e64e14
6 changed files with 64 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
artworld/drawable.js
View File

@ -29,7 +29,7 @@ export class Drawable {
} }
draw() { draw() {
// TODO: log/raise? // no-op, maybe log?
} }
// setters // setters
@ -80,7 +80,6 @@ export class Drawable {
Random.under(artworld.width), Random.under(artworld.width),
Random.under(artworld.height), Random.under(artworld.height),
); );
console.log(this._posVec);
this._stroke = new Color( this._stroke = new Color(
Random.under(360), Random.under(360),
Random.between(30, 60), Random.between(30, 60),

2
artworld/index.js
View File

@ -1,6 +1,6 @@
export { artworld } from "./world.js"; export { artworld } from "./world.js";
export { Color, Pico8 } from "./color.js"; export { Color, Pico8 } from "./color.js";
export { Vector2, degToRad, radToDeg } from "./math.js"; export { Vector2, degToRad, radToDeg } from "./math.js";
export { Line, Rect } from "./shapes.js"; export { Line, Rect, Circle, Arc } from "./shapes.js";
export { Group } from "./drawable.js"; export { Group } from "./drawable.js";
export { Random } from "./random.js"; export { Random } from "./random.js";

1
artworld/random.js
View File

@ -5,7 +5,6 @@ export class Random {
static under(num) { static under(num) {
let n = Math.random() * num; let n = Math.random() * num;
console.log("under", num, n);
return n; return n;
} }

14
artworld/shapes.js
View File

@ -34,9 +34,7 @@ export class Arc extends Drawable {
} }
draw() { draw() {
artworld.setStrokeColor(this._stroke); artworld.prepareDraw(this);
artworld.setStrokeWeight(this._strokeWeight);
artworld.setFillColor(this._fill);
artworld.drawArc(this.worldPos, this._r, this._startAngle, this._endAngle); artworld.drawArc(this.worldPos, this._r, this._startAngle, this._endAngle);
} }
@ -61,10 +59,8 @@ export class Circle extends Drawable {
} }
draw() { draw() {
artworld.setStrokeColor(this._stroke); artworld.prepareDraw(this);
artworld.setStrokeWeight(this._strokeWeight); artworld.drawArc(this.worldPos, this._r, 0, 2 * Math.PI);
artworld.setFillColor(this._fill);
artworld.drawArc(this.worldPos, this._r, 0, 360);
} }
radius(scalar) { radius(scalar) {
@ -88,9 +84,7 @@ export class Rect extends Drawable {
} }
draw() { draw() {
artworld.setStrokeColor(this._stroke); artworld.prepareDraw(this);
artworld.setStrokeWeight(this._strokeWeight);
artworld.setFillColor(this._fill);
artworld.drawRect(this.worldPos, this._width, this._height); artworld.drawRect(this.worldPos, this._width, this._height);
} }

37
artworld/world.js
View File

@ -21,25 +21,28 @@ export class World {
} }
draw() { draw() {
for (let d of this.drawables) { for (let d of this.drawables.sort((a, b) => a._z_index - b._z_index)) {
d.draw(); d.draw();
} }
} }
// Canvas 2D ///////////////// // Canvas 2D /////////////////
setStrokeWeight(scalar) { prepareDraw(drawable) {
this.ctx.lineWidth = scalar; this._stroke = false;
} this._fill = false;
if (drawable._stroke) {
setStrokeColor(color) { this.ctx.lineWidth = drawable._strokeWidth;
if (color && color.toStr) this.ctx.strokeStyle = color.toStr(); this.ctx.strokeStyle = drawable._stroke.toStr
else this.ctx.strokeStyle = color; ? drawable._stroke.toStr()
} : drawble._stroke;
this._stroke = true;
setFillColor(color) { } else if (drawable._fill) {
if (color && color.toStr) this.ctx.fillStyle = color.toStr(); this.ctx.fillStyle = drawable._fill.toStr
else this.ctx.fillStyle = color; ? drawable._fill.toStr()
: drawable._fill;
this._fill = true;
}
} }
drawLine(from, to) { drawLine(from, to) {
@ -52,15 +55,15 @@ export class World {
drawArc(center, radius, fromAngle, toAngle) { drawArc(center, radius, fromAngle, toAngle) {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(center.x, center.y, radius, fromAngle, toAngle); this.ctx.arc(center.x, center.y, radius, fromAngle, toAngle);
this.ctx.stroke(); if (this._stroke) this.ctx.stroke();
this.ctx.fill(); if (this._fill) this.ctx.fill();
} }
drawRect(center, width, height) { drawRect(center, width, height) {
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.rect(center.x - width / 2, center.y - height / 2, width, height); this.ctx.rect(center.x - width / 2, center.y - height / 2, width, height);
this.ctx.fill(); if (this._stroke) this.ctx.stroke();
this.ctx.stroke(); if (this._fill) this.ctx.fill();
} }
} }

38
examples/circles.html Normal file
View File

@ -0,0 +1,38 @@
<html>
<head> </head>
<body>
<canvas id="mainCanvas" width="500" height="500"></canvas>
<script type="module">
import {
artworld,
Color,
Pico8,
Group,
Circle,
Random,
Vector2,
degToRad,
} from "../artworld/index.js";
artworld.bindCanvas("mainCanvas");
window.artworld = artworld;
function* color_cycle() {
while (true) {
yield Pico8.RED;
yield Pico8.ORANGE;
yield Pico8.YELLOW;
}
}
let cycle = color_cycle();
let g = new Group().pos(new Vector2(250, 250));
for (let r = 20; r < 100; r += 12) {
new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0);
}
for (let r = 100; r < 250; r += 12) {
new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0);
}
artworld.draw();
</script>
</body>
</html>