: How to get tiny lines to swarm together into a circular pattern? Preferably using Adobe Animate or Illustrator. Image taken from: https://material.io/guidelines/material-design/introduction.html

@Welton168

I don't know how to do that with Adobe Animate or Illustrator but you could use Processing.

Here's the code and the result:

void setup() {
size(800, 600);
noCursor();
}

void draw() {
background(34,70,135);

stroke(200,75,130);
strokeWeight(2);

int resolution = 25;
PVector attractor = new PVector(mouseX, mouseY);

for (int x=0; x<width; x+=resolution) {
for (int y=0; y<height; y+=resolution) {

PVector v = getSpiralVector(x-attractor.x, y-attractor.y);

v.normalize().mult(resolution/2);

pushMatrix();
translate(x, y);
line( -v.x, -v.y, v.x, v.y);
popMatrix();
}
}

fill(255,50);
noStroke();
ellipse(mouseX,mouseY,200,200);
}

PVector getSpiralVector(float x, float y) {
return new PVector(y-x, -x-y);
}

void mouseClicked(){
saveFrame(hour()+"_"+minute()+"_"+second()+".png");
}

Vote Up Vote Down