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

SM3809_A4

Self-portrait with Code

⚠️⚠️It is recommended to use the latest version of Firefox for this page. One of the sketches on this page has lots of things to load, so this page might take a while to be ready (up to a few minutes), during the loading time, notification of a page is slowing down the browser might pop up.

View

Emoter by Tim Hawkinson: kinetic collage of the artist's face, this makes me think about Daito Manabe's Electric Stimulation of the Face. For me, the link between these two works is the "kinetic body": since Descartes, the idea of the human body as a kind of machine has been discussed for a long time. I think both works mentioned above are connected to the topic, and it is interesting to see that after Hawkinson's work (2002) showed us that our expression/representation can be mechanical, Manabe's work (2008) showed us that our face can be mechanically controlled by external forces too.
Reface by Golan Levin and Zachary Lieberman: I love the idea of swapping faces! Actually I had a similar (not executed)idea for a project before. It was done in 2007, when "deep fake" is an unknown phrase, but the result looks quite good. With AI and machine learning today, if the work can have new functions like twisting the race/sex features of the faces it will be more interesting and corresponding to the social issues today better.
Stranger Vision by Heather Dewey-Hagborg: I actually ran across this work last semester when I was doing research on biopower. This work might be one of the most famous bioart that related to biopower(not exactly the biopower that Foucault talks about, but more modern one proposed by Paul Rabinow and Nikolas Rose) in the past ten years. This work really shows how many trails we left behind as, and reminds us that our own DNA can be (easily) use against ourselves. Dewey-Hagborg is more like an activist, somehow. In another work of her, Invisible, she provides us a way to protect ourselves, from governments, companies, other people, or whatever... and, it is in a way, very similar to AdNauseam.
Memories of Passersby I by Mario Klingemann: well I think it is similar to this website, which I actually used in the not executed idea I mentioned above. These generated images can be very creepy sometimes, but the creepiness is, somehow, also giving people a sense of safety, because it means that the day when AI dominate the world is far away.
Advertising Positions by Daniel Howe: there is an "old saying": you are what you eat, but in this work, you are what you look at. The word used in marketing in Chinese: "用戶畫像" (literally means "drawing users' faces") match this work well. Nowadays surfing (do people still use this word?) online is like a detective game, with the arms racing of Ad-block addons and more advanced data collecting algorithms. Another interesting point is, this work shows how the robots think you look like, it might actually far away from what you think you are, and this might because the robots are stupid, or because you are not smart enough to figure out who you have become.
Facial Weaponization Suite by Zach Blas: another work that related to biopower and surveillance. Not gonna lie, I have been wanting a mask that makes you invisible in CCTV (like Nøkk in the game Rainbow Six Siege) for a long time. Obviously this artwork is more like a slogan, in this sense, the participation performance A Disappeared Movement(the page is in Chinese only, to briefly introduce the project, the artist spent 6 months to design a rote that allows you to walk down a 1km long street without being caught by any security camera) by Chinese artist Deng Yufeng (鄧玉峰)might be more practical

Locate

Transient Self-Portrait by Maria Mencia

Interactive Software, 2013

"Thus, the project is a response to some of the concepts that emerge from these sonnets: ephemerality of life, transient entities, fragility, which are also relevant to our age and the electronic world we inhabit. It questions the experience of reading; the use of digital grammars (interacting and engaging with the work); while exploring the concepts evoked in the sonnets. "

Based on images captured on webcam and the sonnets from Spanish literature, the programme renders portraits of the viewers, and create an audio-visual experience.

How it was made
As I understand, technically the portrait part of the work combined pixel manipulation and ASCII art(kind of) in 3D space, and all can be done easily in Processing (I have done something similar...). I think the code to recreate it in Processing can be like:


