2b:null 2c:["$","title",null,{"children":"Generative Art | Máté Homolya | Observable"}] 31:T6fd,function shape(seed, { width = 640, height = 400 } = {}) { const w = width; const h = height; var initSeed = Math.floor(998487523 * seed); function pseudoRandom() { var x = Math.sin(initSeed++) * 10000; return x - Math.floor(x); } const spokeCount = Math.floor(pseudoRandom() * 8 + 3); let d = ""; const r = Math.min(w, h) / 4; const TAU = Math.PI * 2; let points = []; for (let i = 0; i < spokeCount + 1; i++) { const angle = (i / spokeCount) * TAU; const x = w / 2 + Math.cos(angle) * r; const y = h / 2 + Math.sin(angle) * r; let c = "L"; if (i === 0) { c = "M"; } d += `${c} ${x} ${y} `; points.push({ x, y }); } const shuffledPoints = points.sort(() => pseudoRandom() - 0.5); // random chunks of 3 lodash .chunk(shuffledPoints, 3) .filter((c) => c.length === 3) .forEach((chunk) => { const [a, b, c] = chunk; d += `C ${a.x} ${a.y} ${b.x} ${b.y} ${c.x} ${c.y} `; }); // pairs of points for (let i = 0; i < spokeCount; i++) { const a = shuffledPoints[i]; const b = shuffledPoints[(i + 1) % shuffledPoints.length]; d += `C ${a.x} ${a.y} ${b.x} ${b.y} ${b.x} ${b.y} `; } const color = `hsl(${pseudoRandom() * 360}, 100%, 50%)`; const strokeWidth = Math.floor(pseudoRandom() * 4 + 1) * 2 + 1; const rotation = pseudoRandom() * 360; return html``; }32:T8dc,Let's suppose the artpiece we are trying to define algorithmically is a game. Now let's pose a question to start designing: - What are the rules of the game? - How do these rules affect the look? Let's say the game is to create a unique group of trees in 2D. A real-world forest tends to taper off towards the edges, which can be mimicked using the `Math.abs` function. So in this case the rule is: trees towards the edge of the group tend to be shorter. At some point along the process it is important to set a limit on the scope of the design. For designing a tree system, all aspects of the complexity of tree growth has to be taken into account if we want the results to be realistic. However, for producing simple artpieces, this is not necessary, it is only necessary for triple A games like Far Cry 5 ${cite("Carrier2018")}. Another example: let's say the game is to create a unique house. How would we approach it? First, let's define a set of parameters that will control the output, in this case - number of maximum floors - room size min/max range - support columns width - floor height - roof angle - window placement threshold And so on. Then the algorithm can do the same steps as if you were hand drawing a house, but using the input parameters to constrain the design into pleasant looking results. Another amazing example of a procedural building generator uses the Wave Function Collapse algorithm to demonstrate a module-based approach to this problem. ## Deep Learning With the Deep Learning approach, we need to prepare a training data set with unique houses and their description (metadata). Then the results will mimic the training data, while also generating an image of a never seen before house. This is why general purpose Large language models like DALL-E 2 ${cite("Ramesh2022")} are so powerful, because it is not just house-specific metadata that is encoded in the neural network. Another common approach to produce Generative Art with Deep Learning is called Neural Style Transfer ${cite("Gatys2015")}. In simple terms, we take two images, "style image" and "input images". This algorithm learns the visual features of the style image, applies it to an input image using a convolutional window that "reads" the neural activations.33:[{"id":"1335855503e8dea9f9c09e7a259f52704d38115265a288f6f7f4bafe60be1b6e7d360aa00ca935f58d1ec5c967402197a98cb9884e77cb8353a45b219c544325","href":"https://static.observableusercontent.com/files/1335855503e8dea9f9c09e7a259f52704d38115265a288f6f7f4bafe60be1b6e7d360aa00ca935f58d1ec5c967402197a98cb9884e77cb8353a45b219c544325","name":"image.png","type":"image/png","lastModified":1656015169379.802,"size":1276647},{"id":"f2b1704a42da44bc7b8bb6267e847d9940d8c254be6d09a52db648f07a002737af03d2641641adfaa38ec229d0b9015fa8a845f4d18d9e958c32b095e6893eb2","href":"https://static.observableusercontent.com/files/f2b1704a42da44bc7b8bb6267e847d9940d8c254be6d09a52db648f07a002737af03d2641641adfaa38ec229d0b9015fa8a845f4d18d9e958c32b095e6893eb2","name":"image@1.png","type":"image/png","lastModified":1656015326603.43,"size":1668050},{"id":"b7d5ee75bf7acb56ed5d3ede10de97c1ea7e0ed117509519179175b86fc8b1d9420ad040c82ba2641ce936803cbaf74cab9a0b08ae1916076aa4e676a7dac702","href":"https://static.observableusercontent.com/files/b7d5ee75bf7acb56ed5d3ede10de97c1ea7e0ed117509519179175b86fc8b1d9420ad040c82ba2641ce936803cbaf74cab9a0b08ae1916076aa4e676a7dac702","name":"image@2.png","type":"image/png","lastModified":1656016266757.415,"size":1155912}] 2f:{"id":"c3e339db81abe428","slug":"generative-art","title":"Generative Art","thumbnail":"ec111d836d245bbad2d6557a68f159773e5edc042bad7783990cd15528b01d04","access_level":"public","create_time":"$D2022-06-11T18:02:00.815Z","update_time":"$D2022-06-23T20:32:19.451Z","view_time":null,"first_public_time":"$D2022-06-22T16:58:13.703Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"7c53bf02883e536b","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":"starter_2024"},"version":303,"publish_version":303,"role":null,"authored":false,"authors":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null}],"members":[{"type":"individual","id":"fe6e56d7dd5ccae5","login":"mateh","name":"Máté Homolya","avatar_url":"https://avatars-next.observableusercontent.com/6709535e610a611406cd7a7aea5ca7555ca380d04cde563c1ea0c830a30d430c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Generative Art","cells":[{"id":118,"value":"# Generative Art","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"viewof reload = Inputs.button(\"Reload\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"htl.html`