2d:null 2e:["$","title",null,{"children":"SM3809_A2 | ychsu6 | Observable"}] 33:T42d,md`## Describe こうこう | [*koukou*](https://vimeo.com/61608556) (02:13~03:40)

Director: Takashi Ohashi;

Award: ANIMATED DREAMS 2013 "BEST ABSTRACT ANIMATION"

"I don't draw what I see. I draw what I wish to see."

It is originally a visual abstract work comprised of Japanese syllabic sounds. He for sure expresses how good vowels and consonants are able to synchronize with the content. However, we can also simply appreciating this work as a visual masterpiece.

I like that how we are able to visually "see" the music even simply watching the silent video. From the sudden movement of shape and form. Although the shape and form are colorful, it is generally a very organic work. Although the audience might not always get the whole picture of the story behind it, this is a very successful narrative work as there are several climaxes in between and the sudden silent moment where attract audiences' attention. `34:T928,md`\`\`\`javascript let angle = 10; let angle2 = -10; let t = 50; let tt = 100; let number = 180; let index = 19; let index2 = 10; let step = 1; let step2 = 1; let circleSize; let silence = false; let showShape = false; var nums = [4,5,6,8,9,10,12,15,16,18,20,24,30,36,40,45,60,72,90,120]; function setup() { createCanvas(600, 600); background(50); angleMode(DEGREES); frameRate(45); } function draw() { background(50); stroke(255); // text(index, 520, 550); translate(width/2, height/2); strokeWeight(2); noFill(); circleSize = noise(t); t +=0.05; tt+=0.001; clockWise(); counterClockWise(); check(); print(showShape); } function clockWise(){ push(); rotate(angle); for(let ang=0; ang<360; ang+=nums[index]+5){ push(); if(angle<130){ rotate(ang*sin(angle)); } else { rotate(ang); strokeWeight(3); line(200* sin(angle), 0, 0, 80*cos(angle*1.3)); if (frameCount > 3500){ showShape = showShape* -1; } if (showShape = true){ beginShape(); strokeWeight(1); vertex(0,0); vertex(60, 50+80*cos(angle*1.3)); vertex(200 * sin(angle), 100); endShape(CLOSE); } strokeWeight(2); // circle(60, 50+380*cos(angle*1.3),10); circle(900 * noise(tt)*sin(angle), 200, 5); } pop(); } angle++; pop(); } function check(){ if(frameCount % 100 ==0){ index-=step; index2+=step2; } //check index1 if(index <= 0){ index = 1; step = step * -1 } else if (index > 19){ index = 19; step = step * -1 } if (index2>14){ angle2 = angle2 * 0.1; } //check index2 if(index2 >= 19){ index2 = 18; step2 = step2 * -1 } else if (index2 <= 10){ index2 = 11; step2 = step2 * -1 } } let showCircle=true; function counterClockWise(){ //counterclockwise push(); rotate(angle2); for(let ang=0; ang<360; ang+=nums[index2]+5){ push(); rotate(ang); if(frameCount > 1200 && frameCount < 2000){ showCircle = !showCircle; } if(showCircle = true){ circle(60, 50+ 380*cos(angle*1.3), 30*circleSize); circle(60, 50+ 440*cos(angle*1.3),3); circle(60, 100+ 440*cos(angle*1.3),3); } // circle(1100 * sin(angle), 100, 5); pop(); } angle2--; pop(); } \`\`\``35:[{"id":"0cdac271bf2b858ed233b4b65092674b3c0e8bba0a6e3bf7836e32bbb46a7e09586368174b9eea98ae47e68ba2483458a441a2d11fd7a4e7332599c3e964a6cb","href":"https://static.observableusercontent.com/files/0cdac271bf2b858ed233b4b65092674b3c0e8bba0a6e3bf7836e32bbb46a7e09586368174b9eea98ae47e68ba2483458a441a2d11fd7a4e7332599c3e964a6cb","name":"Screenshot 2021-01-28 at 12.29.21 PM.png","type":"image/png","lastModified":1611808283740.128,"size":1175606}] 31:{"id":"a92100591f4b773f","slug":"sm3809_a2","title":"SM3809_A2","thumbnail":"f834f1bc07b187e4668fdce9f24ff86f3da68f7ce5f5950da463df68a6448ed3","access_level":"public","create_time":"$D2021-01-27T09:27:05.213Z","update_time":"$D2021-02-04T04:08:32.049Z","view_time":null,"first_public_time":"$D2021-01-28T04:08:18.203Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"c3d91d7db2867b4d","login":"betahsu","name":"ychsu6","avatar_url":"https://avatars-next.observableusercontent.com/197b7792c36f626b9fe391a472486b8b6dc3cf3503a2bb52e365e7916c324a9e","tier":"starter_2024"},"version":99,"publish_version":99,"role":null,"authored":false,"authors":[{"type":"individual","id":"8205ffe96d046f8c","login":"betahsu","name":"ychsu6","avatar_url":"https://avatars-next.observableusercontent.com/197b7792c36f626b9fe391a472486b8b6dc3cf3503a2bb52e365e7916c324a9e","tier":null}],"members":[{"type":"individual","id":"8205ffe96d046f8c","login":"betahsu","name":"ychsu6","avatar_url":"https://avatars-next.observableusercontent.com/197b7792c36f626b9fe391a472486b8b6dc3cf3503a2bb52e365e7916c324a9e","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":26,"value":"md`# SM3809_A2\n## Abstraction & Emotion\n

\n## Reading\n

I used to think of visual audio art as music video where the visual contents are supportive factors for music, or the other way around, in a way to trigger similar feelings and memories.\n

I thought there is always a way for narrative factors to step in in order to further interpret the visual work. However, in this reading, the author not only mentioned that it is the organic element that triggers the inner feelings of audiences, the movement itself as an incident is an expression that provides an emotional and aesthetic experience, and no further interpretation is needed.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`\n## Create\n\n

1st Draft of my work

\nThis is the most basic version. I played along with sin() and cos() while also exploring the vertex() and noise() features.\n\n

This is my code:\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`\\`\\`\\`javascript\nfunction setup() {\n createCanvas(600, 600);\n background(50);\n angleMode(DEGREES);\n}\n\nangle = 10;\nlet t = 50;\nlet number = 180;\nlet index = 20;\nlet step = 1;\nvar nums = [3,4,5,6,8,9,10,12,15,16,18,20,24,30,36,40,45,60,72,90,120];\nfunction draw() {\n background(50);\n stroke(255);\n let circleRad = cos(noise(t) * 100) *900;\n \n translate(width/2, height/2);\n strokeWeight(2);\n rotate(angle);\n for(let ang=0; ang<360; ang+=nums[index]+5){\n push();\n rotate(ang);\n line(200 * sin(angle), 0, 0, 80*cos(angle*1.3));\n beginShape();\n //triangle\n vertex(0,0);\n vertex(60, 50+80*cos(angle*1.3));\n vertex(200 * sin(angle), 100);\n endShape(CLOSE);\n circle(60, 50+380*cos(angle*1.3),10);\n circle(1100 * sin(angle), 100, 5);\n pop();\n }\n angle++;\n if(frameCount%150 ==0){\n index-=step;\n }\n if(index <= 0){\n index = 1;\n step = step * -1\n } else if (index > 20){\n index = 20;\n step = step * -1\n }\n // print(angle);\n t +=0.005;\n}\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n

Final Version

\nThe transition of the previous version seems to be too abrupt, dramatic, and predictable; therefore, I wish to further adjust it for more organic and creative features.

\nIn order to create an outer space-like figure, I added some reversed and rotation features while playing along the cos() and() for more exciting artistic features. I also edited the displayed time supported with noise function for more natural and organic transitions.

\nSimilar to what Vera Molnár mentioned in her article, I like how slightly shifting several positions from the center can further create so much more interesting illusions. Therefore, I also deliberately made the rotating angle of each element NOT to be divided too evenly, so were several other variables for the circle and lines.

Besides, a short introduction is displayed in the beginning.\n\n

This is my code:\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`\n### Problems\n

\nI don't know to how make the transition of the swifting index in nums[] more smoothly. As everytime it changes from the previous element to the next, the canvas seems to be still for a short period of time. (Not sure if i can spimply solve it with lerp() or i need other methods, but it seems lto be impossible as the elements in array are: [4,5,6,8,9,10,12,15,16,18,20,24,30,36,40,45,60,72,90,120]).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"md`\n[*Back to Home Page*](https://observablehq.com/@betahsu/observable-software-art/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"