html 有丝分裂模拟。使用p5.js库。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 有丝分裂模拟。使用p5.js库。相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8" />

<script src="libraries/p5.js"></script>

<!--
Based on:
https://github.com/shiffman/Video-Lesson-Materials/tree/master/10_minute_challenges/Mitosis_p5.js
https://www.youtube.com/watch?v=WpUnYfVmKdA&feature=youtu.be&t=5508
-->

<script>

var cells = [];

function setup() {
  createCanvas(896, 504);
  for (i = 0; i < 300; i++) {
    cells.push(new Cell());
  }
}

function draw() {
 background(250);
 for (var j = 0; j < cells.length; j++) {
   cells[j].move();
   cells[j].show();
 }
 textSize(20);
 fill(0);
 text('Click on Cells', 30, 30);
}

function mousePressed() {
  for (var k = cells.length-1; k >= 0; k--) {
    if (cells[k].clicked(mouseX, mouseY)) {
      cells.push(cells[k].mitosis());
      cells.push(cells[k].mitosis());
      cells.splice(k, 1);
    }
  }
}

function Cell(pos, r, c) {
  if (pos) {
    this.pos = pos.copy();
  } else {
    this.pos = createVector(random(100, 796), random(100, 404));
  }
  this.r = 60;
  this.c = c || color(random(0, 127), random(0, 127), random(0, 127), 60);
  stroke(random(0, 127), random(0, 127), random(0, 127), 5);
  strokeWeight(7);
  this.clicked = function(x, y) {
    var d = dist(this.pos.x, this.pos.y, x, y);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }
  this.mitosis = function() {
    var cell = new Cell(this.pos, this.r*0.8, this.c);
    return cell;
  }
  this.move = function() {
    this.pos.x = this.pos.x + random(-6, 6);
    this.pos.y = this.pos.y + random(-3, 3);
  }
  this.show = function() {
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.r, this.r)
  }
}

</script>

</head><body> </body></html>

以上是关于html 有丝分裂模拟。使用p5.js库。的主要内容，如果未能解决你的问题，请参考以下文章

难点仔细看有丝分裂和减数分裂图像识别与题型分析

专治减数分裂各种不会！有丝分裂和减数分裂图像识别及有关题型的分析归类！

细胞分裂的时间

html P5 HTML。使用p5.js库。

[敲重点]减数分裂图像识别及分裂异常情况分析

html 动画标题图像。使用p5.js库。