artwork.md

artwork

droplight.png

polygon.png

droplight.js

class Vec2 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class Seg2 {
  constructor(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
  }
  get len2() {
    let dx = this.x2 - this.x1;
    let dy = this.y2 - this.y1;
    return dx * dx + dy * dy;
  }
  get x1() {
    return this.p1.x;
  }
  get x2() {
    return this.p2.x;
  }
  get y1() {
    return this.p1.y;
  }
  get y2() {
    return this.p2.y;
  }
  draw() {
    line(this.x1, this.y1, this.x2, this.y2);
  }
}

class Light {
  constructor() {
    // this.p1 = new Vec2(width/2, height/3)
    this.p2 = new Vec2(width / 3, height);
    this.p3 = new Vec2((width / 3) * 2, height);

    this.p4 = new Vec2((width / 5) * 4, height);
    this.p5 = new Vec2((width / 5) * 4, height / 3 + 30);
    this.p6 = new Vec2(width / 2 + 20, height / 3 + 5);
    this.p7 = new Vec2(width / 2 - 10, this.p6.y);
  }
  drawLight() {
    new DropLight(this.p3, this.p2).draw();
  }
  drawPole() {
    stroke(0);
    new Pole(this.p4, 85, 3, 10).draw();
    strokeWeight(3);
    new Seg2(this.p6, this.p5).draw();
    new Seg2(this.p6, this.p7).draw();
    fill(0);
    arc(width / 2, this.p7.y, 20, 10, PI, TWO_PI);
  }
  draw() {
    this.drawLight();
    this.drawPole();
  }
}

class Pole {
  constructor(p, len, dep, w) {
    this.p = p;
    this.len = len;
    this.dep = dep;
    this.w = w;
  }
  draw() {
    if (this.dep > 0) {
      let v = new Vec2(this.p.x, this.p.y - this.len);
      strokeWeight(this.w);
      new Seg2(this.p, v).draw();
      new Pole(v, this.len, this.dep - 1, this.w - 2).draw();
    }
  }
}

class DropLight {
  constructor(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
  }
  draw() {
    stroke(255);
    let s = new Seg2(this.p1, this.p2);
    s.draw();
    if (this.p1.x > this.p2.x) {
      new DropLight(
        new Vec2(this.p1.x - 0.25, this.p1.y - 1),
        new Vec2(this.p2.x + 0.25, this.p2.y - 1)
      ).draw();
    }
  }
}

function setup() {
  createCanvas(400, 400);
  noLoop();
}

const bg = () => {
  colorA = color("#FF0C00");
  colorB = color("#FFFC00");
  dr = (red(colorB) - red(colorA)) / height;
  dg = (green(colorB) - green(colorA)) / height;
  db = (blue(colorB) - blue(colorA)) / height;

  margin_y = 0;
  margin_x = 0;
  for (let i = margin_y; i < height - margin_y; i++) {
    let lineColor = color(
      red(colorA) + i * dr,
      green(colorA) + i * dg,
      blue(colorA) + i * db
    );

    stroke(lineColor);
    line(margin_x, i, width - margin_x, i);
  }
};

function draw() {
  bg();
  new Light().draw();
}

Heart.js

class rot {
  static rot(vec, theta) {
    let sina = Math.sin(theta),
      cosa = Math.cos(theta);

    let mat = [
      [cosa, 0 - sina, 0],
      [0, 1, 0, 0],
      [sina, 0, cosa, 0],
      [0, 0, 0, 1],
    ];

    return mat.map((row) =>
      row.map((e, i) => e * vec[i]).reduce((s, e) => s + e)
    );
    // return [
    //   cosa*vec[0] -sina*vec[2],
    //   vec[1],
    //   sina*vec[0] +cosa*vec[2],
    //   vec[3]
    // ]
  }
}

class Heart {
  constructor(n) {
    this.points = new Array(n).fill().map(Object);
    this.gen();
  }

  gen() {
    let n = this.points.length;
    this.points.map((p, i) => {
      let t = (i / n) * TWO_PI;
      p.x = 16 * Math.pow(Math.sin(t), 3);
      p.y = 13 * Math.cos(t);
      p.y -= 5 * Math.cos(2 * t);
      p.y -= 2 * Math.cos(3 * t);
      p.y -= Math.cos(4 * t);
    });
  }

  draw(n) {
    let theta = ((n % 360) * TWO_PI) / 360;

    for (let p of this.points) {
      let arr = rot.rot([p.x, p.y, 0, 1], theta);
      point(arr[0] * 10 + width / 2, height / 2 - arr[1] * 10);
    }
  }
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  new Heart(10000).draw(frameCount);
}

lib.js

