createCanvas(windowWidth, windowHeight);
pg = createGraphics(siz, siz)
xnum = int((width / siz))
ynum = int((height / siz))
xoffset = (width - xnum * siz) / 2
yoffset = (height - ynum * siz) / 2
for (var i = 0; i < num; i++) {
for (var i = 0; i < xnum * ynum; i++) {
angles[i] = new Orientation();
for (var i = 0; i < num; i++) {
for (var i = 0; i < xnum * ynum; i++) {
for (var j = 0; j < ynum; j += 1) {
for (var i = 0; i < xnum; i += 1) {
var index = i + j * (xnum);
translate(xoffset + siz / 2 + i * siz, yoffset + siz / 2 + j * siz);
rotate(angles[index].angle)
function mousePressed() {
while (index == prevIndex) {
for (var i = 0; i < xnum*ynum; i++) {
var angle = int(random(5)) * PI / 2
angles[i].updateTarget(angle)
for (var i = 0; i < xnum*ynum; i++) {
angles[i].updateTarget(0)
pg = createGraphics(siz, siz)
xnum = int((width / siz))
ynum = int((height / siz))
xoffset = (width - xnum * siz) / 2
yoffset = (height - ynum * siz) / 2
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
xnum = int((width / siz))
ynum = int((height / siz))
xoffset = (width - xnum * siz) / 2
yoffset = (height - ynum * siz) / 2
this.angle += min((this.angleTarget - this.angle) * animSpeed, 10);
this.angleTarget = newAngle;
this.xtarget = random(siz);
this.ytarget = random(siz);
this.xpos += min((this.xtarget - this.xpos) *animSpeed , 10);
this.ypos += min((this.ytarget - this.ypos) *animSpeed , 10);
updateTarget(newX, newY) {
pg.ellipse(this.xpos, this.ypos, circleSize, circleSize);
function newConfiguration(id) {
for (var i = 0; i < dots.length; i++) {
var t = (i * TWO_PI) / dots.length;
var xpos = siz / 2 + siz * 0.25 * sin(t)
var ypos = siz / 2 + siz * 0.25 * sin(t) * cos(t)
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var t = (i * PI) / dots.length;
var r = siz * 0.25 * 3 * sin(t) * cos(t) / (pow(cos(t), 3) + pow(sin(t), 3))
var xpos = siz / 2 + r * cos(t)
var ypos = siz / 2 + r * sin(t)
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = TWO_PI * i / dots.length;
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var xpos = map(i, 0, dots.length - 1, 0, siz);
var ypos = siz / 2 + sin(TWO_PI * i / (dots.length - 1)) * siz * 0.4;
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var xpos = map(i, 0, dots.length - 1, 0, siz);
var ypos = siz / 2 + sin(2 * TWO_PI * i / (dots.length - 1)) * siz * 0.4;
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var radius = i * siz * 0.4 / dots.length;
var angle = 2 * TWO_PI * i / dots.length;
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var t = (i * TWO_PI) / dots.length;
var xpos = siz / 3 + (sin(pow(t, 0.5))) * (1 - cos(t)) * siz * 0.25;
var ypos = siz / 2 + cos(t + PI / 4) * (1 + sin(t)) * siz * 0.25;
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var t = (i * TWO_PI) / dots.length;
var xpos = siz / 3 + cos(t) * (1 + cos(t)) * siz * 0.25;
var ypos = siz / 2 + cos(t) * (1 + sin(t)) * siz * 0.25;
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var t = (i * TWO_PI) / dots.length;
var xpos = siz / 2 + cos(t) * siz * 0.4
var ypos = siz / 2 + sin(t) * pow(sin(t / 2), 1) * siz * 0.4
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = TWO_PI * i / dots.length;
var radius = tan(angle) * siz * 0.5
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, -PI / 2, PI / 2)
var xpos = siz / 2 + radius * tan(angle);
var ypos = siz / 2 + radius * pow(cos(angle), 9);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, TWO_PI * 2)
var radius = sqrt(pow(siz * 0.5, 2) / angle)
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, PI)
var radius = siz * 0.45 * cos(angle) * cos(2 * angle)
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, TWO_PI)
var radius = siz * 0.15 * (1 + 2 * cos(angle))
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, TWO_PI)
var radius = siz * 0.5 * (sin(2 * angle))
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, TWO_PI)
var radius = siz * 0.10 * sin(3 * angle) / sin(angle)
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, TWO_PI)
var radius = siz * 0.5 * sin(angle / 2)
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, TWO_PI)
var radius = (1 + cos(3 * angle) + pow(sin(3 * angle), 2)) * siz * 0.20
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);
for (var i = 0; i < dots.length; i++) {
var angle = map(i, 0, dots.length, 0, PI)
var radius = siz * 0.5 * cos(2 * angle)
var xpos = siz / 2 + radius * cos(angle);
var ypos = siz / 2 + radius * sin(angle);
dots[i].updateTarget(xpos, ypos);