{"id":11304,"date":"2015-05-07T16:01:11","date_gmt":"2015-05-07T16:01:11","guid":{"rendered":"http:\/\/livecode.com\/?p=11304"},"modified":"2015-05-07T16:01:11","modified_gmt":"2015-05-07T16:01:11","slug":"from-livecode-to-livemorphs","status":"publish","type":"post","link":"https:\/\/legacy.livecode.com\/from-livecode-to-livemorphs\/","title":{"rendered":"From LiveCode to LiveMorphs"},"content":{"rendered":"<p>Evolution and natural selection are fundamental principals on which science bases the existence and origin of all natural living beings. The fundamental rules of this process are very simple but provide a vastly powerful means by which adaptation to a particular environment can take place. Evolution is covered to varying depths in biology text books, explaining how these principals influence life on this planet.<!--more--><\/p>\n<p>Evolution and natural selection are fundamental principals on which science bases the existence and origin of all natural living beings. The fundamental rules of this process are very simple but provide a vastly powerful means by which adaptation to a particular environment can take place. Evolution is covered to varying depths in biology text books, explaining how these principals influence life on this planet.<\/p>\n<p>This blog looks at some of the principals behind evolution and selection and how this paradigm started to find its way into a relatively new field of computer science, artificial intelligence.<\/p>\n<p>In his book &#8220;The Blind Watchmaker&#8221;, Richard Dawkins explores the mechanism of pure random development and contrasts this with guided random development that uses incremental selection. He then proceeds to turn these observations into a computer program that uses randomness and selection to evolve graphical shapes called biomorphs.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/livecode.com\/wp-content\/uploads\/2015\/05\/bunny.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11321\" src=\"http:\/\/livecode.com\/wp-content\/uploads\/2015\/05\/bunny.jpg\" alt=\"bunny\" width=\"800\" height=\"126\" srcset=\"https:\/\/legacy.livecode.com\/wp-content\/uploads\/2015\/05\/bunny.jpg 800w, https:\/\/legacy.livecode.com\/wp-content\/uploads\/2015\/05\/bunny-300x47.jpg 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>What I find nice about his approach is that it demonstrates evolution in an interactive fashion, allowing the user to take an active role in forming the shape of the biomorphs. Many advanced evolutionary programming techniques used in software development do not provide this kind of visual feedback.<\/p>\n<p>The LiveCode application demonstrated in this blog shows how to create visual shapes similar to the biomorphs Richard Dawkins created. It also uses similar principles of data representation and data visualisation, but I call the figures LiveMorphs. You can construct the application by copying the functions and commands into the card script of a LiveCode stack and invoking the openCard handler, for example, by saving your stack and then reopening it or by calling the openStack handler from the message box.<\/p>\n<p>The idea behind the application is that each LiveMorph has an underlying representation, similar to a gene that stores the unique representation of a living being. This representation or genotype is then converted into a physical representation that draws the LiveMorph. The physical representation is also referred to as phenotype. Separating the encoding of the representation from the actual representation is very important. It allows us to choose a genotype that can easily be exposed to modifications that are based on evolutionary rules. Purists may argue that the genotype should, as closely as possible, represent the genetic encoding of base pairs, and there clearly are valid reasons for doing so. I prefer to choose the genetic representation and the type of modification depending on what feels best for the application. The genotype for the LiveMorphs is a list of 13 integers that is set in the openCard handler and is represented as follows:<\/p>\n<pre><code class=\"livecode\">\"10,10,10,10,10,10,10,10,10,10,10,10,10\"\r\n<\/code><\/pre>\n<p>Using mutation, this is the default genotype from which all future generations are evolved:<\/p>\n<pre><code class=\"livecode\">function mutateGene pGene\r\n\r\nlocal tGene, tItem\r\n\r\n\/\/ Cycle through each inter in the genotype\r\n\r\nrepeat with tItem = 1 to the number of items in pGene\r\n\r\nif tItem is a number then\r\n\r\n\/\/ Mutate each integer and ensure the value is within a set range\r\n\r\nput min (max (item tItem of pGene + random (21) - 11, -50), 50) &amp; comma after tGene\r\n\r\nend if\r\n\r\nend repeat\r\n\r\nreturn tGene\r\n\r\nend mutateGene\r\n<\/code><\/pre>\n<p>We use min and max to restrict the values in the mutation. Using a more purist binary representation would remove the need for this limit at the mutation stage, allowing us to focus more on true evolutionary rules. You can also see that we only use mutation to change information between subsequent LiveMorphs. Evolution clearly provides other options that can be applied, for example, when genes from more than one organism are combined, but that is beyond the scope of this blog post.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/livecode.com\/wp-content\/uploads\/2015\/05\/stickperson.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-11323\" src=\"http:\/\/livecode.com\/wp-content\/uploads\/2015\/05\/stickperson.jpg\" alt=\"stickperson\" width=\"800\" height=\"130\" srcset=\"https:\/\/legacy.livecode.com\/wp-content\/uploads\/2015\/05\/stickperson.jpg 800w, https:\/\/legacy.livecode.com\/wp-content\/uploads\/2015\/05\/stickperson-300x48.jpg 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<p>We now have the functional mechanism to represent and change the genotype of our LiveMorphs. The next consideration should be to decide on how this genetic representation is transformed into the physical representation. We have a lot of freedom to consider how to generate the phenotype. In this example, I use the graphic of buttons to represent the phenotype of LiveMorphs:<\/p>\n<pre><code class=\"livecode\">on genotypeToPhenotype pBtn\r\n\r\nlocal tPhenotype, tGenotype, tX, tY\r\n\r\n\/\/ Get the gene that is to be translated into the graphical shape\r\n\r\nput the cGene of button pBtn into tGenotype\r\n\r\n\/\/ Get the location where the shape is to be placed\r\n\r\nput item 1 of the location of button pBtn into tX\r\n\r\nput item 2 of the location of button pBtn into tY\r\n\r\nput tX &amp; comma &amp; tY &amp; return into tPhenotype\r\n\r\n\/\/ Create the first side of the phenotype\r\n\r\nrepeat with tItem = 1 to the number of items in tGenotype step 2\r\n\r\nput tX + item tItem of tGenotype &amp; comma &amp; tY + item tItem + 1 of tGenotype &amp; return after tPhenotype\r\n\r\nend repeat\r\n\r\nput line 1 of tPhenotype &amp; return after tPhenotype\r\n\r\n\/\/ Create the second side of the phenotype\r\n\r\nrepeat with tItem = 1 to the number of items in tGenotype step 2\r\n\r\nput tX - item tItem of tGenotype &amp; comma &amp; tY + item tItem + 1 of tGenotype &amp; return after tPhenotype\r\n\r\nend repeat\r\n\r\n\/\/ Ensure the shape is closed\r\n\r\nput line 1 of tPhenotype after tPhenotype\r\n\r\n\/\/ Display the shape\r\n\r\nset the points of graphic pBtn to tPhenotype\r\n\r\nend genotypeToPhenotype\r\n<\/code><\/pre>\n<p>The main operation lies in two repeat loops that cycle through the genotype. The first repeat loop generates one side of the visual representation and the second loop generates the other side of the visual representation. This gives us a symmetric phenotype, similar to most living beings we are used to seeing in real life.<\/p>\n<p>We now have the main building blocks for evolving LiveMorphs. Let us now add the remaining LiveCode sections that complete this application.<\/p>\n<p>The openCard handler initialises the environment and ensures that all operational components are available for when we use the application:<\/p>\n<pre><code class=\"livecode\">on openCard\r\n\r\nlocal tItem\r\n\r\n\/\/ Ensure that any past operation of this code are removed\r\n\r\nrepeat with tItem = 1 to the number of controls\r\n\r\ndelete control 1\r\n\r\nend repeat\r\n\r\n\/\/ Set the parameters of the templateButton for our use\r\n\r\nset the showName of templateButton to false\r\n\r\nset the height of templateButton to 200\r\n\r\nset the width of templateButton to 200\r\n\r\nset the width of this stack to 400\r\n\r\nset the height of this stack to 400\r\n\r\nset the style of templateGraphic to \"polygon\"\r\n\r\nset the opaque of templateGraphic to true\r\n\r\n\/\/ Create four buttons that are to display the LiveMorphs\r\n\r\nrepeat with tItem = 1 to 4\r\n\r\nnew button tItem\r\n\r\nnew graphic tItem\r\n\r\n\/\/ Add random colour to each LiveMorph being displayed\r\n\r\nset the backgroundColor of graphic tItem to random (50)\r\n\r\nend repeat\r\n\r\n\/\/ Place the buttons\r\n\r\nset the location of button \"1\" to 100,100\r\n\r\nset the location of button \"2\" to 300,100\r\n\r\nset the location of button \"3\" to 100,300\r\n\r\nset the location of button \"4\" to 300,300\r\n\r\n\/\/ Set up the default gene of each LiveMorph\r\n\r\nset the cGene of this card to \"10,10,10,10,10,10,10,10,10,10,10,10,10\"\r\n\r\nmouseUp\r\n\r\nend openCard\r\n<\/code><\/pre>\n<p>First, possible previous execution content of the application is removed. Default button information is then set up that allows the buttons to appear in the appropriate size to display graphical objects. Next, four buttons are created and placed in a grid, presenting us with the user interface for the application. At this point we also add a random colour that is part of the LiveMorph on the particular button. Finally, we add the default genetic representation of the LiveMorphs and tell the application to mutate this information, using the code we discussed earlier in this blog.<\/p>\n<p>The remaining section of code implements the selection of the parent whose gene is to move forward into the next generation to create new LiveMorphs. This is possibly the main aspect of the code as it provides part of the fitness function in which all LiveMorphs compete for selection. The user selects which LiveMorph is fit for selection by pressing the button of the LiveMorph that is visually most appealing. After selection, the gene of the chosen LiveMorph is used to create the next generation of four LiveMorphs from which yet again a new parent can be selected for mutation. This feature is implemented in a mouseUp handler as follows:<\/p>\n<pre><code class=\"livecode\">on mouseUp pButton\r\n\r\nlocal tBtn, tParentGene\r\n\r\nif target begins with \"graphic\" then exit mouseUp\r\n\r\nput the cGene of target into tParentGene\r\n\r\nrepeat with tBtn = 1 to 4\r\n\r\nset the cGene of button tBtn to mutateGene (tParentGene)\r\n\r\ngenotypeToPhenotype tBtn\r\n\r\nend repeat\r\n\r\nend mouseUp\r\n<\/code><\/pre>\n<p>This blog introduces an interesting aspect of Artificial Intelligence, using keywords that allow you to explore this field further in an appropriate Internet search engine. I also hope that the code demonstrated here is sufficiently short to allow you to make your own modifications and generate customized LiveMorphs with much altered properties.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Evolution and natural selection are fundamental principals on which science bases the existence and origin of all natural living beings. The fundamental rules of this process are very simple but provide a vastly powerful means by which adaptation to a particular environment can take place. Evolution is covered to varying depths in biology text books,<\/p>\n","protected":false},"author":6,"featured_media":11319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[45],"tags":[],"class_list":["post-11304","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"_links":{"self":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/11304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/comments?post=11304"}],"version-history":[{"count":14,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/11304\/revisions"}],"predecessor-version":[{"id":11328,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/posts\/11304\/revisions\/11328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/media\/11319"}],"wp:attachment":[{"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/media?parent=11304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/categories?post=11304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/legacy.livecode.com\/wp-json\/wp\/v2\/tags?post=11304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}