class vec2 {
  static make(x, y) {
    return { x: x, y: y };
  }
  static makeAngle(angle) {
    return vec2.make(Math.cos(angle), Math.sin(angle));
  }
  static makeRandom() {
    let v = vec2.make(Math.random() * 2 - 1, Math.random() * 2 - 1);
    vec2.normalized(v);
    return v;
  }
  static copy(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    v1.x = v2.x;
    v1.y = v2.y;
  }
  static makeCopy(v) {
    return vec2.make(v.x, v.y);
  }
  static add(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    v1.x += v2.x;
    v1.y += v2.y;
  }
  static makeAdd(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    return vec2.make(v1.x + v2.x, v1.y + v2.y);
  }
  static sub(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    v1.x -= v2.x;
    v1.y -= v2.y;
  }
  static makeSub(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    return vec2.make(v1.x - v2.x, v1.y - v2.y);
  }
  static mul(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    v1.x *= v2.x;
    v1.y *= v2.y;
  }
  static makeMul(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    return vec2.make(v1.x * v2.x, v1.y * v2.y);
  }
  static div(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    v1.x /= v2.x;
    v1.y /= v2.y;
  }
  static makeDiv(v1, v2) {
    if (typeof v2 === "number") v2 = vec2.make(v2, v2);
    return vec2.make(v1.x / v2.x, v1.y / v2.y);
  }
  static normal(v) {
    let nv = vec2.makeNormal(v);
    vec2.copy(v, nv);
  }
  static makeNormal(v) {
    return vec2.make(-v.y, v.x);
  }
  static len(v) {
    return Math.hypot(v.x, v.y);
  }
  static dot(v1, v2) {
    return v1.x * v2.x + v1.y * v2.y;
  }
  static det(v1, v2) {
    return v1.x * v2.y - v1.y * v2.x;
  }
  static distance(v1, v2) {
    return vec2.len(vec2.makeSub(v2, v1));
  }
  static normalized(v) {
    let f = 1 / vec2.len(v);
    vec2.mul(v, f);
  }
  static makeNormalized(v) {
    let f = 1 / vec2.len(v);
    return vec2.makeMul(v, f);
  }
  static makeRotate(v, angle) {
    let cosa = Math.cos(angle),
      sina = Math.sin(angle);
    return vec2.make(v.x * cosa - v.y * sina, v.x * sina + v.y * cosa);
  }
  static rotate(v, angle) {
    let nv = vec2.makeRotate(v, angle);
    vec2.copy(v, nv);
  }

  static equals(v1, v2) {
    return v1.x === v2.x && v1.y === v2.y;
  }
}

polygon.js

class Vec2 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class Seg2 {
  constructor(p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
  }
  get len2() {
    return this.dx * this.dx + this.dy * this.dy;
  }
  get x1() {
    return this.p1.x;
  }
  get x2() {
    return this.p2.x;
  }
  get y1() {
    return this.p1.y;
  }
  get y2() {
    return this.p2.y;
  }
  get dx(){
    return this.x2 - this.x1;
  }
  get dy(){
    return this.y2 - this.y1;
  }
  rotated(angle) {
    let cosa = Math.cos(angle),
        sina = Math.sin(angle);
    let np2 =  new Vec2(
      cosa * this.dx - sina * this.dy + this.x1, 
      sina * this.dx + cosa * this.dy + this.y1
    )
    return new Seg2(this.p1, np2)
  }
  draw() {
    line(this.x1, this.y1, this.x2, this.y2);
  }
}

class Triangle {
  constructor(seg, dep) {
    this.seg = seg
    this.dep = dep
  }
  draw(){
    if (this.dep > 3) this.dep = 3
    if (this.dep > 0) {
      this.seg.draw()
      let v = new Vec2(this.seg.x2 + this.seg.dx, this.seg.y2 + this.seg.dy)
      let s = new Seg2(this.seg.p2, v).rotated(PI/3*2)
      new Triangle(s, this.dep-1).draw()
    }
  }
}

class Star {
  constructor(seg, dep) {
    this.seg = seg
    this.dep = dep
  }
  draw(t){
    if (this.dep > 0) {
      this.seg.draw()
      let v = new Vec2(this.seg.x2 + this.seg.dx, this.seg.y2 + this.seg.dy)
      let s
      if (this.dep %2 === 0) {
        s = new Seg2(this.seg.p2, v).rotated(PI/180*(180-t))
      } else {
        s = new Seg2(this.seg.p2, v).rotated(-PI/180*t*2)
      }
      new Star(s, this.dep-1).draw(t)
    }
  }
}

function setup() {
  createCanvas(400, 400);
  noLoop();
}

function draw() {
  background(220);
  new Triangle(new Seg2(new Vec2(200, 300), new Vec2(300, 300)), 3).draw()
  new Star(new Seg2(new Vec2(200, 100), new Vec2(300, 100)), 10).draw(36)
  new Star(new Seg2(new Vec2(120, 300), new Vec2(150, 300)), 24).draw(50)
}