2d:null 2e:["$","title",null,{"children":"SM3809_A1 | ychsu6 | Observable"}] 33:T566,md`# SM3809_A1 ## Vera Molnár and the Art of the Grid

## 1. Read Reflection:

What viewers like about the artworks might share similar rules in terms of aesthetic satisfaction. However, the set of rules isn’t a limitation but methods for artists to elaborate more possibilities consciously as the works is further developed from the parameters. Being able to modify the work several times and/or with probing steps may occur more possible variation within a short period of time, sometime even create the transformation of an indifferent version. However, computer art doesn’t guarantee the quality of artwork, as what it does in traditional art forms, as no natter what, it mainly relies on artists’ decisions. "Toward Aesthetic Guidelines for Paintings with the Aid of a Computer" by Vera Molnar. In Leonardo, Summer, 1975, Vol. 8, No. 3, pp. 185-189.

## 2. Describe Description of the piece:

Gradient purple Grids are arranged neatly in a 24*6 precise cut form.

Each colour grid seems to appear in random positions and random colours in horizontal order.

Aligned from light purple to medium to dark and back to light again in vertical order.

The 1st & 6th, the 2nd & 5th, and the 3rd & 4th rows share similiar rules.

`34:T457,md`\`\`\`javascript var gradient = ['#f6f0ff', '#f1e7ff','#ece0fd', '#e6d6ff', '#e5d0fb', '#ddc2ff', '#d7b8ff', '#d4a9fb', '#ca9bff', '#c38dff', '#b679f9', '#b370f5', '#9d67e9', '#9768dc', '#9e56e5', '#8c54de', '#9059de', '#8650da', '#8757dd', '#824bcd', '#794ac8', '#684bb5', '#7453a2', '#6349a1', '#584187', '#5c456a']; let chooseColor; function setup() { createCanvas(740, 740);//+5+5+5+5 720*720, 24(30)*6(120) background(0); displayGrids(); } function displayGrids(){ noStroke(); for(let i=0; i<24; i++){ for(let j=0; j<6; j++){ if(j==2 || j==3){ chooseColor = random(gradient.slice(15,27));//0,11,7,19,15,27 fill(chooseColor); rect(10+i*30,10+j*120,30,120); } else if (j == 1 || j ==4) { chooseColor = random(gradient.slice(7,19));//0,11,7,19,15,27 fill(chooseColor); rect(10+i*30,10+j*120,30,120); } else { chooseColor = random(gradient.slice(0,11));//0,11,7,19,15,27 fill(chooseColor); rect(10+i*30,10+j*120,30,120); } } } } function mouseClicked() { displayGrids(); } \`\`\``35:T8e5,md`\`\`\`javascript var gradient = ['#f6f0ff', '#f1e7ff','#ece0fd', '#e6d6ff', '#e5d0fb', '#ddc2ff', '#d7b8ff', '#d4a9fb', '#ca9bff', '#c38dff', '#b679f9', '#b370f5', '#9d67e9', '#9768dc', '#9e56e5', '#8c54de', '#9059de', '#8650da', '#8757dd', '#824bcd', '#794ac8', '#684bb5', '#7453a2', '#6349a1', '#584187', '#5c456a']; let chooseColor; let lngthY; let rectW=30, rectH=120; let hDeltaCounter = 0; let hDelta = 0; let specialColor, specialColor2; let colors = new Array(24*6); function setup() { createCanvas(740, 740);//+5+5+5+5 720*720, 24(30)*6(120) background(0); setColors(); specialColor = random(gradient); specialColor2 = random(gradient); specialColor3 = random(gradient); frameRate(8); displayGrids(); } function draw(){ background(0); hDeltaCounter = (hDeltaCounter + 1) % 10; // 0 through 9 hDelta = Math.abs(hDeltaCounter - 5);//5,4,3,2,1,0,1,2,3,4 displayGrids(); } function setColors() { for(let i=0; i<24; i++){ for(let j=0; j<6; j++){ if(j==2 || j==3){ colors[i + j * 24] = random(gradient.slice(15,27));//0,11,7,19,15,27 } else if (j == 1 || j ==4) { colors[i + j * 24] = random(gradient.slice(7,19));//0,11,7,19,15,27 } else { colors[i + j * 24] = random(gradient.slice(0,11));//0,11,7,19,15,27 } } } } function displayGrids(){ noStroke(); rectMode(CENTER); for(let i=0; i<24; i++){ for(let j=0; j<6; j++){ chooseColor = colors[i + j * 24]; fill(chooseColor); rect(10+rectW/2+i*30,10+rectH/2+j*120,rectW,rectH); } } // special color to overlap for(let i=0; i<24; i++){ for(let j=0; j<6; j++){ chooseColor = colors[i + j * 24]; fill(chooseColor); if(chooseColor == specialColor){ rect(10+rectW/2+i*30,10+rectH/2+j*120,rectW,rectH+hDelta*8); } if(chooseColor == specialColor2){ rect(10+rectW/2+i*30,10+rectH/2+j*120,rectW,rectH+hDelta*20); } if(chooseColor == specialColor3){ rect(10+rectW/2+i*30,10+rectH/2+j*120,rectW,rectH+hDelta*35); } } } //bg frame to overlap fill(0); rect(width/2,5,width,10); rect(width/2,height-5,width,10); } function mouseClicked() { setColors(); specialColor = random(gradient); displayGrids(); } \`\`\``36:[] 31:{"id":"e3c05cd01bdd3f75","slug":"sm3809_a1","title":"SM3809_A1","thumbnail":"480cefc2484061ac75e25ec5b7f5b72d3a1a207e327ab252fe1ea6d0fb41a660","access_level":"public","create_time":"$D2021-01-20T06:38:24.142Z","update_time":"$D2021-01-21T07:27:29.822Z","view_time":null,"first_public_time":"$D2021-01-20T07:42:02.726Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c3d91d7db2867b4d","login":"betahsu","name":"ychsu6","avatar_url":"https://avatars-next.observableusercontent.com/197b7792c36f626b9fe391a472486b8b6dc3cf3503a2bb52e365e7916c324a9e","tier":"starter_2024"},"version":84,"publish_version":84,"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_A1","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`\n## 3. Recreate\n>\nClick the canvas to have each new generated grid displayed in different position.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`\n## 4. Activate\n\"Neither Loud nor Quiet\"\n

I like the neat order of the grids created by the artist which generated a calm and peaceful feeling. Therefore, i decided to leave the width of the rectangles unchanged.\n

In each mouse click, the chosen colours(grids) to change will be different, sometimes few and far between, sometimes close and noisy, as if we are in a busy restaurant where ambient noise come from all around, but it's hard to tell the volume of each as they are somehow blended together.\n

Also, i like how the grids are so closely aligned together that sometimes it's hard to tell which is actively amplifying and which is just compressed by others.\n\n>\n

\nClick to change.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"