[CREATIVE_CODING] p5js next skatches - day 7, 8,9

day7/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "day5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "sketch.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "canvas-sketch": "^0.7.4",
+    "canvas-sketch-util": "^1.10.0",
+    "nice-color-palettes": "^3.0.0",
+    "p5": "^1.1.9"
+  }
+}

day7/sketch.js

@@ -0,0 +1,62 @@
+const canvasSketch = require('canvas-sketch');
+const random = require('canvas-sketch-util/random');
+const pallets = require('nice-color-palettes');
+
+// Grab P5.js from npm
+const p5 = require('p5');
+
+// Attach p5.js it to global scope
+new p5();
+
+const settings = {
+  p5: true,
+  dimensions: [512, 512],
+};
+
+const DEFAULT_VALUE = 0.5;
+
+const sketch = () => {
+  const pallet = random.pick(pallets)
+
+
+  const createGrid = () => {
+    let points = [];
+    for (let y = 40; y <= height - 40; y+= 10) {
+      for (let x = 40; x <= width - 40; x+= 10) {
+        points.push({position: [x, y], color: random.pick(pallet) })
+      }
+    }
+
+    return points;
+  }
+
+  const dots = createGrid().filter(() =>  {
+    const value = random.value();
+    return value > DEFAULT_VALUE
+  });
+
+
+  return ({ context, width, height }) => {
+    fill(0);
+    rect(0, 0, width, height);
+
+    background(0);
+
+    dots.forEach(dot => {
+      const {position, color} = dot;
+      const [u, v] = position;
+
+      fill(color)
+      console.log(dot);
+      ellipse(u, v, 5, 5);
+
+      stroke(100);
+
+      line(40, v, v, 256)
+
+      line(256, 256, width - 40, v)
+    })
+  };
+};
+
+canvasSketch(sketch, settings);

day8/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "day5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "sketch.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "canvas-sketch": "^0.7.4",
+    "canvas-sketch-util": "^1.10.0",
+    "nice-color-palettes": "^3.0.0",
+    "p5": "^1.1.9"
+  }
+}

day8/sketch.js

@@ -0,0 +1,29 @@
+const canvasSketch = require('canvas-sketch');
+const random = require('canvas-sketch-util/random');
+const pallets = require('nice-color-palettes');
+
+// Grab P5.js from npm
+const p5 = require('p5');
+
+// Attach p5.js it to global scope
+new p5();
+
+const settings = {
+  p5: true,
+  dimensions: [512, 512],
+};
+
+const sketch = () => {
+
+  background(255);
+  return ({ context, width, height }) => {
+    for (var x = 0; x <= width; x+= 8) {
+
+      for (var y = 0; y <= height; y += 8) {
+          line(x, y, 100, 100);
+        }
+      } 
+  };
+};
+
+canvasSketch(sketch, settings);

day9/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "day5",
+  "version": "1.0.0",
+  "description": "",
+  "main": "sketch.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "canvas-sketch": "^0.7.4",
+    "canvas-sketch-util": "^1.10.0",
+    "nice-color-palettes": "^3.0.0",
+    "p5": "^1.1.9"
+  }
+}

day9/sketch.js

@@ -0,0 +1,71 @@
+const canvasSketch = require('canvas-sketch');
+const random = require('canvas-sketch-util/random');
+const pallets = require('nice-color-palettes');
+
+// Grab P5.js from npm
+const p5 = require('p5');
+
+// Attach p5.js it to global scope
+new p5();
+
+const settings = {
+  p5: true,
+  dimensions: [512, 512],
+};
+
+let margin = 25;
+let marginX = 25;
+let marginY = 25;
+let w, h;
+let c, r;
+let arcX;
+let arcY;
+let cellWidth, cellHeight;
+
+const renderCell = (row, column) => {
+  rectMode(CORNER);
+
+  let x = margin+cellWidth*row;
+  let y = margin+cellHeight*column;
+
+  rect(x, y, cellWidth, cellHeight)
+}
+
+const renderRandomShape = (shapeX, shapeY) => {
+  rectMode(CENTER);
+
+  let newArcX = (marginX + shapeX) / 2;
+  let newArcY = (marginY + shapeY) / 2;
+
+  rect(newArcX, newArcY, cellWidth/2, cellHeight/2);
+
+  marginX += (cellWidth / 4)
+  marginY += (cellHeight / 4);
+
+}
+
+const generateRandomStyle = () => {
+
+}
+
+const sketch = () => {
+  w = width - 2*margin;
+  h = height - 2*margin;
+  c = 4;
+  r = 4;
+  cellWidth = w/c;
+  cellHeight = h/r;
+  return ({ context, width, height }) => {
+
+
+    for (let i = 0; i < r; i++) {
+
+      for (let j = 0; j < c; j++) {
+        renderRandomShape(cellWidth * (i+1), cellHeight *(j+1));
+      }
+    }
+
+  };
+};
+
+canvasSketch(sketch, settings);