31:T478,p5(sketch => { sketch.setup = () => { sketch.createCanvas(width, 400, sketch.WEBGL); }; let barWidth = 50; let barPadding = 5; let barHeight = 100; const angleScale = d3.scaleLinear() .domain([-1, 1]) // sin .range([0, barHeight]); let angle = 0; sketch.draw = () => { // Set up the initial canvas sketch.background(100); sketch.translate(0, 50, 50); sketch.ortho(); // orthographic projection // sketch.directionalLight(255, 255, 255, 0, -1, 0); // sketch.ambientLight(255, 255, 255, 0, -1, 0); // maybe even pointLight sketch.rotateX(sketch.PI / 4); let offset = 0; for (let x = 0; x < sketch.width; x += barWidth) { sketch.push(); let a = angle + offset; let h = angleScale(sketch.sin(a)); // Position the box sketch.translate(x - sketch.width / 2, 0, 0); sketch.normalMaterial(); sketch.box(barWidth - 2, h, barWidth); // height, width, depth // sketch.ambientMaterial(255); use for lighting specialness offset += 0.1; sketch.pop(); } angle += 0.1; } })32:T524,p5(sketch => { sketch.setup = () => { sketch.createCanvas(400, 400, sketch.WEBGL); }; let barWidth = 35; let barDepth = barWidth; let barPadding = 5; let barHeight = 100; const angleScale = d3.scaleLinear() .domain([-1, 1]) // sin .range([0, barHeight]); let orthoYRotation = sketch.atan(1 / sketch.sqrt(2)); // wikipedia article for ismorphic projections const orthoRange = 500; let angle = 0; sketch.draw = () => { // Set up the initial cannas sketch.background(100); sketch.translate(0, 50, -50); sketch.ortho(-orthoRange, orthoRange, orthoRange, -orthoRange, -50, 1000); // orthographic projection sketch.rotateX(sketch.QUARTER_PI); sketch.rotateY(orthoYRotation); let offset = 0; for (let z = 0; z < sketch.height; z += barDepth) { for (let x = 0; x < sketch.width; x += barWidth) { sketch.push(); let a = angle + offset; let h = angleScale(sketch.sin(a)); // Position the box sketch.translate(x - sketch.width / 2, 0, z - sketch.height / 2 ); sketch.normalMaterial(); sketch.box(barWidth - 2, h, barDepth - 2); // height, width, depth sketch.pop(); } offset += 0.1; // once per row } angle += 0.1; } })33:T766,p5(sketch => { const sketchWidth = 400; const sketchHeight = 400; sketch.setup = () => { sketch.createCanvas(sketchHeight, sketchWidth, sketch.WEBGL); }; let barWidth = 54; let barDepth = barWidth; let barPadding = 5; let barHeight = 300; const angleScale = d3.scaleLinear() .domain([-1, 1]) // sin .range([0, barHeight]); let orthoYRotation = sketch.atan(1 / sketch.sqrt(2)); // wikipedia article for ismographic view const orthoRange = 350; // right now it's a magic number // Maximum distance for offset const halfWidth = sketchWidth / 2; const halfHeight = sketchHeight / 2; let maxDistance = sketch.dist(0, 0, halfWidth, halfHeight); // origin to outside. const distanceScale = d3.scaleLinear() .domain([0, maxDistance]) .range([-2, 2]); let angle = 0; sketch.draw = () => { // Set up the initial cannas sketch.background(100); sketch.translate(0, 50, -50); sketch.ortho(-orthoRange, orthoRange, orthoRange, -orthoRange, 0, 1000); // orthographic projection sketch.rotateX(sketch.QUARTER_PI); sketch.rotateY(orthoYRotation); for (let z = 0; z < sketch.height; z += barDepth) { for (let x = 0; x < sketch.width; x += barWidth) { sketch.push(); let d = sketch.dist(x, z, halfWidth, halfHeight); // let offset = distanceScale(d); let offset = sketch.map(d, 0, maxDistance, -2, 2); // console.log(d); let a = angle + offset; let h = angleScale(sketch.sin(a)); // Position the box sketch.translate(x - sketch.width / 2, 0, z - sketch.height / 2 ); sketch.normalMaterial(); sketch.box(barWidth - 2, h, barDepth - 2); // height, width, depth sketch.pop(); } } angle += 0.1; } })34:T89d,p5(sketch => { const sketchWidth = 400; const sketchHeight = 400; sketch.setup = () => { sketch.createCanvas(sketchHeight, sketchWidth, sketch.WEBGL); sketch.stroke(0, 20, 30); // sketch.noStroke(); }; let barWidth = BAR_WIDTH; let barDepth = barWidth; let barPadding = 0; let barHeight = 340; const angleScale = d3.scaleLinear() .domain([-1, 1]) // sin .range([180, barHeight]); // adjust smallest bar height const angleOffset = sketch.PI; let orthoYRotation = sketch.atan(1 / sketch.sqrt(2)); // wikipedia article for ismographic view const clipRange = 500; // right now it's a magic number // Maximum distance for offset const halfWidth = sketchWidth / 2; const halfHeight = sketchHeight / 2; let maxDistance = sketch.dist(0, 0, halfWidth, halfHeight); // origin to outside. const distanceScale = d3.scaleLinear() .domain([0, maxDistance]) .range([-angleOffset, angleOffset]); let angle = 0; sketch.draw = () => { // Set up the initial cannas sketch.background(250); sketch.translate(0, 50, 50); sketch.ortho(-clipRange, clipRange, clipRange, -clipRange, -100, 1000); // orthographic projection // left, top, right sketch.directionalLight(54, 114, 147, 1, 0, 0); sketch.directionalLight(133, 179, 203, 0, -1, 0); sketch.directionalLight(33, 82, 140, 0, 0, -1); sketch.ambientLight(20); sketch.rotateX(orthoYRotation); sketch.rotateY(-sketch.QUARTER_PI); for (let z = 0; z < sketch.height; z += barDepth) { for (let x = 0; x < sketch.width; x += barWidth) { sketch.push(); let d = sketch.dist(x, z, halfWidth, halfHeight); let offset = distanceScale(d); let a = angle + offset; let h = sketch.floor(angleScale(sketch.sin(a))); // Position the box sketch.translate(x - sketch.width / 2, 0, z - sketch.height / 2 ); sketch.specularMaterial(255); sketch.box(barWidth - barPadding, h, barDepth - barPadding); // height, width, depth sketch.pop(); } } angle -= 0.08; } })35:T921,BreathingCube = (leftColor, topColor, rightColor) => p5(sketch => { const sketchWidth = 400; const sketchHeight = 400; sketch.setup = () => { sketch.createCanvas(sketchHeight, sketchWidth, sketch.WEBGL); // sketch.stroke(250, 250, 0); // sketch.noStroke(); }; let barWidth = BAR_WIDTH; let barDepth = barWidth; let barPadding = 0; let barHeight = 320; const angleScale = d3.scaleLinear() .domain([-1, 1]) // sin .range([180, barHeight]); // adjust smallest bar height const angleOffset = sketch.PI; let orthoYRotation = sketch.atan(1 / sketch.sqrt(2)); // wikipedia article for ismographic view const clipRange = 500; // right now it's a magic number // Maximum distance for offset const halfWidth = sketchWidth / 2; const halfHeight = sketchHeight / 2; let maxDistance = sketch.dist(0, 0, halfWidth, halfHeight); // origin to outside. const distanceScale = d3.scaleLinear() .domain([0, maxDistance]) .range([-angleOffset, angleOffset]); let angle = 0; sketch.draw = () => { // Set up the initial cannas sketch.background(250); sketch.translate(0, 50, 50); sketch.ortho(-clipRange, clipRange, clipRange, -clipRange, -100, 1000); // orthographic projection // left, top, right sketch.directionalLight(leftColor.r, leftColor.g, leftColor.b, 1, 0, 0); sketch.directionalLight(topColor.r, topColor.g, topColor.b, 0, -1, 0); sketch.directionalLight(rightColor.r, rightColor.g, rightColor.b, 0, 0, -1); sketch.ambientLight(20); sketch.rotateX(orthoYRotation); sketch.rotateY(-sketch.QUARTER_PI); for (let z = 0; z < sketch.height; z += barDepth) { for (let x = 0; x < sketch.width; x += barWidth) { sketch.push(); let d = sketch.dist(x, z, halfWidth, halfHeight); let offset = distanceScale(d); let a = angle + offset; let h = sketch.floor(angleScale(sketch.sin(a))); // Position the box sketch.translate(x - sketch.width / 2, 0, z - sketch.height / 2 ); sketch.ambientMaterial(255); sketch.box(barWidth - barPadding, h, barDepth - barPadding); // height, width, depth sketch.pop(); } } angle -= 0.08; } })36:[] 2f:{"title":"Breathing Cube in P5.js","cells":[{"id":0,"value":"md`# Breathing Cube in P5.js\n\nMaking this Bees and Bombs GIF with p5.js, with the help of d3's scale and color functions.\n\nThanks to Daniel Shiffman for his very detailed tutorial!\n\nhttps://www.youtube.com/watch?v=H81Tdrmz2LA\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`![gif](https://pbs.twimg.com/tweet_video_thumb/DQ3S4XtWsAAvqHH?format=jpg&name=medium)`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Stage 1: Breathing Rectangle - Simple Harmonic Motion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"p5(sketch => {\n sketch.setup = () => {\n sketch.createCanvas(width, 400);\n };\n \n let angle = 0;\n sketch.draw = () => {\n // Set up the initial canbas\n sketch.background(0);\n sketch.translate(sketch.width / 2, sketch.height / 2);\n sketch.rectMode(sketch.CENTER);\n sketch.fill(255);\n \n // assign h, could also use d3 scale (scaleLinear) to do this rescaling\n let h = sketch.map(sketch.sin(angle), -1, 1, 0, 100); // 100 maxheight\n \n // Key drawing function\n sketch.rect(0, 0, 10, h);\n // Increment angle\n angle += 0.1;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## A Row of Rectangles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"p5(sketch => {\n sketch.setup = () => {\n sketch.createCanvas(width, 400);\n };\n \n let angle = 0;\n // Visual Display Params\n let barWidth = 40;\n let barPadding = 2;\n let barHeight = 120;\n \n // Scaling once!\n const angleScale = d3.scaleLinear()\n .domain([-1, 1]) // sin\n .range([0, barHeight]);\n \n sketch.draw = () => {\n // Set up the initial cannas\n sketch.background(0);\n sketch.translate(sketch.width / 2, sketch.height / 2);\n sketch.rectMode(sketch.CENTER);\n sketch.fill(255);\n \n let offset = 0;\n for (let x = 0; x < sketch.width; x += barWidth) {\n let a = angle + offset;\n let h = angleScale(sketch.sin(a));\n sketch.rect(x - sketch.width / 2 + barWidth / 2, 0, barWidth - 2, h); // have slight gap\n offset += angleOffset;\n }\n angle += 0.1;\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`## Stage 3: Moving to WebGL\n\nNote usage of push/pop to freeze drawing settings in the loop: https://p5js.org/reference/#/p5/push\nThis way, drawing settings local to 1 box don't mess with everyone else.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"md`## Stage 4: Qbert View \n\nAchieving orthographic projection/ making a grid of rectangles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`## Using the Dist function to determine offset\n\nMake the offset a function of how far this rectangle is from the middle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`\n## Polish\n\n- Use integer heights only \n- don't go to 0 on the drop\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"viewof BAR_WIDTH = slider({\n min: 10, \n max: 60, \n step: 2, \n value: 38, \n title: \"BarWidth\", \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md`### Experimenting with Colored Cubes: Fire and Ice`","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"md`Fiddle with colors using the colorpicker below, and the parametrized version of the breathingcube function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"viewof LEFT_COLOR = color('#ff4446')","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"viewof TOP_COLOR = color('#f3b694')","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"viewof RIGHT_COLOR = color('#ff84ae')","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"BreathingCube(\n d3.color(LEFT_COLOR).rgb(),\n d3.color(TOP_COLOR).rgb(),\n d3.color(RIGHT_COLOR).rgb()\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof angleOffset = slider({\n min: 0, \n max: 1, \n step: 0.01, \n value: 0.1, \n title: \"Integers\", \n description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"d3 = require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"import {color, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {p5} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}