Blobber

Blob b;

​

int frameCounter;

PImage bg;

​

ArrayList<Meter> meters;

Meter mNoiseSpeed, mGrowthSpeed, mPoints, mNoiseRadius, mAnimRadius, mAnimSpeed;

Meter activeMeter;

ColorChooser chInnerHue, chOuterHue;

float meterRadius = 40;

​

boolean showViz = false;

boolean showText = false;

boolean showHUD = true;

​

Button testButton;

​

void setup() {

  size(1280, 720); // 720p HD

  //fullScreen();

  colorMode(HSB, 360, 100, 100, 100);

  background(0, 0, 0, 100);

  noiseSeed(93);

  frameCounter = 0;

  createBlob();

  bg = loadImage("bg1.png");

  setupMeters();

}

​

void setupMeters() {

  meters = new ArrayList<Meter>();

​

  float meterY = meterRadius;

  float meterX = meterRadius;

  float mSpace = meterRadius * 0.5;

​

  mNoiseSpeed = new Meter(meterX, meterY, meterRadius);

  mNoiseSpeed.name = "NOISE\nSPEED";

  mNoiseSpeed.value = b.noiseSpeed;

  meters.add(mNoiseSpeed);

  meterY += meterRadius + mSpace;

​

  mNoiseRadius = new Meter(meterX, meterY, meterRadius);

  mNoiseRadius.name = "NOISE\nRADIUS";

  mNoiseRadius.value = b.noiseSpeed;

  meters.add(mNoiseRadius);

  meterY += meterRadius + mSpace;

​

  mGrowthSpeed = new Meter(meterX, meterY, meterRadius);

  mGrowthSpeed.name = "GROWTH\nSPEED";

  mGrowthSpeed.value = b.growthSpeed;

  meters.add(mGrowthSpeed);  

  meterY += meterRadius + mSpace;

​

  mPoints = new Meter(meterX, meterY, meterRadius);

  mPoints.name = "POINTS";

  mPoints.value = b.points;

  meters.add(mPoints);

  meterY += meterRadius + mSpace;

​

  mAnimRadius = new Meter(meterX, meterY, meterRadius);

  mAnimRadius.name = "ANIM\nRADIUS";

  mAnimRadius.value = b.animSpeed;

  meters.add(mAnimRadius);

  meterY += meterRadius + mSpace;

​

  mAnimSpeed = new Meter(meterX, meterY, meterRadius);

  mAnimSpeed.name = "ANIM\nSPEED";

  mAnimSpeed.value = b.animSpeed;

  meters.add(mAnimSpeed);

  meterY += meterRadius + mSpace;

  meterY += meterRadius + mSpace;

​

  chInnerHue = new ColorChooser(meterX, meterY, meterRadius);

  chInnerHue.name = "INNER\nHUE";

  chInnerHue.value = b.innerHue;

  meters.add(chInnerHue);

  meterY += meterRadius + mSpace;

​

  chOuterHue = new ColorChooser(meterX, meterY, meterRadius);

  chOuterHue.name = "OUTER\nHUE";

  chOuterHue.value = b.outerHue;

  meters.add(chOuterHue);

  meterY += meterRadius + mSpace;

​

  activeMeter = null;

}

​

void draw() {

  fill(0, 0, 85, 100);

  noStroke();

  rect(0,0,width, height);

  image(bg, 0, 0, width, height);

  b.drawBlob();

​

  if (showText) printBlobInfo(b);

  if (showViz) visualizeAppearance(b);

  if (showHUD) displayMeters();

​

  frameCounter++;

}

​

void displayMeters() {

  fill(0, 0, 100, 20);

  stroke(0,0,0,10);

  rect(-5, -5, 155, height + 5);

  for (Meter m : meters) {

    m.update();

    m.display();

  }

​

​

  // Input from meters

  if (mNoiseSpeed.changed) b.noiseSpeed = mNoiseSpeed.value;

  if (mGrowthSpeed.changed) b.growthSpeed = mGrowthSpeed.value;

  if (mPoints.changed) b.points = int(mPoints.value);

  if (mNoiseRadius.changed) b.noiseRadius = int(mNoiseRadius.value);

  if (mAnimRadius.changed) b.animRadius = int(mAnimRadius.value);

  if (mAnimSpeed.changed) b.animSpeed = int(mAnimSpeed.value);

​

  if (chInnerHue.changed) b.innerHue = chInnerHue.value;

  if (chOuterHue.changed) b.outerHue = chOuterHue.value;

​

}

​

void createBlob() {

  b = new Blob();

  b.pos.x = width * 0.5;

  b.pos.y = height * 0.5;

  b.randomizeAppearance();

}

​

void mouseReleased() {

  for (Meter m : meters) {

    m.deactivate();

  }

  activeMeter = null;

}

​

