fixed hygen

Author: xanderjl

README.md

@@ -1,5 +1,7 @@
 ## What Is This Project?
 
+**FIRST AND FOREMOST**, this project is largely based on Matt DesLaurier's [`canvas-sketch`](https://github.com/mattdesl/canvas-sketch). 
+
 This project is an attempt to be an accessible, low barrier to entry sketchbook for generative art. The styling is minimal, and the rest of the opinionated pieces _should_ be largely abstracted away.
 
 ## Getting Started
@@ -56,22 +58,24 @@ import SketchWrapper from 'components/SketchWrapper'
 import { NextPage } from 'next'
 import { ColorValue, Draw } from 'types/CustomP5'
 
-const width: number = 2048
-const height: number = 2048
-const dimensions: number[] = [width, height]
-const padding: number[] = [40]
-const background: ColorValue = [255, 253, 252]
-
-const draw: Draw = p5 => {}
-
-const MyNewSketch: NextPage = () => (
-  <SketchWrapper
-    draw={draw}
-    dimensions={dimensions}
-    padding={padding}
-    background={background}
-  />
-)
+const MyNewSketch: NextPage = () => {
+  const width: number = 2048
+  const height: number = 2048
+  const dimensions: number[] = [width, height]
+  const padding: number[] = [40]
+  const background: ColorValue = [255, 253, 252]
+
+  const draw: Draw = p5 => {}
+
+  return (
+    <SketchWrapper
+      draw={draw}
+      dimensions={dimensions}
+      padding={padding}
+      background={background}
+    />
+  )
+}
 
 export default MyNewSketch
 ```
@@ -80,7 +84,7 @@ You can navigate to this sketch by either finding it in the list of sketches on
 
 ## How Do I Work With p5 in This Environment?
 
-You can treat any of your sketch pages as if you were writing a p5 sketch in [instance mode](https://www.youtube.com/watch?v=Su792jEauZg). 
+You can treat any of your sketch pages as if you were writing a p5 sketch in [instance mode](https://www.youtube.com/watch?v=Su792jEauZg).
 
 ### Setup
 
@@ -91,29 +95,32 @@ import SketchWrapper from 'components/SketchWrapper'
 import { NextPage } from 'next'
 import { ColorValue, Draw, Setup } from 'types/CustomP5'
 
-const width: number = 2048
-const height: number = 2048
-const dimensions: number[] = [width, height]
-const padding: number[] = [40]
-const background: ColorValue = [255, 253, 252]
-
-const setup: Setup = p5 => {
-  p5.colorMode(p5.HSB)
+const MyNewSketch: NextPage = () => {
+  const width: number = 2048
+  const height: number = 2048
+  const dimensions: number[] = [width, height]
+  const padding: number[] = [40]
+  const background: ColorValue = [255, 253, 252]
+
+  const setup: Setup = p5 => {
+    p5.colorMode(p5.HSB)
+  }
+
+  const draw: Draw = p5 => {}
+
+  return (
+    <SketchWrapper
+      setup={setup}
+      draw={draw}
+      dimensions={dimensions}
+      padding={padding}
+      background={background}
+    />
+  )
 }
 
-const draw: Draw = p5 => {}
-
-const MyNewSketch: NextPage = () => (
-  <SketchWrapper
-    setup={setup}
-    draw={draw}
-    dimensions={dimensions}
-    padding={padding}
-    background={background}
-  />
-)
-
 export default MyNewSketch
+
 ```
 
 We define a `setup` arrow function and perform whatever logic we'd like. We then need to pass that function to the `setup` prop in the `<SketchWrapper />` component. There is _a lot_ going on under the hood of the `<SketchWrapper />` that offers you some strong defaults. Maintaining the ratio of your sketch as you resize the window, being able to save sketches with `cmd + s` or `ctrl + s` depening on your OS, etc. **This functionality won't be overwritten by passing in new props**. You'd need to specifically override what these utility functions are doing. To get a feel for what's going on there, you can take a look in `./src/util/defaults`.
