# conObjects

P5.js, motion, chance, interact, Law of Connected Elements, Law of Common Fate
Connected balls attracted by the mouse and a kind of gravity

Three balls connected through lines are flying wherever the mouse is moved. Its built upon a simple gravity-engine inspired by Daniel Shiffman.

``````// points on the canvas
var places = [-80, 200, 350];
// number of movers
var movers = [1, 1, 1];
var csize = 500;

function setup() {
var canvas = createCanvas(csize, csize);
canvas.parent('sketch');
for(var i = 0; i < movers.length; i++) {
movers[i] = new Mover(places[i], places[i]);
}
}
function draw() {
background(51);
for(var i = 0; i < movers.length; i++) {
movers[i].update();
// Display the Mover
movers[i].display();
// ecken speichern
liner();
}
}

// connect Objects with lines
function liner() {
stroke(255);
for(var i = 0; i < movers.length; i++) {
if(i < movers.length - 1) {
for(var j = 0; j < 4; j++) {
line(movers[i].location.x, movers[i].location.y, movers[i + 1].location.x, movers[i + 1].location.y);
}
}else if(i < movers.length) {
line(movers[i].location.x, movers[i].location.y, movers.location.x, movers.location.y);
}
}
}

// the Object itself

function Mover (x, y) {
this.acceleration;
this.maxspeed = 5;
this.breite = 30;
this.hoehe = 30;

this.location = new p5.Vector(x, y);
this.velocity = new p5.Vector(0, 0);

function setMag(vari) {
normalize();
mult(vari);
}

this.update = function() {
var mouse = new p5.Vector(mouseX, mouseY);
this.acceleration = p5.Vector.sub(mouse, this.location);
// Set magnitude of acceleration
this.acceleration.setMag(0.2);

// Velocity changes according to acceleration
// Limit the velocity by topspeed
this.velocity.limit(this.maxspeed);
// Location changes by velocity
// points to connect with lines
this.ecke1 = new p5.Vector(0, 0);
this.ecke1.x = this.location.x;
};

this.display = function() {
strokeWeight(1);
fill(255);
ellipse(this.location.x, this.location.y, this.breite, this.hoehe);
};
}

``````