How do I properly implement my mutation function? - neural-network

Question

I am implementing a simple genetic algorithm and everything works fine but I found that something is going wrong with the mutation function. I set the weights and biases of the agent's neural network to be identical to the fittest agent in the generation and then applied a mutation but all the agents are moving identically.
You can run my web app for yourself on this online p5 editor sketch: https://editor.p5js.org/aideveloper/sketches/Ot-SA1ulw
Can someone please help me understand what my mutation function is doing wrong?
agent.js:
class Agent {
constructor(args) {
this.x = args.x
this.y = args.y
this.color = args.color
this.weights = []
this.biases = []
this.lost = false
for(let i = 0; i < args.layers.length-1; i++)
this.weights.push([...new Array(args.layers[i+1])].map(() => [...new Array(args.layers[i])].map(() => random(-1, 1))))
for(let i = 0; i < args.layers.length-1; i++)
this.biases.push([...new Array(args.layers[i+1])].map(() => random(-1, 1)))
}
predict(x) {
let y = x
for(let i = 0; i < this.weights.length; i++) {
let hidden = [...new Array(this.weights[i].length)]
for(let j = 0; j < this.weights[i].length; j++) {
hidden[j] = 0
for(let k = 0; k < this.weights[i][j].length; k++)
hidden[j] += this.weights[i][j][k] * y[k]
hidden[j] += this.biases[i][j]
hidden[j] = 1 / (1 + Math.exp(-hidden[j]))
}
y = hidden
}
return y
}
mutate(rate=0.1) {
for(let i = 0; i < this.weights.length; i++) {
for(let j = 0; j < this.weights[i].length; j++) {
if(Math.random() < rate)
this.biases[i][j] += random(-1, 1)
for(let k = 0; k < this.weights[i][j].length; k++) {
if (Math.random() < rate)
this.weights[i][j][k] += random(-1, 1)
}
}
}
}
}
sketch.js:
const speed = 5
const n = 2000
let fittest_agent = null
let agents = []
let generation = 1
function setup() {
createCanvas(window.innerWidth, window.innerHeight)
for (let i = 0; i < n; i++) {
agents.push(new Agent({
x: 20,
y: window.innerHeight/2,
color: color(
Math.random() * 255,
Math.random() * 255,
Math.random() * 255
),
layers: [2, 10, 10, 1]
}))
}
fittest_agent = agents[0]
document.querySelector('#controls button').addEventListener('click', () => {
reproduce()
generation += 1
document.querySelector('#controls h1').textContent = `Generation: #${generation}`
})
}
function draw() {
noStroke()
background(255)
for (let i = 0; i < n; i++) {
fill(agents[i].color)
ellipse(agents[i].x, agents[i].y, 30, 30)
if(!agents[i].lost) {
let a = agents[i].predict([agents[i].x, agents[i].y])
agents[i].x += speed * cos(a * 100000)
agents[i].y += speed * sin(a * 100000)
}
fittest_agent = agents[i].x > fittest_agent.x ? agents[i] : fittest_agent
document.querySelector('#controls div').outerHTML = `<div id="fittest" style="background-color:rgb(${fittest_agent.color.levels[0]},${fittest_agent.color.levels[1]},${fittest_agent.color.levels[2]})"></div>`
document.querySelector('#controls span').textContent = Math.ceil(fittest_agent.x)
if(agents[i].x+15>window.innerWidth/4 && agents[i].x-15<window.innerWidth/4+30 && agents[i].y-15<window.innerHeight*2/3)
agents[i].lost = true
if(agents[i].x+15>window.innerWidth/2 && agents[i].x-15<window.innerWidth/2+30 && agents[i].y+15>window.innerHeight/3)
agents[i].lost = true
if(agents[i].x+15>window.innerWidth*3/4 && agents[i].x+15<window.innerWidth*3/4+30 && agents[i].y-15<window.innerHeight*2/3)
agents[i].lost = true
if(agents[i].x<15)
agents[i].lost = true
if(agents[i].y<15)
agents[i].lost = true
if(agents[i].x+15>window.innerWidth)
agents[i].lost = true
if(agents[i].y+15>window.innerHeight)
agents[i].lost = true
}
fill(135, 206, 235)
rect(window.innerWidth/4, 0, 30, window.innerHeight*2/3)
rect(window.innerWidth/2, window.innerHeight/3, 30, window.innerHeight*2/3)
rect(window.innerWidth*3/4, 0, 30, window.innerHeight*2/3)
}
function reproduce() {
agents.map(agent => {
agent.x = 20
agent.y = window.innerHeight/2
agent.lost = false
agent.weights = fittest_agent.weights
agent.biases = fittest_agent.biases
agent.color = color(random() * 255, random() * 255, random() * 255)
agent.mutate()
return agent
})
}
This is a visual representation of the issue:

Answer 1

The problem is in reproduce() function - you assign a reference to fittest agent's weights/biases array to new agent's weights/biases and all agents finally have same "brain". You should create a deep copy of fittest agent's weights/biases first and then assign it to agent.
function reproduce() {
agents.map(agent => {
// other code
agent.weights = deepCopy(fittest_agent.weights)
agent.biases = deepCopy(fittest_agent.biases)
// other code
}
}
function deepCopy(arr) {
// your implementation
}
You can use for ex. cloneDeep from lodash library.