Project项目

Genetics Algorithm Project TriangleOnly

Hello Everybody again! As you can see, I have been doing a lot of projects lately, and I finally decided to publish them today, and I promise more JS AI projects are coming!

Anyway, this project is basically using some number of triangles(for example 75 triangles) to try to match a picture

This project uses the genetics algorithm, which is a really cool AI algorithm that tries to mimic evolution
Basically, there are a lot of individuals in the beginning that carries a specific genes, and each gene expresses a different phenotype. Then, the individuals who performed well enough will be able to survive and reproduce with other individuals that survived.
However, if we only do this, it will cause a lot of problems, since the number of solutions is stuck at its original random population. The solution to this problems is by introducing mutations, which basically introduce new numbers and solutions to this system. If the mutation is good, the indiviual survives and the mutation continues. If the mutations is bad, the indiviual dies and the mutation would not be continued.
After a lot of generations, it will slowly reach the target gene, which will be the solution to the problem.



The mechanism in this problem

In this specific problem, the target is the picture, and the gene is the position, size, colors, and shapes of the triangles.
For each gene segments, it has 10 numbers (all 0-1), expressing one triangle.
[red,green,blue,alpha(transparency),x1,y1,x2,y2,x3,y3]

When reproducing from two indiviuals, the program will randomly select segments from both indiviuals(equal possibilties) to the new indiviual.
After the new individual is formed, it will experience the process of mutation, which basically for each number in the gene, it has a possibility to change in a certain range.

Finally, after lots of iterations(generations), the result will get closer and closer to the target(the picture).


Now for the interesting part! THE DEMO
You are allowed to choose one of the three pictures(chrome icon, the picture of Mona Lisa, or my own picture)
Note: The result will start to look alike at about 300 generations.



Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.




Generation 0
Fitness Value: 0%



The best result for my own picture is the picture below, it is only after about 3000 generations.



Now for the source code. The source code is in github, and the link is https://github.com/tiger927/TriangleOnly



CodeTiger
2018.11.9