const FOUR_PI = 4 * Math.PI;

const { cos, sin } = Math;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

function resize() {

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

}

let inc = 0;

function draw() {

  c.clearRect(0, 0, canvas.width, canvas.height);

  c.fillStyle = 'blue';

  const halfWidth = window.innerWidth / 2;

  const halfHeight = window.innerHeight / 2;

  let theta = 0,

    a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,

    x,

    y;

  c.save();

  c.translate(halfWidth, halfHeight)

  // Freeth's Nephroid

  // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/

  // r = a(1 + 2sin(θ / 2))

  let b = 2 * cos(inc);

  inc += .01;

  for (let i = 0; theta < FOUR_PI; i++) {

    let rad = a * (b + 2 * sin(theta / 2))

    x = rad * cos(theta);

    y = rad * sin(theta);

    c.fillRect(x, y, 2, 2);

    theta += 0.05;

  }

  c.restore();

  requestAnimationFrame(draw)

}

resize();

window.addEventListener('resize', resize);

draw()

const TWO_PI = Math.PI * 2;

const THREE_PI = 3 * Math.PI;

const canvas = document.body.appendChild(

  document.createElement('canvas')

);

const c = canvas.getContext('2d');

const halfWidth = (canvas.width = 250) / 2;

const halfHeight = (canvas.height = 250) / 2;

const scale = 10;

c.fillStyle = '#f0e195';

c.strokeStyle = '#c2a272';

c.beginPath();

for (let theta = 0; theta <= TWO_PI; theta += 0.02) {

  const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);

  const y = THREE_PI * Math.sin(theta);

  c.lineTo(halfWidth + x * scale, halfHeight - y * scale);

}

c.fill();

c.stroke();

const fs = require('fs');

function writeNextFile(file, content, files, done) {

  fs.writeFile(file, content + '\n', () => {

    const next = files.shift();

    if (!next && done != null) {

      done();

      return;

    }

    writeNextFile(next.file, next.content, files, done);

  });

}

function writeFiles(files, cb) {

  const curr = files.shift();

  writeNextFile(curr.file, curr.content, files, cb);

}

writeFiles(

  [

    {

      file: 'zevan1.txt',

      content: 'hello world'

    },

    {

      file: 'zevan2.txt',

      content: 'goodbye world'

    },

    {

      file: 'confusing.txt',

      content: 'greetings world'

    }

  ],

  () => {

    console.log('done');

  }

);

const grad = {

  gen(c) {

    const canvas = c.canvas;

    const t = Math.random() * 2 * Math.PI;

    const cx = canvas.width / 2;

    const cy = canvas.height / 2;

    const r = Math.max(cx, cy);

    const x1 = cx * Math.cos(t);

    const y1 = cy * Math.sin(t);

    const x2 = cx * Math.cos(t + Math.PI);

    const y2 = cy * Math.sin(t + Math.PI);

    const drawFn = c => {

      const g = c.createLinearGradient(x1, y1, x2, y2);

      g.addColorStop(0, 'white');

      g.addColorStop(1, 'black');

      c.fillStyle = g;

      c.fillRect(0, 0, canvas.width, canvas.height);

    };

    drawFn(c);

  }

};

Object.assign(document.body.style, { 

    margin: 0,

    display: 'grid',

    'grid-template-columns': '1fr 1fr 1fr',

  });

const modes = 'screen,overlay,darken,lighten,color-dodge,color-burn,hard-light, soft-light,difference,exclusion,hue,saturation,color,luminosity,multiply'.split(',');

for (let j = 0; j < 21; j++) { 

  const SIZE = 200;

  const c = document.body.appendChild(

    document.createElement('canvas')

  ).getContext('2d');

  c.canvas.width = c.canvas.height = SIZE;

  Object.assign(c.canvas.style, {

    position: 'relative', 

    width: '100%'

  })

  c.fillStyle = `hsl(${Math.random() * 20 + 190}deg, 50%, 50%)`

  c.fillRect(0, 0, SIZE, SIZE)

  for (let i = 0; i < 5; i++) { 

    c.globalAlpha = .5;

    c.globalCompositeOperation = modes[~~(Math.random() * modes.length)]

    grad.gen(c)

  }

}

// six white geometric figures (outlines) superimposed on a black wall.

d = document

b = d.body

S = 600

hs = S / 2

with(Math) {

with(

  b.appendChild(Object.assign(

  d.createElement`canvas`, { width: S, height: S })

  ).getContext`2d`) {

    fillRect(0, 0, S, S)

    strokeStyle = '#fff'

    canvas.style.transformOrigin = '0 0'

    canvas.style.transform = 'scale(.5)'

    lineWidth = 8

    H = (

      s = S * .5,

      yp = hs, xp = hs,

      a = 1.234,

      d = 0.1678,

      o = 3.9

      ) => {

        beginPath()

        for (t = 0; t < 6.28; t+=.2) {

          r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s

          x = xp + r * sin(t);

          y = yp + r * cos(t);

          t === 0 ? moveTo(x, y) : lineTo(x, y)

        }

        closePath()

        stroke()

        fill()

    }

    tick = 0

    loop = _ => {

      fillStyle = 'rgba(0, 0, 0, 0.5)'

      fillRect(0, 0, S, S)

      save()

      translate(S/2, S/2)

      scale(.5, .5)

      rotate(tick * 20)

      translate(-S/2, -S/2)

      tick += .0001

      globalAlpha = .8;

      H(S, hs, hs, 1 + tick)

      H(S, hs, hs, 1.1 + tick)

      H(S, hs, hs, 1.2 + tick)

      globalAlpha = 1;

      H(S * .3, hs-S/4, hs, 1, tick)

      H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)

      H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)

      restore()

      requestAnimationFrame(loop)

    }

    loop()

  }

}