Browse Source

put up some lights around the place

master
Brennen Bearnes 6 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 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1085.3995"
height="534.14417"
id="svg2985"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="christmas_lights.svg">
<defs
id="defs2987" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#ffffff"
borderopacity="0.0"
inkscape:pageopacity="0"
inkscape:pageshadow="0"
inkscape:zoom="0.54103083"
inkscape:cx="542.69969"
inkscape:cy="267.06142"
inkscape:document-units="px"
inkscape:current-layer="svg2985"
showgrid="true"
inkscape:window-width="1364"
inkscape:window-height="748"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
borderlayer="false"
inkscape:showpageshadow="true">
<inkscape:grid
type="xygrid"
id="grid3175"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
</sodipodi:namedview>
<metadata
id="metadata2990">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(588.16689,-42.878448)">
<path
style="fill:#ff0000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
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"
id="path3031"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscc" />
<rect
style="fill:#008000"
id="rect3063"
width="160"
height="160.00003"
x="-580"
y="49.505039"
ry="0" />
<path
style="fill:#0000ff;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
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"
id="path3031-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csscc" />
<rect
style="fill:#008000"
id="rect3063-0"
width="160"
height="160.00003"
x="-114.77986"
y="48.592739"
ry="0" />
<g
id="g3116"
transform="translate(11.428571,0)">
<path
sodipodi:nodetypes="csscc"
inkscape:connector-curvature="0"
id="path3031-0"
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"
style="fill:#00ff00;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<rect
ry="0"
y="42.878448"
x="316.64877"
height="160.00003"
width="160"
id="rect3063-8"
style="fill:#008000" />
</g>
</g>
</svg>

+ 40
- 186
index.html View File

