diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..38d37d8 --- /dev/null +++ b/TODO.md @@ -0,0 +1,10 @@ +# TODO + +- ellipse +- smooth/nosmooth +- curves + +- lerp + +- clipping +- text diff --git a/artworld/world.js b/artworld/world.js index 3c451b0..9669387 100644 --- a/artworld/world.js +++ b/artworld/world.js @@ -13,6 +13,8 @@ export class World { this.lastTick = this.timer.time(); this.numTicks = 0; this.ctx = document.getElementById(canvasId).getContext("2d"); + this.ctx.canvas.width = 1000; + this.ctx.canvas.height = 1000; } get width() { @@ -40,9 +42,12 @@ export class World { this.ctx.beginPath(); this.ctx.fillRect(0, 0, this.width, this.height); this.ctx.fill(); + this.ctx.save(); + this.ctx.translate(500, 500); for (let d of this.drawables.sort((a, b) => a._zIndex - b._zIndex)) { d.draw(); } + this.ctx.restore(); } tick() { diff --git a/examples/balls.html b/examples/balls.html deleted file mode 100644 index cd234fd..0000000 --- a/examples/balls.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - - - diff --git a/examples/balls.js b/examples/balls.js new file mode 100644 index 0000000..6418034 --- /dev/null +++ b/examples/balls.js @@ -0,0 +1,55 @@ +import { + World, + Color, + Pico8, + Group, + Circle, + Random, + Vector2, + degToRad, +} from "../artworld/index.js"; +let world = new World("mainCanvas"); +window.world = world; + +class Ball extends Circle { + constructor() { + super(world); + this.speed = new Vector2(0, Random.between(9, 15)); + } + + update() { + this.move(this.speed); + if (this.worldPos.y > world.height + 20) { + this.y(-20); + } + } +} + +class GravityBall extends Circle { + constructor() { + super(world); + this.accel = new Vector2(0, 0.5); + this.speed = Vector2.random(0, 5); + } + + update() { + this.speed = this.speed.add(this.accel); + this.move(this.speed); + if (this.worldPos.y > world.height - 10) { + this.speed = this.speed.scale(-0.98); // bounce w/ dampening + this.y(world.height - 10.01); + } + } +} + +for (let i = 0; i < 21; i++) { + new Ball() + .pos(new Vector2(40 * i, 0)) + .radius(10) + .fill(Pico8.BLUE); + new GravityBall() + .pos(new Vector2(20 + 40 * i, 0)) + .radius(10) + .fill(Pico8.PURPLE); +} +world.loopStep(); diff --git a/examples/circles.html b/examples/circles.html deleted file mode 100644 index b47ce57..0000000 --- a/examples/circles.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - diff --git a/examples/circles.js b/examples/circles.js new file mode 100644 index 0000000..74035b4 --- /dev/null +++ b/examples/circles.js @@ -0,0 +1,18 @@ +import { World, Pico8, Group, Circle, Vector2 } from "../artworld/index.js"; +let world = new World("mainCanvas"); +window.world = world; + +function* color_cycle() { + while (true) { + yield Pico8.RED; + yield Pico8.ORANGE; + yield Pico8.YELLOW; + } +} +let cycle = color_cycle(); + +let g = new Group(world); +for (let r = 20; r < 500; r += 20) { + new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0); +} +world.draw(); diff --git a/examples/copies.html b/examples/copies.html deleted file mode 100644 index c268b7d..0000000 --- a/examples/copies.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - diff --git a/examples/copies.js b/examples/copies.js new file mode 100644 index 0000000..ccf34fa --- /dev/null +++ b/examples/copies.js @@ -0,0 +1,20 @@ +import { + World, + Color, + Pico8, + Group, + Circle, + Random, + Vector2, +} from "../artworld/index.js"; +let world = new World("mainCanvas"); +window.world = world; + +let g = new Group(world).pos(new Vector2(0, 0)); +let c = new Circle(g).radius(80).stroke(Pico8.RED).strokeWeight(5); +for (let i = 0; i < 15; i++) { + c = c.copy().move(new Vector2(45, 45)); +} +g.copy().move(new Vector2(200, 0)).stroke(Pico8.GREEN); +g.copy().move(new Vector2(-200, 0)).stroke(Pico8.BLUE); +world.draw(); diff --git a/examples/dataclock.html b/examples/dataclock.html deleted file mode 100644 index 5ddd9e7..0000000 --- a/examples/dataclock.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - diff --git a/examples/dataclock.js b/examples/dataclock.js new file mode 100644 index 0000000..f23e7c6 --- /dev/null +++ b/examples/dataclock.js @@ -0,0 +1,41 @@ +import { + World, + Pico8, + Group, + Vector2, + Line, + Circle, +} from "../artworld/index.js"; + +let world = new World("mainCanvas"); +window.world = world; +// This is an experiment to separate the declaration of +// "what the data does" from "what it looks like". + +// First we use `Var` to define "what the data does" +// variables are expected to regularly *vary*! + +// Variables are defined as functions that update with time. +// It is also possible to define static variables. +let color = world.var( + (t) => + [Pico8.RED, Pico8.ORANGE, Pico8.GREEN, Pico8.BLUE][Math.floor(t / 60) % 4], +); +// We can create dependencies between them: here the inner & outer +// radii should be 10 pixels apart. +let outerR = world.var((t) => Math.sin(t / 100) * 50 + 200); +let innerR = world.var(() => outerR.getValue() - 10); +// We take this composition a bit further here, the radius of the clock +// hand grows & shrinks with the edge. +let lineTo = world.var((t) => { + let angle = (t / 6000) * Math.PI * 2; + return Vector2.polar(innerR.getValue(), angle); +}); + +let g = new Group(world); +new Circle(g).fill(Pico8.BLACK).z(1).radius(outerR); +new Circle(g).z(10).fill(color).radius(innerR); +new Circle(g).radius(20).fill(Pico8.BLACK).z(50); +new Line(g).to(lineTo).z(100); + +world.loopStep(); diff --git a/examples/gallery.html b/examples/gallery.html new file mode 100644 index 0000000..d302364 --- /dev/null +++ b/examples/gallery.html @@ -0,0 +1,113 @@ + + + + + + JS Module Loader + + + + + +
+ +
Script output will appear here...
+
+ + + + diff --git a/examples/lines.html b/examples/lines.html deleted file mode 100644 index 402dca9..0000000 --- a/examples/lines.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - diff --git a/examples/lines.js b/examples/lines.js new file mode 100644 index 0000000..6a82885 --- /dev/null +++ b/examples/lines.js @@ -0,0 +1,11 @@ +import { World, Color, Line, Vector2 } from "../artworld/index.js"; +let world = new World("mainCanvas"); +window.world = world; +for (let i = 0; i < 10; i++) { + new Line(world) + .pos(new Vector2(5 * i * 14, 5)) + .to(new Vector2(5 * i * 14, 140)) + .stroke(new Color(20 * i, 50, 50)) + .strokeWeight(1 + i); +} +world.draw(); diff --git a/examples/liskov.html b/examples/liskov.html deleted file mode 100644 index 875a350..0000000 --- a/examples/liskov.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - diff --git a/examples/liskov.js b/examples/liskov.js new file mode 100644 index 0000000..70667ff --- /dev/null +++ b/examples/liskov.js @@ -0,0 +1,10 @@ +import { World, Rect, Arc, Line, Circle, Random } from "../artworld/index.js"; +let world = new World("mainCanvas"); + +let types = [Rect, Line, Circle, Arc]; + +for (let i = 0; i < 100; i++) { + let Cls = Random.choice(types); + new Cls(world).random().strokeWeight(2); +} +world.draw(); diff --git a/examples/polygons.html b/examples/polygons.html deleted file mode 100644 index 21d1321..0000000 --- a/examples/polygons.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - diff --git a/examples/polygons.js b/examples/polygons.js new file mode 100644 index 0000000..f68d08a --- /dev/null +++ b/examples/polygons.js @@ -0,0 +1,9 @@ +import { World, Polygon } from "../artworld/index.js"; +let world = new World("mainCanvas"); + +for (let i = 1; i < 8; i++) { + new Polygon(world).random(3 + i); + new Polygon(world).random(i * 10); +} + +world.draw(); diff --git a/examples/rect.js b/examples/rect.js new file mode 100644 index 0000000..cd495ad --- /dev/null +++ b/examples/rect.js @@ -0,0 +1,11 @@ +import { World, Pico8, Rect } from "../artworld/index.js"; +let world = new World("mainCanvas"); +window.world = world; + +for (let i = 0; i < 50; i++) { + new Rect(world).random(200).fill(Pico8.BLACK).z(10); + new Rect(world).random(150).fill(Pico8.DARK_BLUE).z(15); + new Rect(world).random(100).fill(Pico8.DARK_GREY).z(20); + new Rect(world).random(50).fill(Pico8.LIGHT_GREY).z(30); +} +world.draw(); diff --git a/examples/rects.html b/examples/rects.html deleted file mode 100644 index 41c1c0c..0000000 --- a/examples/rects.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - diff --git a/examples/spiral.html b/examples/spiral.html deleted file mode 100644 index bd651c1..0000000 --- a/examples/spiral.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - diff --git a/examples/spiral.js b/examples/spiral.js new file mode 100644 index 0000000..5fc045d --- /dev/null +++ b/examples/spiral.js @@ -0,0 +1,51 @@ +import { + World, + Pico8, + Group, + Line, + Random, + Vector2, + degToRad, +} from "../artworld/index.js"; +const world = new World("mainCanvas"); +window.world = world; + +function* spirals() { + while (true) { + let g = new Group(world); + let rc = Random.choice(Object.values(Pico8)); + for (let d = 0; d < 180; d += 10) { + if (Random.chance(0.9)) { + new Line(g).to(Vector2.polar(190 - d, degToRad(d))).stroke(rc); + } + } + 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, +}); + +world.draw();