Permalink
Browse files

Added a bunch of new examples for what will be the prologue

  • Loading branch information...
1 parent df35c82 commit d3ca84d7d3121845265674a2f04ab229143fa1da @shiffman shiffman committed Jan 24, 2012
Showing with 21,499 additions and 25 deletions.
  1. BIN chp10_nn/NetworkAnimation.zip
  2. +238 −0 chp10_nn/NetworkAnimation/applet_js/NetworkAnimation.pde
  3. +67 −0 chp10_nn/NetworkAnimation/applet_js/index.html
  4. +9,994 −0 chp10_nn/NetworkAnimation/applet_js/processing.js
  5. BIN chp2_forces/.DS_Store
  6. +1 −1 chp2_forces/_02forces_attractrepel/Attractor.pde
  7. +2 −6 chp2_forces/_02forces_attractrepel/_02forces_attractrepel.pde
  8. +2 −4 chp2_forces/_02forces_many_attraction/_02forces_many_attraction.pde
  9. BIN chp2_forces/_02forces_many_attraction_3D.zip
  10. +141 −0 chp2_forces/_02forces_many_attraction_3D/applet_js/_02forces_many_attraction_3D.pde
  11. +67 −0 chp2_forces/_02forces_many_attraction_3D/applet_js/index.html
  12. +9,994 −0 chp2_forces/_02forces_many_attraction_3D/applet_js/processing.js
  13. +1 −0 chp2_forces/_02forces_many_attraction_3D/sketch.properties
  14. BIN chp5_physicslibraries/.DS_Store
  15. BIN chp5_physicslibraries/box2d/.DS_Store
  16. +2 −2 chp5_physicslibraries/box2d/BridgeExample/BridgeExample.pde
  17. +1 −2 chp6_agents/group/CrowdPathFollowing/CrowdPathFollowing.pde
  18. +2 −0 chp6_agents/group/CrowdPathFollowing/Path.pde
  19. +1 −1 chp6_agents/group/CrowdPathFollowing/applet_js/CrowdPathFollowing.pde
  20. +1 −1 chp6_agents/group/CrowdPathFollowing/applet_js/index.html
  21. +1 −1 chp6_agents/group/CrowdPathFollowing/sketch.properties
  22. BIN chp8_fractals/TreeStochasticNoise.zip
  23. +6 −5 chp8_fractals/TreeStochasticNoise/TreeStochasticNoise.pde
  24. BIN chp9_ga/SmartRockets.zip
  25. +1 −1 chp9_ga/SmartRockets/SmartRockets.pde
  26. +1 −1 chp9_ga/SmartRockets/sketch.properties
  27. +31 −0 prologue/Noise/Noise1D/Noise1D.pde
  28. +23 −0 prologue/Noise/Noise1DGraph/Noise1DGraph.pde
  29. +41 −0 prologue/Noise/Noise2D/Noise2D.pde
  30. +47 −0 prologue/Noise/Noise3D/Noise3D.pde
  31. +26 −0 prologue/Noise/RandomGraph/RandomGraph.pde
  32. +39 −0 prologue/Probability/BellCurve/BellCurve.pde
  33. +31 −0 prologue/Probability/Gaussian1/Gaussian1.pde
  34. +49 −0 prologue/Probability/Gaussian2/Gaussian2.pde
  35. +66 −0 prologue/Probability/MonteCarloDistribution/MonteCarlo.pde
  36. +39 −0 prologue/Probability/MultipleProbability/MultipleProbability.pde
  37. +33 −0 prologue/Probability/NoiseDistribution/NoiseDistribution.pde
  38. +33 −0 prologue/Probability/RandomDistribution/RandomDistribution.pde
  39. +34 −0 prologue/Probability/SimpleProbablility/SimpleProbablility.pde
  40. +25 −0 prologue/RandomWalks/NoiseWalk/NoiseWalk.pde
  41. +51 −0 prologue/RandomWalks/NoiseWalk/Walker.pde
  42. +24 −0 prologue/RandomWalks/NoiseWalkAcceleration/NoiseWalkAcceleration.pde
  43. +65 −0 prologue/RandomWalks/NoiseWalkAcceleration/Walker.pde
  44. +25 −0 prologue/RandomWalks/NoiseWalkVelocity/NoiseWalkVelocity.pde
  45. +60 −0 prologue/RandomWalks/NoiseWalkVelocity/Walker.pde
  46. +24 −0 prologue/RandomWalks/RandomWalk/RandomWalk.pde
  47. +34 −0 prologue/RandomWalks/RandomWalk/Walker.pde
  48. +24 −0 prologue/RandomWalks/RandomWalkPVector/RandomWalkPVector.pde
  49. +30 −0 prologue/RandomWalks/RandomWalkPVector/Walker.pde
  50. +20 −0 prologue/RandomWalks/RandomWalkTraditional/RandomWalkTraditional.pde
  51. +29 −0 prologue/RandomWalks/RandomWalkTraditional/Walker.pde
  52. +24 −0 prologue/RandomWalks/RandomWalkTrail/RandomWalkTrail.pde
  53. +49 −0 prologue/RandomWalks/RandomWalkTrail/Walker.pde
