How could I make my Mitosis cells explode?

JVE10

I am working on creating a mitosis cell that can split using a function rather than having to click on it. I want to try and create a ball that is in the centre of the screen and will split out in a radial fashion.

This is my Cell function

function Cell(pos, r, c){

if (pos) {
  this.pos = pos.copy();
} else {
  this.pos = createVector(700, 360, 700, 160);
}

this.r = r || 60;
this.c = c || color(random(100, 200), 0, random(100, 200), 100);

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() {
  this.pos.x += random(-10, 10);    
  var cell = new Cell(this.pos, this.r*0.8, this.c);
  return cell;
}

this.move = function () {
  var vel = p5.Vector.random2D();
  this.pos.add(vel);
}

this.show = function () {
    noStroke();
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.r, this.r)
}

}

Any help would be really appreciated. Thank you

JVE10

shiffman

maybe as a start use probability to cause the cells to split? You can pick a random number and determine if it is less that 0.01 for a 1% chance for example:

if (random(1) < 0.01) {
  // code for cells splitting
} 

Lord_of_the_Galaxy

Perhaps if you could find some animation that shows what you're trying to achieve, it would be easier to advise you.

JVE10

I couldn't find any example of what I wanted so I quickly storyboarded my idea. Thank you any help is very useful! So I want the ball to start as 1 and then explode sort of randomly and then cluster back into colour coded sections as shown below.

Thank you

Lord_of_the_Galaxy

I don't think actual mitosis acts as such, but this might be doable. I could do this in Processing (Java), but I haven't much knowledge of p5.js, sorry.

JVE10

If you could help me in processing that would be a lot better as I have been focusing more on processing than p5.js. I only used mitosis as an example as I followed Shiffmans tutorials on youtube. If you have any ideas of how to do it in processing it would be really helpful.

Thank you

Lord_of_the_Galaxy

First, a Cell class, as you already have. Now, this should have a "color" property.

Second, create an AraryList of arrays of Cells.

Here, things get complex. It depends on how nice you want your entire sketch to be. If a single "mitosis" is all you want, the solution is simple. If so -

• Your initial Cell doesn't even need to be a Cell object, just draw a circle in the center of the screen.
• When explosion occurs, add to the ArrayList three arrays of different colored cells.

Do this much and come back here. I'm trying to think about exactly what sort of explosion to cause, as you have given no details to the specific amounts of the different colored cells.

JVE10

Im only a beginner and its getting confusing. Here is what I have got in processing so far. I don't understand how to make it explode on its own rather than having to click it all the time. Thank you helping me.

Lord_of_the_Galaxy

The method to post code on this forum is to copy and paste it. But don't forget to format the code by pressing ctrl + o and leaving a line above and below it.

JVE10

Thank you

class Cell {
  PVector pos;
  float r;
  color c;

  Cell(PVector pos, float r, color c) {
    this.pos = pos.copy();
    this.r = r;
    this.c = c;
  }

  Cell() {
    this.pos  = new PVector(random(width), random(height));
    this.r = 60;
    this.c =  color(random(100, 255), 0, random(100, 255), 100);
  }


  boolean clicked(int x, int y) {
    float d = dist(this.pos.x, this.pos.y, x, y);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  Cell mitosis() {
    Cell cell = new Cell(this.pos, this.r*0.8, this.c);
    return cell;
  }

  void move() {
    PVector vel = PVector.random2D();
    this.pos.add(vel);
  }

  void show() {
    noStroke();
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.r, this.r);
  }
}

Lord_of_the_Galaxy

I need to think about this.

The problem lies in the sizes of the new cells. I'll think and tell you once I find a solution to create cells with a size distribution similar to your picture.

By this time tomorrow, probably.

JVE10

Thank you so much! this is going to be so helpful for my project. I really appreciate it!

Lord_of_the_Galaxy

I figured out an algorithm for producing random numbers in a particular distribution.

//I have no idea what to name it
float randomReducing(){
  float r = random(0, 1);
  float r2 = random(0, 1);
  if(r2 < sq(sq(1 - r)))return r;
  else return randomReducing();
}

JVE10

Where should it go? Im trying to post it here but nothing is happening. Its started getting really confusing, I'm still very new to processing.

class Cell {
  PVector pos;
  float r;
  color c;

  Cell(PVector pos, float r, color c) {
    this.pos = pos.copy();
    this.r = r;
    this.c = c;
  }

  float randomReducing(){
  float r = random(0, 1);
  float r2 = random(0, 1);
  if(r2 < sq(sq(1 - r)))return r;
  else return randomReducing();
}

