From 130076af1513e2d1a4fdae99b773e40db80a97e2 Mon Sep 17 00:00:00 2001
From: Charlotte Dann <hi@cha.rs>
Date: Wed, 12 May 2021 17:28:49 +0100
Subject: [PATCH] :truck: Copy 032 to 033

---
 sketches/033/README.md           |  13 ++++
 sketches/033/design/constants.ts |   7 +++
 sketches/033/design/index.ts     | 100 +++++++++++++++++++++++++++++++
 sketches/033/index.ts            |  13 ++++
 4 files changed, 133 insertions(+)
 create mode 100644 sketches/033/README.md
 create mode 100644 sketches/033/design/constants.ts
 create mode 100644 sketches/033/design/index.ts
 create mode 100644 sketches/033/index.ts

diff --git a/sketches/033/README.md b/sketches/033/README.md
new file mode 100644
index 0000000..eec94c7
--- /dev/null
+++ b/sketches/033/README.md
@@ -0,0 +1,13 @@
+---
+datePublished: 2021-06-11
+youTubeLink: later
+
+designNoiseSeeds: []
+cutNoiseSeeds: []
+accentColor: 'fuchsia'
+
+pieces: 100
+timeToSolve: 1
+---
+
+# 033
diff --git a/sketches/033/design/constants.ts b/sketches/033/design/constants.ts
new file mode 100644
index 0000000..92552cb
--- /dev/null
+++ b/sketches/033/design/constants.ts
@@ -0,0 +1,7 @@
+export const BACKGROUND = 'hsl(59, 50%, 50%)'
+
+export const GRID_ROWS = 20
+export const GRID_COLUMNS = 20
+export const GRID_GAP_RATIO = 1/2
+export const COLORS = 3
+export const LAYERS = 5
diff --git a/sketches/033/design/index.ts b/sketches/033/design/index.ts
new file mode 100644
index 0000000..a7ade6d
--- /dev/null
+++ b/sketches/033/design/index.ts
@@ -0,0 +1,100 @@
+import { Design } from 'types'
+import { hsl } from 'utils/colorUtils'
+import { randomFromNoise } from 'utils/numberUtils'
+
+import { GRID_COLUMNS, GRID_ROWS, GRID_GAP_RATIO, LAYERS, COLORS } from './constants'
+
+export enum Seeds {
+  Shape,
+  Color,
+}
+
+class Point {
+  x!: number
+  y!: number
+  visible!: boolean
+
+  constructor(props: { x: number; y: number; visible: boolean }) {
+    Object.assign(this, props)
+  }
+}
+
+export const design = ({ c, simplex, width, height, bleed, noiseStart }: Design) => {
+  const hues: number[] = []
+  for (let i = 0; i < COLORS; i++) {
+    hues.push(Math.floor(randomFromNoise(simplex[Seeds.Color].noise2D(5.25 + i, 3.33)) * 360))
+  }
+  c.save()
+
+  c.fillStyle = hsl(hues[0], 50, 50)
+  c.fillRect(0, 0, width, height)
+
+  const cellWidth = (width - bleed * 2) / (GRID_COLUMNS - 1 + GRID_GAP_RATIO)
+  const cellHeight = (height - bleed * 2) / (GRID_ROWS - 1 + GRID_GAP_RATIO)
+  const gridGap = cellWidth * GRID_GAP_RATIO
+  const gridBleed = bleed + gridGap / 2
+
+  const drawLines = (
+    gridOffset: number,
+    gridMultiplier: number,
+    lineWidth: number,
+    noiseOffset: number
+  ) => {
+    c.lineWidth = lineWidth
+
+    for (let layer = 0; layer < LAYERS; layer++) {
+      // shift back half a unit every layer
+      if (layer > 0) gridOffset -= 0.5 * gridMultiplier
+
+      const crossPoints = [] as Point[][]
+      for (let col = 0; col < (GRID_COLUMNS - gridOffset * 2) / gridMultiplier; col++) {
+        if (!crossPoints[col]) crossPoints.push([])
+        for (let row = 0; row < (GRID_ROWS - gridOffset * 2) / gridMultiplier; row++) {
+          const x = col * cellWidth * gridMultiplier + gridBleed + cellWidth * gridOffset
+          const y = row * cellHeight * gridMultiplier + gridBleed + cellHeight * gridOffset
+          crossPoints[col][row] = new Point({
+            x,
+            y,
+            visible: simplex[Seeds.Shape].noise3D(50 * layer + noiseOffset + noiseStart * gridMultiplier, x * 0.002, y * 0.01) > 0.3
+          })
+        }
+      }
+
+      for (let col = 0; col < (GRID_COLUMNS - gridOffset * 2) / gridMultiplier; col++) {
+        for (let row = 0; row < (GRID_ROWS - gridOffset * 2) / gridMultiplier; row++) {
+          const point = crossPoints[col][row]
+          if (point.visible) {
+
+            let length = 1
+            while (crossPoints[col][row + length] && crossPoints[col][row + length].visible) {
+              length++
+            }
+
+            if (length > 0) {
+              c.strokeStyle = hsl(hues[layer % COLORS], 70, 50)
+              c.beginPath()
+              c.moveTo(point.x + cellWidth / 2 * gridMultiplier, point.y + cellHeight / 2 * gridMultiplier)
+              c.lineTo(point.x + cellWidth / 2 * gridMultiplier, point.y + (length - 0.5) * cellHeight * gridMultiplier)
+              c.stroke()
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+  c.lineCap = 'round'
+  c.globalCompositeOperation = 'multiply'
+  c.globalAlpha = 0.2
+  drawLines(-2, 4, cellWidth * 4 - gridGap, 12)
+  c.globalAlpha = 0.3
+  drawLines(-1, 3, cellWidth * 3 - gridGap, 123)
+  c.globalAlpha = 0.4
+  drawLines(-0.5, 2, cellWidth * 2 - gridGap, 234)
+  c.globalCompositeOperation = 'screen'
+  c.globalAlpha = 0.2
+  drawLines(0, 1, cellWidth - gridGap, 345)
+
+  c.restore()
+}
diff --git a/sketches/033/index.ts b/sketches/033/index.ts
new file mode 100644
index 0000000..a24ac5e
--- /dev/null
+++ b/sketches/033/index.ts
@@ -0,0 +1,13 @@
+import { SketchConstructorSettings } from 'types'
+import { BACKGROUND } from './design/constants'
+export { design, Seeds as DesignNoiseSeeds } from './design'
+export { cut, cutPieces, Seeds as CutNoiseSeeds } from '../030/cut'
+
+export const settings = {
+  width: 280,
+  height: 280,
+  bleed: 10,
+  rows: 10,
+  columns: 10,
+  backgroundColor: BACKGROUND,
+} as SketchConstructorSettings