25:["$","title",null,{"children":"Assginment #1: The Art of the Grid | Степан Гребнев | Observable"}] 49:T649,md`# Assginment #1: The Art of the Grid

## Notes and Realisation *of 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. - To complete an aesthetically appealing work, artists need to go through the processing of exploration, experiments and finally find the best-arranged composition. - 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))

## Description
Here is an artwork from the Hungarian-French artist Vera Molnár. With a white background, this image is composed of a bunch of irregular hexagons. The hexagons are arranged regularly in 19 by 19, and their edges stick together closely, forming a larger square-like shape with uneven edges. The hexagons are in five colours: dark blue, cobalt blue, celadon blue, seaweed green, and cyan.

`4a:T400,md`
### Brief explanation of the code
It's quite complicated to draw a hexagon, but it will be much easier if we think of each hexagon as being made up of two quadrilaterals.

### Idea No.1 My initial idea starts with using a number of vertexes moving downward with random speed from the top. We can use **_beginShape()_** and **_endShape()_** to connect the neighbouring vertexes, such that they will form something like a painting brush, just as demonstrated by the programme above. However, there are some obvious differences between the original work and the product of this "vertex-painting" method. Compared to the original piece, this one looks more disordered and most of the lines are slant. *A comparison between the original work and my first replica* `4b:T464,md`
### Idea No.2 So then I thought of another solution. This algorithm first generates a lattice of dots, whose locations are based on the intersections of a 38*19 grid, but with the influence of some random factor. Then the programme will successively select each dot, together with the three dots around it (the one to its right, the one below it, the one to its lower right), and create a quadrilateral base on the position of these dots. - **randomDots()** // *generate the dots* - **defineColour()** // *roll the dice and switch colours between shapes* - **drawShape()** // *connect the neighbouring four dots to form a quadrilateral* *Left: the original work; Right: the replica using the second algorithm* `4c:[{"id":"11b94a1def85346b5833ef1a1972265de3a0a7d432163611f49f1f534ad7b92cda6a34da583e51021b59c99dd5058a9f0801feb28f4e7b5beb47af374c5949e7","href":"https://static.observableusercontent.com/files/11b94a1def85346b5833ef1a1972265de3a0a7d432163611f49f1f534ad7b92cda6a34da583e51021b59c99dd5058a9f0801feb28f4e7b5beb47af374c5949e7","name":"molnar10.jpg","type":"image/jpeg","lastModified":1690242310603.091,"size":108801},{"id":"dafe68f35703cff213e3b18558cd05fae24b6ffae0004ee712303546a79d1f99d7714dc73b149f8cd85cd0c48f12fb1324eeaf78e619f270e3e1d8f4c90c892f","href":"https://static.observableusercontent.com/files/dafe68f35703cff213e3b18558cd05fae24b6ffae0004ee712303546a79d1f99d7714dc73b149f8cd85cd0c48f12fb1324eeaf78e619f270e3e1d8f4c90c892f","name":"remake10.png","type":"image/png","lastModified":1690242310603.091,"size":391129},{"id":"77b1cf5fdb7e0254c9924f74ab911845afc045f4a966331a924de53be00f307506873d2cda3a56eb2e6cce46c3d9bbc699498d7cdd9c25de743a631c421a2018","href":"https://static.observableusercontent.com/files/77b1cf5fdb7e0254c9924f74ab911845afc045f4a966331a924de53be00f307506873d2cda3a56eb2e6cce46c3d9bbc699498d7cdd9c25de743a631c421a2018","name":"randomDots.png","type":"image/png","lastModified":1690242310603.091,"size":36371},{"id":"2f83a892944324234d5261b2378a542efcc2e4b656823c6247f132e18ca42ff6b0043327ef25204e31c222a74e27ebb0e2b88f26e19748be4937a7263a5d5e46","href":"https://static.observableusercontent.com/files/2f83a892944324234d5261b2378a542efcc2e4b656823c6247f132e18ca42ff6b0043327ef25204e31c222a74e27ebb0e2b88f26e19748be4937a7263a5d5e46","name":"remake9.png","type":"image/png","lastModified":1690242310603.091,"size":283275},{"id":"ef1440732be5dc910103fc8c4ea5dc83cc9a3dd80149808dfa3c5307fadd2729b99c431f7cbac9bd601e92d4e5931339ada40697f0f1fbd742a5761f49142ac9","href":"https://static.observableusercontent.com/files/ef1440732be5dc910103fc8c4ea5dc83cc9a3dd80149808dfa3c5307fadd2729b99c431f7cbac9bd601e92d4e5931339ada40697f0f1fbd742a5761f49142ac9","name":"recreate6.png","type":"image/png","lastModified":1690242310603.091,"size":299295},{"id":"22c7e275f072484fa3b696154883d567951b47aff237cbafa75c0e965d011c0fda7184ab103fe8ce0aa137c0fa200ec4a98f9ffe0f4fb0709cfdf6ca742c3e36","href":"https://static.observableusercontent.com/files/22c7e275f072484fa3b696154883d567951b47aff237cbafa75c0e965d011c0fda7184ab103fe8ce0aa137c0fa200ec4a98f9ffe0f4fb0709cfdf6ca742c3e36","name":"recreate3.png","type":"image/png","lastModified":1690242310603.091,"size":303907},{"id":"94413625a99d82cd4f1d1cefe5ea399490ba2190676773da001873e8892350ce1baebd56c53557598c6bbb2d23dd3cae897eb2b67b509cfe57e3e2d148ae7784","href":"https://static.observableusercontent.com/files/94413625a99d82cd4f1d1cefe5ea399490ba2190676773da001873e8892350ce1baebd56c53557598c6bbb2d23dd3cae897eb2b67b509cfe57e3e2d148ae7784","name":"recreate8.png","type":"image/png","lastModified":1690242310603.091,"size":298000},{"id":"93a9f321c4f9a7a56e0201fc02c4056dbc0c5f0f39717861b3921edf376bff6c1b58a34584eedc1d6c60ac2cd3e4e95e4d2f0eb7afb5fa47a80112fffaf0bc5e","href":"https://static.observableusercontent.com/files/93a9f321c4f9a7a56e0201fc02c4056dbc0c5f0f39717861b3921edf376bff6c1b58a34584eedc1d6c60ac2cd3e4e95e4d2f0eb7afb5fa47a80112fffaf0bc5e","name":"recreate7.png","type":"image/png","lastModified":1690242310603.091,"size":293471}] 29:{"id":"d02ae71862ebec7a","slug":null,"title":"Assginment #1: The Art of the Grid","thumbnail":"cd13fbd35d5917d11f9793c9d8722b7328395ba1febe8362fde6187ec065d921","access_level":"public","create_time":"$D2023-07-24T23:45:10.603Z","update_time":"$D2023-07-24T23:45:10.603Z","view_time":null,"first_public_time":"$D2023-07-24T23:45:10.603Z","has_unpublished_edits":null,"fork":{"id":"9e76349e3336f326","slug":"assginment-1-the-art-of-the-grid","title":"Assginment #1: The Art of the Grid","owner":{"id":"b34c988451399e98","login":"wenrazhao2","name":"KarlieDoesNotExist"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a77e3d98d736999b","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":242,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"76ca7f05a63c88cb","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"76ca7f05a63c88cb","login":"76ca7f05a63c88cb","name":"Степан Гребнев","avatar_url":"https://avatars-next.observableusercontent.com/d182fd2954f237a9992945306347e2ceb86da632484e40adc07e0d5099572e7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assginment #1: The Art of the Grid","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`\n
\n## Recreation
\nIn general, I came up with two different algorithms to replicate that art piece. The following is the more successful one.\n\n*(Click to generate a new image)*\n\n\n
\nAlthough the outcome of the other one was not that satisfactory, I think it's worth sharing as this programme takes an essentially different algorithm than the previous one.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`\n
\n## Activation
\nHere are two DYNAMIC versions that were inspired by Molnar's work:\n
\n**(Click & drag to interact)**\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`\n\nBelow are some visuals generated by this algorithm. The selection of the five colours on each render was completely random, and the computer will automatically generate new colour palettes from time to time.\n\n \n \n \n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null