Source code of plot #058 back to plot

Download full working sketch as 058.tar.gz.
Unzip, then start a local web server and load the page in a browser.

Unless otherwise noted, code published here is © Gábor L Ugray, shared under the Creative Commons BY-NC-SA license (Attribution, Non-Commercial, Share-Alike). Files in lib/thirdparty, and additional libraries in the downloadable archive, are shared under their respective open-source licenses, attributed to their authors.

///<reference path="../pub/lib/paper.d.ts" />
import {info, init, loadLib, setSketch, spin, dbgRedraw} from "./utils/boilerplate.js";

const pw = 2100;    // Paper width
const ph = 1480;    // Paper height
const w = 1480;     // Drawing width
const h = 1050;     // Drawing height
const margin = 50;

setSketch(function () {
  init(w, h, pw, ph);
  draw();
});

// Matt Lehoullier ~ sine oscillation
// https://twitter.com/m_houll/status/1782016031449374756

function draw() {
  paper.project.currentStyle.strokeColor = "black";
  paper.project.currentStyle.strokeWidth = 2;

  // const path = new Path({segments: pts});
  // project.activeLayer.addChild(path);

  const frameH = h - 2 * margin;
  const frameW = w - 2 * margin;
  const stepLen = 2;
  const nVertSegs = Math.round(frameH / stepLen);
  const ampl = 150;
  const hGap = 7;
  const nHorizSegs = Math.round(frameW / hGap);

  const sinePts = [];
  for (let i = 0; i <= nVertSegs; ++i) {
    sinePts.push(new Point(
      -ampl * Math.sin(i/nVertSegs * 2 * Math.PI),
      margin + frameH * i / nVertSegs
    ));
  }

  for (let i = 0; i <= nHorizSegs; ++i) {
    const pts = [];
    for (let j = 0; j < nVertSegs; ++j) {
      const curveVal = sinePts[j].x;
      const x = i <= nHorizSegs / 2
        ? margin + (2 * i / nHorizSegs) * ((w-2*margin) * 0.5 + curveVal)
        : w / 2 + 2*(nHorizSegs-i)/nHorizSegs * curveVal + (i-0.5*nHorizSegs) / nHorizSegs * (w - 2 * margin);
      // const x = margin + (2 * i / nHorizSegs) * ((w-2*margin) * 0.5 + curveVal);
      pts.push(new Point(x, margin + frameH * j / nVertSegs));
    }
    const path = new Path({segments: pts});
    project.activeLayer.addChild(path);
  }
}