├── .gitignore
├── PathFollowing_2017
    ├── Path.pde
    ├── PathFollowing_2017.pde
    ├── Vehicle.pde
    └── data
    │   ├── paths.csv
    │   ├── texture.png
    │   ├── texture16.png
    │   └── texture24.png
├── Processing_2017
    ├── Circle.pde
    ├── Processing_2017.pde
    └── data
    │   ├── 2017.png
    │   └── 2017.psd
├── README.md
├── data
    ├── 2017.png
    └── 2017.psd
├── font_paths
    ├── OpenSans-Regular.ttf
    ├── index.html
    ├── libraries
    │   ├── p5.dom.js
    │   ├── p5.js
    │   └── p5.sound.js
    ├── path.js
    ├── pathhelper.js
    ├── sketch.js
    └── vehicle.js
├── index.html
└── sketch.js


/.gitignore:
--------------------------------------------------------------------------------
1 | output/
2 | 


--------------------------------------------------------------------------------
/PathFollowing_2017/Path.pde:
--------------------------------------------------------------------------------
 1 | // The Nature of Code
 2 | // Daniel Shiffman
 3 | // http://natureofcode.com
 4 | 
 5 | // Path Following
 6 | 
 7 | class Path {
 8 | 
 9 |   // A Path is an arraylist of points (PVector objects)
10 |   ArrayList<PVector> points;
11 |   // A path has a radius, i.e how far is it ok for the boid to wander off
12 |   float radius;
13 | 
14 |   Path() {
15 |     // Arbitrary radius of 20
16 |     radius = 5;
17 |     points = new ArrayList<PVector>();
18 |   }
19 | 
20 |   // Add a point to the path
21 |   void addPoint(float x, float y) {
22 |     PVector point = new PVector(x, y);
23 |     points.add(point);
24 |   }
25 | 
26 |   // Draw the path
27 |   void display() {
28 |     strokeJoin(ROUND);
29 |     
30 |     // Draw thick line for radius
31 |     stroke(175);
32 |     strokeWeight(radius*2);
33 |     noFill();
34 |     beginShape();
35 |     for (PVector v : points) {
36 |       vertex(v.x, v.y);
37 |     }
38 |     endShape(CLOSE);
39 |     // Draw thin line for center of path
40 |     stroke(0);
41 |     strokeWeight(1);
42 |     noFill();
43 |     beginShape();
44 |     for (PVector v : points) {
45 |       vertex(v.x, v.y);
46 |     }
47 |     endShape(CLOSE);
48 |   }
49 | }


--------------------------------------------------------------------------------
/PathFollowing_2017/PathFollowing_2017.pde:
--------------------------------------------------------------------------------
 1 | // The Nature of Code
 2 | // Daniel Shiffman
 3 | // http://natureofcode.com
 4 | 
 5 | // Crowd Path Following
 6 | // Via Reynolds: http://www.red3d.com/cwr/steer/CrowdPath.html
 7 | 
 8 | // Using this variable to decide whether to draw all the stuff
 9 | boolean debug = false;
10 | 
11 | 
12 | // A path object (series of connected points)
13 | Path path;
14 | 
15 | Path[] paths = new Path[5];
16 | 
17 | // Two vehicles
18 | ArrayList<Vehicle> vehicles;
19 | 
20 | Table table;
21 | 
22 | PImage texture;
23 | 
24 | int totalParticles = 1000;
25 | int often = 60;
26 | 
27 | void setup() {
28 |   size(1280, 720, P2D);
29 |   frameRate(60);
30 |   blendMode(ADD);
31 |   //pixelDensity(2);
32 |   // Call a function to generate new Path object
33 |   newPath();
34 |   table = loadTable("paths.csv");
35 |   texture = loadImage("texture24.png");
36 | 
37 |   for (int i = 0; i < paths.length; i++) {
38 |     paths[i] = new Path();
39 |   }
40 | 
41 | 
42 | 
43 |   for (TableRow row : table.rows()) {
44 |     int i = row.getInt(0);
45 |     float x = row.getFloat(1) + 24;
46 |     float y = row.getFloat(2) + 100;
47 |     paths[i].addPoint(x, y);
48 |   }
49 | 
50 |   // We are now making random vehicles and storing them in an ArrayList
51 |   vehicles = new ArrayList<Vehicle>();
52 |   newVehicle(0, 200, 0);
53 | }
54 | 
55 | void draw() {
56 |   background(0);
57 |   if (frameCount % often == 0) {
58 |     if (vehicles.size() < totalParticles) {
59 |       newVehicle(-500, 200, 0);
60 |     }
61 |     often--;
62 |     if (often < 1) {
63 |       often = 1;
64 |     }
65 |   }
66 |   // Display the path
67 |   // paths[0].display();
68 | 
69 |   for (Vehicle v : vehicles) {
70 |     // Path following and separation are worked on in this function
71 |     // Call the generic run method (update, borders, display, etc.)
72 |     v.run();
73 |     v.applyBehaviors(vehicles, paths);
74 |   }
75 |   //saveFrame("output/render####.png");
76 | }
77 | 
78 | void newPath() {
79 |   // A path is a series of connected points
80 |   // A more sophisticated path might be a curve
81 |   path = new Path();
82 |   float offset = 30;
83 |   path.addPoint(offset, offset);
84 |   path.addPoint(width-offset, offset);
85 |   path.addPoint(width-offset, height-offset);
86 |   path.addPoint(width/2, height-offset*3);
87 |   path.addPoint(offset, height-offset);
88 | }
89 | 
90 | void newVehicle(float x, float y, int wp) {
91 |   float maxspeed = random(3, 8);
92 |   float maxforce = 0.5;
93 |   vehicles.add(new Vehicle(new PVector(x, y), maxspeed, maxforce, wp));
94 | }


--------------------------------------------------------------------------------
/PathFollowing_2017/Vehicle.pde:
--------------------------------------------------------------------------------
  1 | // The Nature of Code
  2 | // Daniel Shiffman
  3 | // http://natureofcode.com
  4 | 
  5 | // Path Following
  6 | // Vehicle class
  7 | 
  8 | class Vehicle {
  9 | 
 10 |   // All the usual stuff
 11 |   PVector position;
 12 |   PVector velocity;
 13 |   PVector acceleration;
 14 |   float r;
 15 |   float maxforce;    // Maximum steering force
 16 |   float maxspeed;    // Maximum speed
 17 |   int whichPath = -1;
 18 |   int counter = 0;
 19 |   int dir = 1;
 20 | 
 21 |   // Constructor initialize all values
 22 |   Vehicle( PVector l, float ms, float mf, int wp) {
 23 |     position = l.copy();
 24 |     r = 6;
 25 |     maxspeed = ms;
 26 |     maxforce = mf;
 27 |     acceleration = new PVector(0, 0);
 28 |     velocity = new PVector(maxspeed, 0);
 29 |     //whichPath = wp;
 30 |   }
 31 | 
 32 |   // A function to deal with path following and separation
 33 |   void applyBehaviors(ArrayList vehicles, Path[] paths) {
 34 |     // Follow path force
 35 |     PVector f = follow(paths[whichPath]);
 36 |     // Separate from other boids force
 37 |     PVector s = separate(vehicles);
 38 |     // Arbitrary weighting
 39 |     f.mult(2);
 40 |     s.mult(2);
 41 |     // Accumulate in acceleration
 42 |     applyForce(f);
 43 |     applyForce(s);
 44 |   }
 45 | 
 46 |   void applyForce(PVector force) {
 47 |     // We could add mass here if we want A = F / M
 48 |     acceleration.add(force);
 49 |   }
 50 | 
 51 | 
 52 | 
 53 |   // Main "run" function
 54 |   public void run() {
 55 |     if (counter % (totalParticles/(paths.length-2)) == 0) {
 56 |       whichPath = whichPath + dir;
 57 |       if (whichPath == paths.length-1) dir = -1;
 58 |       else if (whichPath == 0) dir = 1;
 59 |     }
 60 |     counter++;
 61 | 
 62 |     update();
 63 |     borders();
 64 |     render();
 65 |   }
 66 | 
 67 | 
 68 |   // This function implements Craig Reynolds' path following algorithm
 69 |   // http://www.red3d.com/cwr/steer/PathFollow.html
 70 |   PVector follow(Path p) {
 71 | 
 72 |     // Predict position 25 (arbitrary choice) frames ahead
 73 |     PVector predict = velocity.get();
 74 |     predict.normalize();
 75 |     predict.mult(25);
 76 |     PVector predictpos = PVector.add(position, predict);
 77 | 
 78 |     // Now we must find the normal to the path from the predicted position
 79 |     // We look at the normal for each line segment and pick out the closest one
 80 |     PVector normal = null;
 81 |     PVector target = null;
 82 |     float worldRecord = 1000000;  // Start with a very high worldRecord distance that can easily be beaten
 83 | 
 84 |     // Loop through all points of the path
 85 |     for (int i = 0; i < p.points.size(); i++) {
 86 | 
 87 |       // Look at a line segment
 88 |       PVector a = p.points.get(i);
 89 |       PVector b = p.points.get((i+1)%p.points.size()); // Note Path has to wraparound
 90 | 
 91 |       // Get the normal point to that line
 92 |       PVector normalPoint = getNormalPoint(predictpos, a, b);
 93 | 
 94 |       // Check if normal is on line segment
 95 |       PVector dir = PVector.sub(b, a);
 96 |       // If it's not within the line segment, consider the normal to just be the end of the line segment (point b)
 97 |       //if (da + db > line.mag()+1) {
 98 |       if (normalPoint.x < min(a.x, b.x) || normalPoint.x > max(a.x, b.x) || normalPoint.y < min(a.y, b.y) || normalPoint.y > max(a.y, b.y)) {
 99 |         normalPoint = b.get();
100 |         // If we're at the end we really want the next line segment for looking ahead
101 |         a = p.points.get((i+1)%p.points.size());
102 |         b = p.points.get((i+2)%p.points.size());  // Path wraps around
103 |         dir = PVector.sub(b, a);
104 |       }
105 | 
106 |       // How far away are we from the path?
107 |       float d = PVector.dist(predictpos, normalPoint);
108 |       // Did we beat the worldRecord and find the closest line segment?
109 |       if (d < worldRecord) {
110 |         worldRecord = d;
111 |         normal = normalPoint;
112 | 
113 |         // Look at the direction of the line segment so we can seek a little bit ahead of the normal
114 |         dir.normalize();
115 |         // This is an oversimplification
116 |         // Should be based on distance to path & velocity
117 |         dir.mult(25);
118 |         target = normal.get();
119 |         target.add(dir);
120 |       }
121 |     }
122 | 
123 |     // Draw the debugging stuff
124 |     if (debug) {
125 |       // Draw predicted future position
126 |       stroke(0);
127 |       fill(0);
128 |       line(position.x, position.y, predictpos.x, predictpos.y);
129 |       ellipse(predictpos.x, predictpos.y, 4, 4);
130 | 
131 |       // Draw normal position
132 |       stroke(0);
133 |       fill(0);
134 |       ellipse(normal.x, normal.y, 4, 4);
135 |       // Draw actual target (red if steering towards it)
136 |       line(predictpos.x, predictpos.y, target.x, target.y);
137 |       if (worldRecord > p.radius) fill(255, 0, 0);
138 |       noStroke();
139 |       ellipse(target.x, target.y, 8, 8);
140 |     }
141 | 
142 |     // Only if the distance is greater than the path's radius do we bother to steer
143 |     if (worldRecord > p.radius) {
144 |       return seek(target);
145 |     } else {
146 |       return new PVector(0, 0);
147 |     }
148 |   }
149 | 
150 | 
151 |   // A function to get the normal point from a point (p) to a line segment (a-b)
152 |   // This function could be optimized to make fewer new Vector objects
153 |   PVector getNormalPoint(PVector p, PVector a, PVector b) {
154 |     // Vector from a to p
155 |     PVector ap = PVector.sub(p, a);
156 |     // Vector from a to b
157 |     PVector ab = PVector.sub(b, a);
158 |     ab.normalize(); // Normalize the line
159 |     // Project vector "diff" onto line by using the dot product
160 |     ab.mult(ap.dot(ab));
161 |     PVector normalPoint = PVector.add(a, ab);
162 |     return normalPoint;
163 |   }
164 | 
165 |   // Separation
166 |   // Method checks for nearby boids and steers away
167 |   PVector separate (ArrayList boids) {
168 |     float desiredseparation = r*2;
169 |     PVector steer = new PVector(0, 0, 0);
170 |     int count = 0;
171 |     // For every boid in the system, check if it's too close
172 |     for (int i = 0; i < boids.size(); i++) {
173 |       Vehicle other = (Vehicle) boids.get(i);
174 |       float d = PVector.dist(position, other.position);
175 |       // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
176 |       if ((d > 0) && (d < desiredseparation)) {
177 |         // Calculate vector pointing away from neighbor
178 |         PVector diff = PVector.sub(position, other.position);
179 |         diff.normalize();
180 |         diff.div(d);        // Weight by distance
181 |         steer.add(diff);
182 |         count++;            // Keep track of how many
183 |       }
184 |     }
185 |     // Average -- divide by how many
186 |     if (count > 0) {
187 |       steer.div((float)count);
188 |     }
189 | 
190 |     // As long as the vector is greater than 0
191 |     if (steer.mag() > 0) {
192 |       // Implement Reynolds: Steering = Desired - Velocity
193 |       steer.normalize();
194 |       steer.mult(maxspeed);
195 |       steer.sub(velocity);
196 |       steer.limit(maxforce);
197 |     }
198 |     return steer;
199 |   }
200 | 
201 | 
202 |   // Method to update position
203 |   void update() {
204 |     // Update velocity
205 |     velocity.add(acceleration);
206 |     // Limit speed
207 |     velocity.limit(maxspeed);
208 |     position.add(velocity);
209 |     // Reset accelertion to 0 each cycle
210 |     acceleration.mult(0);
211 |   }
212 | 
213 |   // A method that calculates and applies a steering force towards a target
214 |   // STEER = DESIRED MINUS VELOCITY
215 |   PVector seek(PVector target) {
216 |     PVector desired = PVector.sub(target, position);  // A vector pointing from the position to the target
217 | 
218 |     // Normalize desired and scale to maximum speed
219 |     desired.normalize();
220 |     desired.mult(maxspeed);
221 |     // Steering = Desired minus Vepositionity
222 |     PVector steer = PVector.sub(desired, velocity);
223 |     steer.limit(maxforce);  // Limit to maximum steering force
224 | 
225 |     return steer;
226 |   }
227 | 
228 | 
229 |   void render() {
230 |     // Simpler boid is just a circle
231 |     //fill(75);
232 |     //stroke(0);
233 |     //pushMatrix();
234 |     //translate(position.x, position.y);
235 |     //ellipse(0, 0, r, r);
236 |     //popMatrix();
237 |     //strokeWeight(r);
238 |     //stroke(255, 150);
239 |     //point(position.x,position.y);
240 |     imageMode(CENTER);
241 |     image(texture, position.x, position.y);
242 |   }
243 | 
244 |   // Wraparound
245 |   void borders() {
246 |     if (position.x < -r) position.x = width+r;
247 |     //if (position.y < -r) position.y = height+r;
248 |     if (position.x > width+r) position.x = -r;
249 |     //if (position.y > height+r) position.y = -r;
250 |   }
251 | }


--------------------------------------------------------------------------------
/PathFollowing_2017/data/paths.csv:
--------------------------------------------------------------------------------
  1 | 0,292.7472541369498,498.625
  2 | 0,242.75119130484381,498.625
  3 | 0,192.75410840857433,498.625
  4 | 0,142.7506523624146,498.625
  5 | 0,92.7462892654139,498.625
  6 | 0,52.5,488.8797744392068
  7 | 0,69.43077787786024,445.85627002926776
  8 | 0,104.69180506270732,410.41206867722667
  9 | 0,139.95329794241115,374.96739921113476
 10 | 0,174.86059761047363,339.1745467185974
 11 | 0,207.6181640625,301.4384765625
 12 | 0,230.57312870025635,257.2912151813507
 13 | 0,232.56833863258362,207.85601246356964
 14 | 0,202.16661788523197,170.25921750813723
 15 | 0,153.16185140609738,164.17291069030762
 16 | 0,106.03189184516668,179.7132460027933
 17 | 0,68.51584613072919,184.34137059968634
 18 | 0,83.01098847389221,151.53077173233032
 19 | 0,129.0340786576271,132.43068087100983
 20 | 0,178.65635691583157,128.21492137759924
 21 | 0,226.9077966213226,140.02460515499115
 22 | 0,263.6886475533247,172.92757207900283
 23 | 0,277.16865825653076,220.48204469680786
 24 | 0,269.1799550354481,269.52469666302204
 25 | 0,245.06130492687225,313.11286556720734
 26 | 0,212.83874511718747,351.3165283203125
 27 | 0,177.65053367614746,386.81916549801826
 28 | 0,141.89571270014858,421.79184976516717
 29 | 0,106.15547810122371,456.75026673224056
 30 | 0,150.785091713964,460.125
 31 | 0,200.7808653924585,460.125
 32 | 0,250.7785149903484,460.125
 33 | 0,292.75,468.1489978572354
 34 | 1,587.4999999721767,315.38078303635115
 35 | 1,585.09356607683,365.2912495136261
 36 | 1,576.0207524970174,414.39729785919184
 37 | 1,555.6666187047958,459.839631319046
 38 | 1,518.611088655889,492.5568173676729
 39 | 1,470.2400787770748,503.5749652981758
 40 | 1,421.3702530004084,495.0499515403062
 41 | 1,382.5791742801666,464.3904801607132
 42 | 1,359.8284547738731,420.1216840352863
 43 | 1,349.0730581395328,371.3685532268136
 44 | 1,345.784400627017,321.51282127946615
 45 | 1,347.5338935703039,271.5574163943529
 46 | 1,355.48030095919967,222.25035719946027
 47 | 1,374.00843715667725,176.0053834915161
 48 | 1,409.05963717773557,141.10231575742364
 49 | 1,456.7665661126375,127.66617800295353
 50 | 1,506.0260873492807,133.85877737775445
 51 | 1,546.6050263866782,162.10358108580112
 52 | 1,571.228673638776,205.3187889046967
 53 | 1,583.2983874753118,253.75260300934315
 54 | 1,587.3668345287442,303.5432289391756
 55 | 2,387.7500000698492,315.38473494583735
 56 | 2,389.9876608103514,365.29925266653294
 57 | 2,399.45303225517273,414.31321585178375
 58 | 2,426.1705102920532,455.6351532936096
 59 | 2,473.56090143322945,467.57410457730293
 60 | 2,516.9354255869985,445.6067847684026
 61 | 2,537.068153463304,400.32424653321505
 62 | 2,543.9218240436167,350.84550540335476
 63 | 2,544.8337359651923,300.87006539851427
 64 | 2,540.9437474217266,251.0479271132499
 65 | 2,527.8278656229377,202.9816886857152
 66 | 2,493.54537919163704,168.2737058699131
 67 | 2,444.4397845864296,166.38331225514412
 68 | 2,407.3535101413727,197.8954221010208
 69 | 2,392.61772768199444,245.43190298229456
 70 | 2,388.072877895087,295.1957482788712
 71 | 3,791.7426228523254,498.625
 72 | 3,751.25,489.12238953763153
 73 | 3,751.25,439.12638164581654
 74 | 3,751.25,389.1167852833894
 75 | 3,751.25,339.1207168659457
 76 | 3,751.25,289.1254324571928
 77 | 3,751.25,239.12073307763785
 78 | 3,752.488313794136,189.14580890536308
 79 | 3,725.0782527923584,201.29124927520752
 80 | 3,686.3193143606186,232.86982995271683
 81 | 3,666.6690937847379,202.72239265726967
 82 | 3,706.2409036269804,172.1488238127464
 83 | 3,745.8044492382332,141.58163999423323
 84 | 3,791.75,134.2899499687337
 85 | 3,791.75,184.30697431949625
 86 | 3,791.75,234.30020031357685
 87 | 3,791.75,284.29413315407874
 88 | 3,791.75,334.30170212833434
 89 | 3,791.75,384.2942888212874
 90 | 3,791.75,434.3058166686503
 91 | 3,791.75,484.296966843307
 92 | 4,977.0017315223813,498.6212597973645
 93 | 4,998.0057241332051,453.25124935583244
 94 | 4,1019.0125735151453,407.8750681001235
 95 | 4,1040.0156371430985,362.507064322911
 96 | 4,1061.0227720446528,317.13026632598906
 97 | 4,1082.0283272487652,271.75688057981245
 98 | 4,1103.0355420347823,226.37991002717808
 99 | 4,1124.0377235548058,181.01381166131887