  Cell() {
    this.pos  = new PVector(random(width), random(height));
    this.r = 60;
    this.c =  color(random(100, 255), 0, random(100, 255), 100);
  }


  boolean clicked(int x, int y) {
    float d = dist(this.pos.x, this.pos.y, x, y);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  Cell mitosis() {
    Cell cell = new Cell(this.pos, this.r*0.8, this.c);
    return cell;
  }

  void move() {
    PVector vel = PVector.random2D();
    this.pos.add(vel);
  }

  void show() {
    noStroke();
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.r, this.r);
  }
}

Lord_of_the_Galaxy

This should get you started:

Cell c;
Cell[] cs;
color[] colors = new color[]{#6666FF, #EE22FF, #FFBB44};
boolean done = false;

void setup() {
  size(500, 500);
  c = new Cell(new PVector(width/2, height/2), 100, colors[0]);
}

void draw(){
  background(255);
  if(done){
    for(Cell ct : cs){
      ct.move();
      ct.show();
    }
  }else{
    c.move();
    c.show();
  }
}

void mousePressed(){
  if(!done && c.clicked(mouseX, mouseY)){
    cs = c.mitosis();
    done = true;
  }
}  

Tab Cell:

class Cell {
  PVector pos;
  float r;
  color c;

  Cell(PVector pos, float r, color c) {
    this.pos = pos.copy();
    this.r = r;
    this.c = c;
  }

  Cell() {
    this.pos  = new PVector(random(width), random(height));
    this.r = 60;
    this.c =  color(random(100, 255), 0, random(100, 255), 100);
  }


  boolean clicked(int x, int y) {
    float d = dist(this.pos.x, this.pos.y, x, y);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  Cell[] mitosis() {
    ArrayList<Cell> cells = new ArrayList<Cell>(1);

    float mass = sq(r);

    while(mass > 0){
      float r = randomReducing() * this.r;
      mass -= sq(r);
      cells.add(new Cell(PVector.add(pos, PVector.random2D().mult(this.r/2)), r, colors[(int)random(colors.length)]));
    }

    Cell[] cells_temp = new Cell[cells.size()];
    cells.toArray(cells_temp);
    return cells_temp;
  }

  void move() {
    PVector vel = PVector.random2D();
    this.pos.add(vel);
  }

  void show() {
    noStroke();
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.r, this.r);
  }
}

//I have no idea what to name it
float randomReducing(){
  float r = random(0, 1);
  float r2 = random(0, 1);
  if(r2 < sq(sq(1 - r)))return r;
  else return randomReducing();
}

JVE10

Thank you, thats so helpful!

Lord_of_the_Galaxy

If you make any progress, be sure to post it here.

JVE10

I will do thank you for all the help so far.

Lord_of_the_Galaxy

Even better random number generator -

float randomBeta(){
  return randomBeta(2, 8);
}

float randomBeta(int a, int b){
  float x = random(0, 1);
  float y = random(0, 1);
  float bp = betaPDF(x, a, b)*0.2;
  if(y < bp)return x;
  else return randomBeta(a, b);
}

float betaPDF(float x, int a, int b){
  return pow(x, a-1)*pow(1-x, b-1)/B(a, b);
}

float B(int a, int b){
  return float(gamma(a)*gamma(b))/gamma(a+b);
}

int gamma(int n){
  return factorial(n - 1);
}

int factorial(int n){
  int r = 1;
  while(n > 0){
    r *= n;
    n--;
  }
  return r;
}

Lord_of_the_Galaxy

Replace randomReducing() (line 34) with randomBeta(), and add the new code to a new tab.

JVE10

Thank you, starting to look more like what i needed

Lord_of_the_Galaxy

In this random generator, most of the new circles will be 0.2-0.3 times the original circle's radius, but some will be medium or very small in size, with very few being very large.

But a question is - is it okay for the cells to overlap with each other? If so, the rest is possibly easy, otherwise, it is certainly difficult.

Have you made any progress?

JVE10

yes I was working on the idea of them slightly having an opacity sort of 80% maybe and yes they can overlap it gives a cool effect. I haven't made any major progress, just with the sizes. Im trying to find tutorials that I can follow to learn.

Lord_of_the_Galaxy

Okay, then each time the mitosis function is called, you need to check out every single new Cell and add it to some corresponding ArrayList<Cell>. If you don't know about arraylists I recommend reading about them - ArrayList reference

JVE10

Thank you, I will have a look into it