一步步教你创建遗传算法可视化程序

见解分享

2024-02-03 18:58:10

探索遗传算法：进化世界的强大优化工具

遗传算法 (GA) 是一种革命性的优化技术，汲取了生物进化的灵感，帮助你破解复杂问题的难题，即使你对问题的具体解法一无所知。它通过模仿自然选择的过程，让一组解决方案不断进化，直到找到一个符合要求的答案。

揭秘遗传算法

GA 的运作方式就像一场模拟的自然竞赛。它首先生成一组随机的解决方案，称为个体。每个个体都被赋予一个适应度分数，衡量其与目标解决方案的相似程度。然后，根据适应度，选择最优的个体。

这些佼佼者随后进行“交配”和“变异”，就像生物世界中的父母一样。交配将它们的遗传物质融合在一起，产生新的个体，而变异则引入随机变化，保持进化进程的多样性。

随着世代的推移，个体不断进化，适应度逐渐提高。最终，GA 会找到一个个体，与目标解决方案非常接近，甚至完全匹配。

编写你的遗传算法程序

为了深入了解 GA，让我们动手编写一个可视化程序。这个程序将显示一组随机字符串不断进化，直到其中一个与目标字符串完全一致。

代码示例：

// 生成随机字符串
function generateRandomString(length) {
  let result = "";
  for (let i = 0; i < length; i++) {
    let randomNumber = Math.random() * 26;
    let letter = String.fromCharCode(65 + randomNumber);
    result += letter;
  }
  return result;
}

// 计算适应度
function calculateFitness(string) {
  const targetString = "TARGET_STRING";
  const levenshteinDistance = Levenshtein.distance(string, targetString);
  const fitness = 1 / (levenshteinDistance + 1);
  return fitness;
}

// 选择最佳字符串
function selectBestString(strings) {
  let totalFitness = 0;
  for (let i = 0; i < strings.length; i++) {
    totalFitness += strings[i].fitness;
  }

  let randomFitness = Math.random() * totalFitness;
  let currentFitness = 0;
  for (let i = 0; i < strings.length; i++) {
    currentFitness += strings[i].fitness;
    if (currentFitness >= randomFitness) {
      return strings[i];
    }
  }
}

// 交配和变异
function crossover(string1, string2) {
  const crossoverPoint = Math.floor(Math.random() * string1.length);
  const newString1 = string1.substring(0, crossoverPoint) + string2.substring(crossoverPoint);
  const newString2 = string2.substring(0, crossoverPoint) + string1.substring(crossoverPoint);
  return [newString1, newString2];
}

function mutate(string) {
  const mutationPoint = Math.floor(Math.random() * string.length);
  const randomNumber = Math.random() * 26;
  const newLetter = String.fromCharCode(65 + randomNumber);
  const newString = string.substring(0, mutationPoint) + newLetter + string.substring(mutationPoint + 1);
  return newString;
}

// 可视化
function visualize(strings) {
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");

  context.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < strings.length; i++) {
    context.fillStyle = "rgb(" + (255 - i * 255 / strings.length) + ", 0, 0)";
    context.fillText(strings[i], 10, 10 + i * 20);
  }
}