Make Circles Look "Fuzzy/Furry"

Processing Coding Questions
1

Hello!

First I want to thank everybody who helped me on my last question, I really appreciated it! I’m still working on my class project and I’m stuck at where it asks me to make the circles look “fuzzy” or “furry” like the Tribbles in Star TREK.

I tried the filter option but since there is a lag on it, I imagine it could be very inconvenient? I also tried playing with the “opaqueness” but then the time movement I set up becomes more unnoticeable.

I reached out to my professor and he suggested the below:

"There are basically infinite ways you could do this, but one way I tell folks is to draw six lines similar to this:

  \  |  /
    \|/
    /|\
  /  |  \

And draw an ellipse on top of that, that will at least give you some little stubbles coming out of the ellipse to simulate fuzziness."

But I thought there might be a better way… Can anybody help me?

Tribble[] tribble = new Tribble[200];
color tColor = color( random(255),random(255),random(255) );

void setup() {
  size(400, 400);
  background(255);
  frameRate(30);
  for (int i = 0; i < tribble.length; i++) {
    tribble[i] = new Tribble(random(0, 400), random(0, 400));
  }
}

void draw() {
  background(255);
  tribble[(int)random(tribble.length)].excited();
  for (int i=0; i<tribble.length; i++) {
    tribble[i].display();
  }
}


class Tribble {
  float xPos, yPos;
  int start;
  float time;
  int offset;
  boolean wakeup;


  Tribble(float x, float y) {
    xPos = x;
    yPos = y;
  }

  //excited
  void excited() {
    time = (frameCount/60) % 9;
    if (time >= 4 && time < 6) xPos += random(-1, 1);
  }

  //tribbles
  void display() {
    ellipseMode(CENTER);
    noStroke();
    fill(tColor,50);
    ellipse(xPos, yPos, 30, 30);
  }
}
1 Like
2

First off, a very important distinction that we must clear up: Tribbles are from Star Trek, not Star Wars! :wink:

Now that we have that out of the way, I also want to agree with your professor: there are a million different ways to do this, and which approach you take depends more on you than it does on anything else.

So what I recommend doing is taking a step back, getting out a piece of paper and a pencil, and drawing out by hand some tribbles that show the effect you’re going for.

Then try breaking your process down into smaller steps. Pretend you have a friend who has never heard of tribbles before. They have no idea what they look like. Could you write a series of steps that this friend could follow in order to draw a tribble?

When you have those steps written down, that’s an algorithm that you can start thinking about implementing with code.

I’d also recommend starting simpler, with just one tribble. Try to narrow your problem down to a MCVE that just does one thing.

Sounds like a fun project, good luck!

2 Likes
3

Kevin,

Please excuse my ignorance! I have gone and cleared that up.

I will try to retackle the program by starting over… Playing with “class” had taken a lot from me so I am definitely a little scared! Hopefully I can get this down!

If anyone else has any suggestions on what code to add to my existing one - please help!

Thank you all in advance!

4

If you feel uncomfortable playing with the class, put it to the side for a bit and create a new separate processing sketch to make your tests in. I personally don’t like to go straight to making a class for each sketch, you can start super basic using just normal functions, and layer ideas bit by bit.

To get you started, here’s my thought process that you can emulate:

test
test.jpg400×700 37.9 KB 

//Fuzzy sketch written as a demonstration of
//generating/sketching ideas 

float radius = 50;

void setup() {
  size(400, 700);
  noLoop();
}

void draw() {
  background(255);
  //Move origin to center
  translate(width/2, radius+25);

  //Testing ideas out, uncomment one by one to check
  stroke(0);
  ellipse(0, 0, radius*2, radius*2);
  idea1();
  translate(0, 2*radius+25);
  idea2();
  translate(0, 2*radius+25);
  idea3();
  translate(0, 2*radius+25);
  idea4();

  //saveFrame("output/test.png");
}
void idea1() {
  stroke(0, 50);
  for (int i = 0; i < 1500; i++) {
    float angle = random(TWO_PI);
    PVector vec = new PVector(cos(angle), sin(angle));
    PVector vecScaled = vec.copy().mult(random(15)+random(radius));
    vec=vec.mult(radius+random(0, random(25)));
    line(vecScaled.x, vecScaled.y, vec.x, vec.y);
  }
}

void idea2() {
  beginShape();
  stroke(0, 250);
  noFill();
  for (int i = 0; i < 150; i++) {
    float angle = random(TWO_PI);
    float r = random(radius-10, radius);
    curveVertex(r*cos(angle), r*sin(angle));
  }
  endShape();
}
void idea3() {

  for (int j = 0; j < 500; j++) {
    beginShape();
    stroke(0, 100);
    noFill();
    for (int i = 0; i < 4; i++) {
      float angle = random(TWO_PI);
      float r = random(0, radius);
      curveVertex(r*cos(angle), r*sin(angle));
    }
    endShape();
  }
}

void idea4() {
  stroke(0, 50);
  for (int i = 0; i < 1500; i++) {
    float angle = random(TWO_PI);
    ArrayList<PVector> pointsList = new ArrayList<PVector>();
    PVector vec = new PVector(cos(angle), sin(angle));
    PVector vecScaled = vec.copy().mult(random(radius));
    vec=vec.mult(radius);
    pointsList.add(vec);
    pointsList.add(vecScaled);
    pointsList.add(new PVector(cos(angle+0.25), sin(angle+0.25)).mult(random(15)+random(radius)));
    pointsList.add(new PVector(cos(angle+0.25), sin(angle+0.25)).mult(random(15)+random(radius)));
    beginShape();
    for (PVector p : pointsList) {
      curveVertex(p.x, p.y);
    }
    endShape();
    //line(vecScaled.x, vecScaled.y, vec.x, vec.y);
  }
}

void keyPressed() {
  redraw();
}

Can you start to build on top of this? Figure out an aesthetic that you like, then adapt whatever you made back into your Tribble class.

2 Likes
5

A related approach is to draw a regular polygon (almost a circle, with a lot of sides:

…and then randomize the placement of each point – as an operation on the radius, or by drifting each x / y independently.

So if the tutorial example looks like this:

    float sx = x + cos(a) * radius;
    float sy = y + sin(a) * radius;
    vertex(sx, sy);

Then yours might look something like this:

    float sx = x + cos(a) * (radius + pulse) + random(shake) - shake/2;
    float sy = y + sin(a) * (radius + pulse) + random(shake) - shake/2;
    vertex(sx, sy);

Notice that playing around with parameters makes a big difference in the visual output – all eight of these outputs were produced by passing arguments to the same basic polygon function and varying the amount of random radius pulsing or shaking.

Tribbles--screenshot2
Tribbles--screenshot2.png512×934 114 KB

1 Like