//first load the image from webcame
if (camera.available()) {
    camera.read();
}
//then get the pixels and render text
PImage img = camera;
img.loadPixels();
for (int y=0; y<img.height; y+=size) {
  for (int x=0; x<img.width; x+=size) {
    int loc = x+(y)*img.width;
    loc = constrain(loc, 0, img.pixels.length-1);
    color c = img.pixels[loc];
    float r = c >> 16 & 0xFF;
    float g = c >> 8 & 0xFF;
    float b = c & 0xFF;
    float grey_ratio = (r*0.299+g*0.587+b*0.114)/255;
    // human eye preception equation
    float z = map((r*0.299+g*0.587+b*0.114), 0, 255, 0, img.width/5);
    // z for the 3d mapping
    
    fill(rgb);
    text(word,x,y,z);
  }
}

Below is something I have done that is similar to this work

Create

Decomposed | 腐化

I find them somehow describe my life quite accurately

Click to start, click again to pause. You can also use the little tool below to load your own photo into this work. Some unexpected issues might occur on Safari, using Firefox or Chrome is recommended

`34:T12df,p5(s => { let started = false; let paused = false; let url = uploadedImg.src; let loaded = false; let theImage; let corpedImg; let theArray; let lenArray = []; let sound; // AmbientTrack by Y8MD https://dova-s.jp/bgm/play8903.html s.preload = function () { theImage = s.loadImage(url); sound = new Howl({ src: [amb], volume: 0.5, format: ['mp3'], loop: true, onloaderror: function() { console.log('fail to load ambient'); }, }); } s.setup = function () { s.createCanvas(800,600); if (s.width/s.height <= theImage.width/theImage.height) { corpedImg = s.createImage(s.width,s.height); corpedImg.copy(theImage,0,0,theImage.width,theImage.width*s.height/s.width,0,0,s.width,s.height); } else { corpedImg = s.createImage(s.width,s.height); corpedImg.copy(theImage,0,0,theImage.height*s.width/s.height,theImage.height,0,0,s.width,s.height); } s.background(0); for (let i = 0; i < 10000; i++) { lenArray.push([0.0,0]); } } s.draw = function () { if (!started) { //not started s.background(corpedImg); s.push(); s.textSize(100); s.noStroke(); s.textAlign(s.CENTER,s.CENTER); s.fill(0); s.text('CLICK', s.width/2, s.height/5); s.fill(255); s.text('CLICK', s.width/2+5, s.height/5); s.fill(0); s.text('TO', s.width/2, 2*s.height/5); s.fill(255); s.text('TO', s.width/2+5, 2*s.height/5); s.fill(0); s.text('BURY', s.width/2, 3*s.height/5); s.fill(255); s.text('BURY', s.width/2+5, 3*s.height/5); s.fill(0); s.text('ME', s.width/2, 4*s.height/5); s.fill(255); s.text('ME', s.width/2+5, 4*s.height/5); s.pop(); s.noLoop(); } else { if (!paused){ //main s.background(0,0.1); if (!sound.playing()) { sound.play(); } for (let i = 0; i < theArray.length; i++) { s.push(); s.stroke(theArray[i][3], theArray[i][4], theArray[i][5]); let x = theArray[i][0]; let y = theArray[i][1]; let l = lenArray[i][0]; s.line(x,y-l/2,x,y+l/2); s.pop(); theArray[i][1] += s.random([-1,1])* 0.3*(1-s.noise((s.frameCount*0.02)+80,x,y)); theArray[i][2] += 0.8*(1-s.noise((s.frameCount*0.02),x,y)); theArray[i][2] = s.constrain(theArray[i][2],0,100); if (lenArray[i][1] == 0) { lenArray[i][0] += theArray[i][2]/20 * s.random(0.8,1.2); } else { lenArray[i][0] = theArray[i][2]; } if (s.abs(theArray[i][2]-lenArray[i][0]) < 2) { lenArray[i][1] = 1; } } } else { sound.pause(); s.noLoop(); } } } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY img.width || yy < 0 || yy > img.height) continue; let cc = img.get(xx,yy); colorDiff += s.abs(r-s.red(cc))+s.abs(g-s.green(cc))+s.abs(b-s.blue(cc)); count++; } let len = s.map(colorDiff/count, 0, 3, 100, 0); //the more different color around, the shorter the lines result.push([xInCanvas, yInCanvas, len, r, g, b]); //console.log(i) } return result; } })35:T1e4e,p5(s => { //reference for SSAPI: https://codepen.io/_tianxia/pen/WNNPVob //using RiTa@2.3 by Daniel Howe let started = false; let paused = false; //rg let json; let rg; //imgs and font and sounds etc. let imgs= []; //let font; let notof; let avaLang; // [US,HK,CN,TW] let keySound; let toSwitch = [];//[CAN,MAN,ENG] let grids = []; // [[xId,yId,z,br] ... ] let col = 80, row = 60; let loc = []; // [[char, xpos, ypos, targetXpos, targetYpos, z, br, alpha]...] //mode and lang let lang; //for display let currentImgid = 0; let text = []; let toRead; let toDisplay = []; // [[char, senteceNo, charNo]...] //update text and read let textUpdated = false; let readFinished = false; let readStarted = false; let speaker; s.preload = function() { json = s.loadJSON(grammar); imgs.push(s.loadImage(sf2)); imgs.push(s.loadImage(sf1)); imgs.push(s.loadImage(sf4)); imgs.push(s.loadImage(sf5)); //font = s.loadFont(orad,() => {console.log("orad font loaded");}, () => {console.warn("fail to load orad font")}); //font by Uchida Akira //cool but take too much source to render :( notof = s.loadFont(noto); // noto font by google keySound = new Howl({ src: [keys], volume: 0.5, format: ['mp3'], loop: false, onloaderror: function() { console.log('fail to load keysound'); }, }); } s.setup = function () { s.createCanvas(800,600,s.WEBGL); s.background(0); //s.textFont(font); s.textFont(notof); avaLang = s.getAvaLang(); avaLang.forEach(a => { if (a[0] == "US" && !toSwitch.includes("ENG")) { toSwitch.push("ENG"); } else if (a[0] == "HK" && !toSwitch.includes("CAN")){ toSwitch.push("CAN"); } else if ((a[0] == "TW" || a[0] == "CN") && !toSwitch.includes("MAN")) { toSwitch.push("MAN"); } }) lang = toSwitch[0]; rg = new RiTa.RiGrammar(json); imgs.forEach(i => { grids.push(s.pixelizeAndGetColor(i, col, row)); }); s.frameRate(4); } s.draw = function () { if (!started){ //not started //init screen s.push(); s.textSize(100); s.textAlign(s.CENTER, s.CENTER); s.translate(-s.width/2,-s.height/2); s.text("ManCallJohn",s.width/2,s.height/3); s.text("張姓男子",s.width/2,s.height*2/3); s.pop(); s.noLoop(); } else { if (!paused){ //main s.background(0); if (!textUpdated){ s.updateText(); textUpdated = true; } else if (loc.length > 0) { s.push(); s.translate(-(s.width/2),-(s.height/2)); s.noStroke(); s.textAlign(s.CENTER, s.CENTER); s.textSize(10); loc.forEach(a => { //console.log(a[6],a[7]); s.fill(a[6],a[7]); s.text(a[0],a[1],a[2],a[5]); if (readStarted) { //animation if (a[3]>=0&&a[4]>=0){ a[1] = s.lerp(a[1],a[3],s.map(s.abs(a[1]-a[3]),s.width,1,0.1,0.2)); a[2] = s.lerp(a[2],a[4],s.map(s.abs(a[2]-a[4]),s.width,1,0.1,0.2)); a[5] = s.lerp(a[5],30,0.1); a[6] = s.lerp(a[6],255,0.1); } else { a[7] -= lang == "ENG" ? 3 : 4; } } }); s.pop(); if (readFinished) { //changeLang lang = (toSwitch[toSwitch.indexOf(lang)+1] === undefined) ? toSwitch[0] : toSwitch[toSwitch.indexOf(lang)+1]; //changeImg currentImgid = (currentImgid == grids.length - 1) ? 0 : currentImgid + 1; //recalledupdateText textUpdated = false; } } //main } else { window.speechSynthesis.pause(); s.noLoop(); } } } s.updateText = function () { text.length = 0; toRead = undefined; toDisplay.length = 0; loc.length = 0; readStarted = false; readFinished = false; let language,splang; if (lang == "ENG"){ language = "english"; splang = "US"; } else if (lang == "CAN" || lang == "MAN") { language = "chinese"; if (lang == "CAN") { splang = "HK"; } else if (avaLang.includes("TW")){ splang = "TW" } else { splang = "CN" } } for (let i = 0; i < 10; i++) { let res = rg.expand(language)+" "; while (text.includes(res)) { res = rg.expand(language)+" "; } let resA = res.split(''); resA.forEach((c,idx) => { toDisplay.push([c,i,idx]); }); text.push(res); } toRead = text.join(language == "english" ? "," : "，"); while (toDisplay.length < col * row){ let fidx = s.floor(s.random(text.length)); toDisplay.push([text[fidx][s.floor(s.random(text[fidx].length))], -1, -1]); } while (toDisplay.length > col * row) { toDisplay.pop(); } let rtoDisplay = RiTa.randomOrdering(toDisplay); rtoDisplay.forEach((a,idx) => { let xs = s.width / col; let ys = s.height / row; let xx = xs/2 + (idx%col)*xs; let yy = ys/2 + (s.floor(idx/col))*ys; let tx,ty; if (language == "english"){ tx = xs/2 + a[2]*xs; ty = ys/2 + a[1]*ys; } else { tx = xs/2 + a[1]*xs; ty = ys/2 + a[2]*ys; } loc.push([a[0],xx,yy,tx,ty,grids[currentImgid][idx][2],grids[currentImgid][idx][3],255]); }); //console.log(loc); keySound.play(); setTimeout(() => { let v; avaLang.forEach(a => { if (a[0] == splang) { v = window.speechSynthesis.getVoices()[a[1]]; } }) speaker = new SpeechSynthesisUtterance(); speaker.text = toRead; speaker.voice = v; speaker.lang = v.lang; speaker.onend = function(e) { setTimeout(() => {readFinished = true;}, 2000); }; //console.log(speaker); window.speechSynthesis.speak(speaker); readStarted = true; }, 3000); } s.mouseClicked = function () { if (!(s.mouseX>0&&s.mouseX0&&s.mouseY { if (v.lang == "en-US" && !ava.includes("US")) { ava.push(["US",i]); } if (v.lang == "zh-CN" && !ava.includes("CN")){ ava.push(["CN",i]); } if (v.lang == "zh-TW" && !ava.includes("TW")){ ava.push(["TW",i]); } if (v.lang == "zh-HK" && !ava.includes("HK")) { ava.push(["HK",i]); } }); //console.log(ava); return ava; } })36:T4bc,html`