100 | 4,1089.1197369398683,171.375
101 | 4,1039.1108544813424,171.375
102 | 4,989.1159749990937,171.375
103 | 4,939.1138283971059,171.375
104 | 4,931.1374517786317,133.125
105 | 4,981.1348668201827,133.125
106 | 4,1031.132501415822,133.125
107 | 4,1081.1440343840877,133.125
108 | 4,1131.1326324265092,133.125
109 | 4,1172.5,141.76341515055537
110 | 4,1162.0839337063574,189.5237493382125
111 | 4,1141.5688543115539,235.11662645475735
112 | 4,1121.050580918789,280.71660193800926
113 | 4,1100.5279194378925,326.32632954354665
114 | 4,1080.0127043804462,371.91950815783787
115 | 4,1059.5000897747104,417.5069075073743
116 | 4,1038.9813990046587,463.1078105732586
117 | 4,1011.9525968893431,498.625
118 | 


--------------------------------------------------------------------------------
/PathFollowing_2017/data/texture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/PathFollowing_2017/data/texture.png


--------------------------------------------------------------------------------
/PathFollowing_2017/data/texture16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/PathFollowing_2017/data/texture16.png


--------------------------------------------------------------------------------
/PathFollowing_2017/data/texture24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/PathFollowing_2017/data/texture24.png


--------------------------------------------------------------------------------
/Processing_2017/Circle.pde:
--------------------------------------------------------------------------------
 1 | // 8 nights of Hanukkah 2016 Examples
 2 | // Night 7: Animated Circle Packing
 3 | // Expansion of: https://youtu.be/XATr_jdh-44
 4 | // Daniel Shiffman
 5 | // http://codingrainbow.com/
 6 | 
 7 | // Circle class
 8 | class Circle {
 9 |   float x, y, r;
10 | 
11 |   boolean growing = true;
12 | 
13 |   Circle(float x_, float y_, float r_) {
14 |     x = x_;
15 |     y = y_;
16 |     r = r_;
17 |   }
18 | 
19 |   // Check stuck to an edge
20 | 
21 |   boolean edges() {
22 |     return (r > width - x || r > x || r > height-y || r > y);
23 |   }
24 | 
25 |   // Grow
26 |   void grow() {
27 |     r += 0.5;
28 |   }
29 | 
30 |   // Show
31 |   void show() {
32 |     stroke(255);
33 |     noFill();
34 |     strokeWeight(2);
35 |     ellipse(x, y, r*2, r*2);
36 |   }
37 | }


--------------------------------------------------------------------------------
/Processing_2017/Processing_2017.pde:
--------------------------------------------------------------------------------
 1 | // 8 nights of Hanukkah 2016 Examples
 2 | // Night 7: Animated Circle Packing
 3 | // Expansion of: https://youtu.be/XATr_jdh-44
 4 | // Daniel Shiffman
 5 | // http://codingrainbow.com/
 6 | 
 7 | // All the circles
 8 | ArrayList<Circle> circles = new ArrayList<Circle>();
 9 | ArrayList<PVector> spots = new ArrayList<PVector>();
10 | 
11 | void setup() {
12 |   size(900, 400);
13 |   PImage txt = loadImage("2017.png");
14 |   txt.loadPixels();
15 |   for (int x = 0; x < txt.width; x++) {
16 |     for (int y = 0; y < txt.height; y++) {
17 |       color c = txt.pixels[x + y * txt.width];
18 |       if (brightness(c) > 10) {
19 |         spots.add(new PVector(x,y)); 
20 |       }
21 |     }
22 |   }
23 |   pixelDensity(2);
24 | }
25 | 
26 | void draw() {
27 |   background(0);
28 |   // All the circles
29 |   for (Circle c : circles) {
30 |     c.show();
31 | 
32 |     // Is it a growing one?
33 |     if (c.growing) {
34 |       c.grow();
35 |       // Does it overlap any previous circles?
36 |       for (Circle other : circles) {
37 |         if (other != c) {
38 |           float d = dist(c.x, c.y, other.x, other.y);
39 |           if (d-1 < c.r + other.r) {
40 |             c.growing = false;
41 |           }
42 |         }
43 |       }
44 | 
45 |       // Is it stuck to an edge?
46 |       if (c.growing) {
47 |         c.growing = !c.edges();
48 |       }
49 |     }
50 |   }
51 | 
52 |   // Let's try to make a certain number of new circles each frame
53 |   // More the longer it has been running
54 |   int target = 1;// + constrain(frameCount / 120, 0, 20);
55 |   int count = 0;
56 |   // Try N times
57 |   for (int i = 0; i < 2000; i++) {
58 |     if (addCircle()) {
59 |       count++;
60 |     }
61 |     // We made enough
62 | 
63 |     if (count == target) {
64 |       break;
65 |     }
66 |   }
67 |   // We can't make any more
68 |   if (count < 1) {
69 |     noLoop();
70 |     println("finished");
71 |   }
72 |   //tint(50);
73 |   //image(canvas, 0, 0);
74 | }
75 | 
76 | // Add one circle
77 | 
78 | boolean addCircle() {
79 |   // Here's a new circle
80 |   
81 |   int index = int(random(spots.size()));
82 |   PVector spot = spots.get(index);
83 |   Circle newCircle = new Circle(spot.x, spot.y, 1);
84 |   // Is it in an ok spot?
85 |   for (Circle other : circles) {
86 |     float d = dist(newCircle.x, newCircle.y, other.x, other.y);
87 |     if (d < other.r+2) {
88 |       newCircle = null;
89 |       break;
90 |     }
91 |   }
92 |   // If it is, add it
93 |   if (newCircle != null) {
94 |     circles.add(newCircle);
95 |     return true;
96 |   } else {
97 |     return false;
98 |   }
99 | }


--------------------------------------------------------------------------------
/Processing_2017/data/2017.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/Processing_2017/data/2017.png


--------------------------------------------------------------------------------
/Processing_2017/data/2017.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/Processing_2017/data/2017.psd


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 2017
2 | Happy 2017 from [Redacted] Rainbow
3 | 


--------------------------------------------------------------------------------
/data/2017.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/data/2017.png


--------------------------------------------------------------------------------
/data/2017.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/data/2017.psd


--------------------------------------------------------------------------------
/font_paths/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodingTrain/2017/a2c2e729909cc0c2aaf1a87c649b654c8062b455/font_paths/OpenSans-Regular.ttf


--------------------------------------------------------------------------------
/font_paths/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |   <meta charset="UTF-8">
 4 |   <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
 5 |   <script language="javascript" type="text/javascript" src="libraries/p5.dom.js"></script>
 6 |   <script language="javascript" type="text/javascript" src="pathhelper.js"></script>
 7 |   <script language="javascript" type="text/javascript" src="vehicle.js"></script>
 8 |   <script language="javascript" type="text/javascript" src="path.js"></script>
 9 |   <script language="javascript" type="text/javascript" src="sketch.js?20"></script>
