Voronoi, controlP5 and toxi's gradient

sinanatra

Hi, i posted a different questions some days ago and i drastically changed what i'm doing. First things first: I'm trying to use controlP5 but it overlaps the sketch, and it makes it impossible to work with it. I would like to have it above it (creating a sort of different container for my sketch), but i'm lost. I was then thinking to have a sort of .png black and white gradient as a background to create an effect similar to the grayscott examples in toxi, in which it changes the size of the stroke. Could you please help me? i'm lost with controlP5, and for the gradient map i just need some advise on how to make it. Thanks, this is the code i'm working on:

int fontend = 8;
int nchars = 0;
boolean record; 
PVector object;
// change this for grid size
int gridSize = 15;
import processing.pdf.*; 
import toxi.geom.*;
import toxi.geom.mesh2d.*;
import toxi.util.*;
import toxi.util.datatypes.*;
import toxi.processing.*;
import controlP5.*;
ControlP5 cp5;
int sliderValue = 100;
Slider abc;
void setup() {
  size(400, 800, P3D);

  cp5 = new ControlP5(this);
  cp5.addSlider("slider")
    .setPosition(10, 10)
    .setSize(100, 20)
    .setRange(15, 50)
    .setValue(15);


  if (record) {
    beginRecord(PDF, "frame-####.pdf");
  }
  object = new PVector(random(width), random(height));
  setupVoronoi(); // create your voronoi generator
}
void draw() {
  //noLoop();
  beginRaw(PDF, "output.pdf");
  //glued to grid
  if (mousePressed) {
    object.x = mouseX;
    object.y = mouseY;
    object.x = int(object.x/gridSize)*gridSize;
    object.y = int(object.y/gridSize)*gridSize;
    drawPoint(object.x, object.y, 1, 1);
    if (key == '3')
      drawPoint(object.x, object.y, 1, 1);
    if (key == '5') {
      for (int k=0; k<400-1; k++) {
        k +=10;
        drawPoint(300, k, 1, 1);
      }
    }
  }
  int centerLimit = 250; // variable to control the diameter of the spiral
  int theta = 0; //increases with every point in your spiral, producing the spiral effect.
  if (key == '4') {
    theta=0; //reset theta 
    for (int k=0; k<centerLimit; k++) {     
      theta +=1;
      //One spiral in center with large-ish shapes
      drawPoint(object.x, object.y, 3*theta/2, 3*theta/2);
    }
  }

  drawVoronoi(); //renders
  endRaw();
}
// into grid
void mouseDragged() {
  object.x = mouseX;
  object.y = mouseY;
  object.x = int(object.x/gridSize)*gridSize;
  object.y = int(object.y/gridSize)*gridSize;
  drawPoint(object.x, object.y, 1, 1);
}
void keyPressed() {
  // unorganic
  if (key == '1')
    drawPoint(mouseX, mouseY, 1, 1);
}
void drawPoint(float orgX, float orgY, float theta, float diameter) { // generates and adds circular points
  float xPos = sin(theta)*diameter+orgX;
  float yPos = cos(theta)*diameter+orgY;
  voronoi.addPoint(new Vec2D(xPos, yPos));
}
// ranges for x/y positions of points
FloatRange xpos, ypos;
// helper class for rendering
ToxiclibsSupport gfx;
// empty voronoi mesh container
Voronoi voronoi = new Voronoi(100000);
// optional polygon clipper
PolygonClipper2D clip;
// switches
boolean doShowPoints = true;
boolean doShowDelaunay;
boolean doClip;
boolean doSave;
void setupVoronoi() {
  smooth();
  // focus x positions around horizontal center (w/ 33% standard deviation)
  xpos=new BiasedFloatRange(0, width, width/2, 0.333f);
  // focus y positions around bottom (w/ 50% standard deviation)
  ypos=new BiasedFloatRange(0, height, height, 0.5f);
  // setup clipper with centered rectangle
  clip=new SutherlandHodgemanClipper(new Rect(width*0.125, height*0.125, width*0.75, height*0.75));
  gfx = new ToxiclibsSupport(this);
  textFont(createFont("SansSerif", 10));
}
void drawVoronoi() {
  if (doSave) {
    saveFrame("voronoi-" + DateUtils.timeStamp() + ".png");
  }
  //rect(0, 0, width, height);
  background(0);
  stroke(255); 

  strokeWeight(1); 
  // stroke(0);
  noFill();
  // draw all voronoi polygons, clip if needed
  for (Polygon2D poly : voronoi.getRegions()) {
    if (doClip) {
      gfx.polygon2D(clip.clipPolygon(poly));
    } else {
      gfx.polygon2D(poly);
    }
  }
  // draw delaunay triangulation
  if (doShowDelaunay) {
    stroke(0);
    fill(0);
    beginShape(TRIANGLES);
    for (Triangle2D t : voronoi.getTriangles()) {
      gfx.triangle(t, false);
    }
    endShape();
  }
  // draw original points added to voronoi
  if (doShowPoints) {
    fill(255);
    for (Vec2D c : voronoi.getSites()) {
      ellipse(c.x, c.y, 10, 10);
    }
  }
  if (doSave) {
    endRecord();
    doSave = false;
  }
}
/// SLIDER ///
void slider(float sizer) {
  gridSize = int(sizer);
  println("changing grid to: "+sizer);
}

jeremydouglass

This is not specific to controlP5, but it sounds like perhaps you want to create a HUD -- a controls region, and a display region, and draw to them separately? If so see for example these threads:

https://forum.processing.org/two/discussion/comment/101075/#Comment_101075