|
|
@ -8,11 +8,10 @@ |
|
|
|
<link rel=stylesheet href="tildebrennen.css?update_for_xmas_lights=yesplease" /> |
|
|
|
|
|
|
|
<!-- the following are all available for general use from squiggle.city/js/ --> |
|
|
|
<script type="text/javascript" src="//squiggle.city/js/jquery.js"></script> |
|
|
|
<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> |
|
|
|
<script type="text/javascript" src="https://squiggle.city/js/jquery.js"></script> |
|
|
|
<script type="text/javascript" src="https://squiggle.city/js/shjs/sh_main.js"></script> |
|
|
|
<script type="text/javascript" src="https://squiggle.city/js/shjs/lang/sh_perl.js"></script> |
|
|
|
<script type="text/javascript" src="https://squiggle.city/js/p5/p5.min.js"></script> |
|
|
|
<link type="text/css" rel="stylesheet" href="//squiggle.city/js/shjs/css/sh_darkness.css"> |
|
|
|
</head> |
|
|
|
|
|
|
@ -1241,6 +1240,71 @@ sub slurp { |
|
|
|
// nice job, really. |
|
|
|
sh_highlightDocument(); |
|
|
|
|
|
|
|
// A really simple p5.js sketch - google p5.js: |
|
|
|
var lights_sketch = function(sketch) { |
|
|
|
|
|
|
|
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]; |
|
|
|
|
|
|
|
var light_width = 9; |
|
|
|
var light_height = 18; |
|
|
|
|
|
|
|
var renderlight = function (x, y, color) { |
|
|
|
sketch.push(); |
|
|
|
sketch.stroke(color); |
|
|
|
sketch.fill(color); |
|
|
|
sketch.ellipse(x, y, light_width, light_height); |
|
|
|
sketch.pop(); |
|
|
|
}; |
|
|
|
|
|
|
|
sketch.setup = function () { |
|
|
|
world = { |
|
|
|
// size of the canvas |
|
|
|
width: $(window).width(), |
|
|
|
height: $(window).height(), |
|
|
|
}; |
|
|
|
sketch.createCanvas(world.width, world.height); |
|
|
|
sketch.background(0, 0, 0); |
|
|
|
}; |
|
|
|
|
|
|
|
var waitfor = 1800; |
|
|
|
var wait_til = sketch.millis() + waitfor; |
|
|
|
sketch.draw = function () { |
|
|
|
x = 0; |
|
|
|
|
|
|
|
if (sketch.millis() < wait_til) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
sketch.clear(); |
|
|
|
|
|
|
|
var previous_color; |
|
|
|
var color; |
|
|
|
while (x < world.width) { |
|
|
|
while (color === previous_color) { |
|
|
|
color = colors[ Math.floor(Math.random()*colors.length) ]; |
|
|
|
} |
|
|
|
renderlight(x, y, color); |
|
|
|
x += 50; |
|
|
|
previous_color = color; |
|
|
|
} |
|
|
|
|
|
|
|
wait_til = sketch.millis() + waitfor; |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
var myp5; |
|
|
|
myp5 = new p5(lights_sketch, 'squiggleCanvas'); |
|
|
|
|
|
|
|
$(window).resize(function () { |
|
|
|
myp5.setup(); |
|
|
|
}); |
|
|
|
|
|
|
|
// STACK STARTS HERE |
|
|
|
|
|
|
|