Browse Source

put up some lights around the place

Brennen Bearnes 4 years ago
parent
commit
326229b0b4
4 changed files with 157 additions and 187 deletions
  1. 116
    0
      christmas_lights.svg
  2. 40
    186
      index.html
  3. 0
    0
      js/lights.p5.js
  4. 1
    1
      tildebrennen.css

+ 116
- 0
christmas_lights.svg View File

@@ -0,0 +1,116 @@
1
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
3
+
4
+<svg
5
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
6
+   xmlns:cc="http://creativecommons.org/ns#"
7
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
8
+   xmlns:svg="http://www.w3.org/2000/svg"
9
+   xmlns="http://www.w3.org/2000/svg"
10
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
11
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12
+   width="1085.3995"
13
+   height="534.14417"
14
+   id="svg2985"
15
+   version="1.1"
16
+   inkscape:version="0.48.4 r9939"
17
+   sodipodi:docname="christmas_lights.svg">
18
+  <defs
19
+     id="defs2987" />
20
+  <sodipodi:namedview
21
+     id="base"
22
+     pagecolor="#000000"
23
+     bordercolor="#ffffff"
24
+     borderopacity="0.0"
25
+     inkscape:pageopacity="0"
26
+     inkscape:pageshadow="0"
27
+     inkscape:zoom="0.54103083"
28
+     inkscape:cx="542.69969"
29
+     inkscape:cy="267.06142"
30
+     inkscape:document-units="px"
31
+     inkscape:current-layer="svg2985"
32
+     showgrid="true"
33
+     inkscape:window-width="1364"
34
+     inkscape:window-height="748"
35
+     inkscape:window-x="0"
36
+     inkscape:window-y="0"
37
+     inkscape:window-maximized="0"
38
+     fit-margin-top="0"
39
+     fit-margin-left="0"
40
+     fit-margin-right="0"
41
+     fit-margin-bottom="0"
42
+     borderlayer="false"
43
+     inkscape:showpageshadow="true">
44
+    <inkscape:grid
45
+       type="xygrid"
46
+       id="grid3175"
47
+       empspacing="5"
48
+       visible="true"
49
+       enabled="true"
50
+       snapvisiblegridlinesonly="true" />
51
+  </sodipodi:namedview>
52
+  <metadata
53
+     id="metadata2990">
54
+    <rdf:RDF>
55
+      <cc:Work
56
+         rdf:about="">
57
+        <dc:format>image/svg+xml</dc:format>
58
+        <dc:type
59
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
60
+        <dc:title></dc:title>
61
+      </cc:Work>
62
+    </rdf:RDF>
63
+  </metadata>
64
+  <g
65
+     inkscape:label="Layer 1"
66
+     inkscape:groupmode="layer"
67
+     id="layer1"
68
+     transform="translate(588.16689,-42.878448)">
69
+    <path
70
+       style="fill:#ff0000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
71
+       d="m -585.71428,258.07647 c -3.81588,62.83593 -2.02923,95.96777 5.32837,137.71442 54.43405,308.85598 135.30822,159.49615 161.26224,11.01018 13.9867,-80.01955 4.83796,-151.58175 4.83796,-151.58175 -55.7838,-161.59366 -113.73118,-152.52003 -171.42857,2.85715 z"
72
+       id="path3031"
73
+       inkscape:connector-curvature="0"
74
+       sodipodi:nodetypes="csscc" />
75
+    <rect
76
+       style="fill:#008000"
77
+       id="rect3063"
78
+       width="160"
79
+       height="160.00003"
80
+       x="-580"
81
+       y="49.505039"
82
+       ry="0" />
83
+    <path
84
+       style="fill:#0000ff;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
85
+       d="m -120.49416,257.16417 c -3.81588,62.83593 -2.02923,95.96777 5.32837,137.71442 54.434054,308.85598 135.308222,159.49615 161.262241,11.01018 13.986701,-80.01955 4.837962,-151.58175 4.837962,-151.58175 -55.7838,-161.59366 -113.731179,-152.52003 -171.428573,2.85715 z"
86
+       id="path3031-2"
87
+       inkscape:connector-curvature="0"
88
+       sodipodi:nodetypes="csscc" />
89
+    <rect
90
+       style="fill:#008000"
91
+       id="rect3063-0"
92
+       width="160"
93
+       height="160.00003"
94
+       x="-114.77986"
95
+       y="48.592739"
96
+       ry="0" />
97
+    <g
98
+       id="g3116"
99
+       transform="translate(11.428571,0)">
100
+      <path
101
+         sodipodi:nodetypes="csscc"
102
+         inkscape:connector-curvature="0"
103
+         id="path3031-0"
104
+         d="m 310.93447,251.44988 c -3.81588,62.83593 -2.02923,95.96777 5.32837,137.71442 54.43405,308.85598 135.30822,159.49615 161.26224,11.01018 13.9867,-80.01955 4.83796,-151.58175 4.83796,-151.58175 C 426.57924,86.99907 368.63186,96.0727 310.93447,251.44988 z"
105
+         style="fill:#00ff00;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
106
+      <rect
107
+         ry="0"
108
+         y="42.878448"
109
+         x="316.64877"
110
+         height="160.00003"
111
+         width="160"
112
+         id="rect3063-8"
113
+         style="fill:#008000" />
114
+    </g>
115
+  </g>
116
+</svg>

