2d:null 2e:["$","title",null,{"children":"SM3809_A1 | John C | Observable"}] 33:Td27,html`

SM3809_A1

The Art of the Grid

Read

Vera Molnar believes that there are general principles of aesthetics related to the field of human physiology and psychology. This kind of ideas that merge art and science are common today, but I guess quite thought-provoking in the 60s. I found that the process of how she makes a painting with computers that she describes in the easy is also, in a way, very "scientific" (well that might be a kind of stereotype of science, so, quotation marks): each time she uses the computer to generate next version, she changes only one parameter and keeps others the same, this is very similar to the method of Control Variable that is commonly used in science research and experiment. With the method, each of her works is not only an artwork, but also can be seen as the result of research, and this is very fascinating

Another thing I found interesting in the essay is the role of the computer in her works. As one of the first artists that use computers to make artworks, I think the computer plays a different role in her works from the role it plays in today's so called "computational art", or, the topic of the course, software art. As mentioned in the essay, one of the reasons she uses computers is that the process is "tedious and slow" by hand. In a way, I think computer to her is more like Final Cut Pro X to today's film editor, by which I mean unlike some computational art and almost all software art that the programme(the software) itself, or the direct output of it, becomes the artwork, she uses computer just as a tool like pencils and brush (probably because the computers are not very powerful then). As now more and more artists use AI, I think her method might be a possible way of ending the "who's the author, artist or the AI?" question.

One last thing, at the end of the essay Molnar talks about viewers' voices. I guess her works do receive lots of negative comments :p. But it is a good question: should the artworks be just the expression of the artist, or they need to be toward "beauty" or "aesthetic" (or whatever)?

Describe

Symmetric grey to black radial gradient background
Many white, "c"-shape elements in the foreground that
- are asymmetric
- share the same scale and shape
- in a 14*14 grid but with random displacement
- with random rotation of n*90° (n is an integer)
- may overlap each other
- each can be seen as a square minor a rectangle

!----------------------------------------------------------------------------------------------------------below p5js sketches are directly run on observablehq with instance mode, some unexpected bugs might occur, if that happens, please reflesh the page
-----------------------------------------------------------------------------------------------------------

Recreate

Click (inside the canva) to regenerate `34:T849,p5(s => { class Element{ constructor(x,y,n){ this.x = x; this.y = y; this.n = n; this.d = 30; this.r = this.d/2; this.a1 = 2; this.a2 = 4; this.a3 = 9; } draw(){ s.push(); s.translate(this.x, this.y); s.rotate(this.n*90); s.noStroke(); s.fill(255); s.rectMode(s.CORNERS); s.rect(this.r - this.a1,this.r,this.r,-this.r); s.rect(this.r, -(this.r - this.a2), -this.r, -this.r); s.rect(-this.r, -this.r, -(this.r - this.a3), this.r); s.pop(); } } s.setup = function() { s.createCanvas(600,600); s.background(220); s.rectMode(s.CENTER); s.ellipseMode(s.RADIUS); s.angleMode(s.DEGREES); } s.draw = function() { s.drawBg(); s.drawElements(); s.noLoop(); } s.drawBg = function() { let grey = 54; let black = 21; s.background(black); for (let r = s.width/2; r > 0 ; r -= 1) { let i = s.round(s.map(r,s.width/2,0,black,grey)); s.push(); s.fill(i); s.noStroke(); s.ellipse(0,s.height/2,r); s.ellipse(s.width,s.height/2,r); s.pop(); } //well the gradient doesn't look great coz from RGB(21) to RGB(54) there are just 33 steps } s.drawElements = function() { let num = 196; let a = 14; let padding = [20, 20, 15, 15]; // top,bottom,left,right let stepX = s.round((s.width - padding[2] - padding[3])/ a ); let stepY = s.round((s.height - padding[0] - padding[1])/ a ); for (let row = 0; row < a; row ++) { for (let col = 0; col < a; col ++) { let n = s.floor(s.random(0, 4)); let centerX = padding[2] + (stepX / 2) + col * stepX; let centerY = padding[0] + (stepY / 2) + row * stepY; centerX += s.round(s.random(-15, 15)); centerY += s.round(s.random(-15, 15)); let e = new Element(centerX, centerY, n); e.draw(); } } } s.mouseClicked = function() { if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1){ s.loop(); } } })35:Tbb1,p5(s => { class Element{ constructor(x,y,n){ this.x = x; this.y = y; this.n = n; this.d = 30; this.r = this.d/2; this.a1 = 2; this.a2 = 4; this.a3 = 9; } draw(){ s.push(); s.translate(this.x, this.y); s.rotate(this.n*90); s.noStroke(); s.fill(255); s.rectMode(s.CORNERS); s.rect(this.r - this.a1,this.r,this.r,-this.r); s.rect(this.r, -(this.r - this.a2), -this.r, -this.r); s.rect(-this.r, -this.r, -(this.r - this.a3), this.r); s.pop(); } } let pos = []; s.setup = function() { s.createCanvas(600,600); s.background(220); s.rectMode(s.CENTER); s.ellipseMode(s.RADIUS); s.angleMode(s.DEGREES); setInterval(function() { if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1) { s.reDraw(); } }, 1000); } s.draw = function() { if (pos.length == 0) { s.drawBg(); s.setElementsPos(); s.drawElements(); } } s.drawBg = function() { let grey = 54; let black = 21; s.background(black); for (let r = s.width/2; r > 0 ; r -= 1) { let i = s.round(s.map(r,s.width/2,0,black,grey)); s.push(); s.fill(i); s.noStroke(); s.ellipse(0,s.height/2,r); s.ellipse(s.width,s.height/2,r); s.pop(); } //well the gradient doesn't look great coz from RGB(21) to RGB(54) there are just 33 steps } s.setElementsPos = function() { let num = 196; let a = 14; let padding = [20, 20, 15, 15]; // top,bottom,left,right let stepX = s.round((s.width - padding[2] - padding[3])/ a ); let stepY = s.round((s.height - padding[0] - padding[1])/ a ); for (let row = 0; row < a; row ++) { for (let col = 0; col < a; col ++) { let centerX = padding[2] + (stepX / 2) + col * stepX; let centerY = padding[0] + (stepY / 2) + row * stepY; centerX += s.round(s.random(-15, 15)); centerY += s.round(s.random(-15, 15)); let n = s.floor(s.random(0,4)); pos.push([centerX, centerY, n]); } } } s.drawElements = function() { if (pos.length > 0) { pos.forEach(arr => { let e = new Element(arr[0], arr[1], arr[2]); e.draw(); }); } else { console.log("should set pos first"); } } s.reDraw = function () { s.drawBg(); let num = s.round(s.random(58,98)); let usedIndex = []; while (usedIndex.length < num) { let index = s.floor(s.random(pos.length)); while (usedIndex.includes(index)) { index = s.floor(s.random(pos.length)); } pos[index][2] += s.random([-1,1]); usedIndex.push(index); } s.drawElements(); } s.mouseClicked = function (e) { e.preventDefault(); if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1){ pos.length = 0; } } })36:Tf60,p5(s => { class Element{ constructor(x,y,n,t){ this.x = x; this.y = y; this.n = n; this.t = t; this.d = 30; this.r = this.d/2; this.a1 = 2; this.a2 = 4; this.a3 = 9; } draw(){ s.push(); s.translate(this.x, this.y); s.rotate(this.n*90); s.noStroke(); s.fill(255); s.rectMode(s.CORNERS); if (this.t == 0) { s.rect(this.r - this.a1,this.r,this.r,-this.r); s.rect(this.r, -(this.r - this.a2), -this.r, -this.r); s.rect(-this.r, -this.r, -(this.r - this.a3), this.r); } else if (this.t == 1) { s.rect(this.r - this.a1,this.r,this.r,-this.r); s.rect(this.r, 0, -this.r, this.a2); s.rect(-this.r, -this.r, -(this.r - this.a3), this.r); //added shapes have the same base elements and keep the asymmetric feature } else if (this.t == 2) { s.rect(this.r, -this.r, -this.r,-(this.r - this.a3)); s.rect(this.a1, -this.r, 0, this.r); s.rect(-this.r, -this.r, -(this.r - this.a2), this.r); //added shapes have the same base elements and keep the asymmetric feature } else if (this.t == 3) { s.rect(this.r, -this.a3, -this.r, 0); s.rect(this.a2, -this.r, 0, this.r); s.rect(-(this.r - this.a1), -this.r, -this.r, this.r); //added shapes have the same base elements and keep the asymmetric feature } s.pop(); } } let pos = []; s.setup = function() { s.createCanvas(600,600); s.background(220); s.rectMode(s.CENTER); s.ellipseMode(s.RADIUS); s.angleMode(s.DEGREES); setInterval(function() { if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1) { s.reDraw(); } }, 1000); } s.draw = function() { if (pos.length == 0) { s.drawBg(); s.setElementsPos(); s.drawElements(); } } s.drawBg = function() { let grey = 54; let black = 21; s.background(black); for (let r = s.width/2; r > 0 ; r -= 1) { let i = s.round(s.map(r,s.width/2,0,black,grey)); s.push(); s.fill(i); s.noStroke(); s.ellipse(0,s.height/2,r); s.ellipse(s.width,s.height/2,r); s.pop(); } //well the gradient doesn't look great coz from RGB(21) to RGB(54) there are just 33 steps } s.setElementsPos = function() { let num = 196; let a = 14; let padding = [20, 20, 15, 15]; // top,bottom,left,right let stepX = s.round((s.width - padding[2] - padding[3])/ a ); let stepY = s.round((s.height - padding[0] - padding[1])/ a ); for (let row = 0; row < a; row ++) { for (let col = 0; col < a; col ++) { let centerX = padding[2] + (stepX / 2) + col * stepX; let centerY = padding[0] + (stepY / 2) + row * stepY; centerX += s.round(s.random(-15, 15)); centerY += s.round(s.random(-15, 15)); let n = s.floor(s.random(0,4)); let t = s.floor(s.random(0,4)); pos.push([centerX, centerY, n, t]); } } } s.drawElements = function() { if (pos.length > 0) { pos.forEach(arr => { let e = new Element(arr[0], arr[1], arr[2], arr[3]); e.draw(); }); } else { console.log("should set pos first"); } } s.reDraw = function () { s.drawBg(); let num = s.round(s.random(58,98)); let usedIndex = []; while (usedIndex.length < num) { let index = s.floor(s.random(pos.length)); while (usedIndex.includes(index)) { index = s.floor(s.random(pos.length)); } pos[index][2] += s.random([-1,1]); usedIndex.push(index); } s.drawElements(); } s.mouseClicked = function (e) { e.preventDefault(); if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1){ pos.length = 0; } } })37:Tfa5,p5(s => { class Element{ constructor(x,y,n,t,sz){ this.x = x; this.y = y; this.n = n; this.t = t; this.d = 30 * sz; this.r = this.d/2; this.a1 = 2 *sz; this.a2 = 4 *sz; this.a3 = 9 *sz; } draw(){ s.push(); s.translate(this.x, this.y); s.rotate(this.n*90); s.noStroke(); s.fill(255); s.rectMode(s.CORNERS); if (this.t == 0) { s.rect(this.r - this.a1,this.r,this.r,-this.r); s.rect(this.r, -(this.r - this.a2), -this.r, -this.r); s.rect(-this.r, -this.r, -(this.r - this.a3), this.r); } else if (this.t == 1) { s.rect(this.r - this.a1,this.r,this.r,-this.r); s.rect(this.r, 0, -this.r, this.a2); s.rect(-this.r, -this.r, -(this.r - this.a3), this.r); //added shapes have the same base elements and keep the asymmetric feature } else if (this.t == 2) { s.rect(this.r, -this.r, -this.r,-(this.r - this.a3)); s.rect(this.a1, -this.r, 0, this.r); s.rect(-this.r, -this.r, -(this.r - this.a2), this.r); //added shapes have the same base elements and keep the asymmetric feature } else if (this.t == 3) { s.rect(this.r, -this.a3, -this.r, 0); s.rect(this.a2, -this.r, 0, this.r); s.rect(-(this.r - this.a1), -this.r, -this.r, this.r); //added shapes have the same base elements and keep the asymmetric feature } s.pop(); } } let pos = []; s.setup = function() { s.createCanvas(600,600); s.background(220); s.rectMode(s.CENTER); s.ellipseMode(s.RADIUS); s.angleMode(s.DEGREES); setInterval(function() { if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1) { s.reDraw(); } }, 1000); } s.draw = function() { if (pos.length == 0) { s.drawBg(); s.setElementsPos(); s.drawElements(); } } s.drawBg = function() { let grey = 54; let black = 21; s.background(black); for (let r = s.width/2; r > 0 ; r -= 1) { let i = s.round(s.map(r,s.width/2,0,black,grey)); s.push(); s.fill(i); s.noStroke(); s.ellipse(0,s.height/2,r); s.ellipse(s.width,s.height/2,r); s.pop(); } //well the gradient doesn't look great coz from RGB(21) to RGB(54) there are just 33 steps } s.setElementsPos = function() { let num = 196; let a = 14; let padding = [20, 20, 15, 15]; // top,bottom,left,right let stepX = s.round((s.width - padding[2] - padding[3])/ a ); let stepY = s.round((s.height - padding[0] - padding[1])/ a ); for (let row = 0; row < a; row ++) { for (let col = 0; col < a; col ++) { let centerX = padding[2] + (stepX / 2) + col * stepX; let centerY = padding[0] + (stepY / 2) + row * stepY; centerX += s.round(s.random(-15, 15)); centerY += s.round(s.random(-15, 15)); let n = s.floor(s.random(0,4)); let t = s.floor(s.random(0,4)); let sz = s.random(0.75,1.5); pos.push([centerX, centerY, n, t, sz]); } } } s.drawElements = function() { if (pos.length > 0) { pos.forEach(arr => { let e = new Element(arr[0], arr[1], arr[2], arr[3], arr[4]); e.draw(); }); } else { console.log("should set pos first"); } } s.reDraw = function () { s.drawBg(); let num = s.round(s.random(58,98)); let usedIndex = []; while (usedIndex.length < num) { let index = s.floor(s.random(pos.length)); while (usedIndex.includes(index)) { index = s.floor(s.random(pos.length)); } pos[index][2] += s.random([-1,1]); usedIndex.push(index); } s.drawElements(); } s.mouseClicked = function (e) { e.preventDefault(); if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1){ pos.length = 0; } } })38:T2848,p5(s => { let cc = 180,cs=1; class Triangles { constructor(v){ this.v = v; this.x1=v[0].x; this.y1=v[0].y; this.x2=v[1].x; this.y2=v[1].y; this.x3=v[2].x; this.y3=v[2].y; let va = 2 * ((this.x2 - this.x1) * (this.y3 - this.y1) - (this.y2 - this.y1) * (this.x3 - this.x1)); let x =((this.y3 - this.y1) * (s.sq(this.x2) - s.sq(this.x1) + s.sq(this.y2) - s.sq(this.y1)) + (this.y1 - this.y2) * (s.sq(this.x3) - s.sq(this.x1) + s.sq(this.y3) - s.sq(this.y1))) / va; let y=((this.x1 - this.x3) * (s.sq(this.x2) - s.sq(this.x1) + s.sq(this.y2) - s.sq(this.y1)) + (this.x2 - this.x1) * (s.sq(this.x3) - s.sq(this.x1) + s.sq(this.y3) - s.sq(this.y1))) / va; let r = s.dist(x,y,this.x1,this.y1); this.c_circle = [x, y, r]; } is_in_circle(x, y) { return s.dist(this.c_circle[0],this.c_circle[1],x,y) < this.c_circle[2]; } divide (vex){ let new_tris = []; for (let i=0;i<3;i++){ let va = i==2? 0:i+1; let tem = [this.v[i], this.v[va], vex]; let tem_tri = new Triangles(tem); new_tris.push(tem_tri); } return new_tris; } display(){ s.push(); s.fill(cc + 90 * (0.5 - s.noise(this.c_circle[0]*0.005,this.c_circle[1]*0.005,(s.frameCount+80)/6000)),85 + 10*(0.5 - s.noise((s.frameCount+120)/6000)),100); s.stroke((cc + 90 * (0.5 - s.noise(this.c_circle[0]*0.005,this.c_circle[1]*0.005,(s.frameCount+80)/6000))) > 180 ? (cc + 90 * (0.5 - s.noise(this.c_circle[0]*0.005,this.c_circle[1]*0.005,(s.frameCount+80)/6000))) - 180: (cc + 90 * (0.5 - s.noise(this.c_circle[0]*0.005,this.c_circle[1]*0.005,(s.frameCount+80)/6000))) +180 ,50,100); s.beginShape(); for(let i=0;i<3;i++){ s.vertex(this.v[i].x,this.v[i].y); } s.endShape(s.CLOSE); s.pop(); } vertices_contain(x,y){ for(let i=0;i<3;i++){ if (this.v[i].x==x && this.v[i].y==y){ return true; } } return false; } } class Element{ constructor(x,y,n,t,sz){ this.x = x; this.y = y; this.n = n; this.t = t; this.d = 30 *sz; this.r = this.d/2; this.a1 = 2 *sz; this.a2 = 4 *sz; this.a3 = 9 *sz; } draw(g){ g.push(); g.translate(this.x, this.y); g.rotate(this.n*90); g.noStroke(); g.fill(255); g.rectMode(s.CORNERS); if (this.t == 0) { g.rect(this.r - this.a1,this.r,this.r,-this.r); g.rect(this.r, -(this.r - this.a2), -this.r, -this.r); g.rect(-this.r, -this.r, -(this.r - this.a3), this.r); } else if (this.t == 1) { g.rect(this.r - this.a1,this.r,this.r,-this.r); g.rect(this.r, 0, -this.r, this.a2); g.rect(-this.r, -this.r, -(this.r - this.a3), this.r); //added shapes have the same base elements and keep the asymmetric feature } else if (this.t == 2) { g.rect(this.r, -this.r, -this.r,-(this.r - this.a3)); g.rect(this.a1, -this.r, 0, this.r); g.rect(-this.r, -this.r, -(this.r - this.a2), this.r); //added shapes have the same base elements and keep the asymmetric feature } else if (this.t == 3) { g.rect(this.r, -this.a3, -this.r, 0); g.rect(this.a2, -this.r, 0, this.r); g.rect(-(this.r - this.a1), -this.r, -this.r, this.r); //added shapes have the same base elements and keep the asymmetric feature } g.pop(); } } let pos = []; let mask; let tris = []; let fixedP = []; let parr = []; s.setup = function() { s.frameRate(60); s.createCanvas(600,600); mask = s.createGraphics(s.width, s.height); s.background(255); mask.rectMode(s.CENTER); mask.ellipseMode(s.RADIUS); mask.angleMode(s.DEGREES); s.colorMode(s.HSB); fixedP = [new p5c.Vector(-100,-100),new p5c.Vector(-100,s.height / 2),new p5c.Vector(-100, s.height + 100),new p5c.Vector(s.width / 2,s.height + 100),new p5c.Vector(s.width + 100,s.height + 100),new p5c.Vector(s.width + 100,s.height / 2),new p5c.Vector(s.width + 100, -100),new p5c.Vector(s.width / 2,-100), ]; for (let i = 0; i < 60; i++) { let p = new p5c.Vector(s.random(-50, s.width+50),s.random(-50, s.height+50)); parr.push(p); } setInterval(function() { if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1) { s.reDraw() } }, 1000); } s.draw = function() { s.background(255); s.lowpolyBg(); if (pos.length == 0) { s.drawBg(); s.setElementsPos(); s.drawElements(); } if (mask) { let img = s.makeMask(mask); s.image(img,0,0); } if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1) { s.lowpolyBgChange(); } } s.drawBg = function() { let grey = 54; let black = 21; mask.background(black); for (let r = s.width/2; r > 0 ; r -= 1) { let i = s.round(s.map(r,s.width/2,0,black,grey)); mask.push(); mask.fill(i); mask.noStroke(); mask.ellipse(0,s.height/2,r); mask.ellipse(s.width,s.height/2,r); mask.pop(); } //well the gradient doesn't look great coz from RGB(21) to RGB(54) there are just 33 steps } s.setElementsPos = function() { let num = 196; let a = 14; let padding = [20, 20, 15, 15]; // top,bottom,left,right let stepX = s.round((s.width - padding[2] - padding[3])/ a ); let stepY = s.round((s.height - padding[0] - padding[1])/ a ); for (let row = 0; row < a; row ++) { for (let col = 0; col < a; col ++) { let centerX = padding[2] + (stepX / 2) + col * stepX; let centerY = padding[0] + (stepY / 2) + row * stepY; centerX += s.round(s.random(-15, 15)); centerY += s.round(s.random(-15, 15)); let n = s.floor(s.random(0,4)); let t = s.floor(s.random(0,4)); let sz = s.random(0.75,1.5) pos.push([centerX, centerY, n, t, sz]); } } } s.drawElements = function() { if (pos.length > 0) { pos.forEach(arr => { let e = new Element(arr[0], arr[1], arr[2], arr[3], arr[4]); e.draw(mask); }); } else { console.log("should set pos first"); } } s.reDraw = function () { s.drawBg(); let num = s.round(s.random(58,98)); let usedIndex = []; while (usedIndex.length < num && pos.length > 0) { let index = s.floor(s.random(pos.length)); while (usedIndex.includes(index)) { index = s.floor(s.random(pos.length)); } pos[index][2] += s.random([-1,1]); usedIndex.push(index); } s.drawElements(); } s.makeMask = function (g) { let img = s.createImage(g.width, g.height); img.copy(g, 0, 0, g.width, g.height, 0, 0, img.width, img.height); img.loadPixels(); for (let i = 0; i < img.pixels.length; i += 4) { if (img.pixels[i] > 100 && img.pixels[i + 1] > 100 && img.pixels[i + 2] > 100) { img.pixels[i + 3] = 0; } } img.updatePixels(); return img; } s.mouseClicked = function (e) { e.preventDefault(); if (s.mouseX > -1 && s.mouseX < s.width + 1 && s.mouseY > -1 && s.mouseY < s.height + 1){ pos.length = 0; } } //this part (and also the class related) is migrated from one of my previous work //https://drive.google.com/file/d/1G78x8ydIjRc8MX3RSTPN1iiUKYkUpp9a/view?usp=sharing //Delaunay Triangulation s.supertriangle = function() { let r=s.sqrt(s.sq(width+400)+s.sq(s.height+400))/2; let supertriangle = [ new p5c.Vector(width/2-s.sqrt(3)*r,s.height/2-r), new p5c.Vector(width/2+s.sqrt(3)*r,s.height/2-r), new p5c.Vector(width/2,s.height/2+2*r) ]; return supertriangle; } s.should_del = function (tri,x,y){ if (tri.vertices_contain(x,y)){ return false; } return tri.is_in_circle(x,y); } s.get_d_tris = function (input){ let result = []; let triangles = []; let vertices = []; let super_v = s.supertriangle(); triangles.push(new Triangles(super_v)); vertices = vertices.concat(super_v); for (let i=0;i { tri.display(255); }); } s.lowpolyBgChange = function() { for (let i=0;i<50;i++){ parr[i].x+=5*(0.5-s.noise(i*0.01,s.frameCount/6000)); parr[i].y+=5*(0.5-s.noise(i*0.01,(s.frameCount+40)/6000)); //bring back the outside points if (parr[i].x>s.width+50){ parr[i].x=s.random(-50,0); } else if (parr[i][0]<-50){ parr[i].x=s.random(s.width,s.width+50); } if (parr[i].y>s.height+50){ parr[i].y=s.random(-50,0); } else if (parr[i].y<-50){ parr[i].y=s.random(s.height,s.height+50); } } cc+=cs; if (cc==270||cc==90) { cs = -cs; } } })39:T44a,p5 = function* (sketch) { //helper from https://observablehq.com/@tmcw/p5 const element = DOM.element('div'); // p5.js really likes its target element to already be in the DOM, not just // floating around detached. So, before we call P5, we yield it, which puts // in the DOM. yield element; // This is ‘instance mode’ in p5 jargon: instead of relying on lots of // globals, we create a sketch that has its own copy of everything under p5. const instance = new p5c(sketch, element, true); // This is the tricky part: when you run P5(sketch, element), it starts a // loop that updates the drawing a bunch of times a second. If we were just // to call P5 repeatedly with different arguments, the loops would all keep // running, one on top of the other. So what we do is we use this cell // as a generator, and then when that generator is interrupted, like // when you update the code in the sketch() method, then we call instance.remove() // to clean it up. try { while (true) { yield element; } } finally { instance.remove(); } }3a:[] 31:{"id":"5f5111c3795ae50b","slug":"sm3809-a1","title":"SM3809_A1","thumbnail":"3c844a0a99c9295cc25f2d2b28834ea42d40c125d9926dcb7cc238c181865a69","access_level":"public","create_time":"$D2021-01-14T12:41:40.544Z","update_time":"$D2021-09-09T14:32:45.087Z","view_time":null,"first_public_time":"$D2021-01-14T12:43:18.845Z","has_unpublished_edits":null,"fork":false,"stars":0,"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":395,"publish_version":395,"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":[{"id":"c073e412ba77fecc","reply_to_id":null,"content":"note that you can simply import this code rather than copy paste (see the course homepage) - otherwise, excellent work","create_time":"$D2021-01-21T05:36:02.054Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"32869872eb6f2f82","login":"dhowe","name":"Daniel Howe","avatar_url":"https://avatars-next.observableusercontent.com/a5081aaa56ae9990aa27642040dc61de3ce8cea67f6f778a5b864e41111ba7a3","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SM3809_A1","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"html`\n

Activate

\nlearning from Vera Molnar, I decide to make a series with the method of
Control Variable (ie. add one feture at a time)
\n

1. 90° turning (put mouse on the canva to trigger animation and click to re-position the elements)

2. add more shapes with same basic elements and feature (put mouse on the canva to trigger animation and click to reposition the elements)

3. add scaling (put mouse on the canva to trigger animation and click to reposition the elements)

4. add color (put mouse on the canva to trigger animation and click to reposition the elements)

-------------------------------below is import and setup section-------------------------------

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"p5c = require(\"https://unpkg.com/p5@1.4.0/lib/p5.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"html`\n