@@ -143,7 +150,7 @@ const setup: Setup = p5 => {
 const draw: Draw = p5 => {
   p5.noLoop()
   // Set stroke color to white
-  p5.stroke(0, 0, 255)
+  p5.stroke(0, 255, 255)
   p5.strokeWeight(6)
 
   // create an array with a length of TWO_PI.

package.json

@@ -6,9 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "new:sketch:fullscreen": "npx hygen fullscreen new --name",
-    "new:sketch:square": "npx hygen square new --name",
-    "new:sketch:a4": "npx hygen a4 new --name",
+    "new:sketch:fullscreen": "hygen fullscreen new --name",
+    "new:sketch:square": "hygen square new --name",
+    "new:sketch:a4": "hygen a4 new --name",
     "lint": "next lint",
     "lint:fix": "next lint --fix"
   },
@@ -36,6 +36,7 @@
     "eslint": "8.23.0",
     "eslint-config-next": "12.2.5",
     "eslint-plugin-simple-import-sort": "^8.0.0",
+    "hygen": "6.2.8",
     "typescript": "4.8.2"
   }
 }

src/pages/sketches/my-new-sketch.tsx

@@ -0,0 +1,47 @@
+import SketchWrapper from 'components/SketchWrapper'
+import { NextPage } from 'next'
+import { ColorValue, Draw, Setup } from 'types/CustomP5'
+
+const MyNewSketch: NextPage = () => {
+  const width: number = 2048
+  const height: number = 2048
+  const dimensions: number[] = [width, height]
+  const padding: number[] = [40]
+  const background: ColorValue = [255, 253, 252]
+
+  const setup: Setup = p5 => {
+    p5.colorMode(p5.HSB)
+  }
+
+  const draw: Draw = p5 => {
+    p5.noLoop()
+    // Set stroke color to white
+    p5.stroke(0, 255, 255)
+    p5.strokeWeight(6)
+  
+    // create an array with a length of TWO_PI.
+    const circleArray = Array.from({ length: p5.TWO_PI * 10.1 })
+  
+    // For each point in the array, calculate the cartesian coordinates to draw a point.
+    circleArray.forEach((_, i) => {
+      const a = i * 0.1
+      const r = p5.width / 3
+      const x = r * Math.cos(a) + p5.width / 2
+      const y = r * Math.sin(a) + p5.height / 2
+  
+      p5.point(x, y)
+    })
+  }
+
+  return (
+    <SketchWrapper
+      setup={setup}
+      draw={draw}
+      dimensions={dimensions}
+      padding={padding}
+      background={background}
+    />
+  )
+}
+
+export default MyNewSketch

src/util/canvasSizes.ts

@@ -0,0 +1,20 @@
+export type PaperSize = 'A0' | 'A1' | 'A2' | 'A3' | 'A4'
+
+export interface PaperSizes {
+  [key: string]: number[]
+}
+
+// Sizes are for 96 DPI
+const paperSizes: PaperSizes = {
+  A0: [3179, 4494],
+
+  A1: [2245, 3179],
+
+  A2: [1587, 2245],
+
+  A3: [1123, 1587],
+
+  A4: [794, 1123],
+}
+
+export const getDimensions = (paperSize: PaperSize) => paperSizes[paperSize]

src/util/createGrain.ts

@@ -0,0 +1,17 @@
+import type { Graphics } from 'p5'
+import type { P5 } from 'types/CustomP5'
+
+const createGrain = (p5: P5, opacity: number = 10): Graphics => {
+  const grain = p5.createGraphics(p5.width, p5.height)
+  grain.loadPixels()
+  Array.from({ length: p5.width }, (_, i) => {
+    Array.from({ length: p5.height }, (_, j) => {
+      grain.set(i, j, p5.color(p5.random(255), opacity))
+    })
+  })
+  grain.updatePixels()
+
+  return grain
+}
+
+export default createGrain

src/util/createGrid.ts

@@ -0,0 +1,15 @@
+const createGrid = (rows: number, cols: number = rows) => {
+  const points: number[][] = []
+
+  Array.from({ length: rows }, (_, u) =>
+    Array.from({ length: cols }, (_, v) => {
+      const x = u / (rows - 1)
+      const y = v / (cols - 1)
+      points.push([x, y])
+    })
+  )
+
+  return points
+}
+
+export default createGrid

src/util/createOverlay.ts

@@ -0,0 +1,17 @@
+import type { Color, Graphics } from 'p5'
+import type { ColorValue, P5 } from 'types/CustomP5'
+const createOverlay = (
+  p5: P5,
+  background: ColorValue = [255, 253, 252],
+  margin: number = p5.width * 0.1
+): Graphics => {
+  let overlay = p5.createGraphics(p5.width, p5.height)
+  overlay.background(background as unknown as Color)
+  overlay.erase()
+  overlay.rect(margin, margin, p5.width - margin * 2, p5.height - margin * 2)
+  overlay.noErase()
+
+  return overlay
+}
+
+export default createOverlay