2d:null 2e:["$","title",null,{"children":"Assignment 8 - GenArt | John C | Observable"}] 33:T4d5,viewof opts = { //ref to https://observablehq.com/@s-haensch/multiple-inputs-in-a-cell const form = html` ` ; form.oninput = () => { form.value = [parseFloat(form.minDepth.value),parseFloat(form.maxDepth.value),parseFloat(form.possibility.value),parseFloat(form.displacement.value)]; } form.value = [parseFloat(form.minDepth.value),parseFloat(form.maxDepth.value),parseFloat(form.possibility.value),parseFloat(form.displacement.value)]; return form; }34:Ta0c,p5(s => { const minDepth = opts[0]; const maxDepth = opts[1]; const possibility = opts[2]; const displacement = opts[3]; class Triangle{ constructor(point1, point2, point3, depth, terminateDepth){ this.depth = depth; this.terminateDepth = terminateDepth; this.A = point1; this.B = point2; this.C = point3; this.a = [point2, point3]; this.b = [point3, point1]; this.c = [point1, point2]; this.terminated = false; } getLongSide(){ let arr = [this.a, this.b, this.c]; arr = arr.sort((a,b) =>{ let vecA = new p5c.Vector(a[0].x - a[1].x, a[0].y - a[1].y); let vecB = new p5c.Vector(b[0].x - b[1].x, b[0].y - b[1].y); return vecB.magSq() - vecA.magSq(); }); return arr[0]; } render(){ s.triangle(this.A.x, this.A.y, this.B.x, this.B.y, this.C.x, this.C.y) } } const divide = function (tri){ let res = []; recursion(res, tri); return res; } const recursion = function (arr, tri){ if ((Math.random() > possibility || tri.depth > maxDepth) && tri.depth >= minDepth) { //stop dividing tri.terminated = true; arr.push(tri); } else { //divide to two new triangles let longSide = tri.getLongSide(); let oppositePoint = (!tri.A.equals(longSide[0]) && !tri.A.equals(longSide[1])) ? tri.A : ((!tri.B.equals(longSide[0]) && !tri.B.equals(longSide[1])) ? tri.B : tri.C) ; let ratio = s.randomGaussian(0.5, (displacement/2)/2); let newPoint = new p5c.Vector(longSide[0].x + ratio*(longSide[1].x - longSide[0].x), longSide[0].y + ratio*(longSide[1].y - longSide[0].y)); recursion(arr, new Triangle(longSide[0], newPoint, oppositePoint, tri.depth + 1)); recursion(arr, new Triangle(longSide[1], newPoint, oppositePoint, tri.depth + 1)); } } let triangles = []; s.setup = function (){ s.createCanvas(600,600); s.stroke("#0F0F0F"); s.strokeWeight(0.1); s.noFill(); } s.draw = function () { s.background("#F9F8F4"); triangles= []; let tri1 = new Triangle(new p5c.Vector(0,0), new p5c.Vector(s.width, 0), new p5c.Vector(0,s.height), 0); let tri2 = new Triangle(new p5c.Vector(s.width,s.height), new p5c.Vector(s.width, 0), new p5c.Vector(0,s.height), 0); triangles = [...divide(tri1),...divide(tri2)]; triangles.forEach(t => {t.render()}); s.noLoop(); } s.mouseClicked = function () { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return; s.loop(); } })35:T1b44,p5(s => { const zWaveAmplitude = 10; const maxLv = 5 const offsetMax = 1; const offsetMin = 0.5; let cam; let colorswitch = true; let bg1,bg2; let playing = false; class Triangle{ constructor(idx, depth, maxDepth){ // create a tree of triangles this.idx = idx; this.depth = depth; this.maxDepth = maxDepth; this.outerVertices = new Array(3); for (let i = 0; i < this.outerVertices.length; i++) { this.outerVertices[i] = new p5c.Vector(0,0,0); } this.outerEdgeMiddle = new Array(3); for (let i = 0; i < this.outerEdgeMiddle.length; i++) { this.outerEdgeMiddle[i] = new p5c.Vector(0,0,0); } this.innerCenter = new p5c.Vector(0,0,0); if (this.depth < this.maxDepth) { let newDepth = this.depth+1; // two rules for subdivision let dice = s.random() this.subdivisionRule = (s.random() > 0.5 ? 0 : 1); // ? this.children = new Array(this.subdivisionRule === 0 ? 3 : 4); for (let i = 0; i < this.children.length; i++) { this.children[i] = new Triangle(i, newDepth, this.maxDepth); } } } update(outers, para){ this.outerVertices = outers; // compute the innerCenter with offset this.setInnerCenter(this.innerCenter, para, this.outerVertices); para += 0.1; // compute the middle point with offset for (let i = 0; i < this.outerEdgeMiddle.length; ++i) { let j = (i - 1 + this.outerEdgeMiddle.length) % this.outerEdgeMiddle.length; let offsetRatio = 0.5 + (0.5- s.noise(para + i * 2 )) * s.map(this.depth, 0, maxLv, offsetMax, offsetMin); this.setInBetweenPoint(this.outerEdgeMiddle[i], this.outerVertices[i], this.outerVertices[j], offsetRatio); //para += 0.1; } para += 0.1 if (this.depth < this.maxDepth){ if (this.subdivisionRule === 0) { para ++; for (let i = 0; i < this.children.length; i++) { let j = (i+1+this.children.length) % this.children.length; let group = [this.innerCenter, this.outerVertices[i], this.outerVertices[j]]; this.children[i].update(group,para); para += 0.1; } } else { para++; this.children[3].update(this.outerEdgeMiddle, para); para += 0.1; for (let i = 0; i < this.outerVertices.length; i++) { let j = (i + 1 + this.outerEdgeMiddle.length) % this.outerEdgeMiddle.length; let group = [this.outerVertices[i], this.outerEdgeMiddle[i], this.outerEdgeMiddle[j]]; this.children[i].update(group, para); para += 0.1; } } } } dbRender(){ s.stroke(colorswitch ? 10 : 245); s.beginShape(); for (const p of this.outerVertices) { s.vertex(p.x,p.y); } s.endShape(s.CLOSE); if (this.depth < this.maxDepth) { for (const child of this.children) { child.dbRender(); } } } render(){ //render the outer triangle s.beginShape(); for (const p of this.outerVertices) { s.vertex(p.x,p.y); } s.endShape(s.CLOSE); } renderChildren(){ //render inner structure if (this.subdivisionRule === 0) { for (const p of this.outerVertices) { s.line(p.x, p.y, this.innerCenter.x, this.innerCenter.y); } } else { s.noFill(); s.beginShape(); for (const p of this.outerEdgeMiddle) { s.vertex(p.x,p.y); } s.endShape(s.CLOSE); } // recursion if (this.depth < this.maxDepth) { for (const child of this.children) { child.renderChildren(); } } } setInBetweenPoint(target, sourceA, sourceB, ratio){ target.set(sourceA.x * ratio + sourceB.x * (1-ratio), sourceA.y * ratio + sourceB.y * (1-ratio), 0); } setInnerCenter (target, para, vertices) { let x1 = vertices[0].x; let y1 = vertices[0].y; let x2 = vertices[1].x; let y2 = vertices[1].y; let x3 = vertices[2].x; let y3 = vertices[2].y; // a: 1-2 b: 2-3 c: 3-1 let a = s.dist(x1,y1,x2,y2); let b = s.dist(x2,y2,x3,y3); let c = s.dist(x3,y3,x1,y1); let x = (a * x1 + b * x2 + c * x3) / (a + b + c); let y = (a * y1 + b * y2 + c * y3) / (a + b + c); let ss = (a+b+c)/2; let radius = s.sqrt(ss*(ss-a)*(ss-b)*(ss-c))/ss let maxOffset = radius; x += (0.5-s.noise(para)) * s.map(this.depth, 0, maxLv, offsetMax, offsetMin) * maxOffset; y += (0.5-s.noise(para - 100)) * s.map(this.depth, 0, maxLv, offsetMax, offsetMin) * maxOffset; target.set(x, y, 0); } } let tri = new Triangle(3, 0, maxLv); let noiseF,rootTriVertices,rootTriRadiusRange, rootTriRadianOffsetRange, rrf, rrnf; s.setup = function (){ s.createCanvas(600,600); bg1 = createBg(s, true); bg2 = createBg(s, false); s.strokeWeight(1); s.noFill(); //init parameters noiseF = s.random(100); rrf = s.random(100); rrnf = s.random(100); rootTriVertices = new Array(3); rootTriRadiusRange = s.width; rootTriRadianOffsetRange = s.PI/4; for (let i = 0; i < rootTriVertices.length; i++) { rootTriVertices[i] = new p5c.Vector(0,0); } s.noLoop(); s.frameRate(30); } s.draw = function () { colorswitch = s.noise(s.frameCount/1000) > 0.5; s.image(colorswitch ? bg1 : bg2, 0, 0); s.stroke(colorswitch ? 50 : 245); updateRoot(); tri.update(rootTriVertices, noiseF) s.push(); s.translate(s.width/2, s.height/2); s.rotate(s.frameCount/200) tri.render(); tri.renderChildren(); s.pop(); noiseF += 0.01; } s.mouseClicked = function () { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return; if (!playing){ s.loop(); playing = true; } else { s.noLoop(); playing = false; } } const updateRoot = function(){ for (let i = 0; i < rootTriVertices.length; i++) { let radius = rootTriRadiusRange * (1-s.noise(rrf + i * 0.6)* 0.5); let radian = (i) * (s.PI*2/3) + (1-s.noise(rrnf + i * 0.6)) * 0.75 * rootTriRadianOffsetRange; let x = radius * s.cos(radian); let y = radius * s.sin(radian); rootTriVertices[i].set(x,y,0); } rrf += 0.01; rrnf += 0.01; } const createBg = function (s, type) { let tem = new p5c.Graphics(s.width, s.height, s.P2D, s); tem.noStroke(); for (let d = tem.width ; d > 5; d -= 2) { if (type) {tem.fill(s.map(d, tem.width, 10, 126, 240))} else {tem.fill(s.map(d, tem.width, 10, 126, 0))} tem.ellipse(tem.width/2, tem.height/2, 2*d, 2*d); } return tem; } const getZ = function (x, y){ return zWaveAmplitude * (1 - s.noise(x,y,(s.frameCount + 140)/2500)); } })36:T239e,p5(s => { const pointNo = 20; const holeNo = 4; const pointMovesStep = 0.5; const maxLv = 3; const changeFadeFrames = 30; class Polygon{ constructor(depth, maxDepth, noOfSides){ this.depth = depth; this.maxDepth = maxDepth; this.sideNo = noOfSides; this.outerVertices = new Array(this.sideNo); for (let i = 0; i < this.outerVertices.length; ++i) { this.outerVertices[i] = new p5c.Vector(0,0); } this.outerEdgesMiddle = new Array(this.sideNo); for (let i = 0; i < this.outerEdgesMiddle.length; ++i) { this.outerEdgesMiddle[i] = new p5c.Vector(0,0); } this.controlPoints = new Array(this.sideNo); for (let i = 0; i < this.controlPoints.length; ++i) { this.controlPoints[i] = new p5c.Vector(0,0); } this.innerCenter = new p5c.Vector(0,0); if (this.depth < this.maxDepth) { this.children = new Array(this.sideNo + 1); for (let i = 0; i < this.sideNo; ++i) { this.children[i] = new Polygon(this.depth + 1, this.maxDepth, 5); } this.children[this.sideNo] = new Polygon(this.depth + 1, this.maxDepth, this.sideNo); } } update(outerVs, para){ this.outerVertices = outerVs; //outer edges middle with offset for (let i = 0; i < this.outerVertices.length; i++) { let j = (i + 1 + this.outerVertices.length) % this.outerVertices.length; let ratio = 0.5 + (0.5 - s.noise(para)) * 0.25; this.setInBetweenPoint(this.outerEdgesMiddle[i], this.outerVertices[i], this.outerVertices[j], ratio); para += 0.1; } // inner center (average center) this.setInnerCenter(this.innerCenter, this.outerVertices); // controlPoints for (let i = 0; i < this.controlPoints.length; i++) { let ratio = 1 - s.noise(para) * 0.9; this.setInBetweenPoint(this.controlPoints[i], this.outerEdgesMiddle[i], this.innerCenter, ratio); } if (this.depth < this.maxDepth) { para ++; this.children[this.sideNo].update(this.controlPoints, para); para += 0.1; for (let i = 0; i < this.sideNo; i++) { let j = (i-1+this.sideNo)%this.sideNo; let group = [this.outerVertices[i],this.outerEdgesMiddle[i],this.controlPoints[i],this.controlPoints[j],this.outerEdgesMiddle[j]]; this.children[i].update(group, para); para += 0.1; } } } display(){ //this.render(); this.renderChildren(); } render(){ s.beginShape(); for (const p of this.outerVertices) { s.vertex(p.x, p.y); } s.endShape(s.CLOSE); } renderChildren(){ s.beginShape(); for (const p of this.controlPoints) { s.vertex(p.x,p.y); } s.endShape(s.CLOSE); for (let i = 0; i < this.sideNo; i++) { let j = (i-1+this.sideNo)%this.sideNo s.beginShape(); s.vertex(this.outerVertices[i].x, this.outerVertices[i].y); s.vertex(this.outerEdgesMiddle[i].x, this.outerEdgesMiddle[i].y); s.vertex(this.controlPoints[i].x, this.controlPoints[i].y); s.vertex(this.controlPoints[j].x, this.controlPoints[j].y); s.vertex(this.outerEdgesMiddle[j].x, this.outerEdgesMiddle[j].y); s.endShape(s.CLOSE); } if (this.depth < this.maxDepth) { for (const child of this.children) { child.renderChildren(); } } } setInBetweenPoint(target, sourceA, sourceB, ratio){ try { target.set(sourceA.x * ratio + sourceB.x * (1-ratio), sourceA.y * ratio + sourceB.y * (1-ratio)); } catch (e) { console.error(e,target, ratio); } } setInnerCenter(target, vertices){ let sumX = 0, sumY = 0; for (const p of vertices) { sumX += p.x; sumY += p.y; } target.set(sumX/vertices.length, sumY/vertices.length); } } let playing = false; let noiseFPointsMove; let points = new Array(pointNo); let pointsRef = new Array(pointNo); let voronoi; let polygons = new Array(holeNo); let selectedIndex = new Array(holeNo); let noiseFPolygons = new Array(holeNo); let changeAfterNextNFrame = s.floor(s.random(10,15)) * 30; let lastchangeFrame = 2; let toChange = undefined, newIdx = undefined, toChangeIdx = undefined, lastChanged; s.setup = function (){ s.createCanvas(800,600); s.background(0); for (let i = 0; i < points.length; i++) { let x = s.random(s.width); let y = s.random(s.height) points[i] = [x,y]; pointsRef[i] = [x,y]; } for (let i = 0; i < holeNo; ++i) { selectedIndex[i] = undefined; polygons[i] = undefined; noiseFPolygons[i] = s.random(100,300); } voronoi = d3.Delaunay.from(points).voronoi([0,0,s.width,s.height]); noiseFPointsMove = s.random(100); s.noFill(); s.stroke(250); s.strokeWeight(0.5); s.noLoop(); s.frameRate(30); } s.draw = function(){ s.background(0); if (!selectedIndex[0]) { // init for (let i = 0; i < selectedIndex.length; ++i) { let randomIdx = s.floor(s.random(points.length)) while (selectedIndex.includes(randomIdx)){ randomIdx = s.floor(s.random(points.length)) } selectedIndex[i] = randomIdx; } //console.log("initSI", selectedIndex); } //draw voronoi graph for (let i = 0; i < points.length; i++) { const cell = voronoi.cellPolygon(i); s.push(); // if (selectedIndex.includes(i)){ // s.stroke(0,255,0); // s.strokeWeight(5); // } s.beginShape(); //let midx = 0, midy = 0; for (const point of cell) { s.vertex(point[0],point[1]); // midx += point[0]; //midy += point[1]; } s.endShape(); s.pop(); // s.push(); // s.fill(255); // s.text(i, midx/cell.length, midy/cell.length) // s.pop(); } for (let i = 0; i < selectedIndex.length; ++i) { const idx = selectedIndex[i]; let cell = voronoi.cellPolygon(idx); if (!cell) continue; // s.push(); // s.stroke(255,0,0); // s.strokeWeight(2); // s.beginShape(); // for (const point of cell) { // s.vertex(point[0],point[1]); // } // s.endShape(); // s.pop(); let sides = cell.length - 1; cell.pop(); cell = cell.map(p => {return new p5c.Vector(p[0],p[1])}); polygons[i] = new Polygon(0,maxLv,sides); polygons[i].update(cell, noiseFPolygons[i]); s.push(); if (toChangeIdx && toChangeIdx === idx) { s.stroke(250, s.map(changeAfterNextNFrame - (s.frameCount - lastchangeFrame),changeFadeFrames,0,255,0)); } else if (newIdx && newIdx === idx) { s.stroke(250, s.map(s.frameCount - lastchangeFrame,0,changeFadeFrames,0,255)); } polygons[i].display(); s.pop(); } if (!toChange && s.frameCount - lastchangeFrame > changeAfterNextNFrame - changeFadeFrames ) { //decide which cell to be changed toChange = s.floor(s.random(selectedIndex.length)); while (toChange === lastChanged) { toChange = s.floor(s.random(selectedIndex.length)); } toChangeIdx = selectedIndex[toChange]; lastChanged = toChange; //console.log("tc",toChangeIdx) } else if (s.frameCount - lastchangeFrame > changeAfterNextNFrame) { //pick new cell let neighbors = [...voronoi.neighbors(toChangeIdx)]; newIdx = s.random(neighbors); let tries = 1; while (selectedIndex.includes(newIdx) && tries < 10) { newIdx = s.random(neighbors); } if (tries >= 10){ newIdx = s.floor(s.random(points.length)); while(selectedIndex.includes(newIdx)){ newIdx = s.floor(s.random(points.length)); } } selectedIndex[toChange] = newIdx; toChange = undefined; toChangeIdx = undefined; lastchangeFrame = s.frameCount; changeAfterNextNFrame = s.floor(s.random(10,15)) * 30; //console.log("new",newIdx) } else if (s.frameCount - lastchangeFrame > changeFadeFrames && newIdx) { //for fading in newIdx = undefined; } //points move for (let i = 0; i < points.length; i ++) { let p = points[i]; p[0] = s.constrain(p[0] + (0.5-s.noise(noiseFPointsMove + i))*pointMovesStep,pointsRef[i][0] - 15, pointsRef[i][0] + 15); p[1] = s.constrain(p[1] + (0.5-s.noise(noiseFPointsMove + 100 + i))*pointMovesStep,pointsRef[i][1] - 15, pointsRef[i][1] + 15); } //update voronoi voronoi = d3.Delaunay.from(points).voronoi([0,0,s.width,s.height]); //update noise noiseFPointsMove += 0.01; for (let i = 0; i < noiseFPolygons.length; ++i) { noiseFPolygons[i] += 0.01; } } s.mouseClicked = function () { if (s.mouseX < 0 || s.mouseX > s.width || s.mouseY < 0 || s.mouseY > s.height) return; if (!playing){ s.loop(); playing = true; } else { s.noLoop(); playing = false; } } })37:[] 31:{"id":"d428f276e9f79047","slug":"assignment-8-genart","title":"Assignment 8 - GenArt","thumbnail":"d12411fda0a2fee7cba09f330f7f498bd0696341e11a01d229a5478780f0d53b","access_level":"public","create_time":"$D2021-10-31T07:06:03.759Z","update_time":"$D2021-11-21T11:56:04.059Z","view_time":null,"first_public_time":"$D2021-11-02T07:21:03.497Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"b2e9840be7b1b607","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":"starter_2024"},"version":353,"publish_version":353,"role":null,"authored":false,"authors":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}],"members":[{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Assignment 8 - GenArt","cells":[{"id":0,"value":"

Assignment 8 - GenArt

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"

Implementation

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"

Stretching

inspired by Raven Kwok's algorithmic creatures series. Click to start the animation.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"

Net

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {p5c,p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"require(\"d3-delaunay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"