const Jimp = require("jimp")

let base, bottom, middle, top

async function generateGlob(hue) {

  const constructed = await base
      .clone()
      .composite(
        bottom.clone().color([
          {apply: 'hue', params: [hue]}
        ]),
        0,
        0,
        { mode: Jimp.BLEND_SOURCE_OVER }
      )
      .composite(
        middle.clone().color([
          {apply: 'hue', params: [hue]}
        ]),
        0,
        0,
        { mode: Jimp.BLEND_SOURCE_OVER }
      )
      .composite(
        top.clone().color([
          {apply: 'hue', params: [hue]}
        ]),
        0,
        0,
        { mode: Jimp.BLEND_SOURCE_OVER }
      )
    return constructed
}

async function main() {
  base = await Jimp.read('./web/public/img/base.png')
  bottom = await Jimp.read('./web/public/img/bottom.png')
  middle = await Jimp.read('./web/public/img/middle.png')
  top = await Jimp.read('./web/public/img/top.png')
  for (let i=0; i<1800; i++) {
    if ( i%100 === 0) {
      process.stdout.write('x')
    } else { process.stdout.write('.') }
    const hue = i/5
    const result = await generateGlob(hue)
    await result.write('./allGlobs/' + i + '.png')
  }
}

main()