10 |   <!-- this line removes any default padding and style. you might only need one of these values set. -->
11 |   <style> body {padding: 0; margin: 0;} </style>
12 | </head>
13 | 
14 | <body>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/font_paths/libraries/p5.dom.js:
--------------------------------------------------------------------------------
   1 | /*! p5.dom.js v0.2.13 Oct 1, 2016 */
   2 | /**
   3 |  * <p>The web is much more than just canvas and p5.dom makes it easy to interact
   4 |  * with other HTML5 objects, including text, hyperlink, image, input, video,
   5 |  * audio, and webcam.</p>
   6 |  * <p>There is a set of creation methods, DOM manipulation methods, and
   7 |  * an extended p5.Element that supports a range of HTML elements. See the
   8 |  * <a href="https://github.com/processing/p5.js/wiki/Beyond-the-canvas">
   9 |  * beyond the canvas tutorial</a> for a full overview of how this addon works.
  10 |  *
  11 |  * <p>Methods and properties shown in black are part of the p5.js core, items in
  12 |  * blue are part of the p5.dom library. You will need to include an extra file
  13 |  * in order to access the blue functions. See the
  14 |  * <a href="http://p5js.org/libraries/#using-a-library">using a library</a>
  15 |  * section for information on how to include this library. p5.dom comes with
  16 |  * <a href="http://p5js.org/download">p5 complete</a> or you can download the single file
  17 |  * <a href="https://raw.githubusercontent.com/lmccart/p5.js/master/lib/addons/p5.dom.js">
  18 |  * here</a>.</p>
  19 |  * <p>See <a href="https://github.com/processing/p5.js/wiki/Beyond-the-canvas">tutorial: beyond the canvas</a>
  20 |  * for more info on how to use this libary.</a>
  21 |  *
  22 |  * @module p5.dom
  23 |  * @submodule p5.dom
  24 |  * @for p5.dom
  25 |  * @main
  26 |  */
  27 | 
  28 | (function (root, factory) {
  29 |   if (typeof define === 'function' && define.amd)
  30 |     define('p5.dom', ['p5'], function (p5) { (factory(p5));});
  31 |   else if (typeof exports === 'object')
  32 |     factory(require('../p5'));
  33 |   else
  34 |     factory(root['p5']);
  35 | }(this, function (p5) {
  36 | // =============================================================================
  37 | //                         p5 additions
  38 | // =============================================================================
  39 | 
  40 |   /**
  41 |    * Searches the page for an element with the given ID, class, or tag name (using the '#' or '.'
  42 |    * prefixes to specify an ID or class respectively, and none for a tag) and returns it as
  43 |    * a p5.Element. If a class or tag name is given with more than 1 element,
  44 |    * only the first element will be returned.
  45 |    * The DOM node itself can be accessed with .elt.
  46 |    * Returns null if none found. You can also specify a container to search within.
  47 |    *
  48 |    * @method select
  49 |    * @param  {String} name id, class, or tag name of element to search for
  50 |    * @param  {String} [container] id, p5.Element, or HTML element to search within
  51 |    * @return {Object/p5.Element|Null} p5.Element containing node found
  52 |    * @example
  53 |    * <div ><code class='norender'>
  54 |    * function setup() {
  55 |    *   createCanvas(100,100);
  56 |    *   //translates canvas 50px down
  57 |    *   select('canvas').position(100, 100);
  58 |    * }
  59 |    * </code></div>
  60 |    * <div ><code class='norender'>
  61 |    * // these are all valid calls to select()
  62 |    * var a = select('#moo');
  63 |    * var b = select('#blah', '#myContainer');
  64 |    * var c = select('#foo', b);
  65 |    * var d = document.getElementById('beep');
  66 |    * var e = select('p', d);
  67 |    * </code></div>
  68 |    *
  69 |    */
  70 |   p5.prototype.select = function (e, p) {
  71 |     var res = null;
  72 |     var container = getContainer(p);
  73 |     if (e[0] === '.'){
  74 |       e = e.slice(1);
  75 |       res = container.getElementsByClassName(e);
  76 |       if (res.length) {
  77 |         res = res[0];
  78 |       } else {
  79 |         res = null;
  80 |       }
  81 |     }else if (e[0] === '#'){
  82 |       e = e.slice(1);
  83 |       res = container.getElementById(e);
  84 |     }else {
  85 |       res = container.getElementsByTagName(e);
  86 |       if (res.length) {
  87 |         res = res[0];
  88 |       } else {
  89 |         res = null;
  90 |       }
  91 |     }
  92 |     if (res) {
  93 |       return wrapElement(res);
  94 |     } else {
  95 |       return null;
  96 |     }
  97 |   };
  98 | 
  99 |   /**
 100 |    * Searches the page for elements with the given class or tag name (using the '.' prefix
 101 |    * to specify a class and no prefix for a tag) and returns them as p5.Elements
 102 |    * in an array.
 103 |    * The DOM node itself can be accessed with .elt.
 104 |    * Returns an empty array if none found.
 105 |    * You can also specify a container to search within.
 106 |    *
 107 |    * @method selectAll
 108 |    * @param  {String} name class or tag name of elements to search for
 109 |    * @param  {String} [container] id, p5.Element, or HTML element to search within
 110 |    * @return {Array} Array of p5.Elements containing nodes found
 111 |    * @example
 112 |    * <div class='norender'><code>
 113 |    * function setup() {
 114 |    *   createButton('btn');
 115 |    *   createButton('2nd btn');
 116 |    *   createButton('3rd btn');
 117 |    *   var buttons = selectAll('button');
 118 |    *
 119 |    *   for (var i = 0; i < buttons.length; i++){
 120 |    *     buttons[i].size(100,100);
 121 |    *   }
 122 |    * }
 123 |    * </code></div>
 124 |    * <div class='norender'><code>
 125 |    * // these are all valid calls to selectAll()
 126 |    * var a = selectAll('.moo');
 127 |    * var b = selectAll('div');
 128 |    * var c = selectAll('button', '#myContainer');
 129 |    * var d = select('#container');
 130 |    * var e = selectAll('p', d);
 131 |    * var f = document.getElementById('beep');
 132 |    * var g = select('.blah', f);
 133 |    * </code></div>
 134 |    *
 135 |    */
 136 |   p5.prototype.selectAll = function (e, p) {
 137 |     var arr = [];
 138 |     var res;
 139 |     var container = getContainer(p);
 140 |     if (e[0] === '.'){
 141 |       e = e.slice(1);
 142 |       res = container.getElementsByClassName(e);
 143 |     } else {
 144 |       res = container.getElementsByTagName(e);
 145 |     }
 146 |     if (res) {
 147 |       for (var j = 0; j < res.length; j++) {
 148 |         var obj = wrapElement(res[j]);
 149 |         arr.push(obj);
 150 |       }
 151 |     }
 152 |     return arr;
 153 |   };
 154 | 
 155 |   /**
 156 |    * Helper function for select and selectAll
 157 |    */
 158 |   function getContainer(p) {
 159 |     var container = document;
 160 |     if (typeof p === 'string' && p[0] === '#'){
 161 |       p = p.slice(1);
 162 |       container = document.getElementById(p) || document;
 163 |     } else if (p instanceof p5.Element){
 164 |       container = p.elt;
 165 |     } else if (p instanceof HTMLElement){
 166 |       container = p;
 167 |     }
 168 |     return container;
 169 |   }
 170 | 
 171 |   /**
 172 |    * Helper function for getElement and getElements.
 173 |    */
 174 |   function wrapElement(elt) {
 175 |     if(elt.tagName === "INPUT" && elt.type === "checkbox") {
 176 |       var converted = new p5.Element(elt);
 177 |       converted.checked = function(){
 178 |       if (arguments.length === 0){
 179 |         return this.elt.checked;
 180 |       } else if(arguments[0]) {
 181 |         this.elt.checked = true;
 182 |       } else {
 183 |         this.elt.checked = false;
 184 |       }
 185 |       return this;
 186 |       };
 187 |       return converted;
 188 |     } else if (elt.tagName === "VIDEO" || elt.tagName === "AUDIO") {
 189 |       return new p5.MediaElement(elt);
 190 |     } else {
 191 |       return new p5.Element(elt);
 192 |     }
 193 |   }
 194 | 
 195 |   /**
 196 |    * Removes all elements created by p5, except any canvas / graphics
 197 |    * elements created by createCanvas or createGraphics.
 198 |    * Event handlers are removed, and element is removed from the DOM.
 199 |    * @method removeElements
 200 |    * @example
 201 |    * <div class='norender'><code>
 202 |    * function setup() {
 203 |    *   createCanvas(100, 100);
 204 |    *   createDiv('this is some text');
 205 |    *   createP('this is a paragraph');
 206 |    * }
 207 |    * function mousePressed() {
 208 |    *   removeElements(); // this will remove the div and p, not canvas
 209 |    * }
 210 |    * </code></div>
 211 |    *
 212 |    */
 213 |   p5.prototype.removeElements = function (e) {
 214 |     for (var i=0; i<this._elements.length; i++) {
 215 |       if (!(this._elements[i].elt instanceof HTMLCanvasElement)) {
 216 |         this._elements[i].remove();
 217 |       }
 218 |     }
 219 |   };
 220 | 
 221 |   /**
 222 |    * Helpers for create methods.
 223 |    */
 224 |   function addElement(elt, pInst, media) {
 225 |     var node = pInst._userNode ? pInst._userNode : document.body;
 226 |     node.appendChild(elt);
 227 |     var c = media ? new p5.MediaElement(elt) : new p5.Element(elt);
 228 |     pInst._elements.push(c);
 229 |     return c;
 230 |   }
 231 | 
 232 |   /**
 233 |    * Creates a &lt;div&gt;&lt;/div&gt; element in the DOM with given inner HTML.
 234 |    * Appends to the container node if one is specified, otherwise
 235 |    * appends to body.
 236 |    *
 237 |    * @method createDiv
 238 |    * @param  {String} html inner HTML for element created
 239 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 240 |    * @example
 241 |    * <div class='norender'><code>
 242 |    * var myDiv;
 243 |    * function setup() {
 244 |    *   myDiv = createDiv('this is some text');
 245 |    * }
 246 |    * </code></div>
 247 |    */
 248 | 
 249 |   /**
 250 |    * Creates a &lt;p&gt;&lt;/p&gt; element in the DOM with given inner HTML. Used
 251 |    * for paragraph length text.
 252 |    * Appends to the container node if one is specified, otherwise
 253 |    * appends to body.
 254 |    *
 255 |    * @method createP
 256 |    * @param  {String} html inner HTML for element created
 257 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 258 |    * @example
 259 |    * <div class='norender'><code>
 260 |    * var myP;
 261 |    * function setup() {
 262 |    *   myP = createP('this is some text');
 263 |    * }
 264 |    * </code></div>
 265 |    */
 266 | 
 267 |   /**
 268 |    * Creates a &lt;span&gt;&lt;/span&gt; element in the DOM with given inner HTML.
 269 |    * Appends to the container node if one is specified, otherwise
 270 |    * appends to body.
 271 |    *
 272 |    * @method createSpan
 273 |    * @param  {String} html inner HTML for element created
 274 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 275 |    * @example
 276 |    * <div class='norender'><code>
 277 |    * var mySpan;
 278 |    * function setup() {
 279 |    *   mySpan = createSpan('this is some text');
 280 |    * }
 281 |    * </code></div>
 282 |    */
 283 |   var tags = ['div', 'p', 'span'];
 284 |   tags.forEach(function(tag) {
 285 |     var method = 'create' + tag.charAt(0).toUpperCase() + tag.slice(1);
 286 |     p5.prototype[method] = function(html) {
 287 |       var elt = document.createElement(tag);
 288 |       elt.innerHTML = typeof html === undefined ? "" : html;
 289 |       return addElement(elt, this);
 290 |     }
 291 |   });
 292 | 
 293 |   /**
 294 |    * Creates an &lt;img /&gt; element in the DOM with given src and
 295 |    * alternate text.
 296 |    * Appends to the container node if one is specified, otherwise
 297 |    * appends to body.
 298 |    *
 299 |    * @method createImg
 300 |    * @param  {String} src src path or url for image
 301 |    * @param  {String} [alt] alternate text to be used if image does not load
 302 |    * @param  {Function} [successCallback] callback to be called once image data is loaded
 303 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 304 |    * @example
 305 |    * <div class='norender'><code>
 306 |    * var img;
 307 |    * function setup() {
 308 |    *   img = createImg('http://p5js.org/img/asterisk-01.png');
 309 |    * }
 310 |    * </code></div>
 311 |    */
 312 |   p5.prototype.createImg = function() {
 313 |     var elt = document.createElement('img');
 314 |     var args = arguments;
 315 |     var self;
 316 |     var setAttrs = function(){
 317 |       self.width = elt.offsetWidth;
 318 |       self.height = elt.offsetHeight;
 319 |       if (args.length > 1 && typeof args[1] === 'function'){
 320 |         self.fn = args[1];
 321 |         self.fn();
 322 |       }else if (args.length > 1 && typeof args[2] === 'function'){
 323 |         self.fn = args[2];
 324 |         self.fn();
 325 |       }
 326 |     };
 327 |     elt.src = args[0];
 328 |     if (args.length > 1 && typeof args[1] === 'string'){
 329 |       elt.alt = args[1];
 330 |     }
 331 |     elt.onload = function(){
 332 |       setAttrs();
 333 |     }
 334 |     self = addElement(elt, this);
 335 |     return self;
 336 |   };
 337 | 
 338 |   /**
 339 |    * Creates an &lt;a&gt;&lt;/a&gt; element in the DOM for including a hyperlink.
 340 |    * Appends to the container node if one is specified, otherwise
 341 |    * appends to body.
 342 |    *
 343 |    * @method createA
 344 |    * @param  {String} href       url of page to link to
 345 |    * @param  {String} html       inner html of link element to display
 346 |    * @param  {String} [target]   target where new link should open,
 347 |    *                             could be _blank, _self, _parent, _top.
 348 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 349 |    * @example
 350 |    * <div class='norender'><code>
 351 |    * var myLink;
 352 |    * function setup() {
 353 |    *   myLink = createA('http://p5js.org/', 'this is a link');
 354 |    * }
 355 |    * </code></div>
 356 |    */
 357 |   p5.prototype.createA = function(href, html, target) {
 358 |     var elt = document.createElement('a');
 359 |     elt.href = href;
 360 |     elt.innerHTML = html;
 361 |     if (target) elt.target = target;
 362 |     return addElement(elt, this);
 363 |   };
 364 | 
 365 |   /** INPUT **/
 366 | 
 367 | 
 368 |   /**
 369 |    * Creates a slider &lt;input&gt;&lt;/input&gt; element in the DOM.
 370 |    * Use .size() to set the display length of the slider.
 371 |    * Appends to the container node if one is specified, otherwise
 372 |    * appends to body.
 373 |    *
 374 |    * @method createSlider
 375 |    * @param  {Number} min minimum value of the slider
 376 |    * @param  {Number} max maximum value of the slider
 377 |    * @param  {Number} [value] default value of the slider
 378 |    * @param  {Number} [step] step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)
 379 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 380 |    * @example
 381 |    * <div><code>
 382 |    * var slider;
 383 |    * function setup() {
 384 |    *   slider = createSlider(0, 255, 100);
 385 |    *   slider.position(10, 10);
 386 |    *   slider.style('width', '80px');
 387 |    * }
 388 |    *
 389 |    * function draw() {
 390 |    *   var val = slider.value();
 391 |    *   background(val);
 392 |    * }
 393 |    * </code></div>
 394 |    *
 395 |    * <div><code>
 396 |    * var slider;
 397 |    * function setup() {
 398 |    *   colorMode(HSB);
 399 |    *   slider = createSlider(0, 360, 60, 40);
 400 |    *   slider.position(10, 10);
 401 |    *   slider.style('width', '80px');
 402 |    * }
 403 |    *
 404 |    * function draw() {
 405 |    *   var val = slider.value();
 406 |    *   background(val, 100, 100, 1);
 407 |    * }
 408 |    * </code></div>
 409 |    */
 410 |   p5.prototype.createSlider = function(min, max, value, step) {
 411 |     var elt = document.createElement('input');
 412 |     elt.type = 'range';
 413 |     elt.min = min;
 414 |     elt.max = max;
 415 |     if (step === 0) {
 416 |       elt.step = .000000000000000001; // smallest valid step
 417 |     } else if (step) {
 418 |       elt.step = step;
 419 |     }
 420 |     if (typeof(value) === "number") elt.value = value;
 421 |     return addElement(elt, this);
 422 |   };
 423 | 
 424 |   /**
 425 |    * Creates a &lt;button&gt;&lt;/button&gt; element in the DOM.
 426 |    * Use .size() to set the display size of the button.
 427 |    * Use .mousePressed() to specify behavior on press.
 428 |    * Appends to the container node if one is specified, otherwise
 429 |    * appends to body.
 430 |    *
 431 |    * @method createButton
 432 |    * @param  {String} label label displayed on the button
 433 |    * @param  {String} [value] value of the button
 434 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 435 |    * @example
 436 |    * <div class='norender'><code>
 437 |    * var button;
 438 |    * function setup() {
 439 |    *   createCanvas(100, 100);
 440 |    *   background(0);
 441 |    *   button = createButton('click me');
 442 |    *   button.position(19, 19);
 443 |    *   button.mousePressed(changeBG);
 444 |    * }
 445 |    *
 446 |    * function changeBG() {
 447 |    *   var val = random(255);
 448 |    *   background(val);
 449 |    * }
 450 |    * </code></div>
 451 |    */
 452 |   p5.prototype.createButton = function(label, value) {
 453 |     var elt = document.createElement('button');
 454 |     elt.innerHTML = label;
 455 |     elt.value = value;
 456 |     if (value) elt.value = value;
 457 |     return addElement(elt, this);
 458 |   };
 459 | 
 460 |   /**
 461 |    * Creates a checkbox &lt;input&gt;&lt;/input&gt; element in the DOM.
 462 |    * Calling .checked() on a checkbox returns if it is checked or not
 463 |    *
 464 |    * @method createCheckbox
 465 |    * @param  {String} [label] label displayed after checkbox
 466 |    * @param  {boolean} [value] value of the checkbox; checked is true, unchecked is false.Unchecked if no value given
 467 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 468 |    * @example
 469 |    * <div class='norender'><code>
 470 |    * var checkbox;
 471 |    *
 472 |    * function setup() {
 473 |    *   checkbox = createCheckbox('label', false);
 474 |    *   checkbox.changed(myCheckedEvent);
 475 |    * }
 476 |    *
 477 |    * function myCheckedEvent() {
 478 |    *   if (this.checked()) {
 479 |    *     console.log("Checking!");
 480 |    *   } else {
 481 |    *     console.log("Unchecking!");
 482 |    *   }
 483 |    * }
 484 |    * </code></div>
 485 |    */
 486 |   p5.prototype.createCheckbox = function() {
 487 |     var elt = document.createElement('div');
 488 |     var checkbox = document.createElement('input');
 489 |     checkbox.type = 'checkbox';
 490 |     elt.appendChild(checkbox);
 491 |     //checkbox must be wrapped in p5.Element before label so that label appears after
 492 |     var self = addElement(elt, this);
 493 |     self.checked = function(){
 494 |       var cb = self.elt.getElementsByTagName('input')[0];
 495 |       if (cb) {
 496 |         if (arguments.length === 0){
 497 |           return cb.checked;
 498 |         }else if(arguments[0]){
 499 |           cb.checked = true;
 500 |         }else{
 501 |           cb.checked = false;
 502 |         }
 503 |       }
 504 |       return self;
 505 |     };
 506 |     this.value = function(val){
 507 |       self.value = val;
 508 |       return this;
 509 |     };
 510 |     if (arguments[0]){
 511 |       var ran = Math.random().toString(36).slice(2);
 512 |       var label = document.createElement('label');
 513 |       checkbox.setAttribute('id', ran);
 514 |       label.htmlFor = ran;
 515 |       self.value(arguments[0]);
 516 |       label.appendChild(document.createTextNode(arguments[0]));
 517 |       elt.appendChild(label);
 518 |     }
 519 |     if (arguments[1]){
 520 |       checkbox.checked = true;
 521 |     }
 522 |     return self;
 523 |   };
 524 | 
 525 |   /**
 526 |    * Creates a dropdown menu &lt;select&gt;&lt;/select&gt; element in the DOM.
 527 |    * @method createSelect
 528 |    * @param {boolean} [multiple] [true if dropdown should support multiple selections]
 529 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 530 |    * @example
 531 |    * <div><code>
 532 |    * var sel;
 533 |    *
 534 |    * function setup() {
 535 |    *   textAlign(CENTER);
 536 |    *   background(200);
 537 |    *   sel = createSelect();
 538 |    *   sel.position(10, 10);
 539 |    *   sel.option('pear');
 540 |    *   sel.option('kiwi');
 541 |    *   sel.option('grape');
 542 |    *   sel.changed(mySelectEvent);
 543 |    * }
 544 |    *
 545 |    * function mySelectEvent() {
 546 |    *   var item = sel.value();
 547 |    *   background(200);
 548 |    *   text("it's a "+item+"!", 50, 50);
 549 |    * }
 550 |    * </code></div>
 551 |    */
 552 |   p5.prototype.createSelect = function(mult) {
 553 |     var elt = document.createElement('select');
 554 |     if (mult){
 555 |       elt.setAttribute('multiple', 'true');
 556 |     }
 557 |     var self = addElement(elt, this);
 558 |     self.option = function(name, value){
 559 |       var opt = document.createElement('option');
 560 |       opt.innerHTML = name;
 561 |       if (arguments.length > 1)
 562 |         opt.value = value;
 563 |       else
 564 |         opt.value = name;
 565 |       elt.appendChild(opt);
 566 |     };
 567 |     self.selected = function(value){
 568 |       var arr = [];
 569 |       if (arguments.length > 0){
 570 |         for (var i = 0; i < this.elt.length; i++){
 571 |           if (value.toString() === this.elt[i].value){
 572 |             this.elt.selectedIndex = i;
 573 |           }
 574 |         }
 575 |         return this;
 576 |       }else{
 577 |         if (mult){
 578 |           for (var i = 0; i < this.elt.selectedOptions.length; i++){
 579 |             arr.push(this.elt.selectedOptions[i].value);
 580 |           }
 581 |           return arr;
 582 |         }else{
 583 |           return this.elt.value;
 584 |         }
 585 |       }
 586 |     };
 587 |     return self;
 588 |   };
 589 | 
 590 |   /**
 591 |    * Creates a radio button &lt;input&gt;&lt;/input&gt; element in the DOM.
 592 |    * The .option() method can be used to set options for the radio after it is
 593 |    * created. The .value() method will return the currently selected option.
 594 |    *
 595 |    * @method createRadio
 596 |    * @param  {String} [divId] the id and name of the created div and input field respectively
 597 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 598 |    * @example
 599 |    * <div><code>
 600 |    * var radio;
 601 |    *
 602 |    * function setup() {
 603 |    *   radio = createRadio();
 604 |    *   radio.option("black");
 605 |    *   radio.option("white");
 606 |    *   radio.option("gray");
 607 |    *   radio.style('width', '60px');
 608 |    *   textAlign(CENTER);
 609 |    *   fill(255, 0, 0);
 610 |    * }
 611 |    *
 612 |    * function draw() {
 613 |    *   var val = radio.value();
 614 |    *   background(val);
 615 |    *   text(val, width/2, height/2);
 616 |    * }
 617 |    * </code></div>
 618 |    * <div><code>
 619 |    * var radio;
 620 |    *
 621 |    * function setup() {
 622 |    *   radio = createRadio();
 623 |    *   radio.option('apple', 1);
 624 |    *   radio.option('bread', 2);
 625 |    *   radio.option('juice', 3);
 626 |    *   radio.style('width', '60px');
 627 |    *   textAlign(CENTER);
 628 |    * }
 629 |    *
 630 |    * function draw() {
 631 |    *   background(200);
 632 |    *   var val = radio.value();
 633 |    *   if (val) {
 634 |    *     text('item cost is $'+val, width/2, height/2);
 635 |    *   }
 636 |    * }
 637 |    * </code></div>
 638 |    */
 639 |   p5.prototype.createRadio = function() {
 640 |     var radios = document.querySelectorAll("input[type=radio]");
 641 |     var count = 0;
 642 |     if(radios.length > 1){
 643 |       var length = radios.length;
 644 |       var prev=radios[0].name;
 645 |       var current = radios[1].name;
 646 |       count = 1;
 647 |       for(var i = 1; i < length; i++) {
 648 |         current = radios[i].name;
 649 |         if(prev != current){
 650 |           count++;
 651 |         }
 652 |         prev = current;
 653 |       }
 654 |     }
 655 |     else if (radios.length == 1){
 656 |       count = 1;
 657 |     }
 658 |     var elt = document.createElement('div');
 659 |     var self = addElement(elt, this);
 660 |     var times = -1;
 661 |     self.option = function(name, value){
 662 |       var opt = document.createElement('input');
 663 |       opt.type = 'radio';
 664 |       opt.innerHTML = name;
 665 |       if (arguments.length > 1)
 666 |         opt.value = value;
 667 |       else
 668 |         opt.value = name;
 669 |       opt.setAttribute('name',"defaultradio"+count);
 670 |       elt.appendChild(opt);
 671 |       if (name){
 672 |         times++;
 673 |         var ran = Math.random().toString(36).slice(2);
 674 |         var label = document.createElement('label');
 675 |         opt.setAttribute('id', "defaultradio"+count+"-"+times);
 676 |         label.htmlFor = "defaultradio"+count+"-"+times;
 677 |         label.appendChild(document.createTextNode(name));
 678 |         elt.appendChild(label);
 679 |       }
 680 |       return opt;
 681 |     };
 682 |     self.selected = function(){
 683 |       var length = this.elt.childNodes.length;
 684 |       if(arguments.length == 1) {
 685 |         for (var i = 0; i < length; i+=2){
 686 |           if(this.elt.childNodes[i].value == arguments[0])
 687 |             this.elt.childNodes[i].checked = true;
 688 |         }
 689 |         return this;
 690 |       } else {
 691 |         for (var i = 0; i < length; i+=2){
 692 |           if(this.elt.childNodes[i].checked == true)
 693 |             return this.elt.childNodes[i].value;
 694 |         }
 695 |       }
 696 |     };
 697 |     self.value = function(){
 698 |       var length = this.elt.childNodes.length;
 699 |       if(arguments.length == 1) {
 700 |         for (var i = 0; i < length; i+=2){
 701 |           if(this.elt.childNodes[i].value == arguments[0])
 702 |             this.elt.childNodes[i].checked = true;
 703 |         }
 704 |         return this;
 705 |       } else {
 706 |         for (var i = 0; i < length; i+=2){
 707 |           if(this.elt.childNodes[i].checked == true)
 708 |             return this.elt.childNodes[i].value;
 709 |         }
 710 |         return "";
 711 |       }
 712 |     };
 713 |     return self
 714 |   };
 715 | 
 716 |   /**
 717 |    * Creates an &lt;input&gt;&lt;/input&gt; element in the DOM for text input.
 718 |    * Use .size() to set the display length of the box.
 719 |    * Appends to the container node if one is specified, otherwise
 720 |    * appends to body.
 721 |    *
 722 |    * @method createInput
 723 |    * @param  {Number} [value] default value of the input box
 724 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
 725 |    * @example
 726 |    * <div class='norender'><code>
 727 |    * function setup(){
 728 |    *   var inp = createInput('');
 729 |    *   inp.input(myInputEvent);
 730 |    * }
 731 |    *
 732 |    * function myInputEvent(){
 733 |    *   console.log('you are typing: ', this.value());
 734 |    * }
 735 |    *
 736 |    * </code></div>
 737 |    */
 738 |   p5.prototype.createInput = function(value) {
 739 |     var elt = document.createElement('input');
 740 |     elt.type = 'text';
 741 |     if (value) elt.value = value;
 742 |     return addElement(elt, this);
 743 |   };
 744 | 
 745 |   /**
 746 |    * Creates an &lt;input&gt;&lt;/input&gt; element in the DOM of type 'file'.
 747 |    * This allows users to select local files for use in a sketch.
 748 |    *
 749 |    * @method createFileInput
 750 |    * @param  {Function} [callback] callback function for when a file loaded
 751 |    * @param  {String} [multiple] optional to allow multiple files selected
 752 |    * @return {Object/p5.Element} pointer to p5.Element holding created DOM element
 753 |    */
 754 |   p5.prototype.createFileInput = function(callback, multiple) {
 755 | 
 756 |     // Is the file stuff supported?
 757 |     if (window.File && window.FileReader && window.FileList && window.Blob) {
 758 |       // Yup, we're ok and make an input file selector
 759 |       var elt = document.createElement('input');
 760 |       elt.type = 'file';
 761 | 
 762 |       // If we get a second argument that evaluates to true
 763 |       // then we are looking for multiple files
 764 |       if (multiple) {
 765 |         // Anything gets the job done
 766 |         elt.multiple = 'multiple';
 767 |       }
 768 | 
 769 |       // Function to handle when a file is selected
 770 |       // We're simplifying life and assuming that we always
 771 |       // want to load every selected file
 772 |       function handleFileSelect(evt) {
 773 |         // These are the files
 774 |         var files = evt.target.files;
 775 |         // Load each one and trigger a callback
 776 |         for (var i = 0; i < files.length; i++) {
 777 |           var f = files[i];
 778 |           var reader = new FileReader();
 779 |           function makeLoader(theFile) {
 780 |             // Making a p5.File object
 781 |             var p5file = new p5.File(theFile);
 782 |             return function(e) {
 783 |               p5file.data = e.target.result;
 784 |               callback(p5file);
 785 |             };
 786 |           };
 787 |           reader.onload = makeLoader(f);
 788 | 
 789 |           // Text or data?
 790 |           // This should likely be improved
 791 |           if (f.type.indexOf('text') > -1) {
 792 |             reader.readAsText(f);
 793 |           } else {
 794 |             reader.readAsDataURL(f);
 795 |           }
 796 |         }
 797 |       }
 798 | 
 799 |       // Now let's handle when a file was selected
 800 |       elt.addEventListener('change', handleFileSelect, false);
 801 |       return addElement(elt, this);
 802 |     } else {
 803 |       console.log('The File APIs are not fully supported in this browser. Cannot create element.');
 804 |     }
 805 |   };
 806 | 
 807 | 
 808 |   /** VIDEO STUFF **/
 809 | 
 810 |   function createMedia(pInst, type, src, callback) {
 811 |     var elt = document.createElement(type);
 812 | 
 813 |     // allow src to be empty
 814 |     var src = src || '';
 815 |     if (typeof src === 'string') {
 816 |       src = [src];
 817 |     }
 818 |     for (var i=0; i<src.length; i++) {
 819 |       var source = document.createElement('source');
 820 |       source.src = src[i];
 821 |       elt.appendChild(source);
 822 |     }
 823 |     if (typeof callback !== 'undefined') {
 824 |       var callbackHandler = function() {
 825 |         callback();
 826 |         elt.removeEventListener('canplaythrough', callbackHandler);
 827 |       }
 828 |       elt.addEventListener('canplaythrough', callbackHandler);
 829 |     }
 830 | 
 831 |     var c = addElement(elt, pInst, true);
 832 |     c.loadedmetadata = false;
 833 |     // set width and height onload metadata
 834 |     elt.addEventListener('loadedmetadata', function() {
 835 |       c.width = elt.videoWidth;
 836 |       c.height = elt.videoHeight;
 837 |       // set elt width and height if not set
 838 |       if (c.elt.width === 0) c.elt.width = elt.videoWidth;
 839 |       if (c.elt.height === 0) c.elt.height = elt.videoHeight;
 840 |       c.loadedmetadata = true;
 841 |     });
 842 | 
 843 |     return c;
 844 |   }
 845 |   /**
 846 |    * Creates an HTML5 &lt;video&gt; element in the DOM for simple playback
 847 |    * of audio/video. Shown by default, can be hidden with .hide()
 848 |    * and drawn into canvas using video(). Appends to the container
 849 |    * node if one is specified, otherwise appends to body. The first parameter
 850 |    * can be either a single string path to a video file, or an array of string
 851 |    * paths to different formats of the same video. This is useful for ensuring
 852 |    * that your video can play across different browsers, as each supports
 853 |    * different formats. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">this
 854 |    * page</a> for further information about supported formats.
 855 |    *
 856 |    * @method createVideo
 857 |    * @param  {String|Array} src  path to a video file, or array of paths for
 858 |    *                             supporting different browsers
 859 |    * @param  {Object} [callback] callback function to be called upon
 860 |    *                             'canplaythrough' event fire, that is, when the
 861 |    *                             browser can play the media, and estimates that
 862 |    *                             enough data has been loaded to play the media
 863 |    *                             up to its end without having to stop for
 864 |    *                             further buffering of content
 865 |    * @return {Object/p5.Element} pointer to video p5.Element
 866 |    */
 867 |   p5.prototype.createVideo = function(src, callback) {
 868 |     return createMedia(this, 'video', src, callback);
 869 |   };
 870 | 
 871 |   /** AUDIO STUFF **/
 872 | 
 873 |   /**
 874 |    * Creates a hidden HTML5 &lt;audio&gt; element in the DOM for simple audio
 875 |    * playback. Appends to the container node if one is specified,
 876 |    * otherwise appends to body. The first parameter
 877 |    * can be either a single string path to a audio file, or an array of string
 878 |    * paths to different formats of the same audio. This is useful for ensuring
 879 |    * that your audio can play across different browsers, as each supports
 880 |    * different formats. See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats">this
 881 |    * page for further information about supported formats</a>.
 882 |    *
 883 |    * @method createAudio
 884 |    * @param  {String|Array} src  path to an audio file, or array of paths for
 885 |    *                             supporting different browsers
 886 |    * @param  {Object} [callback] callback function to be called upon
 887 |    *                             'canplaythrough' event fire, that is, when the
 888 |    *                             browser can play the media, and estimates that
 889 |    *                             enough data has been loaded to play the media
 890 |    *                             up to its end without having to stop for
 891 |    *                             further buffering of content
 892 |    * @return {Object/p5.Element} pointer to audio p5.Element
 893 |    */
 894 |   p5.prototype.createAudio = function(src, callback) {
 895 |     return createMedia(this, 'audio', src, callback);
 896 |   };
 897 | 
 898 | 
 899 |   /** CAMERA STUFF **/
 900 | 
 901 |   p5.prototype.VIDEO = 'video';
 902 |   p5.prototype.AUDIO = 'audio';
 903 | 
 904 |   navigator.getUserMedia  = navigator.getUserMedia ||
 905 |                             navigator.webkitGetUserMedia ||
 906 |                             navigator.mozGetUserMedia ||
 907 |                             navigator.msGetUserMedia;
 908 | 
 909 |   /**
 910 |    * <p>Creates a new &lt;video&gt; element that contains the audio/video feed
 911 |    * from a webcam. This can be drawn onto the canvas using video().</p>
 912 |    * <p>More specific properties of the feed can be passing in a Constraints object.
 913 |    * See the
 914 |    * <a href="http://w3c.github.io/mediacapture-main/getusermedia.html#media-track-constraints"> W3C
 915 |    * spec</a> for possible properties. Note that not all of these are supported
 916 |    * by all browsers.</p>
 917 |    * <p>Security note: A new browser security specification requires that getUserMedia,
 918 |    * which is behind createCapture(), only works when you're running the code locally,
 919 |    * or on HTTPS. Learn more <a href="http://stackoverflow.com/questions/34197653/getusermedia-in-chrome-47-without-using-https">here</a>
 920 |    * and <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">here</a>.</p>
 921 |    *
 922 |    * @method createCapture
 923 |    * @param  {String|Constant|Object}   type type of capture, either VIDEO or
 924 |    *                                    AUDIO if none specified, default both,
 925 |    *                                    or a Constraints object
 926 |    * @param  {Function}                 callback function to be called once
 927 |    *                                    stream has loaded
 928 |    * @return {Object/p5.Element} capture video p5.Element
 929 |    * @example
 930 |    * <div class='norender'><code>
 931 |    * var capture;
 932 |    *
 933 |    * function setup() {
 934 |    *   createCanvas(480, 120);
 935 |    *   capture = createCapture(VIDEO);
 936 |    * }
 937 |    *
 938 |    * function draw() {
 939 |    *   image(capture, 0, 0, width, width*capture.height/capture.width);
 940 |    *   filter(INVERT);
 941 |    * }
 942 |    * </code></div>
 943 |    * <div class='norender'><code>
 944 |    * function setup() {
 945 |    *   createCanvas(480, 120);
 946 |    *   var constraints = {
 947 |    *     video: {
 948 |    *       mandatory: {
 949 |    *         minWidth: 1280,
 950 |    *         minHeight: 720
 951 |    *       },
 952 |    *       optional: [
 953 |    *         { maxFrameRate: 10 }
 954 |    *       ]
 955 |    *     },
 956 |    *     audio: true
 957 |    *   };
 958 |    *   createCapture(constraints, function(stream) {
 959 |    *     console.log(stream);
 960 |    *   });
 961 |    * }
 962 |    * </code></div>
 963 |    */
 964 |   p5.prototype.createCapture = function() {
 965 |     var useVideo = true;
 966 |     var useAudio = true;
 967 |     var constraints;
 968 |     var cb;
 969 |     for (var i=0; i<arguments.length; i++) {
 970 |       if (arguments[i] === p5.prototype.VIDEO) {
 971 |         useAudio = false;
 972 |       } else if (arguments[i] === p5.prototype.AUDIO) {
 973 |         useVideo = false;
 974 |       } else if (typeof arguments[i] === 'object') {
 975 |         constraints = arguments[i];
 976 |       } else if (typeof arguments[i] === 'function') {
 977 |         cb = arguments[i];
 978 |       }
 979 |     }
 980 | 
 981 |     if (navigator.getUserMedia) {
 982 |       var elt = document.createElement('video');
 983 | 
 984 |       if (!constraints) {
 985 |         constraints = {video: useVideo, audio: useAudio};
 986 |       }
 987 | 
 988 |       navigator.getUserMedia(constraints, function(stream) {
 989 |         elt.src = window.URL.createObjectURL(stream);
 990 |           if (cb) {
 991 |             cb(stream);
 992 |           }
 993 |       }, function(e) { console.log(e); });
 994 |     } else {
 995 |       throw 'getUserMedia not supported in this browser';
 996 |     }
 997 |     var c = addElement(elt, this, true);
 998 |     c.loadedmetadata = false;
 999 |     // set width and height onload metadata
1000 |     elt.addEventListener('loadedmetadata', function() {
1001 |       elt.play();
1002 |       c.width = c.elt.width = elt.videoWidth;
1003 |       c.height = c.elt.height = elt.videoHeight;
1004 |       c.loadedmetadata = true;
1005 |     });
1006 |     return c;
1007 |   };
1008 | 
1009 |   /**
1010 |    * Creates element with given tag in the DOM with given content.
1011 |    * Appends to the container node if one is specified, otherwise
1012 |    * appends to body.
1013 |    *
1014 |    * @method createElement
1015 |    * @param  {String} tag tag for the new element
1016 |    * @param  {String} [content] html content to be inserted into the element
1017 |    * @return {Object/p5.Element} pointer to p5.Element holding created node
1018 |    * @example
1019 |    * <div class='norender'><code>
1020 |    * var h2 = createElement('h2','im an h2 p5.element!');
1021 |    * </code></div>
1022 |    */
1023 |   p5.prototype.createElement = function(tag, content) {
1024 |     var elt = document.createElement(tag);
1025 |     if (typeof content !== 'undefined') {
1026 |       elt.innerHTML = content;
1027 |     }
1028 |     return addElement(elt, this);
1029 |   };
1030 | 
1031 | 
1032 | // =============================================================================
1033 | //                         p5.Element additions
1034 | // =============================================================================
1035 |   /**
1036 |    *
1037 |    * Adds specified class to the element.
1038 |    *
1039 |    * @for p5.Element
1040 |    * @method addClass
1041 |    * @param  {String} class name of class to add
1042 |    * @return {Object/p5.Element}
1043 |    * @example
1044 |    * <div class='norender'><code>
1045 |    * var div = createDiv('div');
1046 |    * div.addClass('myClass');
1047 |    * </code></div>
1048 |    */
1049 |   p5.Element.prototype.addClass = function(c) {
1050 |     if (this.elt.className) {
1051 |       // PEND don't add class more than once
1052 |       //var regex = new RegExp('[^a-zA-Z\d:]?'+c+'[^a-zA-Z\d:]?');
1053 |       //if (this.elt.className.search(/[^a-zA-Z\d:]?hi[^a-zA-Z\d:]?/) === -1) {
1054 |       this.elt.className = this.elt.className+' '+c;
1055 |       //}
1056 |     } else {
1057 |       this.elt.className = c;
1058 |     }
1059 |     return this;
1060 |   }
1061 | 
1062 |   /**
1063 |    *
1064 |    * Removes specified class from the element.
1065 |    *
1066 |    * @method removeClass
1067 |    * @param  {String} class name of class to remove
1068 |    * @return {Object/p5.Element}
1069 |    */
1070 |   p5.Element.prototype.removeClass = function(c) {
1071 |     var regex = new RegExp('(?:^|\\s)'+c+'(?!\\S)');
1072 |     this.elt.className = this.elt.className.replace(regex, '');
1073 |     this.elt.className = this.elt.className.replace(/^\s+|\s+$/g, ""); //prettify (optional)
1074 |     return this;
1075 |   }
1076 | 
1077 |   /**
1078 |    *
1079 |    * Attaches the element  as a child to the parent specified.
1080 |    * Accepts either a string ID, DOM node, or p5.Element.
1081 |    * If no argument is specified, an array of children DOM nodes is returned.
1082 |    *
1083 |    * @method child
1084 |    * @param  {String|Object|p5.Element} [child] the ID, DOM node, or p5.Element
1085 |    *                         to add to the current element
1086 |    * @return {p5.Element}
1087 |    * @example
1088 |    * <div class='norender'><code>
1089 |    * var div0 = createDiv('this is the parent');
1090 |    * var div1 = createDiv('this is the child');
1091 |    * div0.child(div1); // use p5.Element
1092 |    * </code></div>
1093 |    * <div class='norender'><code>
1094 |    * var div0 = createDiv('this is the parent');
1095 |    * var div1 = createDiv('this is the child');
1096 |    * div1.id('apples');
1097 |    * div0.child('apples'); // use id
1098 |    * </code></div>
1099 |    * <div class='norender'><code>
1100 |    * var div0 = createDiv('this is the parent');
1101 |    * var elt = document.getElementById('myChildDiv');
1102 |    * div0.child(elt); // use element from page
1103 |    * </code></div>
1104 |    */
1105 |   p5.Element.prototype.child = function(c) {
1106 |     if (c === null){
1107 |       return this.elt.childNodes
1108 |     }
1109 |     if (typeof c === 'string') {
1110 |       if (c[0] === '#') {
1111 |         c = c.substring(1);
1112 |       }
1113 |       c = document.getElementById(c);
1114 |     } else if (c instanceof p5.Element) {
1115 |       c = c.elt;
1116 |     }
1117 |     this.elt.appendChild(c);
1118 |     return this;
1119 |   };
1120 | 
1121 |   /**
1122 |    * Centers a p5 Element either vertically, horizontally,
1123 |    * or both, relative to its parent or according to
1124 |    * the body if the Element has no parent. If no argument is passed
1125 |    * the Element is aligned both vertically and horizontally.
1126 |    *
1127 |    * @param  {String} align       passing 'vertical', 'horizontal' aligns element accordingly
1128 |    * @return {Object/p5.Element} pointer to p5.Element
1129 |    * @example
1130 |    * <div><code>
1131 |    * function setup() {
1132 |    *   var div = createDiv('').size(10,10);
1133 |    *   div.style('background-color','orange');
1134 |    *   div.center();
1135 |    *
1136 |    * }
1137 |    * </code></div>
1138 |    */
1139 |   p5.Element.prototype.center = function(align) {
1140 |     var style = this.elt.style.display;
1141 |     var hidden = this.elt.style.display === 'none';
1142 |     var parentHidden = this.parent().style.display === 'none';
1143 |     var pos = { x : this.elt.offsetLeft, y : this.elt.offsetTop };
1144 | 
1145 |     if (hidden) this.show();
1146 | 
1147 |     this.elt.style.display = 'block';
1148 |     this.position(0,0);
1149 | 
1150 |     if (parentHidden) this.parent().style.display = 'block';
1151 | 
1152 |     var wOffset = Math.abs(this.parent().offsetWidth - this.elt.offsetWidth);
1153 |     var hOffset = Math.abs(this.parent().offsetHeight - this.elt.offsetHeight);
1154 |     var y = pos.y;
1155 |     var x = pos.x;
1156 | 
1157 |     if (align === 'both' || align === undefined){
1158 |       this.position(wOffset/2, hOffset/2);
1159 |     }else if (align === 'horizontal'){
1160 |       this.position(wOffset/2, y);
1161 |     }else if (align === 'vertical'){
1162 |       this.position(x, hOffset/2);
1163 |     }
1164 | 
1165 |     this.style('display', style);
1166 | 
1167 |     if (hidden) this.hide();
1168 | 
1169 |     if (parentHidden) this.parent().style.display = 'none';
1170 | 
1171 |     return this;
1172 |   };
1173 | 
1174 |   /**
1175 |    *
1176 |    * If an argument is given, sets the inner HTML of the element,
1177 |    * replacing any existing html. If no arguments are given, returns
1178 |    * the inner HTML of the element.
1179 |    *
1180 |    * @for p5.Element
1181 |    * @method html
1182 |    * @param  {String} [html] the HTML to be placed inside the element
1183 |    * @return {Object/p5.Element|String}
1184 |    * @example
1185 |    * <div class='norender'><code>
1186 |    * var div = createDiv('').size(100,100);
1187 |    * div.style('background-color','orange');
1188 |    * div.html('hi');
1189 |    * </code></div>
1190 |    */
1191 |   p5.Element.prototype.html = function(html) {
1192 |     if (typeof html !== 'undefined') {
1193 |       this.elt.innerHTML = html;
1194 |       return this;
1195 |     } else {
1196 |       return this.elt.innerHTML;
1197 |     }
1198 |   };
1199 | 
1200 |   /**
1201 |    *
1202 |    * Sets the position of the element relative to (0, 0) of the
1203 |    * window. Essentially, sets position:absolute and left and top
1204 |    * properties of style. If no arguments given returns the x and y position
1205 |    * of the element in an object.
1206 |    *
1207 |    * @method position
1208 |    * @param  {Number} [x] x-position relative to upper left of window
1209 |    * @param  {Number} [y] y-position relative to upper left of window
1210 |    * @return {Object/p5.Element}
1211 |    * @example
1212 |    * <div><code class='norender'>
1213 |    * function setup() {
1214 |    *   var cnv = createCanvas(100, 100);
1215 |    *   // positions canvas 50px to the right and 100px
1216 |    *   // below upper left corner of the window
1217 |    *   cnv.position(50, 100);
1218 |    * }
1219 |    * </code></div>
1220 |    */
1221 |   p5.Element.prototype.position = function() {
1222 |     if (arguments.length === 0){
1223 |       return { 'x' : this.elt.offsetLeft , 'y' : this.elt.offsetTop };
1224 |     }else{
1225 |       this.elt.style.position = 'absolute';
1226 |       this.elt.style.left = arguments[0]+'px';
1227 |       this.elt.style.top = arguments[1]+'px';
1228 |       this.x = arguments[0];
1229 |       this.y = arguments[1];
1230 |       return this;
1231 |     }
1232 |   };
1233 | 
1234 |   /* Helper method called by p5.Element.style() */
1235 |   p5.Element.prototype._translate = function(){
1236 |     this.elt.style.position = 'absolute';
1237 |     // save out initial non-translate transform styling
1238 |     var transform = '';
1239 |     if (this.elt.style.transform) {
1240 |       transform = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
1241 |       transform = transform.replace(/translate[X-Z]?\(.*\)/g, '');
1242 |     }
1243 |     if (arguments.length === 2) {
1244 |       this.elt.style.transform = 'translate('+arguments[0]+'px, '+arguments[1]+'px)';
1245 |     } else if (arguments.length > 2) {
1246 |       this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
1247 |       if (arguments.length === 3) {
1248 |         this.elt.parentElement.style.perspective = '1000px';
1249 |       } else {
1250 |         this.elt.parentElement.style.perspective = arguments[3]+'px';
1251 |       }
1252 |     }
1253 |     // add any extra transform styling back on end
1254 |     this.elt.style.transform += transform;
1255 |     return this;
1256 |   };
1257 | 
1258 |   /* Helper method called by p5.Element.style() */
1259 |   p5.Element.prototype._rotate = function(){
1260 |     // save out initial non-rotate transform styling
1261 |     var transform = '';
1262 |     if (this.elt.style.transform) {
1263 |       var transform = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
1264 |       transform = transform.replace(/rotate[X-Z]?\(.*\)/g, '');
1265 |     }
1266 | 
1267 |     if (arguments.length === 1){
1268 |       this.elt.style.transform = 'rotate('+arguments[0]+'deg)';
1269 |     }else if (arguments.length === 2){
1270 |       this.elt.style.transform = 'rotate('+arguments[0]+'deg, '+arguments[1]+'deg)';
1271 |     }else if (arguments.length === 3){
1272 |       this.elt.style.transform = 'rotateX('+arguments[0]+'deg)';
1273 |       this.elt.style.transform += 'rotateY('+arguments[1]+'deg)';
1274 |       this.elt.style.transform += 'rotateZ('+arguments[2]+'deg)';
1275 |     }
1276 |     // add remaining transform back on
1277 |     this.elt.style.transform += transform;
1278 |     return this;
1279 |   };
1280 | 
1281 |   /**
1282 |    * Sets the given style (css) property (1st arg) of the element with the
1283 |    * given value (2nd arg). If a single argument is given, .style()
1284 |    * returns the value of the given property; however, if the single argument
1285 |    * is given in css syntax ('text-align:center'), .style() sets the css
1286 |    * appropriatly. .style() also handles 2d and 3d css transforms. If
1287 |    * the 1st arg is 'rotate', 'translate', or 'position', the following arguments
1288 |    * accept Numbers as values. ('translate', 10, 100, 50);
1289 |    *
1290 |    * @method style
1291 |    * @param  {String} property   property to be set
1292 |    * @param  {String|Number|p5.Color} [value]   value to assign to property
1293 |    * @param  {String|Number} [value]   value to assign to property (rotate/translate)
1294 |    * @param  {String|Number} [value]   value to assign to property (rotate/translate)
1295 |    * @param  {String|Number} [value]   value to assign to property (translate)
1296 |    * @return {String|Object/p5.Element} value of property, if no value is specified
1297 |    * or p5.Element
1298 |    * @example
1299 |    * <div><code class="norender">
1300 |    * var myDiv = createDiv("I like pandas.");
1301 |    * myDiv.style("font-size", "18px");
1302 |    * myDiv.style("color", "#ff0000");
1303 |    * </code></div>
1304 |    * <div><code class="norender">
1305 |    * var col = color(25,23,200,50);
1306 |    * var button = createButton("button");
1307 |    * button.style("background-color", col);
1308 |    * button.position(10, 10);
1309 |    * </code></div>
1310 |    * <div><code class="norender">
1311 |    * var myDiv = createDiv("I like lizards.");
1312 |    * myDiv.style("position", 20, 20);
1313 |    * myDiv.style("rotate", 45);
1314 |    * </code></div>
1315 |    * <div><code class="norender">
1316 |    * var myDiv;
1317 |    * function setup() {
1318 |    *   background(200);
1319 |    *   myDiv = createDiv("I like gray.");
1320 |    *   myDiv.position(20, 20);
1321 |    * }
1322 |    *
1323 |    * function draw() {
1324 |    *   myDiv.style("font-size", mouseX+"px");
1325 |    * }
1326 |    * </code></div>
1327 |    */
1328 |   p5.Element.prototype.style = function(prop, val) {
1329 |     var self = this;
1330 | 
1331 |     if (val instanceof p5.Color) {
1332 |       val = 'rgba(' + val.levels[0] + ',' + val.levels[1] + ',' + val.levels[2] + ',' + val.levels[3]/255 + ')'
1333 |     }
1334 | 
1335 |     if (typeof val === 'undefined') {
1336 |       if (prop.indexOf(':') === -1) {
1337 |         var styles = window.getComputedStyle(self.elt);
1338 |         var style = styles.getPropertyValue(prop);
1339 |         return style;
1340 |       } else {
1341 |         var attrs = prop.split(';');
1342 |         for (var i = 0; i < attrs.length; i++) {
1343 |           var parts = attrs[i].split(':');
1344 |           if (parts[0] && parts[1]) {
1345 |             this.elt.style[parts[0].trim()] = parts[1].trim();
1346 |           }
1347 |         }
1348 |       }
1349 |     } else {
1350 |       if (prop === 'rotate' || prop === 'translate' || prop === 'position'){
1351 |         var trans = Array.prototype.shift.apply(arguments);
1352 |         var f = this[trans] || this['_'+trans];
1353 |         f.apply(this, arguments);
1354 |       } else {
1355 |         this.elt.style[prop] = val;
1356 |         if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top') {
1357 |           var numVal = val.replace(/\D+/g, '');
1358 |           this[prop] = parseInt(numVal, 10); // pend: is this necessary?
1359 |         }
1360 |       }
1361 |     }
1362 |     return this;
1363 |   };
1364 | 
1365 | 
1366 |   /**
1367 |    *
1368 |    * Adds a new attribute or changes the value of an existing attribute
1369 |    * on the specified element. If no value is specified, returns the
1370 |    * value of the given attribute, or null if attribute is not set.
1371 |    *
1372 |    * @method attribute
1373 |    * @param  {String} attr       attribute to set
1374 |    * @param  {String} [value]    value to assign to attribute
1375 |    * @return {String|Object/p5.Element} value of attribute, if no value is
1376 |    *                             specified or p5.Element
1377 |    * @example
1378 |    * <div class="norender"><code>
1379 |    * var myDiv = createDiv("I like pandas.");
1380 |    * myDiv.attribute("align", "center");
1381 |    * </code></div>
1382 |    */
1383 |   p5.Element.prototype.attribute = function(attr, value) {
1384 |     if (typeof value === 'undefined') {
1385 |       return this.elt.getAttribute(attr);
1386 |     } else {
1387 |       this.elt.setAttribute(attr, value);
1388 |       return this;
1389 |     }
1390 |   };
1391 | 
1392 | 
1393 |   /**
1394 |    *
1395 |    * Removes an attribute on the specified element.
1396 |    *
1397 |    * @method removeAttribute
1398 |    * @param  {String} attr       attribute to remove
1399 |    * @return {Object/p5.Element}
1400 |    *
1401 |    * @example
1402 |    * <div><code>
1403 |    * var button;
1404 |    * var checkbox;
1405 |    *
1406 |    * function setup() {
1407 |    *   checkbox = createCheckbox('enable', true);
1408 |    *   checkbox.changed(enableButton);
1409 |    *   button = createButton('button');
1410 |    *   button.position(10, 10);
1411 |    * }
1412 |    *
1413 |    * function enableButton() {
1414 |    *   if( this.checked() ) {
1415 |    *     // Re-enable the button
1416 |    *     button.removeAttribute('disabled');
1417 |    *   } else {
1418 |    *     // Disable the button
1419 |    *     button.attribute('disabled','');
1420 |    *   }
1421 |    * }
1422 |    * </code></div>
1423 |    */
1424 |   p5.Element.prototype.removeAttribute = function(attr) {
1425 |     this.elt.removeAttribute(attr);
1426 |     return this;
1427 |   };
1428 | 
1429 | 
1430 |   /**
1431 |    * Either returns the value of the element if no arguments
1432 |    * given, or sets the value of the element.
1433 |    *
1434 |    * @method value
1435 |    * @param  {String|Number}     [value]
1436 |    * @return {String|Object/p5.Element} value of element if no value is specified or p5.Element
1437 |    * @example
1438 |    * <div class='norender'><code>
1439 |    * // gets the value
1440 |    * var inp;
1441 |    * function setup() {
1442 |    *   inp = createInput('');
1443 |    * }
1444 |    *
1445 |    * function mousePressed() {
1446 |    *   print(inp.value());
1447 |    * }
1448 |    * </code></div>
1449 |    * <div class='norender'><code>
1450 |    * // sets the value
1451 |    * var inp;
1452 |    * function setup() {
1453 |    *   inp = createInput('myValue');
1454 |    * }
1455 |    *
1456 |    * function mousePressed() {
1457 |    *   inp.value("myValue");
1458 |    * }
1459 |    * </code></div>
1460 |    */
1461 |   p5.Element.prototype.value = function() {
1462 |     if (arguments.length > 0) {
1463 |       this.elt.value = arguments[0];
1464 |       return this;
1465 |     } else {
1466 |       if (this.elt.type === 'range') {
1467 |         return parseFloat(this.elt.value);
1468 |       }
1469 |       else return this.elt.value;
1470 |     }
1471 |   };
1472 | 
1473 |   /**
1474 |    *
1475 |    * Shows the current element. Essentially, setting display:block for the style.
1476 |    *
1477 |    * @method show
1478 |    * @return {Object/p5.Element}
1479 |    * @example
1480 |    * <div class='norender'><code>
1481 |    * var div = createDiv('div');
1482 |    * div.style("display", "none");
1483 |    * div.show(); // turns display to block
1484 |    * </code></div>
1485 |    */
1486 |   p5.Element.prototype.show = function() {
1487 |     this.elt.style.display = 'block';
1488 |     return this;
1489 |   };
1490 | 
1491 |   /**
1492 |    * Hides the current element. Essentially, setting display:none for the style.
1493 |    *
1494 |    * @method hide
1495 |    * @return {Object/p5.Element}
1496 |    * @example
1497 |    * <div class='norender'><code>
1498 |    * var div = createDiv('this is a div');
1499 |    * div.hide();
1500 |    * </code></div>
1501 |    */
1502 |   p5.Element.prototype.hide = function() {
1503 |     this.elt.style.display = 'none';
1504 |     return this;
1505 |   };
1506 | 
1507 |   /**
1508 |    *
1509 |    * Sets the width and height of the element. AUTO can be used to
1510 |    * only adjust one dimension. If no arguments given returns the width and height
1511 |    * of the element in an object.
1512 |    *
1513 |    * @method size
1514 |    * @param  {Number} [w] width of the element
1515 |    * @param  {Number} [h] height of the element
1516 |    * @return {Object/p5.Element}
1517 |    * @example
1518 |    * <div class='norender'><code>
1519 |    * var div = createDiv('this is a div');
1520 |    * div.size(100, 100);
1521 |    * </code></div>
1522 |    */
1523 |   p5.Element.prototype.size = function(w, h) {
1524 |     if (arguments.length === 0){
1525 |       return { 'width' : this.elt.offsetWidth , 'height' : this.elt.offsetHeight };
1526 |     }else{
1527 |       var aW = w;
1528 |       var aH = h;
1529 |       var AUTO = p5.prototype.AUTO;
1530 |       if (aW !== AUTO || aH !== AUTO) {
1531 |         if (aW === AUTO) {
1532 |           aW = h * this.width / this.height;
1533 |         } else if (aH === AUTO) {
1534 |           aH = w * this.height / this.width;
1535 |         }
1536 |         // set diff for cnv vs normal div
1537 |         if (this.elt instanceof HTMLCanvasElement) {
1538 |           var j = {};
1539 |           var k  = this.elt.getContext('2d');
1540 |           for (var prop in k) {
1541 |             j[prop] = k[prop];
1542 |           }
1543 |           this.elt.setAttribute('width', aW * this._pInst._pixelDensity);
1544 |           this.elt.setAttribute('height', aH * this._pInst._pixelDensity);
1545 |           this.elt.setAttribute('style', 'width:' + aW + 'px; height:' + aH + 'px');
1546 |           this._pInst.scale(this._pInst._pixelDensity, this._pInst._pixelDensity);
1547 |           for (var prop in j) {
1548 |             this.elt.getContext('2d')[prop] = j[prop];
1549 |           }
1550 |         } else {
1551 |           this.elt.style.width = aW+'px';
1552 |           this.elt.style.height = aH+'px';
1553 |           this.elt.width = aW;
1554 |           this.elt.height = aH;
1555 |           this.width = aW;
1556 |           this.height = aH;
1557 |         }
1558 | 
1559 |         this.width = this.elt.offsetWidth;
1560 |         this.height = this.elt.offsetHeight;
1561 | 
1562 |         if (this._pInst) { // main canvas associated with p5 instance
1563 |           if (this._pInst._curElement.elt === this.elt) {
1564 |             this._pInst._setProperty('width', this.elt.offsetWidth);
1565 |             this._pInst._setProperty('height', this.elt.offsetHeight);
1566 |           }
1567 |         }
1568 |       }
1569 |       return this;
1570 |     }
1571 |   };
1572 | 
1573 |   /**
1574 |    * Removes the element and deregisters all listeners.
1575 |    * @method remove
1576 |    * @example
1577 |    * <div class='norender'><code>
1578 |    * var myDiv = createDiv('this is some text');
1579 |    * myDiv.remove();
1580 |    * </code></div>
1581 |    */
1582 |   p5.Element.prototype.remove = function() {
1583 |     // deregister events
1584 |     for (var ev in this._events) {
1585 |       this.elt.removeEventListener(ev, this._events[ev]);
1586 |     }
1587 |     if (this.elt.parentNode) {
1588 |       this.elt.parentNode.removeChild(this.elt);
1589 |     }
1590 |     delete(this);
1591 |   };
1592 | 
1593 | 
1594 | 
1595 | // =============================================================================
1596 | //                         p5.MediaElement additions
1597 | // =============================================================================
1598 | 
1599 | 
1600 |   /**
1601 |    * Extends p5.Element to handle audio and video. In addition to the methods
1602 |    * of p5.Element, it also contains methods for controlling media. It is not
1603 |    * called directly, but p5.MediaElements are created by calling createVideo,
1604 |    * createAudio, and createCapture.
1605 |    *
1606 |    * @class p5.MediaElement
1607 |    * @constructor
1608 |    * @param {String} elt DOM node that is wrapped
1609 |    * @param {Object} [pInst] pointer to p5 instance
1610 |    */
1611 |   p5.MediaElement = function(elt, pInst) {
1612 |     p5.Element.call(this, elt, pInst);
1613 | 
1614 |     var self = this;
1615 |     this.elt.crossOrigin = 'anonymous';
1616 | 
1617 |     this._prevTime = 0;
1618 |     this._cueIDCounter = 0;
1619 |     this._cues = [];
1620 |     this._pixelDensity = 1;
1621 | 
1622 |     /**
1623 |      *  Path to the media element source.
1624 |      *
1625 |      *  @property src
1626 |      *  @return {String} src
1627 |      */
1628 |     Object.defineProperty(self, 'src', {
1629 |       get: function() {
1630 |         var firstChildSrc = self.elt.children[0].src;
1631 |         var srcVal = self.elt.src === window.location.href ? '' : self.elt.src;
1632 |         var ret = firstChildSrc === window.location.href ? srcVal : firstChildSrc;
1633 |         return ret;
1634 |       },
1635 |       set: function(newValue) {
1636 |         for (var i = 0; i < self.elt.children.length; i++) {
1637 |           self.elt.removeChild(self.elt.children[i]);
1638 |         }
1639 |         var source = document.createElement('source');
1640 |         source.src = newValue;
1641 |         elt.appendChild(source);
1642 |         self.elt.src = newValue;
1643 |       },
1644 |     });
1645 | 
1646 |     // private _onended callback, set by the method: onended(callback)
1647 |     self._onended = function() {};
1648 |     self.elt.onended = function() {
1649 |       self._onended(self);
1650 |     }
1651 |   };
1652 |   p5.MediaElement.prototype = Object.create(p5.Element.prototype);
1653 | 
1654 | 
1655 | 
1656 | 
1657 |   /**
1658 |    * Play an HTML5 media element.
1659 |    *
1660 |    * @method play
1661 |    * @return {Object/p5.Element}
1662 |    */
1663 |   p5.MediaElement.prototype.play = function() {
1664 |     if (this.elt.currentTime === this.elt.duration) {
1665 |       this.elt.currentTime = 0;
1666 |     }
1667 | 
1668 |     if (this.elt.readyState > 1) {
1669 |       this.elt.play();
1670 |     } else {
1671 |       // in Chrome, playback cannot resume after being stopped and must reload
1672 |       this.elt.load();
1673 |       this.elt.play();
1674 |     }
1675 |     return this;
1676 |   };
1677 | 
1678 |   /**
1679 |    * Stops an HTML5 media element (sets current time to zero).
1680 |    *
1681 |    * @method stop
1682 |    * @return {Object/p5.Element}
1683 |    */
1684 |   p5.MediaElement.prototype.stop = function() {
1685 |     this.elt.pause();
1686 |     this.elt.currentTime = 0;
1687 |     return this;
1688 |   };
1689 | 
1690 |   /**
1691 |    * Pauses an HTML5 media element.
1692 |    *
1693 |    * @method pause
1694 |    * @return {Object/p5.Element}
1695 |    */
1696 |   p5.MediaElement.prototype.pause = function() {
1697 |     this.elt.pause();
1698 |     return this;
1699 |   };
1700 | 
1701 |   /**
1702 |    * Set 'loop' to true for an HTML5 media element, and starts playing.
1703 |    *
1704 |    * @method loop
1705 |    * @return {Object/p5.Element}
1706 |    */
1707 |   p5.MediaElement.prototype.loop = function() {
1708 |     this.elt.setAttribute('loop', true);
1709 |     this.play();
1710 |     return this;
1711 |   };
1712 |   /**
1713 |    * Set 'loop' to false for an HTML5 media element. Element will stop
1714 |    * when it reaches the end.
1715 |    *
1716 |    * @method noLoop
1717 |    * @return {Object/p5.Element}
1718 |    */
1719 |   p5.MediaElement.prototype.noLoop = function() {
1720 |     this.elt.setAttribute('loop', false);
1721 |     return this;
1722 |   };
1723 | 
1724 | 
1725 |   /**
1726 |    * Set HTML5 media element to autoplay or not.
1727 |    *
1728 |    * @method autoplay
1729 |    * @param {Boolean} autoplay whether the element should autoplay
1730 |    * @return {Object/p5.Element}
1731 |    */
1732 |   p5.MediaElement.prototype.autoplay = function(val) {
1733 |     this.elt.setAttribute('autoplay', val);
1734 |     return this;
1735 |   };
1736 | 
1737 |   /**
1738 |    * Sets volume for this HTML5 media element. If no argument is given,
1739 |    * returns the current volume.
1740 |    *
1741 |    * @param {Number}            [val] volume between 0.0 and 1.0
1742 |    * @return {Number|p5.MediaElement} current volume or p5.MediaElement
1743 |    * @method volume
1744 |    */
1745 |   p5.MediaElement.prototype.volume = function(val) {
1746 |     if (typeof val === 'undefined') {
1747 |       return this.elt.volume;
1748 |     } else {
1749 |       this.elt.volume = val;
1750 |     }
1751 |   };
1752 | 
1753 |   /**
1754 |    * If no arguments are given, returns the current playback speed of the
1755 |    * element. The speed parameter sets the speed where 2.0 will play the
1756 |    * element twice as fast, 0.5 will play at half the speed, and -1 will play
1757 |    * the element in normal speed in reverse.(Note that not all browsers support
1758 |    * backward playback and even if they do, playback might not be smooth.)
1759 |    *
1760 |    * @method speed
1761 |    * @param {Number} [speed]  speed multiplier for element playback
1762 |    * @return {Number|Object/p5.MediaElement} current playback speed or p5.MediaElement
1763 |    */
1764 |   p5.MediaElement.prototype.speed = function(val) {
1765 |     if (typeof val === 'undefined') {
1766 |       return this.elt.playbackRate;
1767 |     } else {
1768 |       this.elt.playbackRate = val;
1769 |     }
1770 |   };
1771 | 
1772 |   /**
1773 |    * If no arguments are given, returns the current time of the element.
1774 |    * If an argument is given the current time of the element is set to it.
1775 |    *
1776 |    * @method time
1777 |    * @param {Number} [time] time to jump to (in seconds)
1778 |    * @return {Number|Object/p5.MediaElement} current time (in seconds)
1779 |    *                                  or p5.MediaElement
1780 |    */
1781 |   p5.MediaElement.prototype.time = function(val) {
1782 |     if (typeof val === 'undefined') {
1783 |       return this.elt.currentTime;
1784 |     } else {
1785 |       this.elt.currentTime = val;
1786 |     }
1787 |   };
1788 | 
1789 |   /**
1790 |    * Returns the duration of the HTML5 media element.
1791 |    *
1792 |    * @method duration
1793 |    * @return {Number} duration
1794 |    */
1795 |   p5.MediaElement.prototype.duration = function() {
1796 |     return this.elt.duration;
1797 |   };
1798 |   p5.MediaElement.prototype.pixels = [];
1799 |   p5.MediaElement.prototype.loadPixels = function() {
1800 |     if (!this.canvas) {
1801 |       this.canvas = document.createElement('canvas');
1802 |       this.drawingContext = this.canvas.getContext('2d');
1803 |     }
1804 |     if (this.loadedmetadata) { // wait for metadata for w/h
1805 |       if (this.canvas.width !== this.elt.width) {
1806 |         this.canvas.width = this.elt.width;
1807 |         this.canvas.height = this.elt.height;
1808 |         this.width = this.canvas.width;
1809 |         this.height = this.canvas.height;
1810 |       }
1811 |       this.drawingContext.drawImage(this.elt, 0, 0, this.canvas.width, this.canvas.height);
1812 |       p5.Renderer2D.prototype.loadPixels.call(this);
1813 |     }
1814 |     return this;
1815 |   }
1816 |   p5.MediaElement.prototype.updatePixels =  function(x, y, w, h){
1817 |     if (this.loadedmetadata) { // wait for metadata
1818 |       p5.Renderer2D.prototype.updatePixels.call(this, x, y, w, h);
1819 |     }
1820 |     return this;
1821 |   }
1822 |   p5.MediaElement.prototype.get = function(x, y, w, h){
1823 |     if (this.loadedmetadata) { // wait for metadata
1824 |       return p5.Renderer2D.prototype.get.call(this, x, y, w, h);
1825 |     } else if (!x) {
1826 |       return new p5.Image(1, 1);
1827 |     } else {
1828 |       return [0, 0, 0, 255];
1829 |     }
1830 |   };
1831 |   p5.MediaElement.prototype.set = function(x, y, imgOrCol){
1832 |     if (this.loadedmetadata) { // wait for metadata
1833 |       p5.Renderer2D.prototype.set.call(this, x, y, imgOrCol);
1834 |     }
1835 |   };
1836 |   p5.MediaElement.prototype.copy = function(){
1837 |     p5.Renderer2D.prototype.copy.apply(this, arguments);
1838 |   };
1839 |   p5.MediaElement.prototype.mask = function(){
1840 |     this.loadPixels();
1841 |     p5.Image.prototype.mask.apply(this, arguments);
1842 |   };
1843 |   /**
1844 |    *  Schedule an event to be called when the audio or video
1845 |    *  element reaches the end. If the element is looping,
1846 |    *  this will not be called. The element is passed in
1847 |    *  as the argument to the onended callback.
1848 |    *
1849 |    *  @method  onended
1850 |    *  @param  {Function} callback function to call when the
1851 |    *                              soundfile has ended. The
1852 |    *                              media element will be passed
1853 |    *                              in as the argument to the
1854 |    *                              callback.
1855 |    *  @return {Object/p5.MediaElement}
1856 |    *  @example
1857 |    *  <div><code>
1858 |    *  function setup() {
1859 |    *    audioEl = createAudio('assets/beat.mp3');
1860 |    *    audioEl.showControls(true);
1861 |    *    audioEl.onended(sayDone);
1862 |    *  }
1863 |    *
1864 |    *  function sayDone(elt) {
1865 |    *    alert('done playing ' + elt.src );
1866 |    *  }
1867 |    *  </code></div>
1868 |    */
1869 |   p5.MediaElement.prototype.onended = function(callback) {
1870 |     this._onended = callback;
1871 |     return this;
1872 |   };
1873 | 
1874 | 
1875 |   /*** CONNECT TO WEB AUDIO API / p5.sound.js ***/
1876 | 
1877 |   /**
1878 |    *  Send the audio output of this element to a specified audioNode or
1879 |    *  p5.sound object. If no element is provided, connects to p5's master
1880 |    *  output. That connection is established when this method is first called.
1881 |    *  All connections are removed by the .disconnect() method.
1882 |    *
1883 |    *  This method is meant to be used with the p5.sound.js addon library.
1884 |    *
1885 |    *  @method  connect
1886 |    *  @param  {AudioNode|p5.sound object} audioNode AudioNode from the Web Audio API,
1887 |    *  or an object from the p5.sound library
1888 |    */
1889 |   p5.MediaElement.prototype.connect = function(obj) {
1890 |     var audioContext, masterOutput;
1891 | 
1892 |     // if p5.sound exists, same audio context
1893 |     if (typeof p5.prototype.getAudioContext === 'function') {
1894 |       audioContext = p5.prototype.getAudioContext();
1895 |       masterOutput = p5.soundOut.input;
1896 |     } else {
1897 |       try {
1898 |         audioContext = obj.context;
1899 |         masterOutput = audioContext.destination
1900 |       } catch(e) {
1901 |         throw 'connect() is meant to be used with Web Audio API or p5.sound.js'
1902 |       }
1903 |     }
1904 | 
1905 |     // create a Web Audio MediaElementAudioSourceNode if none already exists
1906 |     if (!this.audioSourceNode) {
1907 |       this.audioSourceNode = audioContext.createMediaElementSource(this.elt);
1908 | 
1909 |       // connect to master output when this method is first called
1910 |       this.audioSourceNode.connect(masterOutput);
1911 |     }
1912 | 
1913 |     // connect to object if provided
1914 |     if (obj) {
1915 |       if (obj.input) {
1916 |         this.audioSourceNode.connect(obj.input);
1917 |       } else {
1918 |         this.audioSourceNode.connect(obj);
1919 |       }
1920 |     }
1921 | 
1922 |     // otherwise connect to master output of p5.sound / AudioContext
1923 |     else {
1924 |       this.audioSourceNode.connect(masterOutput);
1925 |     }
1926 | 
1927 |   };
1928 | 
1929 |   /**
1930 |    *  Disconnect all Web Audio routing, including to master output.
1931 |    *  This is useful if you want to re-route the output through
1932 |    *  audio effects, for example.
1933 |    *
1934 |    *  @method  disconnect
1935 |    */
1936 |   p5.MediaElement.prototype.disconnect = function() {
1937 |     if (this.audioSourceNode) {
1938 |       this.audioSourceNode.disconnect();
1939 |     } else {
1940 |       throw 'nothing to disconnect';
1941 |     }
1942 |   };
1943 | 
1944 | 
1945 |   /*** SHOW / HIDE CONTROLS ***/
1946 | 
1947 |   /**
1948 |    *  Show the default MediaElement controls, as determined by the web browser.
1949 |    *
1950 |    *  @method  showControls
1951 |    */
1952 |   p5.MediaElement.prototype.showControls = function() {
1953 |     // must set style for the element to show on the page
1954 |     this.elt.style['text-align'] = 'inherit';
1955 |     this.elt.controls = true;
1956 |   };
1957 | 
1958 |   /**
1959 |    *  Hide the default mediaElement controls.
1960 |    *
1961 |    *  @method hideControls
1962 |    */
1963 |   p5.MediaElement.prototype.hideControls = function() {
1964 |     this.elt.controls = false;
1965 |   };
1966 | 
1967 |   /*** SCHEDULE EVENTS ***/
1968 | 
1969 |   /**
1970 |    *  Schedule events to trigger every time a MediaElement
1971 |    *  (audio/video) reaches a playback cue point.
1972 |    *
1973 |    *  Accepts a callback function, a time (in seconds) at which to trigger
1974 |    *  the callback, and an optional parameter for the callback.
1975 |    *
1976 |    *  Time will be passed as the first parameter to the callback function,
1977 |    *  and param will be the second parameter.
1978 |    *
1979 |    *
1980 |    *  @method  addCue
1981 |    *  @param {Number}   time     Time in seconds, relative to this media
1982 |    *                             element's playback. For example, to trigger
1983 |    *                             an event every time playback reaches two
1984 |    *                             seconds, pass in the number 2. This will be
1985 |    *                             passed as the first parameter to
1986 |    *                             the callback function.
1987 |    *  @param {Function} callback Name of a function that will be
1988 |    *                             called at the given time. The callback will
1989 |    *                             receive time and (optionally) param as its
1990 |    *                             two parameters.
1991 |    *  @param {Object} [value]    An object to be passed as the
1992 |    *                             second parameter to the
1993 |    *                             callback function.
1994 |    *  @return {Number} id ID of this cue,
1995 |    *                      useful for removeCue(id)
1996 |    *  @example
1997 |    *  <div><code>
1998 |    *  function setup() {
1999 |    *    background(255,255,255);
2000 |    *
2001 |    *    audioEl = createAudio('assets/beat.mp3');
2002 |    *    audioEl.showControls();
2003 |    *
2004 |    *    // schedule three calls to changeBackground
2005 |    *    audioEl.addCue(0.5, changeBackground, color(255,0,0) );
2006 |    *    audioEl.addCue(1.0, changeBackground, color(0,255,0) );
2007 |    *    audioEl.addCue(2.5, changeBackground, color(0,0,255) );
2008 |    *    audioEl.addCue(3.0, changeBackground, color(0,255,255) );
2009 |    *    audioEl.addCue(4.2, changeBackground, color(255,255,0) );
2010 |    *    audioEl.addCue(5.0, changeBackground, color(255,255,0) );
2011 |    *  }
2012 |    *
2013 |    *  function changeBackground(val) {
2014 |    *    background(val);
2015 |    *  }
2016 |    *  </code></div>
2017 |    */
2018 |   p5.MediaElement.prototype.addCue = function(time, callback, val) {
2019 |     var id = this._cueIDCounter++;
2020 | 
2021 |     var cue = new Cue(callback, time, id, val);
2022 |     this._cues.push(cue);
2023 | 
2024 |     if (!this.elt.ontimeupdate) {
2025 |       this.elt.ontimeupdate = this._onTimeUpdate.bind(this);
2026 |     }
2027 | 
2028 |     return id;
2029 |   };
2030 | 
2031 |   /**
2032 |    *  Remove a callback based on its ID. The ID is returned by the
2033 |    *  addCue method.
2034 |    *
2035 |    *  @method removeCue
2036 |    *  @param  {Number} id ID of the cue, as returned by addCue
2037 |    */
2038 |   p5.MediaElement.prototype.removeCue = function(id) {
2039 |     for (var i = 0; i < this._cues.length; i++) {
2040 |       var cue = this._cues[i];
2041 |       if (cue.id === id) {
2042 |         this.cues.splice(i, 1);
2043 |       }
2044 |     }
2045 | 
2046 |     if (this._cues.length === 0) {
2047 |       this.elt.ontimeupdate = null
2048 |     }
2049 |   };
2050 | 
2051 |   /**
2052 |    *  Remove all of the callbacks that had originally been scheduled
2053 |    *  via the addCue method.
2054 |    *
2055 |    *  @method  clearCues
2056 |    */
2057 |   p5.MediaElement.prototype.clearCues = function() {
2058 |     this._cues = [];
2059 |     this.elt.ontimeupdate = null;
2060 |   };
2061 | 
2062 |   // private method that checks for cues to be fired if events
2063 |   // have been scheduled using addCue(callback, time).
2064 |   p5.MediaElement.prototype._onTimeUpdate = function() {
2065 |     var playbackTime = this.time();
2066 | 
2067 |     for (var i = 0 ; i < this._cues.length; i++) {
2068 |       var callbackTime = this._cues[i].time;
2069 |       var val = this._cues[i].val;
2070 | 
2071 | 
2072 |       if (this._prevTime < callbackTime && callbackTime <= playbackTime) {
2073 | 
2074 |         // pass the scheduled callbackTime as parameter to the callback
2075 |         this._cues[i].callback(val);
2076 |       }
2077 | 
2078 |     }
2079 | 
2080 |     this._prevTime = playbackTime;
2081 |   };
2082 | 
2083 | 
2084 |   // Cue inspired by JavaScript setTimeout, and the
2085 |   // Tone.js Transport Timeline Event, MIT License Yotam Mann 2015 tonejs.org
2086 |   var Cue = function(callback, time, id, val) {
2087 |     this.callback = callback;
2088 |     this.time = time;
2089 |     this.id = id;
2090 |     this.val = val;
2091 |   };
2092 | 
2093 | // =============================================================================
2094 | //                         p5.File
2095 | // =============================================================================
2096 | 
2097 | 
2098 |   /**
2099 |    * Base class for a file
2100 |    * Using this for createFileInput
2101 |    *
2102 |    * @class p5.File
2103 |    * @constructor
2104 |    * @param {File} file File that is wrapped
2105 |    * @param {Object} [pInst] pointer to p5 instance
2106 |    */
2107 |   p5.File = function(file, pInst) {
2108 |     /**
2109 |      * Underlying File object. All normal File methods can be called on this.
2110 |      *
2111 |      * @property file
2112 |      */
2113 |     this.file = file;
2114 | 
2115 |     this._pInst = pInst;
2116 | 
2117 |     // Splitting out the file type into two components
2118 |     // This makes determining if image or text etc simpler
2119 |     var typeList = file.type.split('/');
2120 |     /**
2121 |      * File type (image, text, etc.)
2122 |      *
2123 |      * @property type
2124 |      */
2125 |     this.type = typeList[0];
2126 |     /**
2127 |      * File subtype (usually the file extension jpg, png, xml, etc.)
2128 |      *
2129 |      * @property subtype
2130 |      */
2131 |     this.subtype = typeList[1];
2132 |     /**
2133 |      * File name
2134 |      *
2135 |      * @property name
2136 |      */
2137 |     this.name = file.name;
2138 |     /**
2139 |      * File size
2140 |      *
2141 |      * @property size
2142 |      */
2143 |     this.size = file.size;
2144 | 
2145 |     /**
2146 |      * URL string containing image data.
2147 |      *
2148 |      * @property data
2149 |      */
2150 |     this.data = undefined;
2151 |   };
2152 | 
2153 | }));
2154 | 


