From c5f94f4e5151e8696d13ad0fc8b99a5bcbb9dd6f Mon Sep 17 00:00:00 2001 From: Agata Kowalska Date: Fri, 27 Nov 2020 00:30:11 +0100 Subject: [PATCH] [CREATIVE_CODING] p5js next skatches - day 7, 8,9 --- day7/package.json | 18 ++++++++++++ day7/sketch.js | 62 +++++++++++++++++++++++++++++++++++++++++ day8/package.json | 18 ++++++++++++ day8/sketch.js | 29 +++++++++++++++++++ day9/package.json | 18 ++++++++++++ day9/sketch.js | 71 +++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 216 insertions(+) create mode 100644 day7/package.json create mode 100644 day7/sketch.js create mode 100644 day8/package.json create mode 100644 day8/sketch.js create mode 100644 day9/package.json create mode 100644 day9/sketch.js diff --git a/day7/package.json b/day7/package.json new file mode 100644 index 0000000..bb3cd0d --- /dev/null +++ b/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" + } +} diff --git a/day7/sketch.js b/day7/sketch.js new file mode 100644 index 0000000..0669bec --- /dev/null +++ b/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); \ No newline at end of file diff --git a/day8/package.json b/day8/package.json new file mode 100644 index 0000000..bb3cd0d --- /dev/null +++ b/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" + } +} diff --git a/day8/sketch.js b/day8/sketch.js new file mode 100644 index 0000000..0e81c0c --- /dev/null +++ b/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); \ No newline at end of file diff --git a/day9/package.json b/day9/package.json new file mode 100644 index 0000000..bb3cd0d --- /dev/null +++ b/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" + } +} diff --git a/day9/sketch.js b/day9/sketch.js new file mode 100644 index 0000000..1f97ab2 --- /dev/null +++ b/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); \ No newline at end of file