Browse Source

complicate that p5 sketch

Brennen Bearnes 5 years ago
parent
commit
d6f175b1db
2 changed files with 54 additions and 50 deletions
  1. 1
    1
      README.md
  2. 53
    49
      index.html

+ 1
- 1
README.md View File

@@ -1,4 +1,4 @@
1 1
 This is my stuff from http://squiggle.city/~brennen/ (and also the tilde.club
2 2
 version of same).
3 3
 
4
-See here:  http://tilde.club/~ford/
4
+See here, about tilde.club:  http://tilde.club/~ford/

+ 53
- 49
index.html View File

@@ -56,7 +56,7 @@
56 56
 
57 57
       <pre><code>
58 58
 
59
-TOPICS                                                               [68/1914]
59
+TOPICS
60 60
 
61 61
   Help available on the following Topics:
62 62
 
@@ -104,7 +104,7 @@ WIZARDS
104 104
 
105 105
       <div id=squiggleCanvas></div>
106 106
 
107
-      <p>For folks with squiggle.city pages, there are a now a few resources at <a
107
+      <p>For folks with squiggle.city pages, there are a few resources at <a
108 108
       href="http://squiggle.city/js/">squiggle.city/js/</a> if you'd like to
109 109
       include jQuery, p5.js, or syntax highlighting on your pages without cluttering
110 110
       your <code>~/public_html</code> or relying on somebody's CDN.</p>
@@ -650,76 +650,80 @@ sub slurp {
650 650
 
651 651
          // A really simple p5.js sketch - google p5.js:
652 652
          var s = function(sketch) {
653
-           // where we draw the box
654
-           var x = 1;
655
-           var y = 1;
656
-
657
-           // what we add to x & y to move the box
658
-           var x_mover = 1;
659
-           var y_mover = 1;
660
-
661
-           // size of the canvas
662
-           var width = 300;
663
-           var height = 400;
664
-
665
-           // various color params, movement step
666
-           var square_size, square_red, square_green, square_blue,
667
-               step;
653
+           var square = {
654
+             // where we draw the box
655
+             x: 1,
656
+             y: 1,
657
+
658
+             // what we add to x & y to move the box
659
+             x_mover: 1,
660
+             y_mover: 1
661
+           };
668 662
 
669
-           var background_color = sketch.color(
670
-             Math.round(Math.random() * 255),
671
-             Math.round(Math.random() * 255),
672
-             Math.round(Math.random() * 255)
673
-           );
663
+           var world = {
664
+             // size of the canvas
665
+             width: 300,
666
+             height: 400,
667
+             background_color: sketch.color(
668
+               Math.round(Math.random() * 255),
669
+               Math.round(Math.random() * 255),
670
+               Math.round(Math.random() * 255)
671
+             ),
672
+
673
+             // how big can the box get?
674
+             max_square_size: 50 * Math.random()
675
+           };
674 676
 
675
-           // how big can the box get?
676
-           var max_square_size = 50 * Math.random();
677
+           var randomitup_sometimes = function () {
678
+             if (Math.random() > .3) {
679
+               randomitup();
680
+             }
681
+           };
677 682
 
678 683
            var randomitup = function () {
679
-             step = Math.random() * 20;
680
-             square_size = Math.random() * max_square_size;
681
-             square_red = Math.round(Math.random() * 255);
682
-             square_green = Math.round(Math.random() * 255);
683
-             square_blue = Math.round(Math.random() * 255);
684
+             square.step         = Math.random() * 20;
685
+             square.size  = Math.random() * world.max_square_size;
686
+             square.red   = Math.round(Math.random() * 255);
687
+             square.green = Math.round(Math.random() * 255);
688
+             square.blue  = Math.round(Math.random() * 255);
684 689
            };
685 690
 
686
-
687 691
            sketch.setup = function() {
688 692
              randomitup();
689
-             sketch.createCanvas(width, height);
690
-             sketch.background(background_color);
693
+             sketch.createCanvas(world.width, world.height);
694
+             sketch.background(world.background_color);
691 695
              sketch.fill(255);
692 696
            };
693 697
 
694 698
            sketch.draw = function() {
695 699
 
696
-             if (x > width) {
697
-               x_mover = 0 - (Math.random());
698
-               randomitup();
700
+             if (square.x > world.width) {
701
+               square.x_mover = 0 - (Math.random());
702
+               randomitup_sometimes();
699 703
              }
700 704
 
701
-             if (y > height) {
702
-               y_mover = 0 - (Math.random());
703
-               randomitup();
705
+             if (square.y > world.height) {
706
+               square.y_mover = 0 - (Math.random());
707
+               randomitup_sometimes();
704 708
              }
705 709
 
706
-             if (x <= 0) {
707
-               x_mover = Math.random();
708
-               randomitup();
710
+             if (square.x <= 0) {
711
+               square.x_mover = Math.random();
712
+               randomitup_sometimes();
709 713
              }
710 714
 
711
-             if (y <= 0) {
712
-               y_mover = Math.random();
713
-               randomitup();
715
+             if (square.y <= 0) {
716
+               square.y_mover = Math.random();
717
+               randomitup_sometimes();
714 718
              }
715 719
 
716
-             x += x_mover * step;
717
-             y += y_mover * step;
720
+             square.x += square.x_mover * square.step;
721
+             square.y += square.y_mover * square.step;
718 722
 
719 723
              sketch.push();
720
-               sketch.stroke(square_red, square_green, square_blue);
721
-               sketch.fill(square_red, square_green, square_blue);
722
-               sketch.rect(x, y, square_size, square_size);
724
+               sketch.stroke(square.red, square.green, square.blue);
725
+               sketch.fill(square.red, square.green, square.blue);
726
+               sketch.rect(square.x, square.y, square.size, square.size);
723 727
              sketch.pop();
724 728
            };
725 729
          };

Loading…
Cancel
Save