--------------------------------------------------------------------------------
/font_paths/path.js:
--------------------------------------------------------------------------------
 1 | // The Nature of Code
 2 | // Daniel Shiffman
 3 | // http://natureofcode.com
 4 | 
 5 | // Path Following
 6 | 
 7 | function Path() {
 8 |   // Arbitrary radius of 20
 9 |   this.radius = 5;
10 |   this.points = [];
11 | }
12 | 
13 | // Add a point to the path
14 | Path.prototype.addPoint = function(x, y) {
15 |   var point = createVector(x, y);
16 |   this.points.push(point);
17 | }
18 | 
19 | // Draw the path
20 | Path.prototype.display = function() {
21 |   strokeJoin(ROUND);
22 | 
23 |   // Draw thick line for radius
24 |   stroke(175);
25 |   strokeWeight(this.radius * 2);
26 |   noFill();
27 |   beginShape();
28 |   for (var i = 0; i < this.points.length; i++) {
29 |     var v = this.points[i];
30 |     vertex(v.x, v.y);
31 |   }
32 |   endShape(CLOSE);
33 |   // Draw thin line for center of path
34 |   stroke(0);
35 |   strokeWeight(1);
36 |   noFill();
37 |   beginShape();
38 |   for (var i = 0; i < this.points.length; i++) {
39 |     var v = this.points[i];
40 |     vertex(v.x, v.y);
41 |     ellipse(v.x, v.y, 3, 3);
42 |   }
43 |   endShape(CLOSE);
44 | }
45 | 


