if (typeof registerPaint !== "undefined") {
  registerPaint("generative", class {

    static get inputProperties() {
      return ["--type", "--size", "--line-color", "--line-width"];
    }

    drawLines(ctx, width, height, size) {
      for (let y = 0; y <= height; y += size) {
        for (let x = 0; x <= width; x += size) {
          let leftToRight = Math.random() >= 0.5;

          if (leftToRight) {
            ctx.moveTo(x, y + size);
            ctx.lineTo(x + size, y);
          } else {
            ctx.moveTo(x, y);
            ctx.lineTo(x + size, y + size);
          }

          ctx.stroke();
        }
      }
    }
		
		drawTriangles(ctx, width, height, size) {
			let line, dot,
				odd = false,
				lines = [],
				gap = size;
			
			for (let y = -40; y <= width + 40; y += gap) {
				odd = !odd;
				line = [];
				for (let x = -40; x <= width + 40; x += gap) {
					dot = {
						x: x + (odd ? gap / 2 : 0),
						y: y
					};
					line.push({
						x: x + (Math.random() * .8 - .4) * gap + (odd ? gap / 2 : 0),
						y: y + (Math.random() * .8 - .4) * gap
					});
					ctx.fill();
				}
				lines.push(line);
			}

			function drawTriangle(pointA, pointB, pointC) {
				ctx.beginPath();
				ctx.moveTo(pointA.x, pointA.y);
				ctx.lineTo(pointB.x, pointB.y);
				ctx.lineTo(pointC.x, pointC.y);
				ctx.lineTo(pointA.x, pointA.y);
				ctx.closePath();
				ctx.stroke();
			}
			
			let dotLine;
			odd = true;
			for(let y = 0; y < lines.length - 1; y++) {
				odd = !odd;
				dotLine = [];
				for(let i = 0; i < lines[y].length; i++) {
					dotLine.push(odd ? lines[y][i]   : lines[y+1][i]);
					dotLine.push(odd ? lines[y+1][i] : lines[y][i]);
				}
				for(let i = 0; i < dotLine.length - 2; i++) {
					drawTriangle(dotLine[i], dotLine[i+1], dotLine[i+2]);
				}
			}

		}
		
		drawJoyDivision(ctx, width, height, size) {
			var lines = [];
			let step = size / 2;

			// Create the lines
			for (var i = -40; i <= width + 40; i += step) {
				var line = [];
				for (var j = -40; j <= width + 40; j += step) {
					var distanceToCenter = Math.abs(j - width / 2);
					var variance = Math.max(width / 2 - 50 - distanceToCenter, 0);
					var random = Math.random() * variance / 2 * -1;
					var point = {
						x: j,
						y: i + random
					};
					line.push(point);
				}
				lines.push(line);
			}

			// Do the drawing
			for (var i = 0; i < lines.length; i++) {
				ctx.beginPath();
				ctx.moveTo(lines[i][0].x, lines[i][0].y);

				for (var j = 0; j < lines[i].length - 2; j++) {
					var xc = (lines[i][j].x + lines[i][j + 1].x) / 2;
					var yc = (lines[i][j].y + lines[i][j + 1].y) / 2;
					ctx.quadraticCurveTo(lines[i][j].x, lines[i][j].y, xc, yc);
				}

				ctx.quadraticCurveTo(lines[i][j].x, lines[i][j].y, lines[i][j + 1].x, lines[i][j + 1].y);
				ctx.save();
				ctx.globalCompositeOperation = 'destination-out';
				ctx.fill();
				ctx.restore();
				ctx.stroke();
			}
		}

    paint(ctx, geom, properties) {
      let drawType = String(properties.get("--type")).replace(' ', '');
      let size = Number(properties.get("--size"));
      let lineWidth = Number(properties.get("--line-width"));
      let lineColor = String(properties.get("--line-color"));

      let {
        width,
        height
      } = geom;
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = lineColor;
			
			const drawFunctions = {
				"lines":  () => this.drawLines(ctx, width, height, size),
				"joyDivision": () => this.drawJoyDivision(ctx, width, height, size),
				"triangles": () => this.drawTriangles(ctx, width, height, size),
			};
			
			drawFunctions[drawType]();
    }
  });
}