@ -12,6 +12,7 @@
<script type="text/javascript" src="//squiggle.city/js/shjs/sh_main.js"></script>
<script type="text/javascript" src="//squiggle.city/js/shjs/lang/sh_perl.js"></script>
<script type="text/javascript" src="//squiggle.city/js/p5/p5.min.js"></script>
<script type="text/javascript" src="js/lights.p5.js"></script>
<link type="text/css" rel="stylesheet" href="//squiggle.city/js/shjs/css/sh_darkness.css">
</head>
@ -57,7 +58,15 @@
<section>
<p><button id=hidebody>hide text</button></p>
<!-- <p><button id=hidebody>hide text</button></p> -->
<article>
<h2>Tuesday, December 16, early a.m.</h2>
<p><img src=christmas_lights.svg width=500 /></p>
</article>
<article>
@ -972,216 +981,61 @@ sub slurp {
});
// A really simple p5.js sketch - google p5.js:
var s1 = function(sketch) {
var square, world;
var handle_bounce = function () {
world.bounces++;
if (Math.random() > .3) {
randomitup();
}
};
var randomitup = function () {
square.step = Math.random() * ($(window).height() / 18);
square.size = Math.random() * world.max_square_size;
square.red = Math.round(Math.random() * 255);
square.green = Math.round(Math.random() * 255);
square.blue = Math.round(Math.random() * 255);
// occasionally, reset the world
if ((world.bounces > world.minimum_bounces) && (Math.random() > .95)) {
world.do_a_reset = true;
}
};
sketch.setup = function() {
world = {
bounces: 0,
minimum_bounces: Math.round(Math.random() * 400),
// size of the canvas
width: $(window).width(),
height: $(window).height(),
// background fill
background_color: sketch.color(
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
)
};
// how big can the box get in this world?
world.max_square_size = Math.round((world.width / 5) * Math.random());
if (typeof console.log !== undefined) {
console.log(world);
}
square = {
// where we draw the box
x: Math.random() * world.width,
y: Math.random() * world.height,
// what we add to x & y to move the box
x_mover: Math.random() - Math.random(),
y_mover: Math.random() - Math.random()
};
randomitup();
sketch.createCanvas(world.width, world.height);
sketch.background(world.background_color);
sketch.fill(255);
};
sketch.draw = function() {
if (world.do_a_reset) {
world.do_a_reset = false;
world.bounces = 0;
sketch.setup();
}
var lights_sketch = function(sketch) {
if (square.x > world.width) {
square.x_mover = 0 - (Math.random());
handle_bounce();
}
var x = 0;
var y = 12;
var world;
var red = sketch.color(255, 0, 0);
var green = sketch.color(0, 255, 0);
var blue = sketch.color(0, 0, 255);
var yeller = sketch.color(255, 255, 0);
var colors = [red, green, blue, yeller];
if (square.y > world.height) {
square.y_mover = 0 - (Math.random());
handle_bounce();
}
if (square.x <= 0) {
square.x_mover = Math.random();
handle_bounce();
}
if (square.y <= 0) {
square.y_mover = Math.random();
handle_bounce();
}
square.x += square.x_mover * square.step;
square.y += square.y_mover * square.step;
var light_width = 10;
var light_height = 18;
var renderlight = function (x, y, color) {
sketch.push();
sketch.stroke(square.red, square.green, square.blue);
sketch.fill(square.red, square.green, square.blue);
sketch.rect(square.x, square.y, square.size, square.size);
sketch.stroke(color);
sketch.fill(color);
sketch.ellipse(x, y, light_width, light_height);
sketch.pop();
};
};
var s2 = function(sketch) {
var square, world;
var handle_bounce = function () {
world.bounces++;
if (Math.random() > .3) {
randomitup();
}
};
var randomitup = function () {
var color_space = 255;
square.step = Math.random() * ($(window).height() / 15);
square.size = Math.random() * world.max_square_size;
square.red = Math.round(Math.random() * color_space);
square.green = Math.round(Math.random() * color_space);
square.blue = Math.round(Math.random() * color_space);
};
sketch.setup = function() {
sketch.setup = function () {
world = {
bounces: 0,
// size of the canvas
width: $(window).width(),
height: $(window).height(),
// background fill
background_color: sketch.color(
Math.round(Math.random() * 255),
Math.round(Math.random() * 255),
Math.round(Math.random() * 255)
)
};
// how big can the box get in this world?
world.max_square_size = Math.round((world.width / 4) * Math.random());
if (typeof console.log !== undefined) {
console.log(world);
}
square = {
// where we draw the box
x: Math.random() * world.width,
y: Math.random() * world.height,
// what we add to x & y to move the box
x_mover: Math.random() - Math.random(),
y_mover: Math.random() - Math.random()
};
randomitup();
sketch.createCanvas(world.width, world.height);
sketch.background(world.background_color);
sketch.fill(255);
sketch.background(0, 0, 0);
};
sketch.draw = function() {
var bounced = false;
var waitfor = 1000;
var wait_til = sketch.millis() + waitfor;
sketch.draw = function () {
x = 0;
if (square.x > world.width) {
square.x_mover = 0 - (Math.random());
bounced = true;
if (sketch.millis() < wait_til) {
return;
}
if (square.y > world.height) {
square.y_mover = 0 - (Math.random());
bounced = true;
}
if (square.x <= 0) {
square.x_mover = Math.random();
bounced = true;
}
if (square.y <= 0) {
square.y_mover = Math.random();
bounced = true;
}
sketch.clear();
if (bounced) {
handle_bounce();
while (x < world.width) {
var color = colors[Math.floor(Math.random()*colors.length)];
renderlight(x, y, color);
x += 50;
}
square.x += (square.x_mover * square.step);
square.y += (square.y_mover * square.step);
sketch.push();
sketch.stroke(square.red, square.green, square.blue);
sketch.fill(square.red, square.green, square.blue);
sketch.rect(square.x, square.y, square.size, square.size);
sketch.pop();
wait_til = sketch.millis() + waitfor;
};
};
var myp5;
if (Math.random() > .5) {
myp5 = new p5(s1, 'squiggleCanvas');
} else {
myp5 = new p5(s2, 'squiggleCanvas');
}
myp5 = new p5(lights_sketch, 'squiggleCanvas');
$(window).resize(function () {
myp5.setup();


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


+ 1
- 1
tildebrennen.css View File

@ -1,5 +1,6 @@
body {
color: white;
background-color: black;
font-family: sans-serif;
margin-left: auto;
margin-right: auto;
@ -14,7 +15,6 @@ body {
}
section {
background-color: black;
padding: 1em;
}


Loading…
Cancel
Save