Runaway

//Created by Arnav Mehta

//Inspired by various creations on the website

//

​

​

// Created Initial Variables

var xpos = 0;

var ypos = 0;

​

var grid = [];

​

​

//Basic set up for the scene

function setup() {

  createCanvas(windowWidth, windowHeight);

  xpos = windowWidth/2;

  ypos = windowHeight/2;

  noCursor();

  makegrid();

  noStroke();

}

​

// The Draw Function changes the location of the grid points depending on how close the center point is to it/

// It also helps to create the angle of the circle, making it point towards the Dot.

function draw() {

  background("#355C7D");

  const mouse = createVector(mouseX, mouseY);

  for(let count of grid){

    const Dist = count.dist(mouse);

    const angle = p5.Vector.sub(count, mouse).heading();

    const DistToAdd = p5.Vector.fromAngle(angle, 40);

    const newVector = count.copy().add(DistToAdd);

    //This element moves each point accordingly and is repeated for each element within the grid.

    push(); 

    translate(newVector.x, newVector.y);

    rotate(angle);

    fill("#F67280");

    ellipse(0,0,30);

    fill("#6C5B7B");

    arc(0,0,30,30,0,PI);

    pop();

  }

  //This sections draws the central poin or mouse point.

  fill("#F8B195");

  ellipse(mouse.x, mouse.y, 20)

}

​

//This function helps to create the grid pattern and size. 

//by changing the Step size you can change how many circles will appear and how far apart they will be.

​

function makegrid(){

  const StepSize = 40;

  for(let x = 0; x < windowWidth; x+= StepSize){

    for(let y = 0; y < windowHeight; y+= StepSize){

      grid.push(createVector(x,y));

    }

  }

}

​

​