Binary file not shown.
@@ -0,0 +1,238 @@
+// An animated drawing of a Neural Network
+// Daniel Shiffman <http://www.shiffman.net>
+// Nature of Code
+
+Network network;
+
+void setup() {
+ size(590, 360);
+ smooth();
+
+ // Create the Network object
+ network = new Network(width/2, height/2);
+
+ // Create a bunch of Neurons
+ Neuron a = new Neuron(-300, 0);
+ Neuron b = new Neuron(-200, 0);
+ Neuron c = new Neuron(0, 100);
+ Neuron d = new Neuron(0, -100);
+ Neuron e = new Neuron(200, 0);
+ Neuron f = new Neuron(300, 0);
+
+ // Connect them
+ network.connect(a, b,1);
+ network.connect(b, c,random(1));
+ network.connect(b, d,random(1));
+ network.connect(c, e,random(1));
+ network.connect(d, e,random(1));
+ network.connect(e, f,1);
+
+ // Add them to the Network
+ network.addNeuron(a);
+ network.addNeuron(b);
+ network.addNeuron(c);
+ network.addNeuron(d);
+ network.addNeuron(e);
+ network.addNeuron(f);
+}
+
+void draw() {
+ background(255);
+ // Update and display the Network
+ network.update();
+ network.display();
+
+ // Every 30 frames feed in an input
+ if (frameCount % 30 == 0) {
+ network.feedforward(random(1));
+ }
+}
+
+// An animated drawing of a Neural Network
+// Daniel Shiffman <http://www.shiffman.net>
+// Nature of Code
+
+class Connection {
+ // Connection is from Neuron A to B
+ Neuron a;
+ Neuron b;
+
+ // Connection has a weight
+ float weight;
+
+ // Variables to track the animation
+ boolean sending = false;
+ PVector sender;
+
+ // Need to store the output for when its time to pass along
+ float output = 0;
+
+ Connection(Neuron from, Neuron to, float w) {
+ weight = w;
+ a = from;
+ b = to;
+ }
+
+
+ // The Connection is active
+ void feedforward(float val) {
+ output = val*weight; // Compute output
+ sender = a.location.get(); // Start animation at Neuron A
+ sending = true; // Turn on sending
+ }
+
+ // Update traveling sender
+ void update() {
+ if (sending) {
+ // Use a simple interpolation
+ sender.x = lerp(sender.x, b.location.x, 0.1);
+ sender.y = lerp(sender.y, b.location.y, 0.1);
+ float d = PVector.dist(sender, b.location);
+ // If we've reached the end
+ if (d < 1) {
+ // Pass along the output!
+ b.feedforward(output);
+ sending = false;
+ }
+ }
+ }
+
+ // Draw line and traveling circle
+ void display() {
+ stroke(0);
+ strokeWeight(1+weight*4);
+ line(a.location.x, a.location.y, b.location.x, b.location.y);
+
+ if (sending) {
+ fill(0);
+ strokeWeight(1);
+ ellipse(sender.x, sender.y, 16, 16);
+ }
+ }
+}
+
+// An animated drawing of a Neural Network
+// Daniel Shiffman <http://www.shiffman.net>
+// Nature of Code
+
+class Network {
+
+ // The Network has a list of neurons
+ ArrayList<Neuron> neurons;
+
+ // The Network now keeps a duplicate list of all Connection objects.
+ // This makes it easier to draw everything in this class
+ ArrayList<Connection> connections;
+ PVector location;
+
+ Network(float x, float y) {
+ location = new PVector(x, y);
+ neurons = new ArrayList<Neuron>();
+ connections = new ArrayList<Connection>();
+ }
+
+ // We can add a Neuron
+ void addNeuron(Neuron n) {
+ neurons.add(n);
+ }
+
+ // We can connection two Neurons
+ void connect(Neuron a, Neuron b, float weight) {
+ Connection c = new Connection(a, b, weight);
+ a.addConnection(c);
+ // Also add the Connection here
+ connections.add(c);
+ }
+
+ // Sending an input to the first Neuron
+ // We should do something better to track multiple inputs
+ void feedforward(float input) {
+ Neuron start = neurons.get(0);
+ start.feedforward(input);
+ }
+
+ // Update the animation
+ void update() {
+ for (Connection c : connections) {
+ c.update();
+ }
+ }
+
+ // Draw everything
+ void display() {
+ pushMatrix();
+ translate(location.x, location.y);
+ for (Neuron n : neurons) {
+ n.display();
+ }
+
+ for (Connection c : connections) {
+ c.display();
+ }
+ popMatrix();
+ }
+}
+
+// An animated drawing of a Neural Network
+// Daniel Shiffman <http://www.shiffman.net>
+// Nature of Code
+
+class Neuron {
+ // Neuron has a location
+ PVector location;
+
+ // Neuron has a list of connections
+ ArrayList<Connection> connections;
+
+ // We now track the inputs and sum them
+ float sum = 0;
+
+ // The Neuron's size can be animated
+ float r = 32;
+
+ Neuron(float x, float y) {
+ location = new PVector(x, y);
+ connections = new ArrayList<Connection>();
+ }
+
+ // Add a Connection
+ void addConnection(Connection c) {
+ connections.add(c);
+ }
+
+ // Receive an input
+ void feedforward(float input) {
+ // Accumulate it
+ sum += input;
+ // Activate it?
+ if (sum > 1) {
+ fire();
+ sum = 0; // Reset the sum to 0 if it fires
+ }
+ }
+
+ // The Neuron fires
+ void fire() {
+ r = 64; // It suddenly is bigger
+
+ // We send the output through all connections
+ for (Connection c : connections) {
+ c.feedforward(sum);
+ }
+ }
+
+ // Draw it as a circle
+ void display() {
+ stroke(0);
+ strokeWeight(1);
+ // Brightness is mapped to sum
+ float b = map(sum,0,1,255,0);
+ fill(b);
+ ellipse(location.x, location.y, r, r);
+
+ // Size shrinks down back to original dimensions
+ r = lerp(r,32,0.1);
+ }
+}
+
+
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>NetworkAnimation : Built with Processing and Processing.js</title>
+ <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQAAVzABAEAjBQAaDwYAWjUGAGE6CQBrQQ0ATS8PAFhAJwBUQC8AbFI6AHVXPACBZk4A4NrWAPb19QAAAAAAAMmZmZmZmgAJIwAAAAAAcMIjPjA+PjAKpxIuMDMzMAm0Ii4zMzMACaIiLt3dMAAJtyIuIzPQAAm0Un5yM+IzKLRkfncy4iIotRF+dyLkIiq0QX53F+EiGrQUTkd34iIatEVu7u5iIVrBVVRBRFRVbAtGZGZla2uwAMu7u7u8vADAAwAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAADAAwAA" />
+ <meta name="Generator" content="Processing" />
+ <!-- - - - - - - - - - - - - - - - - - - - -
+ +
+ + Wondering how this works?
+ +
+ + Go to: http://processing.org/
+ + and: http://processingjs.org/
+ +
+ + - - - - - - - - - - - - - - - - - - - - -->
+ <style type="text/css">
+ body {
+ background-color: #333; color: #bbb; line-height: normal;
+ font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
+ font-size: 11px; font-weight: normal; text-decoration: none;
+ line-height: 1.5em;
+ }
+ a, a:link, a:visited, a:active, a:hover {
+ color: #cdcdcd; text-decoration: underline;
+ }
+ h1 {
+ font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;
+ width: 100%; letter-spacing: 0.1em;
+ margin-bottom: 1em; font-size: 1.65em;
+ }
+ canvas { display: block; outline: 0px; margin-bottom: 1.5em; }
+ #content {
+ margin: 50px auto 0px auto; padding: 25px 25px 15px 25px;
+ width: 590px; min-width: 300px; overflow: auto;
+ border-left: 1px solid #444; border-top: 1px solid #444;
+ border-right: 1px solid #333; border-bottom: 1px solid #333;
+ background-color: #3d3d3d;
+ }
+ </style>
+ <!--[if lt IE 9]>
+ <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>
+ <![endif]-->
+ <script src="processing.js" type="text/javascript"></script>
+ <script type="text/javascript">function getProcessingSketchID () { return 'NetworkAnimation'; }</script>
+
+ </head>
+ <body>
+ <div id="content">
+ <div>
+ <canvas id="NetworkAnimation" data-processing-sources="NetworkAnimation.pde"
+ width="590" height="360">
+ <p>Your browser does not support the canvas tag.</p>
+ <!-- Note: you can put any alternative content here. -->
+ </canvas>
+ <noscript>
+ <p>JavaScript is required to view the contents of this page.</p>
+ </noscript>
+ </div>
+ <h1>NetworkAnimation</h1>
+ <p id="description"></p>
+ <p id="sources">Source code: <a href="NetworkAnimation.pde">NetworkAnimation</a> </p>
+ <p id="">
+ Built with <a href="http://processing.org" title="Processing">Processing</a>
+ and <a href="http://processingjs.org" title="Processing.js">Processing.js</a>
+ </p>
+ </div>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit d3ca84d

Please sign in to comment.