--------------------------------------------------------------------------------
/font_paths/pathhelper.js:
--------------------------------------------------------------------------------
  1 | // path-utils
  2 | 
  3 | function pathToPoints(cmds, options) {
  4 | 
  5 |   var opts = parseOpts(options, {
  6 |     sampleFactor: 0.1,
  7 |     simplifyThreshold: 0,
  8 |   });
  9 | 
 10 |   var len = pointAtLength(cmds,0,1), // total-length
 11 |     t = len / (len * opts.sampleFactor),
 12 |     pts = [];
 13 | 
 14 |   for (var i = 0; i < len; i += t) {
 15 |     pts.push(pointAtLength(cmds, i));
 16 |   }
 17 | 
 18 |   if (opts.simplifyThreshold) {
 19 |     /*var count = */simplify(pts, opts.simplifyThreshold);
 20 |     //console.log('Simplify: removed ' + count + ' pts');
 21 |   }
 22 | 
 23 |   return pts;
 24 | }
 25 | 
 26 | function simplify(pts, angle) {
 27 | 
 28 |   angle = (typeof angle === 'undefined') ? 0 : angle;
 29 | 
 30 |   var num = 0;
 31 |   for (var i = pts.length - 1; pts.length > 3 && i >= 0; --i) {
 32 | 
 33 |     if (collinear(at(pts, i - 1), at(pts, i), at(pts, i + 1), angle)) {
 34 | 
 35 |       // Remove the middle point
 36 |       pts.splice(i % pts.length, 1);
 37 |       num++;
 38 |     }
 39 |   }
 40 |   return num;
 41 | }
 42 | 
 43 | function splitPaths(cmds) {
 44 | 
 45 |   var paths = [], current;
 46 |   for (var i = 0; i < cmds.length; i++) {
 47 |     if (cmds[i].type === 'M') {
 48 |       if (current) {
 49 |         paths.push(current);
 50 |       }
 51 |       current = [];
 52 |     }
 53 |     current.push(cmdToArr(cmds[i]));
 54 |   }
 55 |   paths.push(current);
 56 | 
 57 |   return paths;
 58 | }
 59 | 
 60 | function cmdToArr(cmd) {
 61 | 
 62 |   var arr = [ cmd.type ];
 63 |   if (cmd.type === 'M' || cmd.type === 'L') { // moveto or lineto
 64 |     arr.push(cmd.x, cmd.y);
 65 |   } else if (cmd.type === 'C') {
 66 |     arr.push(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
 67 |   } else if (cmd.type === 'Q') {
 68 |     arr.push(cmd.x1, cmd.y1, cmd.x, cmd.y);
 69 |   }
 70 |   // else if (cmd.type === 'Z') { /* no-op */ }
 71 |   return arr;
 72 | }
 73 | 
 74 | function parseOpts(options, defaults) {
 75 | 
 76 |   if (typeof options !== 'object') {
 77 |     options = defaults;
 78 |   }
 79 |   else {
 80 |     for (var key in defaults) {
 81 |       if (typeof options[key] === 'undefined') {
 82 |         options[key] = defaults[key];
 83 |       }
 84 |     }
 85 |   }
 86 |   return options;
 87 | }
 88 | 
 89 | //////////////////////// Helpers ////////////////////////////
 90 | 
 91 | function at(v, i) {
 92 |   var s = v.length;
 93 |   return v[i < 0 ? i % s + s : i % s];
 94 | }
 95 | 
 96 | function collinear(a, b, c, thresholdAngle) {
 97 | 
 98 |   if (!thresholdAngle) {
 99 |     return areaTriangle(a, b, c) === 0;
100 |   }
101 | 
102 |   if (typeof collinear.tmpPoint1 === 'undefined') {
103 |     collinear.tmpPoint1 = [];
104 |     collinear.tmpPoint2 = [];
105 |   }
106 | 
107 |   var ab = collinear.tmpPoint1, bc = collinear.tmpPoint2;
108 |   ab.x = b.x - a.x;
109 |   ab.y = b.y - a.y;
110 |   bc.x = c.x - b.x;
111 |   bc.y = c.y - b.y;
112 | 
113 |   var dot = ab.x * bc.x + ab.y * bc.y,
114 |     magA = Math.sqrt(ab.x * ab.x + ab.y * ab.y),
115 |     magB = Math.sqrt(bc.x * bc.x + bc.y * bc.y),
116 |     angle = Math.acos(dot / (magA * magB));
117 | 
118 |   return angle < thresholdAngle;
119 | }
120 | 
121 | function areaTriangle(a, b, c) {
122 |   return (((b[0] - a[0]) * (c[1] - a[1])) - ((c[0] - a[0]) * (b[1] - a[1])));
123 | }
124 | 
125 | // Portions of below code copyright 2008 Dmitry Baranovskiy (via MIT license)
126 | 
127 | function findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
128 | 
129 |   var t1 = 1 - t, t13 = Math.pow(t1, 3), t12 = Math.pow(t1, 2), t2 = t * t,
130 |     t3 = t2 * t, x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x +
131 |     t3 * p2x, y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y +
132 |     t3 * p2y, mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x),
133 |     my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y),
134 |     nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x),
135 |     ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y),
136 |     ax = t1 * p1x + t * c1x, ay = t1 * p1y + t * c1y,
137 |     cx = t1 * c2x + t * p2x, cy = t1 * c2y + t * p2y,
138 |     alpha = (90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI);
139 | 
140 |   if (mx > nx || my < ny) { alpha += 180; }
141 | 
142 |   return { x: x, y: y, m: { x: mx, y: my }, n: { x: nx, y: ny },
143 |     start: { x: ax, y: ay }, end: { x: cx, y: cy }, alpha: alpha
144 |   };
145 | }
146 | 
147 | function getPointAtSegmentLength(p1x,p1y,c1x,c1y,c2x,c2y,p2x,p2y,length) {
148 |   return (length == null) ? bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) :
149 |     findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y,
150 |       getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length));
151 | }
152 | 
153 | function pointAtLength(path, length, istotal) {
154 |   path = path2curve(path);
155 |   var x, y, p, l, sp = '', subpaths = {}, point, len = 0;
156 |   for (var i = 0, ii = path.length; i < ii; i++) {
157 |     p = path[i];
158 |     if (p[0] === 'M') {
159 |       x = +p[1];
160 |       y = +p[2];
161 |     } else {
162 |       l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);
163 |       if (len + l > length) {
164 |         if (!istotal) {
165 |           point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5],
166 |             p[6], length - len);
167 |           return { x: point.x, y: point.y, alpha: point.alpha };
168 |         }
169 |       }
170 |       len += l;
171 |       x = +p[5];
172 |       y = +p[6];
173 |     }
174 |     sp += p.shift() + p;
175 |   }
176 |   subpaths.end = sp;
177 | 
178 |   point = istotal ? len : findDotsAtSegment
179 |     (x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);
180 | 
181 |   if (point.alpha) {
182 |     point = { x: point.x, y: point.y, alpha: point.alpha };
183 |   }
184 | 
185 |   return point;
186 | }
187 | 
188 | function pathToAbsolute(pathArray) {
189 | 
190 |   var res = [], x = 0, y = 0, mx = 0, my = 0, start = 0;
191 |   if (pathArray[0][0] === 'M') {
192 |     x = +pathArray[0][1];
193 |     y = +pathArray[0][2];
194 |     mx = x;
195 |     my = y;
196 |     start++;
197 |     res[0] = ['M', x, y];
198 |   }
199 | 
200 |   var dots,crz = pathArray.length===3 && pathArray[0][0]==='M' &&
201 |     pathArray[1][0].toUpperCase()==='R' && pathArray[2][0].toUpperCase()==='Z';
202 | 
203 |   for (var r, pa, i = start, ii = pathArray.length; i < ii; i++) {
204 |     res.push(r = []);
205 |     pa = pathArray[i];
206 |     if (pa[0] !== String.prototype.toUpperCase.call(pa[0])) {
207 |       r[0] = String.prototype.toUpperCase.call(pa[0]);
208 |       switch (r[0]) {
209 |         case 'A':
210 |           r[1] = pa[1];
211 |           r[2] = pa[2];
212 |           r[3] = pa[3];
213 |           r[4] = pa[4];
214 |           r[5] = pa[5];
215 |           r[6] = +(pa[6] + x);
216 |           r[7] = +(pa[7] + y);
217 |           break;
218 |         case 'V':
219 |           r[1] = +pa[1] + y;
220 |           break;
221 |         case 'H':
222 |           r[1] = +pa[1] + x;
223 |           break;
224 |         case 'R':
225 |           dots = [x, y].concat(pa.slice(1));
226 |           for (var j = 2, jj = dots.length; j < jj; j++) {
227 |             dots[j] = +dots[j] + x;
228 |             dots[++j] = +dots[j] + y;
229 |           }
230 |           res.pop();
231 |           res = res.concat(catmullRom2bezier(dots, crz));
232 |           break;
233 |         case 'M':
234 |           mx = +pa[1] + x;
235 |           my = +pa[2] + y;
236 |           break;
237 |         default:
238 |           for (j = 1, jj = pa.length; j < jj; j++) {
239 |             r[j] = +pa[j] + ((j % 2) ? x : y);
240 |           }
241 |       }
242 |     } else if (pa[0] === 'R') {
243 |       dots = [x, y].concat(pa.slice(1));
244 |       res.pop();
245 |       res = res.concat(catmullRom2bezier(dots, crz));
246 |       r = ['R'].concat(pa.slice(-2));
247 |     } else {
248 |       for (var k = 0, kk = pa.length; k < kk; k++) {
249 |         r[k] = pa[k];
250 |       }
251 |     }
252 |     switch (r[0]) {
253 |       case 'Z':
254 |         x = mx;
255 |         y = my;
256 |         break;
257 |       case 'H':
258 |         x = r[1];
259 |         break;
260 |       case 'V':
261 |         y = r[1];
262 |         break;
263 |       case 'M':
264 |         mx = r[r.length - 2];
265 |         my = r[r.length - 1];
266 |         break;
267 |       default:
268 |         x = r[r.length - 2];
269 |         y = r[r.length - 1];
270 |     }
271 |   }
272 |   return res;
273 | }
274 | 
275 | function path2curve(path, path2) {
276 | 
277 |   var p = pathToAbsolute(path), p2 = path2 && pathToAbsolute(path2),
278 |     attrs = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null },
279 |     attrs2 = { x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null },
280 | 
281 |     processPath = function(path, d, pcom) {
282 |       var nx, ny, tq = { T: 1, Q: 1 };
283 |       if (!path) { return ['C', d.x, d.y, d.x, d.y, d.x, d.y]; }
284 |       if (!(path[0] in tq)) { d.qx = d.qy = null; }
285 |       switch (path[0]) {
286 |         case 'M':
287 |           d.X = path[1];
288 |           d.Y = path[2];
289 |           break;
290 |         case 'A':
291 |           path = ['C'].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
292 |           break;
293 |         case 'S':
294 |           if (pcom === 'C' || pcom === 'S') {
295 |             nx = d.x * 2 - d.bx;
296 |             ny = d.y * 2 - d.by;
297 |           } else {
298 |             nx = d.x;
299 |             ny = d.y;
300 |           }
301 |           path = ['C', nx, ny].concat(path.slice(1));
302 |           break;
303 |         case 'T':
304 |           if (pcom === 'Q' || pcom === 'T') {
305 |             d.qx = d.x * 2 - d.qx;
306 |             d.qy = d.y * 2 - d.qy;
307 |           } else {
308 |             d.qx = d.x;
309 |             d.qy = d.y;
310 |           }
311 |           path = ['C'].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
312 |           break;
313 |         case 'Q':
314 |           d.qx = path[1];
315 |           d.qy = path[2];
316 |           path = ['C'].concat(q2c(d.x,d.y,path[1],path[2],path[3],path[4]));
317 |           break;
318 |         case 'L':
319 |           path = ['C'].concat(l2c(d.x, d.y, path[1], path[2]));
320 |           break;
321 |         case 'H':
322 |           path = ['C'].concat(l2c(d.x, d.y, path[1], d.y));
323 |           break;
324 |         case 'V':
325 |           path = ['C'].concat(l2c(d.x, d.y, d.x, path[1]));
326 |           break;
327 |         case 'Z':
328 |           path = ['C'].concat(l2c(d.x, d.y, d.X, d.Y));
329 |           break;
330 |       }
331 |       return path;
332 |     },
333 | 
334 |     fixArc = function(pp, i) {
335 |       if (pp[i].length > 7) {
336 |         pp[i].shift();
337 |         var pi = pp[i];
338 |         while (pi.length) {
339 |           pcoms1[i] = 'A';
340 |           if (p2) { pcoms2[i] = 'A'; }
341 |           pp.splice(i++, 0, ['C'].concat(pi.splice(0, 6)));
342 |         }
343 |         pp.splice(i, 1);
344 |         ii = Math.max(p.length, p2 && p2.length || 0);
345 |       }
346 |     },
347 | 
348 |     fixM = function(path1, path2, a1, a2, i) {
349 |       if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') {
350 |         path2.splice(i, 0, ['M', a2.x, a2.y]);
351 |         a1.bx = 0;
352 |         a1.by = 0;
353 |         a1.x = path1[i][1];
354 |         a1.y = path1[i][2];
355 |         ii = Math.max(p.length, p2 && p2.length || 0);
356 |       }
357 |     },
358 | 
359 |     pcoms1 = [], // path commands of original path p
360 |     pcoms2 = [], // path commands of original path p2
361 |     pfirst = '', // temporary holder for original path command
362 |     pcom = ''; // holder for previous path command of original path
363 | 
364 |   for (var i = 0, ii = Math.max(p.length, p2 && p2.length || 0); i < ii; i++) {
365 |     if (p[i]) { pfirst = p[i][0]; } // save current path command
366 | 
367 |     if (pfirst !== 'C') {
368 |       pcoms1[i] = pfirst; // Save current path command
369 |       if (i) { pcom = pcoms1[i - 1]; } // Get previous path command pcom
370 |     }
371 |     p[i] = processPath(p[i], attrs, pcom);
372 | 
373 |     if (pcoms1[i] !== 'A' && pfirst === 'C') { pcoms1[i] = 'C'; }
374 | 
375 |     fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
376 | 
377 |     if (p2) { // the same procedures is done to p2
378 |       if (p2[i]) { pfirst = p2[i][0]; }
379 |       if (pfirst !== 'C') {
380 |         pcoms2[i] = pfirst;
381 |         if (i) { pcom = pcoms2[i - 1]; }
382 |       }
383 |       p2[i] = processPath(p2[i], attrs2, pcom);
384 | 
385 |       if (pcoms2[i] !== 'A' && pfirst === 'C') { pcoms2[i] = 'C'; }
386 | 
387 |       fixArc(p2, i);
388 |     }
389 |     fixM(p, p2, attrs, attrs2, i);
390 |     fixM(p2, p, attrs2, attrs, i);
391 |     var seg = p[i], seg2 = p2 && p2[i], seglen = seg.length,
392 |       seg2len = p2 && seg2.length;
393 |     attrs.x = seg[seglen - 2];
394 |     attrs.y = seg[seglen - 1];
395 |     attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
396 |     attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
397 |     attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
398 |     attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
399 |     attrs2.x = p2 && seg2[seg2len - 2];
400 |     attrs2.y = p2 && seg2[seg2len - 1];
401 |   }
402 | 
403 |   return p2 ? [p, p2] : p;
404 | }
405 | 
406 | function a2c(x1, y1, rx, ry, angle, lac, sweep_flag, x2, y2, recursive) {
407 |   // for more information of where this Math came from visit:
408 |   // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
409 |   var PI = Math.PI, _120 = PI * 120 / 180, f1, f2, cx, cy,
410 |     rad = PI / 180 * (+angle || 0), res = [], xy,
411 |     rotate = function (x, y, rad) {
412 |       var X = x * Math.cos(rad) - y * Math.sin(rad),
413 |         Y = x * Math.sin(rad) + y * Math.cos(rad);
414 |       return { x: X, y: Y };
415 |     };
416 |   if (!recursive) {
417 |     xy = rotate(x1, y1, -rad);
418 |     x1 = xy.x;
419 |     y1 = xy.y;
420 |     xy = rotate(x2, y2, -rad);
421 |     x2 = xy.x;
422 |     y2 = xy.y;
423 |     var x = (x1 - x2) / 2, y = (y1 - y2) / 2,
424 |       h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
425 |     if (h > 1) {
426 |       h = Math.sqrt(h);
427 |       rx = h * rx;
428 |       ry = h * ry;
429 |     }
430 |     var rx2 = rx * rx, ry2 = ry * ry,
431 |       k = (lac === sweep_flag ? -1 : 1) * Math.sqrt(Math.abs
432 |         ((rx2 * ry2 - rx2 * y * y - ry2 * x * x)/(rx2 * y * y + ry2 * x * x)));
433 | 
434 |     cx = k * rx * y / ry + (x1 + x2) / 2;
435 |     cy = k * -ry * x / rx + (y1 + y2) / 2;
436 |     f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
437 |     f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
438 | 
439 |     f1 = x1 < cx ? PI - f1 : f1;
440 |     f2 = x2 < cx ? PI - f2 : f2;
441 | 
442 |     if (f1 < 0) { f1 = PI * 2 + f1; }
443 |     if (f2 < 0) { f2 = PI * 2 + f2; }
444 | 
445 |     if (sweep_flag && f1 > f2) {
446 |       f1 = f1 - PI * 2;
447 |     }
448 |     if (!sweep_flag && f2 > f1) {
449 |       f2 = f2 - PI * 2;
450 |     }
451 |   } else {
452 |     f1 = recursive[0];
453 |     f2 = recursive[1];
454 |     cx = recursive[2];
455 |     cy = recursive[3];
456 |   }
457 |   var df = f2 - f1;
458 |   if (Math.abs(df) > _120) {
459 |     var f2old = f2, x2old = x2, y2old = y2;
460 |     f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
461 |     x2 = cx + rx * Math.cos(f2);
462 |     y2 = cy + ry * Math.sin(f2);
463 |     res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old,
464 |       [f2, f2old, cx, cy]);
465 |   }
466 |   df = f2 - f1;
467 |   var c1 = Math.cos(f1),
468 |     s1 = Math.sin(f1),
469 |     c2 = Math.cos(f2),
470 |     s2 = Math.sin(f2),
471 |     t = Math.tan(df / 4),
472 |     hx = 4 / 3 * rx * t,
473 |     hy = 4 / 3 * ry * t,
474 |     m1 = [x1, y1],
475 |     m2 = [x1 + hx * s1, y1 - hy * c1],
476 |     m3 = [x2 + hx * s2, y2 - hy * c2],
477 |     m4 = [x2, y2];
478 |   m2[0] = 2 * m1[0] - m2[0];
479 |   m2[1] = 2 * m1[1] - m2[1];
480 |   if (recursive) {
481 |     return [m2, m3, m4].concat(res);
482 |   } else {
483 |     res = [m2, m3, m4].concat(res).join().split(',');
484 |     var newres = [];
485 |     for (var i = 0, ii = res.length; i < ii; i++) {
486 |       newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i],
487 |         res[i + 1], rad).x;
488 |     }
489 |     return newres;
490 |   }
491 | }
492 | 
493 | // http://schepers.cc/getting-to-the-point
494 | function catmullRom2bezier(crp, z) {
495 |   var d = [];
496 |   for (var i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
497 |     var p = [{
498 |       x: +crp[i - 2],
499 |       y: +crp[i - 1]
500 |     }, {
501 |       x: +crp[i],
502 |       y: +crp[i + 1]
503 |     }, {
504 |       x: +crp[i + 2],
505 |       y: +crp[i + 3]
506 |     }, {
507 |       x: +crp[i + 4],
508 |       y: +crp[i + 5]
509 |     }];
510 |     if (z) {
511 |       if (!i) {
512 |         p[0] = {
513 |           x: +crp[iLen - 2],
514 |           y: +crp[iLen - 1]
515 |         };
516 |       } else if (iLen - 4 === i) {
517 |         p[3] = {
518 |           x: +crp[0],
519 |           y: +crp[1]
520 |         };
521 |       } else if (iLen - 2 === i) {
522 |         p[2] = {
523 |           x: +crp[0],
524 |           y: +crp[1]
525 |         };
526 |         p[3] = {
527 |           x: +crp[2],
528 |           y: +crp[3]
529 |         };
530 |       }
531 |     } else {
532 |       if (iLen - 4 === i) {
533 |         p[3] = p[2];
534 |       } else if (!i) {
535 |         p[0] = {
536 |           x: +crp[i],
537 |           y: +crp[i + 1]
538 |         };
539 |       }
540 |     }
541 |     d.push(['C', (-p[0].x + 6 * p[1].x + p[2].x) / 6, (-p[0].y + 6 * p[1].y +
542 |       p[2].y) / 6, (p[1].x + 6 * p[2].x - p[3].x) / 6, (p[1].y + 6 * p[2].y -
543 |       p[3].y) / 6, p[2].x, p[2].y ]);
544 |   }
545 | 
546 |   return d;
547 | }
548 | 
549 | function l2c(x1, y1, x2, y2) { return [x1, y1, x2, y2, x2, y2]; }
550 | 
551 | function q2c(x1, y1, ax, ay, x2, y2) {
552 |   var _13 = 1 / 3, _23 = 2 / 3;
553 |   return [
554 |     _13 * x1 + _23 * ax, _13 * y1 + _23 * ay,
555 |     _13 * x2 + _23 * ax, _13 * y2 + _23 * ay, x2, y2
556 |   ];
557 | }
558 | 
559 | function bezlen(x1, y1, x2, y2, x3, y3, x4, y4, z) {
560 |   if (z == null) { z = 1; }
561 |   z = z > 1 ? 1 : z < 0 ? 0 : z;
562 |   var z2 = z / 2,
563 |     n = 12, Tvalues = [-0.1252, 0.1252, -0.3678, 0.3678, -0.5873, 0.5873,
564 |        -0.7699, 0.7699, -0.9041, 0.9041, -0.9816, 0.9816],
565 |     sum = 0, Cvalues = [0.2491, 0.2491, 0.2335, 0.2335, 0.2032, 0.2032,
566 |       0.1601, 0.1601, 0.1069, 0.1069, 0.0472, 0.0472 ];
567 |   for (var i = 0; i < n; i++) {
568 |     var ct = z2 * Tvalues[i] + z2,
569 |       xbase = base3(ct, x1, x2, x3, x4),
570 |       ybase = base3(ct, y1, y2, y3, y4),
571 |       comb = xbase * xbase + ybase * ybase;
572 |     sum += Cvalues[i] * Math.sqrt(comb);
573 |   }
574 |   return z2 * sum;
575 | }
576 | 
577 | function getTatLen(x1, y1, x2, y2, x3, y3, x4, y4, ll) {
578 |   if (ll < 0 || bezlen(x1, y1, x2, y2, x3, y3, x4, y4) < ll) {
579 |     return;
580 |   }
581 |   var t = 1, step = t / 2, t2 = t - step, l, e = 0.01;
582 |   l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
583 |   while (Math.abs(l - ll) > e) {
584 |     step /= 2;
585 |     t2 += (l < ll ? 1 : -1) * step;
586 |     l = bezlen(x1, y1, x2, y2, x3, y3, x4, y4, t2);
587 |   }
588 |   return t2;
589 | }
590 | 
591 | function base3(t, p1, p2, p3, p4) {
592 |   var t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4,
593 |     t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
594 |   return t * t2 - 3 * p1 + 3 * p2;
595 | }
596 | 
597 | function cacheKey() {
598 |   var args = new Array(arguments.length);
599 |   for (var i = 0; i < args.length; ++i) {
600 |     args[i] = arguments[i];
601 |   }
602 |   i = args.length;
603 |   var hash = '';
604 |   while (i--) {
605 |     hash += (args[i] === Object(args[i])) ?
606 |       JSON.stringify(args[i]) : args[i];
607 |   }
608 |   return hash;
609 | }
610 | 


