2d:null 2e:["$","title",null,{"children":"Code Visual Art Practices | KarlieDoesNotExist | Observable"}] 33:T49f,md`
## Greetings!
While code art (or computing art, or whatever you call it) is considered as one of the newest media art formats, visual art (i.e. paintings) and language art (i.e. literature) are the two of the most traditional art forms and have such long histories. It is thus very interesting to see how these art forms interact and intersect with each other, creating brand new experiences for the audience.

Code art is not a new thing. So many artists have worked in this area, making uncountable amazing visual and/or language-based artworks in the past decades. For those who don't know much about this area, some examples I can give here include [Vera Molnar](http://www.veramolnar.com/) and her computer painting series, [John Whitney](http://drawn.ca/films/catalog) and his very experimental computer animation, and, say, Jim Andrews and his [DHTML poems](http://www.vispo.com/animisms/enigman/EnigmanInfoanimism.html) done in the 90s.

I started to do coding stuff since 2018, but didn't really get the trick until doing it for around 2 years...and this is a page documenting some of my coding practices/artworks that I feel good with. --- `34:T8af,md`
# Here, we have... ### two dynamic sketches inspired by Vera Molnar's static computer paintings: *Click & drag to interact*
[view source](https://editor.p5js.org/Karlieee/sketches/kEEkQDwLz)

*Click to start, no other interaction*
[view source](https://editor.p5js.org/Karlieee/sketches/iOtDUKrib)

### Some Notes *on Vera Molnar's ["Toward aesthetic guidelines for paintings with the aid of a computer."](https://rednoise.org/softas/uploads/molnar.pdf) * - *There is less divergence about the aesthetics of composition than is generally believed,* which means that the aesthetic satisfaction brought by one well-composed visual artwork is shared by the general public. It also indicates that this kind of perception might not be experiential, but rather instinctive and inherent. - Benefits of using the computer: less tedious to do repetitive works; can "go back" to the state where certain modifications haven't been made. *"The computer is like a slave in making my dreams a reality."* (Vera Molnar in [Conversation with Hans Ulrich Obrist](https://vintage.hu/wp-content/uploads/2019/03/Molnar-Vera-HUO-interview.pdf))
`35:T65a,md` ---- # Cellular Automata ### and more... In this experiment I tried to understand and visualize the Social Dynamics Cellular Automata model, proposed by Rainer Hegselmann and Andreas Flache in 1998: [Understanding Complex Social Dynamics: A Plea For Cellular Automata Based Modelling](http://jasss.soc.surrey.ac.uk/1/3/1.html).
Below is a sketch that simulates Rainer and Andreas's Social Dynamics system. It shows the results and processes of simulation runs with 2, 5, 10, 15, 30, and 1000 different opinions.
Click & hover your mouse on each section to see how it evolve. Click again to pause.
[View source](https://editor.p5js.org/Karlieee/sketches/XlavqfgcM) We can see that with the increase of the possible options, the distribution of different options becomes more and more even, and there are patterns and clusters emerge. Just as [the paper](http://jasss.soc.surrey.ac.uk/1/3/1.html) says: the more possible opinions there are, the closer the stable results get to universal consensus and the smoother is the transitions between areas of differing opinion.
## Strange Circular Pleasure
*Click to start or pause. No interaction other than that. *
*This sketch includes sound*
### A just-for-fun sketch, also based on the CA model.
*Click to refresh your memory...* `36:T80f,ruleA = ({ start: "$time

...
$speaker said: $question ", time: "Recorded in (August | December), (1945 | 1996).", question: "Anything (following | still | superior | dead | small | severe | lost | effective | heavy | visible | instantaneous | high | large | good | little | great)? ", //terminals---------------------------------------------------------------------- speaker: " He | She", //noun noun: "bomb | feet | building | city | fire | radiation | pressure | effects | radius | blast | civilian | student | girl | school | factory | heat | father | explosion | shield | injury | soldier | care | spirit | gamma ray | weather | air | x-ray | valley | river | surface | radioactivity | wound", weapon: "x-ray | gamma ray | radiation | radius | blast | explosion | radioactivity", people: " civilian | student | girl | father | soldier | injury | patient | peasant | protestant | person | family", obj: " bomb | building | city | factory | shield | valley | surface | house | place | university", nature: " fire | flame | air | river ", abstract: "radiation | pressure | effect | radius | blast | heat | explosion | injury | spirit | weather | light | population | radioactivity | shield | strength | target | time | war | wave | wound | discovery | destruction | case", //verbs obj_verb: " blow | bomb | weaken | shield | damage | destroy | reinforce | wound | burn | observe | injure | heal | suffer | ruin | break | collapse | devastate", event_verb: " occurr | become | drop | result | return | cause ", human_verb: " observe | rescue | weaken | carry | find | suffer | care | raid | investigate", vi: "die | heal | drop", adj: " concrete | following | still | total | united | superior | central | dead | small | severe | lost | atomic | effective | nuclear | heavy | sustained | broken | visible | collapsed | burned | strong | instantaneous", extent: "high | large | good | little | great", adv: "almost | completely | far from | severely | effectively" })37:T143b,ruleB = ({ start: "($crtSpeaker1 = (He | She) ) said: $opening_sentence
$main_sentence ", time: "Recorded in (August | October), (1945 | 1996).", opening_sentence: " ((( building | city | factory | shield | valley | surface | house | place | university).s().cap() are ( bomb | weaken | shield | damage | destroy | reinforce | wound | burn | injur | suffer | ruin ).past()) | ( $people.s().cap() are (wound | burn | injur | suffer ).present()) ) in ($thisPlace = (Nagasaki | Hiroshima )).", //main sentences list------------------------------------------------------------ main_sentence: " $crtSpeaker1.speakerReverse() said: $s1
($crtSpeaker3 = (He | She) ) said: ($s2 | $s3 | $s4)
$speaker said: $s5 ", //layer 1: s1: " (Yeah | Oh), I've heard of the news about the $noun.s() $obj_verb.present() in $thisPlace. | (Yeah | Oh), that's too bad for the $people.s() and $obj.s() there.", s2: "The largest bomb ever yet used in the history of warfare.
$speaker said: $s2_1", s3: " $people.s().cap() are $adv $human_verb.past().
$speaker said: $s3_1 ", s4: " Yes. But the (fires | flames) were (superior | concrete | effective | visible | burning | strong | instantaneous) and the (river | valley) was ( damage | destroy | wound | injure | ruin | break | collapse | devastate).past().
$crtSpeaker3.speakerReverse() said: $s4_1", s5: "There will be nothing (concrete | superior | united | severe | lost | atomic | effective | heavy | sustained | broken | visible | collapsed | burned | strong | large | good | great) left, no doubt. | That $abstract. That $abstract.", s7: " So the (rumour[5] | $abstract) goes.
$speaker said: So the $abstract goes.", //layer 2: s2_1: "The greatest amount of ( radiation | pressure | effect | radius | blast | heat | radioactivity | strength | discovery | destruction ) ever yet $obj_verb.past() in the history of (civilization | the city | X-ray | Gamma-ray | nuclear bomb).
$speaker said: $s2_1_1 ", s3_1: "Better them than me.
$speaker said: ($s3_1_1 | $s7)", s4_1: "And the $weapon.s() were $obj_verb.present() and the ($people.s() | cities) were dead.
$speaker said: $s3_1_1", //layer 3: s2_1_1: " And ((the $abstract of $people is $adv $adj.) | (the $people thought that no (large | great) (enemy raid | explosion | blast | bombing ) could have ( occurred | observed ))). Poor guys.
$speaker said: $s7 ", s3_1_1: 'The (worst | largest ) $weapon.s() were at the ( university | factory | surface).s() in the (valley | city).s().
((And they said: "Our (house | building | places).s() are full of (wound | injure ).past() and (die | burn | suffer).present().
Can you help, at least by taking the worst cases? ") |(The $weapon $obj_verb.past() the (city center | building | valley) so $adv that $people.s() were everywhere.)) ', //main sentences end here------------------------------------------------------- question: "What about the (($people.s() in $place? Still (observe | rescue | find | heal | suffer | raid | investigate).present()?)| ( $weapon.s() in $place? Still (blow | bomb | damage | destroy | reinforce).present()? )) | Do you think there is $abstract left in $place? | Is the $weapon serious in $place? ", //terminals---------------------------------------------------------------------- place: "Nagasaki | Hiroshima | Japan | the city center ", speaker: " He | She", //noun noun: "bomb | feet | building | city | fire | radiation | pressure | effects | radius | blast | civilian | student | girl | school | factory | heat | father | explosion | shield | injury | soldier | care | spirit | gamma ray | weather | air | x-ray | valley | river | surface | radioactivity | wound", weapon: "x-ray | gamma ray | radiation | radius | blast | explosion | radioactivity", people: " civilian | student | girl | father | soldier | injury | patient | peasant | protestant | person | family", obj: " bomb | building | city | factory | shield | valley | surface | house | place | university", nature: " fire | flame | air | river ", abstract: "radiation | pressure | effect | radius | blast | heat | explosion | injury | spirit | weather | light | population | radioactivity | shield | strength | target | time | war | wave | wound | discovery | destruction", //verbs obj_verb: " blow | bomb | weaken | shield | damage | destroy | reinforce | wound | burn | observe | injure | heal | suffer | ruin | break | collapse | devastate", event_verb: " occurr | become | drop | result | return | cause ", human_verb: " observe | rescue | weaken | carry | find | suffer | care | raid | investigate", vi: "die | heal | drop", adj: " concrete | following | still | superior | total | united | central | dead | small | severe | lost | atomic | effective | nuclear | heavy | sustained | broken | visible | collapsed | burned | strong | instantaneous", extent: "high | large | good | little | great", adv: " heavily | completely | far from | severely | effectively | visiblly | strongly | instantaneously " })38:Tec1,ruleC = ({ start: "($crtSpeaker = (He | She) ) said: $question
$main_sentence
... ", //main sentences list------------------------------------------------------------ main_sentence: " $crtSpeaker.speakerReverse() said: ($s6 $s5)", //layer 1: s3: " $people.s().cap() are $adv $human_verb.past(). ", s4: " Yes. But the (fires | flames) were (superior | concrete | effective | visible | burning | strong | instantaneous) and the (river | valley) was ( damage | destroy | wound | injure | ruin | break | collapse | devastate).past().
$crtSpeaker3.speakerReverse() said: $s4_1", s5: "There will be nothing (concrete | superior | united | severe | lost | atomic | effective | heavy | sustained | broken | visible | collapsed | burned | strong | large | good | great) left, no doubt. | That $abstract. That $abstract. |
$s2_1_1 | | $s3 | $question", s6: "I guess so. | Maybe. | Who knows. | Perhaps...", //layer 2: s1_1: "So the $abstract goes.", s2_1: '"The greatest amount of ( radiation | pressure | effect | radius | blast | heat | radioactivity | strength | discovery | destruction ) ever yet $obj_verb.past() in the history of (civilization | the city | X-ray | Gamma-ray | nuclear bomb)."
$speaker said: $s2_1_1 ', s4_1: "And the $weapon.s() were $obj_verb.present() and the ($people.s() | cities) were dead.", //layer 3: s2_1_1: " And (the $abstract of the $people.s() was $obj_verb. | the $people.s() thought that no (large | great) (enemy raid | explosion | blast | bombing ) could have ( occurr | observe ).past() ). Poor guys.", //main sentences end here------------------------------------------------------- question: "What about the (($people.s() in $place? Still (observe | rescue | find | heal | suffer | raid | investigate).present()?)| ( $weapon.s() in $place? Still (blow | bomb | damage | destroy | reinforce).present()? )) | Do you think there is $abstract left in $place? | Is the $weapon serious in $place? ", //terminals---------------------------------------------------------------------- place: "Nagasaki | Hiroshima | Japan | the city center ", speaker: " He | She", //noun noun: "bomb | feet | building | city | fire | radiation | pressure | effects | radius | blast | civilian | student | girl | school | factory | heat | father | explosion | shield | injury | soldier | care | spirit | gamma ray | weather | air | x-ray | valley | river | surface | radioactivity | wound", weapon: "x-ray | gamma ray | radiation | radius | blast | explosion | radioactivity", people: " civilian | student | girl | father | soldier | injury | patient | peasant | protestant | person | family", obj: " bomb | building | city | factory | shield | valley | surface | house | place | university", nature: " fire | flame | air | river ", abstract: "radiation | pressure | effect | radius | blast | heat | explosion | injury | spirit | radioactivity | strength | war | wound | discovery | destruction", //verbs obj_verb: " blow | bomb | weaken | shield | damage | destroy | reinforce | wound | burn | observe | injure | heal | suffer | ruin | break | collapse | devastate", event_verb: " occurr | become | drop | result | return | cause ", human_verb: " observe | rescue | weaken | carry | find | suffer | care | raid | investigate", vi: "die | heal | drop", adj: " concrete | following | still | superior | total | united | superior | central | dead | small | severe | lost | atomic | effective | nuclear | heavy | sustained | broken | visible | collapsed | burned | strong | instantaneous", extent: "high | large | good | little | great", adv: "almost | completely | far from | severely | effectively" })39:[] 31:{"id":"c6f8404ac866caa3","slug":"code-visual-art-practices","title":"Code Visual Art Practices","thumbnail":"eb48e9b81739da1df3102a7d5c41106317bc90f5100c11937ac33a6cf39cfada","access_level":"public","create_time":"$D2021-06-18T14:43:55.147Z","update_time":"$D2021-10-31T16:35:59.898Z","view_time":null,"first_public_time":"$D2021-06-18T16:43:58.889Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b34c988451399e98","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":"starter_2024"},"version":218,"publish_version":218,"role":null,"authored":false,"authors":[{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null}],"members":[{"type":"individual","id":"302ba7635bb9b25d","login":"wenrazhao2","name":"KarlieDoesNotExist","avatar_url":"https://avatars-next.observableusercontent.com/64edd542e55cff350a7503e5050267fb1768e8cc5052184b8a8cb49162d172f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Code Visual Art Practices","cells":[{"id":0,"value":"# Code Visual Art Practices","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`\n---\n# Abstract and Abstraction\n
\n*Click on the canvas to start, click again to pause*
\n[view source](https://editor.p5js.org/Karlieee/sketches/uTM-4pq8T)\n\n

\n\nThe question I would pose here is, what's more than just making dynamic and interesting visuals, when abstract visual production becomes such a simple thing with code?\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`\n
\n# Digital writing\n
\nSo I found this book [The Atomic Bombings of Hiroshima and Nagasaki](https://www.gutenberg.org/ebooks/685) from [Gutenberg](https://www.gutenberg.org/) by accident, and tried to find out the most frequently appear verbs/nouns/adjectives/adverbs in this book.\n### [How to get these words and frequencies?](https://observablehq.com/@wenrazhao2/word-frequencies-in-digital-texts) \n
\nAnd I thought it would be interesting if we can \"write\" something with those words (only) - very special words that are related to the atomic bombings in Japan in 1945, but also very scientific and emotionless words since they originated from a military report.

\n\n## So here's the outcome of that rough idea.\n*just watch*\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"{\n let content = html`\n

\nThe Ceaseless Discussion About Hiroshima and Nagasaki Between Two Idiots \n
\n${output} \n

${output2}

${output3}

`;\n return content;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`---\n*below is the source code*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"RiTa = require(\"rita\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import { rs } from \"@dhowe/rita\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"rg = RiTa.grammar(ruleA)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"RiTa.addTransform('past', pastTense)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function pastTense(str) {\n return RiTa.pastPart(str);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"RiTa.addTransform(\"present\", presentTense)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"function presentTense(str) {\n return RiTa.presentPart(str);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"RiTa.addTransform(\"speakerReverse\", speakerReverse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"function speakerReverse(str) {\n if (str.charAt(0) == \"H\" || str.charAt(0) == \"h\") {\n return \"She\";\n } else {\n return \"He\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"sec = pulse(7000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"sec2 = pulse(6000)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"sec3 = pulse(13500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"pulse = function* (ms) {\n while (true) {\n yield Promises.tick(ms);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"output = (sec2, RiTa.grammar(ruleA).expand())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"output2 = (sec3, RiTa.grammar(ruleB).expand())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"output3 = (sec, RiTa.grammar(ruleC).expand())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`---\n## To be continue...\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 32:"$31:body"