Drawing
Generative painting program.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
// All the paths
let paths = [];
// Are we painting?
let painting = false;
// How long until the next circle
let next = 0;
// Where are we now and where were we?
let current;
let previous;
function setup() {
createCanvas(720, 400);
current = createVector(0,0);
previous = createVector(0,0);
};
function draw() {
background(200);
// If it's time for a new point
if (millis() > next && painting) {
// Grab mouse position
current.x = mouseX;
current.y = mouseY;
// New particle's force is based on mouse movement
let force = p5.Vector.sub(current, previous);
force.mult(0.05);
// Add new particle
paths[paths.length - 1].add(current, force);
// Schedule next circle
next = millis() + random(100);
// Store mouse values
previous.x = current.x;
previous.y = current.y;
}
// Draw all paths
for( let i = 0; i < paths.length; i++) {
paths[i].update();
paths[i].display();
}
}
// Start it up
function mousePressed() {
next = 0;
painting = true;
previous.x = mouseX;
previous.y = mouseY;
paths.push(new Path());
}
// Stop
function mouseReleased() {
painting = false;
}
// A Path is a list of particles
class Path {
constructor() {
this.particles = [];
this.hue = random(100);
}
add(position, force) {
// Add a new particle with a position, force, and hue
this.particles.push(new Particle(position, force, this.hue));
}
// Display plath
update() {
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].update();
}
}
// Display plath
display() {
// Loop through backwards
for (let i = this.particles.length - 1; i >= 0; i--) {
// If we shold remove it
if (this.particles[i].lifespan <= 0) {
this.particles.splice(i, 1);
// Otherwise, display it
} else {
this.particles[i].display(this.particles[i+1]);
}
}
}
}
// Particles along the path
class Particle {
constructor(position, force, hue) {
this.position = createVector(position.x, position.y);
this.velocity = createVector(force.x, force.y);
this.drag = 0.95;
this.lifespan = 255;
}
update() {
// Move it
this.position.add(this.velocity);
// Slow it down
this.velocity.mult(this.drag);
// Fade it out
this.lifespan--;
}
// Draw particle and connect it with a line
// Draw a line to another
display(other) {
stroke(0, this.lifespan);
fill(0, this.lifespan/2);
ellipse(this.position.x,this.position.y, 8, 8);
// If we need to draw a line
if (other) {
line(this.position.x, this.position.y, other.position.x, other.position.y);
}
}
}