--------------------------------------------------------------------------------
/font_paths/sketch.js:
--------------------------------------------------------------------------------
 1 | var font;
 2 | 
 3 | var vpaths = [];
 4 | var vehicles = [];
 5 | var debug = false;
 6 | 
 7 | // A path object (series of connected points)
 8 | function preload() {
 9 |   font = loadFont('OpenSans-Regular.ttf');
10 | }
11 | 
12 | function debugIt() {
13 |   debug = !debug;
14 | }
15 | 
16 | function setup() {
17 |   createCanvas(1200, 600);
18 |   createButton('toggle paths').mousePressed(debugIt);
19 |   var options = {
20 |     sampleFactor: 0.02,
21 |   };
22 |   var fsize = 512;
23 |   var txt = '2017';
24 |   var w = font._textWidth('2017', fsize);
25 |   var h = font._textAscent(fsize) - font._textDescent(fsize);
26 |   var x = width / 2 - w / 2;
27 |   var y = height / 2 + h / 2;
28 |   var points = font.textToPoints(txt, x, y, fsize, options);
29 |   stroke(255);
30 | 
31 |   var glyphs = font._getGlyphs(txt);
32 |   var xoff = 0;
33 |   var counter = 0;
34 |   for (var i = 0; i < glyphs.length; i++) {
35 |     var gpath = glyphs[i].getPath(x, y, fsize);
36 |     var paths = splitPaths(gpath.commands);
37 |     for (var j = 0; j < paths.length; j++) {
38 |       var pts = pathToPoints(paths[j], options);
39 |       var vpath = new Path();
40 |       for (var k = 0; k < pts.length; k++) {
41 |         pts[k].x += xoff;
42 |         vpath.addPoint(pts[k].x, pts[k].y);
43 | 
44 |         console.log(counter + ',' + pts[k].x + ',' + pts[k].y);
45 |       }
46 |       counter++;
47 |       vpaths.push(vpath);
48 |     }
49 |     xoff += glyphs[i].advanceWidth * font._scale(fsize);
50 |   }
51 | 
52 |   vpaths.splice(2, 1);
53 | 
54 |   background(0);
55 | }
56 | 
57 | var index = 0;
58 | 
59 | function draw() {
60 | 
61 |   if (frameCount % 5 == 0) {
62 |     if (vehicles.length < 120) {
63 |       newVehicle();
64 |     } else {
65 |       vehicles[index].whichPath = (vehicles[index].whichPath + 1) % vpaths.length;
66 |       index = (index + 1) % vehicles.length;
67 |     }
68 |   }
69 | 
70 |   background(0);
71 |   // Display the path
72 |   if (debug) {
73 |     for (var i = 0; i < vpaths.length; i++) {
74 |       vpaths[i].display();
75 |     }
76 |   }
77 | 
78 |   for (var i = 0; i < vehicles.length; i++) {
79 |     var v = vehicles[i];
80 |     // Path following and separation are worked on in this function
81 |     v.applyBehaviors();
82 |     // Call the generic run method (update, borders, display, etc.)
83 |     v.run();
84 |   }
85 | 
86 | }
87 | 
88 | function newVehicle() {
89 |   var maxspeed = random(2, 8);
90 |   var maxforce = random(0.2, 1);
91 |   var whichP = 0;
92 |   var start = random(vpaths[0].points);
93 |   vehicles.push(new Vehicle(start.x, start.y, maxspeed, maxforce, whichP));
94 | }
95 | 


