An APP that makes Design evolve automatically to fit users
A shape generator that uses Genetic Algorithm
Solo Project
March 2016 - May 2016
Could design evolve by itself?
Could design automatically fit user’s preference?
Designers are continuously devoting to create new design to satisfy user’s demands and preference, but we must admit that since everyone is different, so there does not exist one perfect design for everyone. However, what if design, like Darwin's theory of evolution, can evolve and update itself to fit users’ different demands? What if such a process happens even without being noticed? This project is more like a bold attempt, I try to apply genetic algorithm (GA) into visual design, and I create a simple APP prototype, but the result completely confirmed my very initial idea, design can indeed involve!
How to make design evolve automatically using genetic algorithm
Introduction of Your Shape
the prototype is written in processing, find the code at the bottom of the page
Genetic Algorithm (GA)
Inspired by Darwin’s Theory of evolution
inheritance
Inheritance is the ability of modeled objects to mate
Mutation
Mutation is a genetic operator used to maintain genetic diversity.
Selection
The son generation must inherit father generation’s feature
3 Key Elements in GA
Superformula
Genotype & Phenotype
In genetic algorithm, the genotype could be simple numbers, which will be delivered to next generation. On the other hand, the phenotype decides what the gene could be like. For a visual design or interface design, I believe color, shapes, sizes etc. could be of the importance, thus I have to figure out a way to link the genotype and phenotype and convert the data inherited from generation to generation into something visible. Then I found superformula, a math formula proposed by Johan Gielis around 2000, which can generate various kinds of shapes. So the formula becomes the phenotype of the genetic algorithm.
How to select?
How to apply the fitness function in the genetic algorithm?
In the genetic algorithm, we have to decide which genes could have more chance to pass to the next generation, and which ones could not. So could we stripe over this process? Because no one wants to waste much time on select their preference for too long.
My answer is that we might not be able to stripe over this necessary process, but we can make it happen without being noticed. According to the Gaze Bias Effect (clicked on to see the paper) made by Psychologists in University of California, San Diego, people in general gaze or look at things we like for longer time, so this might give us a perfect way to apply the fit function in the algorithm, the shapes that users gaze for longer time will get a higher fit score, thus they would have more chance to inherit to next generation.
Gaze Bias Analyse
Interface
Shape Number
Menu
Refresh
Generation Number
The shape is generated by superformula, and 6 parameters decide its shape, and another 6 parameters decide the RGB data of outside, and inside color
Save Image
The heat color is related to the fit function in the GA, the longer user stays in the image, the more red the heart color will be
Coding
I prototype the concept by making a fully functional program in processing (a Java library). The Genetic Algorithm is inspired by Daniel Shiffman's book "the nature of code". It did take me a long time to code this from scratch, but it is an effective learning process as well.
I open sourced all my code on Github, please visit my Github for more coding detail.