void keyPressed() {

  if (key == 'r') {

    reset();

  }

​

  if (key == 'h') {

    showHUD = !showHUD;

  }

​

  if (key == 'v') {

    showViz = !showViz;

  }

}

​

void reset() {

  background(0, 0, 100, 100);

  frameCounter = 0;

  b.randomizeAppearance();

  setupMeters();

}

​

void visualizeAppearance(Blob b) {

  float vizWidth = 300;

  float hWidth = vizWidth / 2;

​

  noFill();

  stroke(0, 0, 30, 30);

  pushMatrix();

  translate(width - (hWidth + 30), hWidth + 30);

  ellipse(0,0, vizWidth * 0.05, vizWidth * 0.05);

  PVector animPos = new PVector();

  float animR = map(b.animRadius, 0, 255, 0, hWidth);

  animPos.x = cos(radians(b.animDegree)) * animR;

  animPos.y = sin(radians(b.animDegree)) * animR;

  float nrr = vizWidth * map(b.noiseRadius, 0, 255, 0.01, 0.06);

  ellipse(0, 0, animR * 2, animR * 2);

  ellipse(animPos.x, animPos.y, nrr, nrr);

  line(0,0, animPos.x, animPos.y);

​

  popMatrix();

}

​

​

// Helper functions

​

String fd(float val) {

  return String.format("%.4f", val);

} 

​

class Blob {

  PVector pos;

  int shapes;

​

  // Appearance

  PVector centerNoisePos, frameNoisePos;

  float animRadius, animDegree;

  float noiseRadius, noiseSpeed;

  float growthSpeed, growthValue, growthCounter, blobRadius;

  float animSpeed;

  int points;

​

  float innerHue;

  float outerHue;

​

  color innerColor;

  color outerColor;  

​

  Blob() {

    pos = new PVector(random(width), random(height));

​

    //Counters

    animDegree = 0;

    growthCounter = 0;

    shapes = 0;

​

    //Appearance    

    points = 64;

    blobRadius = height * 0.65;    

    growthSpeed = 0.025;

​

    noiseSpeed = 0.01;

    noiseRadius = 0.8;

    animRadius = 0.6;

    animSpeed = 150;

    centerNoisePos = new PVector(500, 400);

    frameNoisePos = new PVector(0, 0);

​

    //Color

    innerHue = 20;

    outerHue = 340;

​

    setColors();

  }

​

  void drawBlob() {

    setColors(); 

​

    growthCounter = 0;

    shapes = 0;

​

    frameNoisePos.x = centerNoisePos.x + cos(radians(animDegree)) * map(animRadius, 0, 255, 0, 4);

    frameNoisePos.y = centerNoisePos.y + sin(radians(animDegree)) * map(animRadius, 0, 255, 0, 4);

​

    pushMatrix();

    translate(pos.x, pos.y);

​

    while (growthCounter < PI) {

      drawShape();

      growthCounter += map(growthSpeed, 0, 255, 0.004, 0.05);

    }

​

    animDegree += map(animSpeed, 0, 255, 0, 2);

    popMatrix();

  }

​

  void drawShape() {

    frameNoisePos.x += map(noiseSpeed, 0, 255, 0.001, 0.01);

    growthValue = sin(growthCounter);

    float shapeRadius = growthValue * blobRadius;

​

    float arcR = TWO_PI / points;

    PVector pointPos = new PVector();

​

    noFill();

    stroke(lerpColor(innerColor, outerColor, growthValue));

​

    beginShape();

​

    for (int i = 0; i < points; i++) {

      float noiseX = frameNoisePos.x + cos(i * arcR) * map(noiseRadius, 0, 255, 0.1, 1);      

      float noiseY = frameNoisePos.y + sin(i * arcR) * map(noiseRadius, 0, 255, 0.1, 1);      

​

      float noiseVal = noise(noiseX, noiseY);

      float r = noiseVal * shapeRadius;

​

      float rad = i * arcR;

      pointPos.x = cos(rad) * r;

      pointPos.y = sin(rad) * r;

​

      vertex(pointPos.x, pointPos.y);

    }

    endShape(CLOSE);

    shapes++;

  }

​

​

  void randomizeAppearance() {

    points = int(random(32, 255));

    growthSpeed = round(random(5, 100));

    noiseSpeed = round(random(255));

    noiseRadius = round(random(255));

​

    growthCounter = 0;

    centerNoisePos = new PVector(random(10000), random(10000));

    frameNoisePos = new PVector(0, 0);

    animRadius = round(random(255));

    animSpeed = round(random(30, 150));

    innerHue = random(360);

    outerHue = random(360);

  }

​

  void setColors() {

    innerColor = color(innerHue, 100, 100, 5);

    outerColor = color(outerHue, 50, 50, 10);

  }

​