--------------------------------------------------------------------------------
/font_paths/vehicle.js:
--------------------------------------------------------------------------------
  1 | // The Nature of Code
  2 | // Daniel Shiffman
  3 | // http://natureofcode.com
  4 | 
  5 | // Path Following
  6 | // Vehicle class
  7 | 
  8 | function Vehicle(x, y, ms, mf, wp) {
  9 |   this.position = createVector(x, y);
 10 |   this.r = 8;
 11 |   this.maxspeed = ms;
 12 |   this.maxforce = mf;
 13 |   this.acceleration = createVector(0, 0);
 14 |   this.velocity = createVector(this.maxspeed, 0);
 15 |   this.whichPath = wp;
 16 | }
 17 | 
 18 | // A function to deal with path following and separation
 19 | // Using global variables
 20 | Vehicle.prototype.applyBehaviors = function() {
 21 |   // Follow path force
 22 |   var f = this.follow(vpaths[this.whichPath]);
 23 |   // Separate from other boids force
 24 |   var s = this.separate(vehicles);
 25 |   // Arbitrary weighting
 26 |   f.mult(2);
 27 |   s.mult(2);
 28 |   // Accumulate in acceleration
 29 |   this.applyForce(f);
 30 |   this.applyForce(s);
 31 | }
 32 | 
 33 | Vehicle.prototype.applyForce = function(force) {
 34 |   // We could add mass here if we want A = F / M
 35 |   this.acceleration.add(force);
 36 | }
 37 | 
 38 | 
 39 | // Main "run" function
 40 | Vehicle.prototype.run = function() {
 41 |   this.update();
 42 |   this.render();
 43 | }
 44 | 
 45 | // This function implements Craig Reynolds' path following algorithm
 46 | // http://www.red3d.com/cwr/steer/PathFollow.html
 47 | Vehicle.prototype.follow = function(p) {
 48 | 
 49 |   // Predict position 25 (arbitrary choice) frames ahead
 50 |   var predict = this.velocity.copy();
 51 |   predict.normalize();
 52 |   predict.mult(25);
 53 |   var predictpos = p5.Vector.add(this.position, predict);
 54 | 
 55 |   // Now we must find the normal to the path from the predicted position
 56 |   // We look at the normal for each line segment and pick out the closest one
 57 |   var normal = null;
 58 |   var target = null;
 59 |   var worldRecord = 1000000; // Start with a very high worldRecord distance that can easily be beaten
 60 | 
 61 |   // Loop through all points of the path
 62 |   for (var i = 0; i < p.points.length; i++) {
 63 | 
 64 |     // Look at a line segment
 65 |     var a = p.points[i];
 66 |     var b = p.points[(i + 1) % p.points.length]; // Note Path has to wraparound
 67 | 
 68 |     // Get the normal point to that line
 69 |     var normalPoint = getNormalPoint(predictpos, a, b);
 70 | 
 71 |     // Check if normal is on line segment
 72 |     var dir = p5.Vector.sub(b, a);
 73 |     // If it's not within the line segment, consider the normal to just be the end of the line segment (point b)
 74 |     //if (da + db > line.mag()+1) {
 75 |     if (normalPoint.x < min(a.x, b.x) || normalPoint.x > max(a.x, b.x) || normalPoint.y < min(a.y, b.y) || normalPoint.y > max(a.y, b.y)) {
 76 |       normalPoint = b.copy();
 77 |       // If we're at the end we really want the next line segment for looking ahead
 78 |       a = p.points[(i + 1) % p.points.length];
 79 |       b = p.points[(i + 2) % p.points.length]; // Path wraps around
 80 |       dir = p5.Vector.sub(b, a);
 81 |     }
 82 | 
 83 |     // How far away are we from the path?
 84 |     var d = p5.Vector.dist(predictpos, normalPoint);
 85 |     // Did we beat the worldRecord and find the closest line segment?
 86 |     if (d < worldRecord) {
 87 |       worldRecord = d;
 88 |       normal = normalPoint;
 89 | 
 90 |       // Look at the direction of the line segment so we can seek a little bit ahead of the normal
 91 |       dir.normalize();
 92 |       // This is an oversimplification
 93 |       // Should be based on distance to path & velocity
 94 |       dir.mult(25);
 95 |       target = normal.copy();
 96 |       target.add(dir);
 97 |     }
 98 |   }
 99 |   // Only if the distance is greater than the path's radius do we bother to steer
100 |   if (worldRecord > p.radius) {
101 |     return this.seek(target);
102 |   } else {
103 |     return createVector(0, 0);
104 |   }
105 | }
106 | 
107 | // Separation
108 | // Method checks for nearby boids and steers away
109 | Vehicle.prototype.separate = function(boids) {
110 |   var desiredseparation = this.r * 2;
111 |   var steer = createVector(0, 0, 0);
112 |   var count = 0;
113 |   // For every boid in the system, check if it's too close
114 |   for (var i = 0; i < boids.length; i++) {
115 |     var other = boids[i];
116 |     var d = p5.Vector.dist(this.position, other.position);
117 |     // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
118 |     if ((d > 0) && (d < desiredseparation)) {
119 |       // Calculate vector pointing away from neighbor
120 |       var diff = p5.Vector.sub(this.position, other.position);
121 |       diff.normalize();
122 |       diff.div(d); // Weight by distance
123 |       steer.add(diff);
124 |       count++; // Keep track of how many
125 |     }
126 |   }
127 |   // Average -- divide by how many
128 |   if (count > 0) {
129 |     steer.div(count);
130 |   }
131 | 
132 |   // As long as the vector is greater than 0
133 |   if (steer.mag() > 0) {
134 |     // Implement Reynolds: Steering = Desired - Velocity
135 |     steer.normalize();
136 |     steer.mult(this.maxspeed);
137 |     steer.sub(this.velocity);
138 |     steer.limit(this.maxforce);
139 |   }
140 |   return steer;
141 | }
142 | 
143 | 
144 | // Method to update position
145 | Vehicle.prototype.update = function() {
146 |   // Update velocity
147 |   this.velocity.add(this.acceleration);
148 |   // Limit speed
149 |   this.velocity.limit(this.maxspeed);
150 |   this.position.add(this.velocity);
151 |   // Reset accelertion to 0 each cycle
152 |   this.acceleration.mult(0);
153 | }
154 | 
155 | // A method that calculates and applies a steering force towards a target
156 | // STEER = DESIRED MINUS VELOCITY
157 | Vehicle.prototype.seek = function(target) {
158 |   var desired = p5.Vector.sub(target, this.position); // A vector pointing from the position to the target
159 | 
160 |   // Normalize desired and scale to maximum speed
161 |   desired.normalize();
162 |   desired.mult(this.maxspeed);
163 |   // Steering = Desired minus Vepositionity
164 |   var steer = p5.Vector.sub(desired, this.velocity);
165 |   steer.limit(this.maxforce); // Limit to maximum steering force
166 | 
167 |   return steer;
168 | }
169 | 
170 | 
171 | Vehicle.prototype.render = function() {
172 |   // Simpler boid is just a circle
173 |   fill(255);
174 |   noStroke();
175 |   push();
176 |   translate(this.position.x, this.position.y);
177 |   ellipse(0, 0, this.r, this.r);
178 |   pop();
179 | }
180 | 
181 | // A function to get the normal point from a point (p) to a line segment (a-b)
182 | // This function could be optimized to make fewer new Vector objects
183 | function getNormalPoint(p, a, b) {
184 |   // Vector from a to p
185 |   var ap = p5.Vector.sub(p, a);
186 |   // Vector from a to b
187 |   var ab = p5.Vector.sub(b, a);
188 |   ab.normalize(); // Normalize the line
189 |   // Project vector "diff" onto line by using the dot product
190 |   ab.mult(ap.dot(ab));
191 |   var normalPoint = p5.Vector.add(a, ab);
192 |   return normalPoint;
193 | }
194 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.js"></script>
 6 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.dom.js"></script>
 7 |     <script src="sketch.js?3"></script>
 8 | 
 9 |     <style>
