Throwback to that time Microsoft actually did something cool

Like, just three points.

These points could have simple 2D physics attached to them, like velocity and direction.

The result would be that they bounce around the screen like in Pong.

Point[] points = { new Point(), new Point(), new Point() };void setup(){ fullScreen(); stroke(255);}void draw(){ for(Point p: points){ p.

run(); }}class Point{ PVector vel, pos; Point(){ this.

pos = new PVector(random(0, width), random(0, height)); this.

vel = new PVector(random(-10, 10), random(-10, 10)); } void run(){ if(pos.

x <= 0 || pos.

x >= width){ vel.

x *= -1; } if(pos.

y <= 0 || pos.

y >= height){ vel.

y *= -1; } pos.

add(vel); }}The above sketch won’t look like much; we aren’t even rendering anything to the screen.

But, if we drew lines between the dots, forming a triangle, the result would be somewhat similar to Mystify.

We can draw the lines pretty simply by iterating over the points array in the draw() loop.

background(0);for(Point p1: points){ for(Point p2: points){ line(p1.

pos.

x, p1.

pos.

y, p2.

pos.

x, p2.

pos.

y); }}If you run the sketch, you should have a triangle bouncing around the screen like this:The next thing thing to do is to create the artefacting lines that get left behind as the triangle moves.

We can tweak a Particle System to do this pretty easily.

If you don’t know about Particle Systems in Processing you can read about it here.

They have lots of uses but all that’s relevant to us is that they keep track of stuff we’ve already drawn and redraw it until we tell it not to.

Copying the Particle System example code, trashing what we don’t need, and renaming some variables to be relevant, we’re left with:LineSystem ls;void setup() { ls = new LineSystem();}class LineSystem { ArrayList<Line> lines; LineSystem() { lines = new ArrayList<Line>(); } void addLine(PVector start, PVector end) { lines.

add(new Line(start.

copy(), end.

copy()); } void run() { for (int i = particles.

size()-1; i >= 0; i–) { Line l = lines.

get(i); l.

run(); if (p.

isDead()) { lines.

remove(i); } } }}// A simple Particle classclass Line { PVector start, end; float lifespan; Line(PVector start, PVector end) { lifespan = 10; } void run() { update(); display(); } // Method to update position void update() { lifespan -= 1.

0; } // Method to display void display() { stroke(255); fill(255); line(start.

x, start.

y, end.

x, end.

y); } // Is the particle still useful?.boolean isDead() { return(lifespan <= 0); }}The above code is able to store the 10 most recent lines drawn between two points and redraw them, decrementing lifespan each time it is drawn.

If we Frankenstein everything we’ve written together, we can just create the line artefact effect from Mystify.

All together the code should look like this:LineSystem ls;Point[] points = { new Point(), new Point(), new Point() };void setup(){ fullScreen(); ls = new LineSystem();}void draw(){ background(0); for(Point p1: points){ for(Point p2: points){ ls.

addLine(p1.

pos, p2.

pos); } } ls.

run();}class Point{ PVector vel, pos; Point(){ this.

pos = new PVector(random(0, width), random(0, height)); this.

vel = new PVector(random(-10, 10), random(-10, 10)); } void run(){ if(pos.

x <= 0 || pos.

x >= width){ vel.

x *= -1; } if(pos.

y <= 0 || pos.

y >= height){ vel.

y *= -1; } pos.

add(vel); }}class LineSystem{ ArrayList<Line> lines; LineSystem(){ lines = new ArrayList<Line>(); } void addLine(PVector start, PVector end){ lines.

add(new Line(start.

copy(), end.

copy())); } void run() { for(Point p: points){ p.

run(); }for (int i = lines.

size()-1; i >= 0; i–) { Line l = lines.

get(i); l.

update(); l.

display(); if (l.

isDead()) { lines.

remove(i); } } } }class Line{ PVector p1, p2; int lifespan; Line(PVector p1, PVector p2){ this.

p1 = p1; this.

p2 = p2; this.

lifespan = 10; } void update(){ lifespan -= 1.

0; }void display() { line(p1.

x, p1.

y, p2.

x, p2.

y); } boolean isDead(){ return(this.

lifespan <= 0); } }And there we have a basic Mystify screensaver.

Pretty neat huh?.Even better there are lots of things to tweak.

You can add more points, or colour, or make the lines last for longer.

You can find the GitHub repository here, and a web accessible version here.

.. More details

Leave a Reply