  void reset() {

    setColors();

    growthCounter = 0;

    animDegree = 0;

  }

​

  String getBlobName() {

    String blobName = "x" + fd(b.centerNoisePos.x) + "y" + fd(b.centerNoisePos.y);

    blobName += "gs" + fd(b.growthSpeed) + "ns" + fd(b.noiseSpeed) + "nr" + fd(b.noiseRadius);

    blobName += "ar" + fd(b.animRadius);

    blobName = blobName.replace('.', '-');

    blobName = blobName.replace(',', '-');    

    return blobName;

  }

}

​

class Button {

    float buttonHue;

    float width = 100;

    float height = 30;

    String text = "BUTTON";

    PVector pos;

    Button() {

      buttonHue = 200;

      PVector size= new PVector(width / 2, height /2);

    }

    void display() {

      pushMatrix();

      translate(pos.x, pos.y);

      fill(buttonHue, 50, 50, 100);

      rect(0,0,width, height);

      popMatrix();

    }

}

​

class ColorChooser extends Meter {

  float maxVal = 360;

​

  ColorChooser(float _x, float _y, float _r) {

    super (_x, _y, _r);

  }

​

  void update() {

    changed = false;

    PVector mousePos = new PVector(mouseX, mouseY);

    if (mousePos.dist(pos) < radius / 2 && mousePressed) {

      if (!active && activeMeter == null) activate();

    }

​

    float pval = value;

​

    if (active) {

      value += (mouseX - pmouseX) + (pmouseY - mouseY);

      value = constrain(value, 0, maxVal);

    }

​

    if (pval != value) {

      changed = true;

    }

  }

​

  void display() {

    color fColor = color(value, 70, 100, 100);

    noStroke();

    pushMatrix();

    translate(pos.x, pos.y);

    fill(bgColor);

    ellipse(0, 0, radius, radius);

​

    fill(fColor);

​

    float end = start + (value / maxVal) * 360;

    arc(0, 0, radius - 1, radius - 1, radians(start), radians(end));

​

​

    stroke(bgColor);

    strokeWeight(1);

    noFill();

​

    float degree = 0;

    int seg = 10;

    for (int i = 0; i < seg; i++) {

      degree = start + (360 / seg) * i;

      float endX = cos(radians(degree)) * (radius - 1) / 2;

      float endY = sin(radians(degree)) * (radius - 1) / 2;

      line(0, 0, endX, endY);

    }

​

    fill(fColor);

    ellipse(0, 0, radius * (1 - thickness), radius * (1 - thickness));

​

    displayName();

    popMatrix();

  }

}

​

class Meter {

  PVector pos = new PVector();

  float value = 40;

  float maxVal = 255;

  float start = -90;

  color bgColor = color(0, 0, 70, 100);

  color mColor = color(200, 50, 100, 100);

  color aColor = color(100, 100, 100, 100);

​

  float radius;

  float thickness = 0.5;

  boolean active;

  boolean changed; 

​

  String name;

​

  Meter(float _x, float _y, float _r) {

    pos.x = _x;

    pos.y = _y;

    radius = _r;

    active = false;

    changed = false;

    name = "Untitled";

  }

​

  void update() {

    changed = false;

    PVector mousePos = new PVector(mouseX, mouseY);

    if (mousePos.dist(pos) < radius / 2 && mousePressed) {

      if (!active && activeMeter == null) activate();

    }

​

    float pval = value;

​

    if (active) {

      value += (mouseX - pmouseX) + (pmouseY - mouseY);

      value = constrain(value, 0, maxVal);

    }

​

    if (pval != value) {

      changed = true;

    }

  }

​

  void activate() {

    active = true;

    activeMeter = this;

  }

​

  void deactivate() {

    active = false;

  }

​

  void display() {

    noStroke();

    pushMatrix();

    translate(pos.x, pos.y);

    fill(bgColor);

    ellipse(0, 0, radius, radius);

​

    fill(map(value, 0, 255, 220, 200), 30, 100, 100);

    float end = start + (value / maxVal) * 360;

    arc(0, 0, radius - 1, radius - 1, radians(start), radians(end));

​

    fill(bgColor);

    ellipse(0, 0, radius * (1 - thickness), radius * (1 - thickness));

​

    stroke(bgColor);

    strokeWeight(1);

    noFill();

​

    float degree = 0;

    int seg = 10;

    for (int i = 0; i < seg; i++) {

      degree = start + (360 / seg) * i;

      float endX = cos(radians(degree)) * (radius - 1) / 2;

      float endY = sin(radians(degree)) * (radius - 1) / 2;

      line(0, 0, endX, endY);

    }

    displayName();

    popMatrix();

}

  void displayName() {

    textAlign(LEFT);

    fill(0,0,60,100);

    text(name, radius * 0.8, 0);

  }

}