How to make user-created drawings "vibrate?"

Programming Questions

gamerlion..

How to make user-created drawings "vibrate?"

in Programming Questions • 1 year ago

Hi there! My name is Arielle, and I'm a game design student. I'm currently taking a class called "Frontiers of Game Design," where we use Processing to make interactive art. I have a project due next week, and I decided to make a program called "Rainbow Squigglevision Maker." Basically, the user can draw within the canvas, akin to making a drawing in Microsoft Paint. The ellipses that make up the drawing have a random stroke and fill, and they will "vibrate" when drawn, which will give it a similar appearance to the "squigglevision" animation technique. The problem is, I don't know how to make the shapes continuously "vibrate" once they're drawn.

Here's what I have done so far:

Let the user draw small ellipses on the canvas when the mouse is pressed
Randomize the fill and stroke of each ellipse
Let the user "erase" their canvas (technically, turn it white) when the spacebar is pressed

I just need help with getting the ellipses to vibrate in place once they're drawn. Here's what I've written so far:

// Sets up the canvas.

void setup() {

// Size of canvas is 500 x 500

size(500,500);

// Background color is 255 (white)

background(255);

}

void draw() {

// Nothing happens in draw() in this example!

}

// When the mouse button is clicked and dragged, the code executes.

// When the mouse is dragged, create the ellipses.

void mouseDragged() {

// Randomizes color for ellipse stroke from CMYK

stroke(random(255), random(255), random(255), random(255));

// Randomizes color for ellipse fill from CMYK

fill(random(255), random(255), random(255), random(255));

// Draws ellipse from center.

ellipseMode(CENTER);

// Size of ellipse.

ellipse(mouseX,mouseY,10,10);

}

// When a key on the keyboard is pressed, the code executes.

// Pressing the key "erases" all the user's drawings, because it makes everything 255 (white - the same color as the background/canvas).

void keyPressed() {

// Background comes 255 (white) when key is pressed.

background(255);

}

Thanks in advance,
Arielle
punchkickgame.wordpress.com

Replies(5)

rbrauer

Re: How to make user-created drawings "vibrate?"

1 year ago

This is how I would do it, if I understand your goal correctly. Store each ellipse position in an ArrayList of PVector objects and maybe limit the frequency of ellipse drawing so it doesn't take to much memory. Then each frame, go through the ArrayList and draw each ellipse at a random offset from the original position. You probably want the fill and stroke color of each ellipse to be consistent frame to frame too. I would create a class to store the position as a PVector and the two colors. Something like:

float wiggle, sz;
ArrayList<BrushPoint> pts;

void setup() {
...
pts = new ArrayList<BrushPoint>();
...
}

void mouseDragged() {
if(frameCount % 10 == 0) {
    pts.add(new BrushPoint(new PVector(mouseX, mouseY), color(...), color(...)));
}
}

void keyPressed() {
pts.clear();
...
}

void draw() {
for(BrushPoint cur : pts) {
    stroke(cur.str);
    fill(cur.fil);
    ellipse(cur.pos.x + random(-wiggle, wiggle), cur.pos.y + random(-wiggle, wiggle), sz, sz);
}
}

class BrushPoint {
int str, fil;
PVector pos;

BrushPoint(PVector pos, int str, int fil) {
    this.pos = pos;
    this.str = str;
    this.fil = fil;
}
}

datamosh

Re: How to make user-created drawings "vibrate?"

1 year ago

EDIT: I wasn't aware of the previous answer :D, funny!

you have to use a class for that,

try this, it's a little rough, just an ellipse within the squiggle method

ArrayList<Shapes> drawed;
int pos;
void setup() {
size(300, 300);
background(255);
smooth();
drawed = new ArrayList<Shapes>(20);
pos = 0;
color rc = color(random(255), random(255), random(255), random(34, 60));
drawed.add(pos, (new Shapes(width/2, height/2, rc)));
noStroke();
}
void draw() {
fill(255, 34);
rect(0, 0, width, height);
//background(255);
for ( Shapes s : drawed) {
s.display();
s.squiggle();
}
if (mousePressed && mouseButton == RIGHT) {
pos++;
color rc = color(random(255), random(255), random(255), random(34, 60));
drawed.add(pos, new Shapes(mouseX, mouseY, rc));
}
}
void mousePressed() {
if (mouseButton == LEFT) {
color rc = color(random(255), random(255), random(255), random(34, 60));
pos++;
drawed.add(pos, new Shapes(mouseX, mouseY, rc));
}
}
class Shapes {
float x;
float y;
color c;
// constructor
Shapes(float xx, float yy, color cc) {
x = xx;
y = yy;
c = cc;
}
void display() {
fill(c);
ellipse(x, y, 100, 100);
}
void squiggle() {
x += random(-5, 5);
y += random(-5, 5);
}
}

mrfoxter

Re: Re: How to make user-created drawings "vibrate?"

1 year ago

datamosh: your code is great, I would suggest a small change though.

Your squiggle() method actually changes the position of the shape, causing it to travel from its original position. I think that adding random to display() method would be more appropriate. Try to run your code and you'll see the problem.

I also added frameRate(15) to the setup() method to control the speed of vibration.

ArrayList<Shapes> drawed;
int pos;
void setup() {
size(300, 300);
background(255);
smooth();
drawed = new ArrayList<Shapes>(20);
pos = 0;
color rc = color(random(255), random(255), random(255), random(34, 60));
drawed.add(pos, (new Shapes(width/2, height/2, rc)));
noStroke();
// Change framerate to control the speed of vibration
frameRate(15);
}
void draw() {
fill(255, 34);
rect(0, 0, width, height);
//background(255);
for ( Shapes s : drawed) {
s.display();
}
if (mousePressed && mouseButton == RIGHT) {
pos++;
color rc = color(random(255), random(255), random(255), random(34, 60));
drawed.add(pos, new Shapes(mouseX, mouseY, rc));
}
}
void mousePressed() {
if (mouseButton == LEFT) {
color rc = color(random(255), random(255), random(255), random(34, 60));
pos++;
drawed.add(pos, new Shapes(mouseX, mouseY, rc));
}
}
class Shapes {
float x;
float y;
color c;
// constructor
Shapes(float xx, float yy, color cc) {
x = xx;
y = yy;
c = cc;
}
void display() {
fill(c);
ellipse(x + random(-2, 2), y + random(-2, 2), 100, 100);
}
}

datamosh

Re: How to make user-created drawings "vibrate?"

1 year ago

thanks mrfoxter! :)

And you're right, this is closer to produce a squigglevision. The frameRate is something I don't often think about but to speed performance. thanks!

gamerlion..

Re: How to make user-created drawings "vibrate?"

1 year ago

Thanks for the help so far, everyone! I'm going to start working on the project again soon. Hopefully everything will go well!

Top Reply