Present

Going to present Raven Kwok (郭鋭文)

Some other names that are interesting too

Ryoichi Kurokawa: Born in Japan, now lives in Berlin, his works mainly contain installations, digital prints, and films, mixing recorded and generated images and sounds to make audio-visual experiences. Some of my favorite works from him include Node 5:5, Syn_mode and 34º55’11”S 138º35’53”E
Ryoji Ikeda: sound and light installations, generated music etc.
Shu Lea Cheang (鄭淑麗): Artist and director from Taiwan, she is famous for her works on the topics of sexuality/gender issues and feminism. Her web-based work Brandon is very powerful and I highly recommend it to all of you.

`37:[{"id":"cdf12ee868a253807b400b55240700cb9799bfe41f5c6fba8f32e81a3a9d206202514320a90a93b30c17bf29e22b0928f6b06f46825c769391de8479f0891930","href":"https://static.observableusercontent.com/files/cdf12ee868a253807b400b55240700cb9799bfe41f5c6fba8f32e81a3a9d206202514320a90a93b30c17bf29e22b0928f6b06f46825c769391de8479f0891930","name":"sf2@1.jpg","type":"image/jpeg","lastModified":1613452666665.684,"size":238372},{"id":"e1c22764df4792f7a1b3cf538ea49bb62c8105c2b19e969ac1c84b7b1b4b6310f9d3eb9fd383066233dc0cd8417f27fb883bbfd614440071f2e939207bc6e238","href":"https://static.observableusercontent.com/files/e1c22764df4792f7a1b3cf538ea49bb62c8105c2b19e969ac1c84b7b1b4b6310f9d3eb9fd383066233dc0cd8417f27fb883bbfd614440071f2e939207bc6e238","name":"sf1@1.jpg","type":"image/jpeg","lastModified":1613452666715.478,"size":274220},{"id":"04941e8192b92be4ffb9b7a58490bc1ff79686832149486caf96ea175c55c1797ee37b390380876c5629baf9ae5965fe2df32afa4ad589f3bf10ec7b4a66b925","href":"https://static.observableusercontent.com/files/04941e8192b92be4ffb9b7a58490bc1ff79686832149486caf96ea175c55c1797ee37b390380876c5629baf9ae5965fe2df32afa4ad589f3bf10ec7b4a66b925","name":"amb.mp3","type":"audio/mpeg","lastModified":1613494239404.178,"size":3464468},{"id":"fd6ea09e6b3e7eb1e1891e9ebcbe6b06cb61a66e963e037ed71413e3d63e7eaa49090c8a5014c62520dbdd494084891a95167d7d831decdc7c4b159c7f41664e","href":"https://static.observableusercontent.com/files/fd6ea09e6b3e7eb1e1891e9ebcbe6b06cb61a66e963e037ed71413e3d63e7eaa49090c8a5014c62520dbdd494084891a95167d7d831decdc7c4b159c7f41664e","name":"OradanoGSRR.ttf","type":"font/ttf","lastModified":1613544385181.239,"size":12443532},{"id":"1145dee36a7e0985c67a865d9767b63919aa631dbde5c7149cb2d446f26d65c62e278cf357ae73aa852cf919b1ffcc30b7e550a0c7898009d37a5aa3f3519e58","href":"https://static.observableusercontent.com/files/1145dee36a7e0985c67a865d9767b63919aa631dbde5c7149cb2d446f26d65c62e278cf357ae73aa852cf919b1ffcc30b7e550a0c7898009d37a5aa3f3519e58","name":"JohnsHead20k.obj","type":"application/octet-stream","lastModified":1613552570040.735,"size":3738717},{"id":"11c223fab92d076adbd9a989d7cb84e891fe6bb261e27cdf9509a60f7bc5a758a5ad98a764ba4a8e5743a6d42785700743efb09a1f4feeea35613b7e79145b84","href":"https://static.observableusercontent.com/files/11c223fab92d076adbd9a989d7cb84e891fe6bb261e27cdf9509a60f7bc5a758a5ad98a764ba4a8e5743a6d42785700743efb09a1f4feeea35613b7e79145b84","name":"NotoSansTC-Medium.otf","type":"font/otf","lastModified":1613551758417.199,"size":5787960},{"id":"027587308fe4279d7cadf4093d7d696b1634ff79ea9bffdc9925a75f83465d4af46cce34b05e499e2b16ce1cb557aea3c3bd07c0dfc79448e5b50591ecc023dc","href":"https://static.observableusercontent.com/files/027587308fe4279d7cadf4093d7d696b1634ff79ea9bffdc9925a75f83465d4af46cce34b05e499e2b16ce1cb557aea3c3bd07c0dfc79448e5b50591ecc023dc","name":"3.jpg","type":"image/jpeg","lastModified":1613575836502.315,"size":261011},{"id":"a6f3dc82d287bff3008b4c8648005944f81f5aa5af00f2d23fd1acd94569210c8478dd143be48b466142fe6cf09e8b762dc5482f375958ad5a0feefd1536f17c","href":"https://static.observableusercontent.com/files/a6f3dc82d287bff3008b4c8648005944f81f5aa5af00f2d23fd1acd94569210c8478dd143be48b466142fe6cf09e8b762dc5482f375958ad5a0feefd1536f17c","name":"key.mp3","type":"audio/mpeg","lastModified":1613576357342.579,"size":6918},{"id":"53b70c42fa1453c168668be2a14b156ed233606e168905af58429c5592aeaf1a3dbbde4b642613484a507b0d10a87bdfc09b1403c2efef6e1a52bf89b65c9817","href":"https://static.observableusercontent.com/files/53b70c42fa1453c168668be2a14b156ed233606e168905af58429c5592aeaf1a3dbbde4b642613484a507b0d10a87bdfc09b1403c2efef6e1a52bf89b65c9817","name":"1-3.jpg","type":"image/jpeg","lastModified":1613617431193.372,"size":338143},{"id":"8a7be93de783534a4be33c3baa8c5e214ec69c93eca4f08b86b6e1931bbac03ff1c47e927cd8df02547678e9d06efd87a43f1bf9ba5c5eecec7221ff2577c29a","href":"https://static.observableusercontent.com/files/8a7be93de783534a4be33c3baa8c5e214ec69c93eca4f08b86b6e1931bbac03ff1c47e927cd8df02547678e9d06efd87a43f1bf9ba5c5eecec7221ff2577c29a","name":"2-3.jpg","type":"image/jpeg","lastModified":1613617417901.101,"size":337328},{"id":"5377333461e517362c7ae50eeed50b50ce0d1eac05a11282b2d8fe0873b345e4b3dd289fec1801da3f14bf776a09a0240c58f667787de4edf67f14a83f665632","href":"https://static.observableusercontent.com/files/5377333461e517362c7ae50eeed50b50ce0d1eac05a11282b2d8fe0873b345e4b3dd289fec1801da3f14bf776a09a0240c58f667787de4edf67f14a83f665632","name":"g@5.json","type":"application/json","lastModified":1613620049006.553,"size":5707}] 31:{"id":"09183752158e126c","slug":"sm3809_a4","title":"SM3809_A4","thumbnail":null,"access_level":"public","create_time":"$D2021-02-10T11:06:53.524Z","update_time":"$D2021-02-18T04:14:52.442Z","view_time":null,"first_public_time":"$D2021-02-10T16:17:32.155Z","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":531,"publish_version":531,"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":"af230c95ac39ecdf","reply_to_id":null,"content":"You probably know this one: https://cvdazzle.com/","create_time":"$D2021-02-20T09:08:19.582Z","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}},{"id":"faf3f0999c1ab2a2","reply_to_id":"af230c95ac39ecdf","content":"it is a pity that I didn't know it before😂, it is a great reference","create_time":"$D2021-02-20T14:36:39.351Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"e8e99acdbe3aebfb","login":"real-john-cheung","name":"John C","avatar_url":"https://avatars-next.observableusercontent.com/1d9ef6121a0bbd1a75fab479f9891fe1d78cc65f76c394585ae1a7dad0d3abf6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SM3809_A4","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof uploadedImg = imageInput({\n crossOrigin: \"anonymous\",\n initialUrl: sf1\n})\n//reference: https://observablehq.com/@mbostock/file-input","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"html`\n

Man Called John | 張姓男子

\nWho are you? How about try to list 10 fun/boring facts about your self
\nClick to start (might take a few seconds to initialize), click again to pause. A (clumsy) imitation of Mencia's work. It uses the Speech Synthesis API, so make sure you are using new versions of Safari/Chrome/Firefox. It will try to detect what language packages the browser has, so if you are interested, please install packages for Chinese (zh-CN,zh-HK,zh-TW). If the sound doesn't work (this will actually kind of break the work), please try refreshing the page\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"html`\nSomething Else
\nLet's dance\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"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":11,"value":"import {p5} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {p5c} from \"@real-john-cheung/sm3809-a1\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"import {Howl} from '@real-john-cheung/sm3809-a2'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`\n