// alters:
// dot position
// line length
// line and dot color
// speed that dots follow cursor
// angle of lines
// dot 1
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;
// dot 5
var a = 320;
var b = 240;
var diffa = 0;
var diffb = 0;
// dot 3
var c = 320;
var d = 240;
var diffc = 0;
var diffd = 0;
// dot 4
var e = 320;
var f = 320;
var diffe = 0;
var difff = 0;
// dot 2
var g = 270;
var h = 220;
var diffg = 0;
var diffh = 0;
function setup() {
createCanvas(640, 480);
background(220);
}
function draw() {
background(0);
stroke(500-mouseX);
// lines that follow cursor
// line 1
line(320, 240, mouseX, mouseY);
// line 2
var mx = map(mouseX, 0, width, mouseX, mouseY);
line(320, 240, mx, mouseY);
// line 3
var mx = map(mouseX, 0, width, mouseX, mouseY);
line(320, 240, mx, mouseY);
// line 4
var mx = map(mouseX, 0, width, mouseX, mouseY);
line(320, 240, mx, mouseY);
// line 5
var mx = map(mouseX, 100, width,mouseX, mouseY);
line(320, 240, mx, mouseY);
// longer lines
stroke(320-mouseX);
// line 1
var mx = map(200, mouseY, width, -260, 380);
line(320, 240, mx, mouseY);
// line 2
var mx = map(-mouseX, 40, width, 760, -180);
line(320, 240, mx, mouseY);
// line 3
var mx = map(mouseX, 30, width, -260, 100);
line(320, 240, mx, mouseY);
// line 4
var mx = map(-mouseX, 300, width, 660, 190);
line(320, 240, mx, mouseY);
// dot 1 (slow)
// dots are in order: slow to fast
noStroke();
diffx = mouseX - x;
diffy = mouseY - y;
x = x + 0.01*diffx;
y = y + 0.01*diffy;
fill (250-mouseY);
ellipse(x, y, 10, 10);
// dot 2
diffg = mouseX - g;
diffh = mouseY - h;
g += 0.03*diffg;
h += 0.03*diffh;
fill (240-mouseX);
ellipse(g, h, 35, 35);
// dot 3
diffc = mouseX - c;
diffd = mouseY - d;
c = c + 0.05*diffc;
d = d + 0.05*diffd;
fill (240-mouseX);
ellipse(c, d, 30, 30);
// dot 4
diffe = mouseX - e;
difff = mouseY - f;
e += 0.07*diffe;
f += 0.07*difff;
fill (300-mouseY);
ellipse(e, f, 25, 25);
// dot 5 (fastest)
diffa = mouseX - a;
diffb = mouseY - b;
a = a + 0.1*diffa;
b = b + 0.1*diffb;
fill (500-mouseX);
ellipse(a, b, 20, 20);
}
This project was hard for me since it was so open ended, I didn’t know where to start or where to go, so I referenced the notes a lot. I knew I wanted to do something abstract, so I started with a few interactive functions that I thought were cool (ie. the dots following the cursor, and the lines changing based on the mouse position), and then played around with the code from there. Here are a few things I first tried:
I wanted to combine some of these functions but the circles and the lines just looked too crowded together so I switched to the dots that follow the cursor, so it seems like the lines follow the dots.