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

SM3809_A2

Abstract & Emotion

Readings

Nowadays linking abstract animation/moving images/graphics with music is somehow kind of common and usual (it is hard to find abstract animation without music or sound, even those made with the analog film have special-composed music, like Len Lye's The GPO Film Unit). So, the fact that J.Engel rooting his idea of "art of movement" in choreography particularly interests me. Although in recent years there are some works(and concerts) (e.g this one and this one) that combine performance art with graphics like projection mapping, performance art and so called "visual art" are still very different from each other for many people (including artists). One reason is that for most of the performance art, movement is the only major element, but for visual artists and animators, shape and color are equally, or sometimes more, important as movement. Engel's emphasis on movement might be a big change in the animation field, but I don't think movement can take over the places of other elements.
Molnar's short article can be an interesting mirco-novel. It makes me think about the meme of the equation of Pixar's movie: "what if xx has(ve) feeling". It is very interesting to stare at an image and try to explore it as the adventure of a line/point/pixel.
The meta-artist theory of Kawano sounds very tricky to me. In my understanding, he gives the authorship of the final artwork to the "art computer", and the "authorship" of the "art computer" to the programmer. So that the programmer is the author of the author of the final artwork. To be honest, I don't like this Matryoshka-liked logic, it will make more sense if we just give the authorship to the computer completely or just don't do that at all.

Describe

Alive Painting by Akiko Nakayama (2014 - )

Live performance/Video recording of live performance/Photos

By exploring the fancy chemical reactions between paint, water and turpentine. The artist creates a new way of painting that doesn't require and is not limited by canvas or paper.

One of the craziest generative artworks I have seen so far in my life is the ice in a frozen lake. When the ices started to form, they push each other, creating beautiful patterns of rifts; the gas trapped inside the ice created little bubbles like little sprits from another world...

Now we are (somehow) too obsessed with code and computers that we forget that nature is the most powerful "machine". The beautiful graphics created by this work is fascinating, but the fact that nature has such complex rules which the artist uses to generate them is more amazing.

* Something else *

Although Takashi Ohashi's works are usually closely related to sound and music (so not very suitable here), but they (especially the ones combining fonts and graphics) are also cool (but incomplete) without sound.

`34:T36fe,p5(s => { class Triangles { constructor(v){ this.v = v; this.x1=v[0].x; this.y1=v[0].y; if (v[0].z) { this.z1=v[0].z; } this.x2=v[1].x; this.y2=v[1].y; if (v[1].z) { this.z2=v[1].z; } this.x3=v[2].x; this.y3=v[2].y; if (v[2].z) { this.z3=v[2].z; } 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(w){ s.push(); s.noFill(); if (w) { s.strokeWeight(w); } s.stroke(244); for (let i = 0; i < 3; i++) { let next = i == 2? 0 : i+1; if (s.dist(this.v[i].x, this.v[i].y, this.v[next].x, this.v[next].y) < 150) { s.line(this.v[i].x, this.v[i].y, this.v[next].x, this.v[next].y); } } 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; } } //above class modified from assignment 1 class Rock { constructor(x, z, sz) { this.x = x; this.z = z; this.y = -100; this.sp = 0; this.sz = sz; this.ini_a = s.random(360); let points = []; for (let i = 0; i < s.map(this.sz,20,70,5,13); i++) { let p = new p5c.Vector(s.random(sz),s.random(sz)); if (s.dist(0,0,p.x,p.y)<=sz) { points.push(p); } } this.dt = s.get_d_tris(points); this.underWater = false; } display() { s.push(); s.translate(this.x,this.y); s.rotate(this.ini_a + s.frameCount); this.dt.forEach(t => { t.display(); }); s.pop(); } move() { if (!this.underWater) { this.sp += 1; this.y += this.sp; } else { this.sp += 1/3; this.y += this.sp; } } } let focused = false; let started = false; let notes = []; let ambientNoise; let characterShuiPart1 = [ new p5c.Vector(690 - 250, 234), new p5c.Vector(740 - 250, 234), new p5c.Vector(780 - 250, 234), new p5c.Vector(820 - 250, 234), new p5c.Vector(847 - 250, 206), new p5c.Vector(877 - 250, 224), new p5c.Vector(896 - 250, 252), new p5c.Vector(877 - 250, 263), new p5c.Vector(867 - 250, 294), new p5c.Vector(846 - 250, 350), new p5c.Vector(824 - 250, 393), new p5c.Vector(788 - 250, 444), new p5c.Vector(742 - 250, 493), new p5c.Vector(680 - 250, 529), new p5c.Vector(708 - 250, 494), new p5c.Vector(741 - 250, 454), new p5c.Vector(775 - 250, 395), new p5c.Vector(797 - 250, 342), new p5c.Vector(811 - 250, 268), new p5c.Vector(823 - 250, 251), new p5c.Vector(783 - 250, 251), new p5c.Vector(743 - 250, 251), new p5c.Vector(696 - 250, 251), ]; let characterShuiPart2 = [ new p5c.Vector(906 - 250, 81), new p5c.Vector(979 - 250, 89), new p5c.Vector(960 - 250, 103), new p5c.Vector(960 - 250, 151), new p5c.Vector(960 - 250, 189), new p5c.Vector(960 - 250, 248), new p5c.Vector(960 - 250, 289), new p5c.Vector(960 - 250, 340), new p5c.Vector(960 - 250, 395), new p5c.Vector(960 - 250, 448), new p5c.Vector(960 - 250, 495), new p5c.Vector(948 - 250, 559), new p5c.Vector(886 - 250, 580), new p5c.Vector(863 - 250, 535), new p5c.Vector(813 - 250, 518), new p5c.Vector(865 - 250, 514), new p5c.Vector(905 - 250, 512), new p5c.Vector(906 - 250, 443), new p5c.Vector(906 - 250, 401), new p5c.Vector(906 - 250, 363), new p5c.Vector(906 - 250, 308), new p5c.Vector(906 - 250, 265), new p5c.Vector(906 - 250, 215), new p5c.Vector(906 - 250, 165), new p5c.Vector(906 - 250, 120), ]; let characterShuiPart3 = [ new p5c.Vector(1108 - 250, 174), new p5c.Vector(1143 - 250, 194), new p5c.Vector(1163 - 250, 220), new p5c.Vector(1113 - 250, 255), new p5c.Vector(1019 - 250, 317), new p5c.Vector(1052 - 250, 367), new p5c.Vector(1092 - 250, 405), new p5c.Vector(1142 - 250, 449), new p5c.Vector(1192 - 250, 481), new p5c.Vector(1156 - 250, 498), new p5c.Vector(1136 - 250, 522), new p5c.Vector(1080 - 250, 476), new p5c.Vector(1048 - 250, 427), new p5c.Vector(1007 - 250, 355), new p5c.Vector(987 - 250, 307), new p5c.Vector(970 - 250, 242), new p5c.Vector(966 - 250, 165), new p5c.Vector(985 - 250, 243), new p5c.Vector(1013 - 250, 300), new p5c.Vector(1053 - 250, 254), new p5c.Vector(1081 - 250, 214) ]; let font; let baseLines = []; let points = []; let noisep = [0,0,0,0,0,0,0,0,0,0]; let rocks = []; let splash = []; let firstRockTimer; let timer; let timerSet = false; let createRockCalled = false; s.preload = function () { //font : Triangles-regular by Liz Ketron on https://www.behance.net/gallery/21048815/Triangles-Typeface font = s.loadFont(fontU); for (let i = 0; i < 8; i++) { let note = new Howl({ src: [urls[i]], format: ['mp3'], onloaderror: function() { console.log('fail to load Note ' + (i + 1)); }, }); notes.push(note); } // ambience by Vilkas Sound ambientNoise = new Howl({ src: [ambientU], volume: 0.3, format: ['mp3'], loop: true, onloaderror: function() { console.log('fail to load ambient'); }, }); } s.setup = function () { s.createCanvas(960,720); s.frameRate(60); s.background(54); s.stroke(244); s.textFont(font); s.noiseSeed(s.random(1000)); s.angleMode(s.DEGREES); s.getBaseLines(); firstRockTimer = s.random(1000,3000); } s.draw = function () { if (started) { if (focused) { //main animation if (!ambientNoise.playing()) { ambientNoise.play(); } s.background(54); s.drawWaveAndRocks(); s.moveRocks(); if (!timerSet) { timer = s.millis(); timerSet = true; } if (s.millis() - timer > firstRockTimer && !createRockCalled) { s.createRock(); createRockCalled = true; } s.makeSplash(); s.removeRocks(); //end of main } else { ambientNoise.stop(); s.noLoop(); } } else { s.background(54); s.push(); s.noFill(); s.stroke(244); s.textSize(100); s.text('CLICK', 100,300); s.text('TO', 150,420); s.text('START', 100,540); s.pop(); let dTriPart1 = s.get_d_tris(characterShuiPart1); let dTriPart2 = s.get_d_tris(characterShuiPart2); let dTriPart3 = s.get_d_tris(characterShuiPart3); dTriPart1.forEach(t => { t.display(1.5); }); dTriPart2.forEach(t => { t.display(1.5); }); dTriPart3.forEach(t => { t.display(1.5); }); characterShuiPart1.forEach(v => { v.x += s.random(-1, 1); v.y += s.random(-1, 1); }); characterShuiPart2.forEach(v => { v.x += s.random(-1, 1); v.y += s.random(-1, 1); }); characterShuiPart3.forEach(v => { v.x += s.random(-1, 1); v.y += s.random(-1, 1); }); } } s.getBaseLines = function () { for (let i = 0; i < 10; i++) { let amp = s.map(i,0,9,6,90); let sum = amp/2; for (let j = 0; j < i; j++) { sum += baseLines[j].amp; } let y = 240 + sum; baseLines.push({y:y,amp:amp}); } } s.drawWaveAndRocks = function () { if (points.length == 0) { baseLines.forEach((o,i) => { let pNo = s.round(s.map(i,0,9,96,60)) + s.round(s.random(10)); if (pNo % 2 != 0) { pNo ++; } let gap = s.width / (pNo + 1 + 1) + 1; let p_s = []; for (let j = 0; j < pNo ; j++) { let x = s.random(-10,-5) + j * gap; let y = o.y; p_s.push(new p5c.Vector(x, y)); } points.push(p_s); }); } points.forEach((a,i) => { a.forEach( p => { p.y = baseLines[i].y + baseLines[i].amp * (0.5 - s.noise((p.x)/100 + i * width, noisep[i])); }); }); noisep.forEach((p,i) => { noisep[i] += s.random(0.005,0.03); }); s.push(); points.forEach((a, ind) => { rocks.forEach( r => { if (r.z == ind) { r.display(); } }); a.forEach((p,i) => { if (i != a.length - 1) { s.stroke(244); s.noFill(); s.line(a[i].x, a[i].y, a[i+1].x, a[i+1].y); s.noStroke(); s.fill(100,100); s.quad(a[i].x, a[i].y, a[i+1].x, a[i+1].y, a[i+1].x, s.height + 1, a[i].x, s.height + 1); } }); }); s.pop(); } s.createRock = function () { if (focused) { let z = s.floor(s.random(10)); let newRock = new Rock(s.random(s.width), z, s.map(z,0,9,s.random(20,30),s.random(50,70))); rocks.push(newRock); let lv = s.noise(s.frameCount); let gap = 0.005; while (s.noise(s.frameCount) != lv) { gap += 0.001; } setTimeout(s.createRock, gap * 1000000); } } s.moveRocks = function () { rocks.forEach(r => { r.move(); if ((baseLines[r.z].y - r.y) < baseLines[r.z].amp*1.5 && !r.underWater) { let waveY = baseLines[r.z].y + baseLines[r.z].amp * (0.5 - s.noise((r.x)/100 + r.z * width, noisep[r.z])); if (r.y > waveY) { s.pickNoteAndPlay(); r.sp *= 0.1; r.underWater = true; splash.push({x:r.x,y:r.y,t:s.frameRate() * 2}); } } }); } s.makeSplash = function () { splash.forEach((o,i) => { let amplifier = s.map(o.t,s.frameRate()*2,0,1.5,1); points.forEach((a,i) => { a.forEach( p => { if (s.abs(o.x -p.x) < 300 && s.abs(o.y - p.y) < 90) { let dist = s.sqrt(s.sq(s.abs(o.x -p.x))+ s.sq(s.abs(o.y - p.y)/3)); let distAmplifier = s.map(dist,0,s.sqrt(1800),2,1); p.y += distAmplifier*amplifier*baseLines[i].amp*s.sin((o.x - p.x) * 3 + s.frameCount); } }); }); o.t --; if (o.t < 0) { splash.splice(i,1); } }); } s.removeRocks = function () { rocks.forEach((r,i) => { if (r.y > s.height + 100) { rocks.splice(i,1); } }); } s.pickNoteAndPlay = function () { let ind = s.floor(s.random(8)); notes[ind].play(); } s.mouseClicked = function () { if (s.mouseX < s.width && s.mouseX > 0 && s.mouseY < s.height && s.mouseY > 0) { if (!focused) { timer = 0; timerSet = false; createRockCalled = false; } focused = !focused; if (! started) { started = true; } s.loop(); } } //below modified from assignment 1 //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(s.width/2-s.sqrt(3)*r,s.height/2-r), new p5c.Vector(s.width/2+s.sqrt(3)*r,s.height/2-r), new p5c.Vector(s.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 { //reference to Tony R at https://www.openprocessing.org/sketch/566877 // and quadroctet at https://www.openprocessing.org/sketch/192912 class Particle{ constructor(pos){ this.pos = pos; this.life = 0; } display(r,alpha) { s.push(); if (alpha) { s.fill(0,alpha); } else { s.fill(0); } s.noStroke(); s.ellipse(this.pos.x, this.pos.y, r, r); //console.log(this.pos.x, this.pos.y, r) s.pop(); this.life ++; } move(mode){ if (mode == 'line'){ this.pos.y += s.random(3); this.pos.x += s.random(-0.5, 0.5); } else if (mode == 'noise') { let angle = s.noise(this.pos.x/200, this.pos.y/200) * 360; let addX = s.cos(angle) * 1.1; let addY = s.sin(angle) * 1.1; this.pos.x += addX + s.random(-0.5,0.5); this.pos.y += addY + s.random(-0.5,0.5); } } } let focused = false; let bgImg; let vertical = []; let noisy = []; let called = false; s.setup = function () { s.frameRate(60); s.createCanvas(960,720); s.angleMode(s.DEGREES); bgImg = s.makeBgImg(); s.background(bgImg); } s.draw = function () { if (focused) { if (!called) { s.makeVertical(); s.makeNoisy(); called = true; } s.tint(255, 5); s.image(bgImg,0,0); s.noTint(); s.drawVertical(); s.drawNoisy(); } else { s.noLoop(); } } s.makeVertical = function () { if (focused) { let p = new Particle(new p5c.Vector(s.random(s.width), -10)); let totalL = s.random(s.height*0.8, s.height*2); vertical.push({particle:p, length:totalL}); setTimeout(s.makeVertical, s.random(3000,5000)); } } s.drawVertical = function () { vertical.forEach((o,i) => { let r = s.map(o.particle.pos.y, -10, o.length, 20, 1)+(0.5 - s.noise (o.particle.pos.x/200, o.particle.pos.y/200)) o.particle.display(r); o.particle.move('line'); if (o.particle.pos.y > s.height + 50 || o.particle.pos.y > o.length + 50) { vertical.splice(i,1); } }) } s.makeNoisy = function () { if (focused) { let p = new Particle(new p5c.Vector(s.random(s.width -50,s.width + 50), s.random(s.height/5,4*s.height/5))); let maxLife = s.random(60*10, 60*15); //count in frame noisy.push({particle:p,maxLife:maxLife}); setTimeout(s.makeNoisy, s.random(10000,12000)); } } s.drawNoisy = function () { noisy.forEach((o,i) => { let r; if (o.particle.life < o.maxLife / 2) { r = s.noise(i*0.02,s.frameCount/1000)*s.map(o.particle.life,0,o.maxLife /2 ,10,40); } else { r = s.noise(i*0.02,s.frameCount/1000)*s.map(o.particle.life,o.maxLife / 2,o.maxLife,40,2); } let alpha = 150*s.noise(s.frameCount * 0.01)+105; o.particle.display(r,alpha); o.particle.move('noise'); if (o.particle.life > o.maxLife) { noisy.splice(i,1); } }); } s.makeBgImg = function () { let img = s.createImage(s.width,s.height); img.loadPixels(); for (let i = 0; i < img.width; i++) { for (let j = 0; j < img.height; j++) { img.set(i, j, s.map(s.noise(i*0.005,j*0.007),0,1,235,255)); } } img.updatePixels(); return img; } s.mouseClicked = function () { if (s.mouseX < s.width && s.mouseX > 0 && s.mouseY < s.height && s.mouseY > 0) { if (!focused) { called = false; } focused = !focused; s.loop(); } } })36:[{"id":"cde8a4e3d70108c21553364565d4265dd0ba749c417414bfdb6d9623ee071c25617b4fe081b77af837d8a633d16f3b39abc056244f5b42eafebfba364f2ece51","href":"https://static.observableusercontent.com/files/cde8a4e3d70108c21553364565d4265dd0ba749c417414bfdb6d9623ee071c25617b4fe081b77af837d8a633d16f3b39abc056244f5b42eafebfba364f2ece51","name":"Triangles-Regular.otf","type":"font/otf","lastModified":1611739467614.426,"size":15372},{"id":"e9a88899d4fcce0c1b528507cdba865a86c8e09bb9a51578130d6fb225bf7c0052305b71432fffb7fcb1a39e4c95a5524981c9800c228d5e70ab513d822939fa","href":"https://static.observableusercontent.com/files/e9a88899d4fcce0c1b528507cdba865a86c8e09bb9a51578130d6fb225bf7c0052305b71432fffb7fcb1a39e4c95a5524981c9800c228d5e70ab513d822939fa","name":"noise@1.mp3","type":"audio/mpeg","lastModified":1611762634647.241,"size":5118008},{"id":"6dfeaa77b473e77d3143995bf0d93690ba1fb05e58a74d86a22f5b63a96709fecb29a52b20ba6772ee70a2e185ffca6082247646e38886ce6ce2f26750bb9aed","href":"https://static.observableusercontent.com/files/6dfeaa77b473e77d3143995bf0d93690ba1fb05e58a74d86a22f5b63a96709fecb29a52b20ba6772ee70a2e185ffca6082247646e38886ce6ce2f26750bb9aed","name":"Note5.mp3","type":"audio/mpeg","lastModified":1611718123618.225,"size":17247},{"id":"ebe350067074424c2f4eb7dc511f28ef5cfc50e798e011cf5e305fe8ab07c522afbde6f96547a3dbb7ba18946e927157c1958409e8dee4b6a74e162938233998","href":"https://static.observableusercontent.com/files/ebe350067074424c2f4eb7dc511f28ef5cfc50e798e011cf5e305fe8ab07c522afbde6f96547a3dbb7ba18946e927157c1958409e8dee4b6a74e162938233998","name":"Note8.mp3","type":"audio/mpeg","lastModified":1611718123618.855,"size":16308},{"id":"d46c145c405960495b2576c5ef337838da7a46732147c0d88ca0dd0eeb71d178afe38a7e5282947b9c089208f17e7cb14857e2108f40d3e7146c69c81dd86e07","href":"https://static.observableusercontent.com/files/d46c145c405960495b2576c5ef337838da7a46732147c0d88ca0dd0eeb71d178afe38a7e5282947b9c089208f17e7cb14857e2108f40d3e7146c69c81dd86e07","name":"Note6.mp3","type":"audio/mpeg","lastModified":1611718123676.53,"size":16308},{"id":"10fb68f5ef08fb89552fcfcfde02f0cd27c1d726579356e062ffbd9ac7c2b55d7f7cbf70db3a74d5f7cff44aad62a82054685b463805a305d9fd1b1ef591c1fb","href":"https://static.observableusercontent.com/files/10fb68f5ef08fb89552fcfcfde02f0cd27c1d726579356e062ffbd9ac7c2b55d7f7cbf70db3a74d5f7cff44aad62a82054685b463805a305d9fd1b1ef591c1fb","name":"Note4.mp3","type":"audio/mpeg","lastModified":1611718123641.93,"size":18186},{"id":"27a0188b8654738e81b36da4a98c1e2f0f9fbba8420667a0aa54fdba5888d69f76db960e2ca570f36583406e85589581e510795bfb36f7f2267295aeb2a766b5","href":"https://static.observableusercontent.com/files/27a0188b8654738e81b36da4a98c1e2f0f9fbba8420667a0aa54fdba5888d69f76db960e2ca570f36583406e85589581e510795bfb36f7f2267295aeb2a766b5","name":"Note3.mp3","type":"audio/mpeg","lastModified":1611718123657.186,"size":21316},{"id":"dfcc4d4693856b81311f758eb0813191ef3dbb567d550827875b88e26ece165a330da8177d706bfd9d3c7d6e8b3ebca8f63fa19bfb134ebf5b8c0b797bb9aced","href":"https://static.observableusercontent.com/files/dfcc4d4693856b81311f758eb0813191ef3dbb567d550827875b88e26ece165a330da8177d706bfd9d3c7d6e8b3ebca8f63fa19bfb134ebf5b8c0b797bb9aced","name":"Note2.mp3","type":"audio/mpeg","lastModified":1611718123722.002,"size":21316},{"id":"7c88e67f3e04cc3903ccea08520845d92527523d586f367cb89e587cd97409d599a532a4d6c6c8764ab2c2b740038a234d9ab98ba16d584ba6290e4dc112cb51","href":"https://static.observableusercontent.com/files/7c88e67f3e04cc3903ccea08520845d92527523d586f367cb89e587cd97409d599a532a4d6c6c8764ab2c2b740038a234d9ab98ba16d584ba6290e4dc112cb51","name":"Note1.mp3","type":"audio/mpeg","lastModified":1611718123656.537,"size":26011},{"id":"2ba13fee434ba74e8573ffec7865bbae774cc68667db5ebcb8e64c4e68c9bd509b41e0f2969d64cf699d73d9e9c6a8ba6e084e8cff383719e8e6748f35afcb3d","href":"https://static.observableusercontent.com/files/2ba13fee434ba74e8573ffec7865bbae774cc68667db5ebcb8e64c4e68c9bd509b41e0f2969d64cf699d73d9e9c6a8ba6e084e8cff383719e8e6748f35afcb3d","name":"Note7.mp3","type":"audio/mpeg","lastModified":1611718123673.025,"size":19125}] 31:{"id":"47e7d3b05321acfb","slug":"sm3809-a2","title":"SM3809_A2","thumbnail":"93ed89b7fa8d8de7f51c86e700a7cc65b158deb6975a41ba1a434447d5e1f7d6","access_level":"public","create_time":"$D2021-01-21T12:26:26.024Z","update_time":"$D2021-01-28T04:39:35.534Z","view_time":null,"first_public_time":"$D2021-01-21T12:26:33.091Z","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":482,"publish_version":482,"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":"SM3809_A2","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"html`\n

Create

水 | Water

\nclick to start, click again to pause (recommended before viewing others, just for managing resource.)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"html`\n

墨 | Ink

\nclick to start, click again to pause (recommended before viewing others, just for managing resource.) (This one might looks a bit different on different browsers)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"html`\n

\n

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

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"import {p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"import {p5c} from '@real-john-cheung/sm3809-a1'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"//reference to https://observablehq.com/@jobleonard/opening-up\n//making p5 sound works here is too complex\nhowlerc = require('howler@2.2.1/dist/howler.js');\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Howl = howlerc.Howl;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"Howler = howlerc.Howler","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`\n