+ 40
- 186
index.html View File

@@ -12,6 +12,7 @@
12 12
     <script type="text/javascript" src="//squiggle.city/js/shjs/sh_main.js"></script>
13 13
     <script type="text/javascript" src="//squiggle.city/js/shjs/lang/sh_perl.js"></script>
14 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>
15 16
     <link type="text/css" rel="stylesheet" href="//squiggle.city/js/shjs/css/sh_darkness.css">
16 17
   </head>
17 18
 
@@ -57,7 +58,15 @@
57 58
 
58 59
     <section>
59 60
 
60
-    <p><button id=hidebody>hide text</button></p>
61
+    <!-- <p><button id=hidebody>hide text</button></p> -->
62
+
63
+    <article>
64
+
65
+      <h2>Tuesday, December 16, early a.m.</h2>
66
+
67
+      <p><img src=christmas_lights.svg width=500 /></p>
68
+
69
+    </article>
61 70
 
62 71
     <article>
63 72
 
@@ -972,216 +981,61 @@ sub slurp {
972 981
          });
973 982
 
974 983
          // A really simple p5.js sketch - google p5.js:
975
-         var s1 = function(sketch) {
976
-           var square, world;
977
-
978
-           var handle_bounce = function () {
979
-             world.bounces++;
980
-
981
-             if (Math.random() > .3) {
982
-               randomitup();
983
-             }
984
-           };
985
-
986
-           var randomitup = function () {
987
-             square.step  = Math.random() * ($(window).height() / 18);
988
-             square.size  = Math.random() * world.max_square_size;
989
-
990
-             square.red   = Math.round(Math.random() * 255);
991
-             square.green = Math.round(Math.random() * 255);
992
-             square.blue  = Math.round(Math.random() * 255);
993
-
994
-             // occasionally, reset the world
995
-             if ((world.bounces > world.minimum_bounces) && (Math.random() > .95)) {
996
-               world.do_a_reset = true;
997
-             }
998
-           };
999
-
1000
-           sketch.setup = function() {
1001
-             world = {
1002
-               bounces: 0,
1003
-               minimum_bounces: Math.round(Math.random() * 400),
1004
-
1005
-               // size of the canvas
1006
-               width: $(window).width(),
1007
-               height: $(window).height(),
1008
-
1009
-               // background fill
1010
-               background_color: sketch.color(
1011
-                 Math.round(Math.random() * 255),
1012
-                 Math.round(Math.random() * 255),
1013
-                 Math.round(Math.random() * 255)
1014
-               )
1015
-             };
1016
-
1017
-             // how big can the box get in this world?
1018
-             world.max_square_size = Math.round((world.width / 5) * Math.random());
1019
-
1020
-             if (typeof console.log !== undefined) {
1021
-               console.log(world);
1022
-             }
1023
-
1024
-             square = {
1025
-               // where we draw the box
1026
-               x: Math.random() * world.width,
1027
-               y: Math.random() * world.height,
1028
-
1029
-               // what we add to x & y to move the box
1030
-               x_mover: Math.random() - Math.random(),
1031
-               y_mover: Math.random() - Math.random()
1032
-             };
1033
-
1034
-             randomitup();
1035
-             sketch.createCanvas(world.width, world.height);
1036
-             sketch.background(world.background_color);
1037
-             sketch.fill(255);
1038
-           };
1039
-
1040
-           sketch.draw = function() {
1041
-
1042
-             if (world.do_a_reset) {
1043
-               world.do_a_reset = false;
1044
-               world.bounces = 0;
1045
-               sketch.setup();
1046
-             }
984
+         var lights_sketch = function(sketch) {
1047 985
 
1048
-             if (square.x > world.width) {
1049
-               square.x_mover = 0 - (Math.random());
1050
-               handle_bounce();
1051
-             }
986
+           var x = 0;
987
+           var y = 12;
988
+           var world;
989
+           var red = sketch.color(255, 0, 0);
990
+           var green = sketch.color(0, 255, 0);
991
+           var blue = sketch.color(0, 0, 255);
992
+           var yeller = sketch.color(255, 255, 0);
993
+           var colors = [red, green, blue, yeller];
1052 994
 
1053
-             if (square.y > world.height) {
1054
-               square.y_mover = 0 - (Math.random());
1055
-               handle_bounce();
1056
-             }
1057
-
1058
-             if (square.x <= 0) {
1059
-               square.x_mover = Math.random();
1060
-               handle_bounce();
1061
-             }
1062
-
1063
-             if (square.y <= 0) {
1064
-               square.y_mover = Math.random();
1065
-               handle_bounce();
1066
-             }
1067
-
1068
-             square.x += square.x_mover * square.step;
1069
-             square.y += square.y_mover * square.step;
995
+           var light_width = 10;
996
+           var light_height = 18;
1070 997
 
998
+           var renderlight = function (x, y, color) {
1071 999
              sketch.push();
1072
-               sketch.stroke(square.red, square.green, square.blue);
1073
-               sketch.fill(square.red, square.green, square.blue);
1074
-               sketch.rect(square.x, square.y, square.size, square.size);
1000
+               sketch.stroke(color);
1001
+               sketch.fill(color);
1002
+               sketch.ellipse(x, y, light_width, light_height);
1075 1003
              sketch.pop();
1076 1004
            };
1077
-         };
1078
-
1079
-         var s2 = function(sketch) {
1080
-           var square, world;
1081
-
1082
-           var handle_bounce = function () {
1083
-             world.bounces++;
1084
-
1085
-             if (Math.random() > .3) {
1086
-               randomitup();
1087
-             }
1088
-           };
1089
-
1090
-           var randomitup = function () {
1091
-             var color_space = 255;
1092 1005
 
1093
-             square.step  = Math.random() * ($(window).height() / 15);
1094
-             square.size  = Math.random() * world.max_square_size;
1095
-
1096
-             square.red   = Math.round(Math.random() * color_space);
1097
-             square.green = Math.round(Math.random() * color_space);
1098
-             square.blue  = Math.round(Math.random() * color_space);
1099
-           };
1100
-
1101
-           sketch.setup = function() {
1006
+           sketch.setup = function () {
1102 1007
              world = {
1103
-               bounces: 0,
1104
-
1105 1008
                // size of the canvas
1106 1009
                width: $(window).width(),
1107 1010
                height: $(window).height(),
1108
-
1109
-               // background fill
1110
-               background_color: sketch.color(
1111
-                 Math.round(Math.random() * 255),
1112
-                 Math.round(Math.random() * 255),
1113
-                 Math.round(Math.random() * 255)
1114
-               )
1115 1011
              };
1116
-
1117
-             // how big can the box get in this world?
1118
-             world.max_square_size = Math.round((world.width / 4) * Math.random());
1119
-
1120
-             if (typeof console.log !== undefined) {
1121
-               console.log(world);
1122
-             }
1123
-
1124
-             square = {
1125
-               // where we draw the box
1126
-               x: Math.random() * world.width,
1127
-               y: Math.random() * world.height,
1128
-
1129
-               // what we add to x & y to move the box
1130
-               x_mover: Math.random() - Math.random(),
1131
-               y_mover: Math.random() - Math.random()
1132
-             };
1133
-
1134
-             randomitup();
1135 1012
              sketch.createCanvas(world.width, world.height);
1136
-             sketch.background(world.background_color);
1137
-             sketch.fill(255);
1013
+             sketch.background(0, 0, 0);
1138 1014
            };
1139 1015
 
1140
-           sketch.draw = function() {
1141
-
1142
-             var bounced = false;
1016
+           var waitfor = 1000;
1017
+           var wait_til = sketch.millis() + waitfor;
1018
+           sketch.draw = function () {
1019
+             x = 0;
1143 1020
 
1144
-             if (square.x > world.width) {
1145
-               square.x_mover = 0 - (Math.random());
1146
-               bounced = true;
1021
+             if (sketch.millis() < wait_til) {
1022
+               return;
1147 1023
              }
1148 1024
 
1149
-             if (square.y > world.height) {
1150
-               square.y_mover = 0 - (Math.random());
1151
-               bounced = true;
1152
-             }
1153
-
1154
-             if (square.x <= 0) {
1155
-               square.x_mover = Math.random();
1156
-               bounced = true;
1157
-             }
1158
-
1159
-             if (square.y <= 0) {
1160
-               square.y_mover = Math.random();
1161
-               bounced = true;
1162
-             }
1025
+             sketch.clear();
1163 1026
 
1164
-             if (bounced) {
1165
-               handle_bounce();
1027
+             while (x < world.width) {
1028
+               var color = colors[Math.floor(Math.random()*colors.length)];
1029
+               renderlight(x, y, color);
1030
+               x += 50;
1166 1031
              }
1167 1032
 
1168
-             square.x += (square.x_mover * square.step);
1169
-             square.y += (square.y_mover * square.step);
1170
-
1171
-             sketch.push();
1172
-               sketch.stroke(square.red, square.green, square.blue);
1173
-               sketch.fill(square.red, square.green, square.blue);
1174
-               sketch.rect(square.x, square.y, square.size, square.size);
1175
-             sketch.pop();
1033
+             wait_til = sketch.millis() + waitfor;
1176 1034
            };
1177 1035
          };
1178 1036
 
1179 1037
          var myp5;
1180
-         if (Math.random() > .5) {
1181
-           myp5 = new p5(s1, 'squiggleCanvas');
1182
-         } else {
1183
-           myp5 = new p5(s2, 'squiggleCanvas');
1184
-         }
1038
+         myp5 = new p5(lights_sketch, 'squiggleCanvas');
1185 1039
 
1186 1040
          $(window).resize(function () {
1187 1041
            myp5.setup();

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


+ 1
- 1
tildebrennen.css View File

@@ -1,5 +1,6 @@
1 1
 body {
2 2
   color: white;
3
+  background-color: black;
3 4
   font-family: sans-serif;
4 5
   margin-left: auto;
5 6
   margin-right: auto;
@@ -14,7 +15,6 @@ body {
14 15
 }
15 16
 
16 17
 section {
17
-  background-color: black;
18 18
   padding: 1em;
19 19
 }
20 20
 

Loading…
Cancel
Save