10 |         body {
11 |           background-color: #000;
12 |         }
13 |         canvas {
14 |             padding-left: 0;
15 |             padding-right: 0;
16 |             margin-left: auto;
17 |             margin-right: auto;
18 |             display: block;
19 |         }
20 |     </style>
21 | </head>
22 | 
23 | <body>
24 | 
25 | </body>
26 | 
27 | </html>
28 | 


--------------------------------------------------------------------------------
/sketch.js:
--------------------------------------------------------------------------------
  1 | // 8 nights of Hanukkah 2016 Examples
  2 | // Night 7: Animated Circle Packing
  3 | // Expansion of: https://youtu.be/XATr_jdh-44
  4 | // Daniel Shiffman
  5 | // http://codingrainbow.com/
  6 | // All the circles
  7 | var circles = [];
  8 | var circles = [];
  9 | var spots = [];
 10 | var txt;
 11 | //change this to load your own png
 12 | // full path might be necessary
 13 | //big white strokes works best for the rendering
 14 | function preload() {
 15 |   txt = loadImage("data/2017.png");
 16 | }
 17 | function setup() {
 18 |   createCanvas(900, 400);
 19 |   txt.loadPixels();
 20 | 
 21 |   fill(random (0, 255), random (0, 255), random (0, 255));
 22 | 
 23 |   for (var x = 0; x < txt.width; x++) {
 24 |     for (var y = 0; y < txt.height; y++) {
 25 |       //value of 1 fills the whole frame with circles
 26 |       // value of 10 more or less complies with text shape but no detail at all
 27 |       var index = (x + y * txt.width) * 4
 28 |       var rVal = txt.pixels[index];
 29 |       //not seeing any change when whacking out this number
 30 |       if (rVal > 10) {
 31 |         spots.push(createVector(x, y));
 32 |       }
 33 |     }
 34 |   }
 35 | }
 36 | function draw() {
 37 |   background(0);
 38 |   // All the circles
 39 |   for (var i = 0; i < circles.length; i++) {
 40 |     var c = circles[i];
 41 |     c.show();
 42 |     // Is it a growing one?
 43 |     if (c.growing) {
 44 |       c.grow();
 45 |       // Does it overlap any previous circles?
 46 |       for (var j = 0; j < circles.length; j++) {
 47 |         var other = circles[j];
 48 |         if (other != c) {
 49 |           var d = dist(c.x, c.y, other.x, other.y);
 50 |           if (d - 1 < c.r + other.r) {
 51 |             c.growing = false;
 52 |           }
 53 |         }
 54 |       }
 55 |       // Is it stuck to an edge?
 56 |       if (c.growing) {
 57 |         c.growing = !c.edges();
 58 |       }
 59 |     }
 60 |   }
 61 |   // Let's try to make a certain number of new circles each frame
 62 |   // More the longer it has been running
 63 |   var target = 1; // + constrain(frameCount / 120, 0, 20);
 64 |   var count = 0;
 65 |   // Try N times
 66 |   //reduce this number and get fewer circles
 67 |   for (var i = 0; i < 2000; i++) {
 68 |     if (addCircle()) {
 69 |       count++;
 70 |     }
 71 |     // We made enough
 72 |     if (count == target) {
 73 |       break;
 74 |     }
 75 |   }
 76 |   // We can't make any more
 77 |   if (count < 1) {
 78 |     noLoop();
 79 |     console.log("finished");
 80 |   }
 81 | }
 82 | // Add one circle
 83 | function addCircle() {
 84 |   // Here's a new circle
 85 |   var index = floor(random(spots.length));
 86 |   var spot = spots[index];
 87 |   var newCircle = new Circle(spot.x, spot.y, 1);
 88 | 
 89 | 
 90 | 
 91 |   // Is it in an ok spot?
 92 |   for (var i = 0; i < circles.length; i++) {
 93 |     var other = circles[i];
 94 |     var d = dist(newCircle.x, newCircle.y, other.x, other.y);
 95 |     if (d < other.r + 2) {
 96 |       newCircle = null;
 97 |       break;
 98 |     }
 99 |   }
100 |   // If it is, add it
101 |   if (newCircle != null) {
102 | 
103 |     circles.push(newCircle);
104 |     return true;
105 |   } else {
106 |     return false;
107 |   }
108 | }
109 | function Circle(x, y, r) {
110 |   this.growing = true;
111 |   this.x = x;
112 |   this.y = y;
113 |   this.r = r;
114 |   // Check stuck to an edge
115 |   this.edges = function() {
116 |     return (this.r > width - this.x || this.r > this.x || this.r > height - this.y || this.r > this.y);
117 |   }
118 |   // Grow
119 |   //this will change the size of the circles
120 |   //.01 is small
121 |   this.grow = function() {
122 |     this.r += 0.5;
123 |   }
124 |   // Show
125 |   this.show = function() {
126 |     stroke(255);
127 |     //this will change the line width of the circ.
128 |     // fractions will make the circles very faint
129 |     strokeWeight(2);
130 |     ellipse(this.x, this.y, this.r * 2, this.r * 2);
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------