strudel/website/src/repl/drawings.mjs

export const lightflower = `Pattern.prototype.nest = function(n, cycles) {
  n = reify(n)
  return this.echo(n, pure(cycles).div(n), 1)
}

Pattern.prototype.deepimpose = function(func, times) {
  if(times===0) return this;
  return this.superimpose(x=>func(x).deepimpose(func, times-1))
}

angle(saw)
  .fill('#aaffee12')
  .r(.18)
  .w(.06)
  .h(.06)
  .deepimpose(x=>x.mul(r(2).w(2).h(2)).late(1/12), 3)
  .nest(6, 1)
  .s('ellipse')
  .mul(w(sine).h(sine).range(.5,1.25))
  .off(.5, x=>x.fill('#ffeeaa12').rev().div(r(1.2)))
  .slow(16)
  .smear(0.6)
  .animate({smear:0})
`;

// https://strudel.cc/?C31_NrcMfZEO
export const spiralflower = `let {innerWidth:ww,innerHeight:wh} = window;
ww*=window.devicePixelRatio;
wh*=window.devicePixelRatio;
const ctx = getDrawContext()
const piDiv180 = Math.PI / 180;
function fromPolar(angle, radius, cx, cy) {
  const radians = (angle-90) * piDiv180
  return [cx + Math.cos(radians) * radius, cy + Math.sin(radians) * radius]
}
const [w, h] = [200,200]
const [cx,cy] = [ww/2,wh/2];
function drawSpiralSegment(ctx, {angle,b,r, density = 2, color = 'darkseagreen', thick = 2, long = 1}) {
  let i = angle;
  ctx.beginPath();
  while(i < b){
    const radius = Math.max(Math.min(r - i*.2,1000),20);
    const [x1,y1] = fromPolar(i, radius, cx, cy)
    const [x2,y2] = fromPolar(i, radius+long, cx, cy)
    ctx.lineWidth = thick;
    ctx.moveTo(x1,y1);
    ctx.strokeStyle= color
    ctx.lineTo(x2,y2);
    ctx.stroke()
    i+=300/density;
  }
}
const { r, angle, b, color, density,thick} = 
  createParams('r', 'angle', 'b', 'color','density','thick','long');


const pattern = 
  r(sine.range(200,800).slow(4))
  .angle(cosine.range(0, 45).slow(3))
  .b(perlin.range(1000, 4000).slow(5))
  .thick(sine.range(2,50).slow(2))
  .long(perlin.range(1,100).slow(3))
  .off(1, x=>x.color('white'))
  .off(2, x=>x.color('salmon'))
  .off(4, x=>x.color('purple'))
  .slow(4)//.mask("x(5,8)")


function onDraw(f) {  
  ctx.beginPath();
  drawSpiralSegment(ctx, f.value);
}


// generic draw logic
window.frame && cancelAnimationFrame(window.frame);

function render(t) {
  t = Math.round(t)
  const frame = pattern.slow(1000).queryArc(t, t)
  ctx.fillStyle='#20001005'
  ctx.fillRect(0,0,ww,wh)
  //ctx.clearRect(0,0,ww,wh)
  ctx.stroke()
  frame.forEach(onDraw)
  window.frame = requestAnimationFrame(render);
};

window.frame = requestAnimationFrame(render);

silence
`;

export const syncexample = `"<0 1 2 3>/2"
.off(1/2, add(4))
.off(1, add(2))
.scale(cat('C minor','C major').slow(8))
.layer(
  x=>x.note().piano(),
  p=>stack(
    p
    .angle(p.sub('c3').div(12))
    .r(.5)
    .s('ellipse')
    .w(.1)
    .h(.1),
    p.x(p.sub('c3').div(12))
    .y(.9)
    .w(1/12)
    .h(.1)
    .s('rect')
  ).animate({sync:true,smear:0.9})
)
`;

export const moveRescaleZoom = `
const rescale = register('rescale', function (f, pat) {
  return pat.mul(x(f).w(f).y(f).h(f));
})

const move = register('move', function (dx, dy, pat) {
  return pat.add(x(dx).y(dy));
})

const zoom = register('zoom', function (f, pat) {
  const d = pure(1).sub(f).div(2);
  return pat.rescale(f).move(d, d);
})

x(.5).y(.5).w(1).h(1)
  .zoom(saw.slow(3))
  .move(sine.range(-.1,.1),0)
  .fill("#ffeeaa10")
  .s('rect')
  .echo(6,.5,1)
  .animate({smear:0.5})`;

export const strudelS = `
const rescale = register('rescale', function (f, pat) {
  return pat.mul(x(f).w(f).y(f).h(f));
})

const move = register('move', function (dx, dy, pat) {
  return pat.add(x(dx).y(dy));
})

const flipY = register('flipY', function (pat) {
  return pat.fmap(v => ({...v, y:1-v.y}))
})

const zoom = register('zoom', function (f, pat) {
  const d = pure(1).sub(f).div(2);
  return pat.rescale(f).move(d, d);
})

Pattern.prototype.nest = function(n, cycles) {
  n = reify(n)
  return this.echo(n, pure(cycles).div(n), 1)
}

x(sine.div(1)).y(cosine.range(0,.5))
  .w(.1).h(.1)
  .mul(w(square).h(square).slow(8))
  .zoom(saw.slow(8))
  .layer(
    id,
    _=>_.flipY().move(0,0).rev()
  )
  .mask("0 1@2").rev()
  .nest(16,9)
  .s('rect')
  .fill("royalblue steelblue".fast(14))
  .slow(8)
  .animate({smear:.99})`;