How to make bitmap editor (plot a family tree)

p5.js Project Guidance
5

here is an example to get you started (processing, not p5.js)


// input family tree

// point data in a list
ArrayList<PVector> listPVectors = new ArrayList();
boolean showRect=true;

// -------------------------------------------------------------------------------

void setup() {
  size(1900, 1000);
  rectMode(CENTER);
}//func

void draw() {
  background(255); // white

  // show help text
  fill(0); // black
  text("Click mouse to set an ancestor.\nBackspace to remove last. Space Bar - dump. Return - toggle view (rects or only points).", 17, 17);

  // show list
  for (PVector pv : listPVectors) {
    stroke(0); // black
    noFill();  // no filling

    // rect and/or point
    if (showRect)
      rect(pv.x, pv.y, 4, 4);
    point(pv.x, pv.y);
  }//for
}//func

// ------------------------------------------------------------------------
// Inputs

void mousePressed() {
  // store point
  listPVectors.add (new PVector(mouseX, mouseY));
}//func

void keyPressed() {
  if (key==' ') {
    // space bar
    // dump
    println("--- " + listPVectors.size() + " entries. --- ");
    for (PVector pv : listPVectors) {
      println(pv.x+","+pv.y);
    }//for
  } else if (key==BACKSPACE) {
    // delete last
    if (listPVectors.size()>0) {
      listPVectors.remove(listPVectors.size()-1);
    }
  } else if (key==ESC) {
    // kill ESC
    key=0; // kill ESC
  } else if (key==RETURN||key==ENTER) {
    // toggle
    showRect=
      ! showRect; //
  }
}//func
//
1 Like