Browse Source

put the christmas lights up again

Brennen Bearnes 3 years ago
parent
commit
bcf0a69e58
2 changed files with 69 additions and 5 deletions
  1. 69
    5
      index.html
  2. 0
    0
      js/lights.p5.js

+ 69
- 5
index.html View File

@@ -8,11 +8,10 @@
8 8
     <link rel=stylesheet href="tildebrennen.css?update_for_xmas_lights=yesplease" />
9 9
 
10 10
     <!-- the following are all available for general use from squiggle.city/js/ -->
11
-    <script type="text/javascript" src="//squiggle.city/js/jquery.js"></script>
12
-    <script type="text/javascript" src="//squiggle.city/js/shjs/sh_main.js"></script>
13
-    <script type="text/javascript" src="//squiggle.city/js/shjs/lang/sh_perl.js"></script>
14
-    <script type="text/javascript" src="//squiggle.city/js/p5/p5.min.js"></script>
15
-    <script type="text/javascript" src="js/lights.p5.js"></script>
11
+    <script type="text/javascript" src="https://squiggle.city/js/jquery.js"></script>
12
+    <script type="text/javascript" src="https://squiggle.city/js/shjs/sh_main.js"></script>
13
+    <script type="text/javascript" src="https://squiggle.city/js/shjs/lang/sh_perl.js"></script>
14
+    <script type="text/javascript" src="https://squiggle.city/js/p5/p5.min.js"></script>
16 15
     <link type="text/css" rel="stylesheet" href="//squiggle.city/js/shjs/css/sh_darkness.css">
17 16
   </head>
18 17
 
@@ -1241,6 +1240,71 @@ sub slurp {
1241 1240
          // nice job, really.
1242 1241
          sh_highlightDocument();
1243 1242
 
1243
+         // A really simple p5.js sketch - google p5.js:
1244
+         var lights_sketch = function(sketch) {
1245
+
1246
+           var x = 0;
1247
+           var y = 12;
1248
+           var world;
1249
+           var red = sketch.color(255, 0, 0);
1250
+           var green = sketch.color(0, 255, 0);
1251
+           var blue = sketch.color(0, 0, 255);
1252
+           var yeller = sketch.color(255, 255, 0);
1253
+           var colors = [red, green, blue, yeller];
1254
+
1255
+           var light_width = 9;
1256
+           var light_height = 18;
1257
+
1258
+           var renderlight = function (x, y, color) {
1259
+             sketch.push();
1260
+               sketch.stroke(color);
1261
+               sketch.fill(color);
1262
+               sketch.ellipse(x, y, light_width, light_height);
1263
+             sketch.pop();
1264
+           };
1265
+
1266
+           sketch.setup = function () {
1267
+             world = {
1268
+               // size of the canvas
1269
+               width: $(window).width(),
1270
+               height: $(window).height(),
1271
+             };
1272
+             sketch.createCanvas(world.width, world.height);
1273
+             sketch.background(0, 0, 0);
1274
+           };
1275
+
1276
+           var waitfor = 1800;
1277
+           var wait_til = sketch.millis() + waitfor;
1278
+           sketch.draw = function () {
1279
+             x = 0;
1280
+
1281
+             if (sketch.millis() < wait_til) {
1282
+               return;
1283
+             }
1284
+
1285
+             sketch.clear();
1286
+
1287
+             var previous_color;
1288
+             var color;
1289
+             while (x < world.width) {
1290
+               while (color === previous_color) {
1291
+                 color = colors[ Math.floor(Math.random()*colors.length) ];
1292
+               }
1293
+               renderlight(x, y, color);
1294
+               x += 50;
1295
+               previous_color = color;
1296
+             }
1297
+
1298
+             wait_til = sketch.millis() + waitfor;
1299
+           };
1300
+         };
1301
+
1302
+         var myp5;
1303
+         myp5 = new p5(lights_sketch, 'squiggleCanvas');
1304
+
1305
+         $(window).resize(function () {
1306
+           myp5.setup();
1307
+         });
1244 1308
 
1245 1309
          // STACK STARTS HERE
1246 1310
 

+ 0
- 0
js/lights.p5.js View File