Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including box-sciagraphy with all npm packages installed. Try it out:

box-sciagraphy lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("box-sciagraphy/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

box-sciagraphy v0.0.2

Sun-based box-shadows

What is box-sciagraphy?

Box-sciagraphy is a jQuery plugin that draws a long CSS box-shadow for an element to simulate a shadow cast by the sun if that element were viewed from above at a particular place and time. This plugin is in part inspired by Google Map's incorrect cast shadows and FourShadows.js.

Sciagraphy, if you're interested, is the use of shading and the projection of shadows to show perspective in architectural or technical drawing. Architects sometimes use sciagraphic studies to determine how much sunlight will strike a building, in addition to creating convincing rendering of a building.

Using box-sciagraphy in your project

Box-sciagraphy can be included in your project with NPM or Bower, or by downloading dist/box-sciagraphy.js directly.

Install from NPM:

$ npm install box-sciagraphy

Install from Bower:

$ bower install box-sciagraphy

Box-sciagraphy depends on jQuery and Suncalc. You'll need to include them both in your project:

<script src="path/to/jquery.js"></script>
<script src="path/to/suncalc.js"></script>
<script src="path/to/box-sciagraphy.js"></script>

You'll need to define what elements should recieve box-sciagraphy shadows:

$('.element').boxSciagraphy();

On individual elements, you'll need to define an UNIX timestamp, latitude, and longitude. For an element "placed" at 9:00am on December 21, 2014 (Winter Solstice):

<div class="element"
  data-sciagraphy-height="100"
  data-sciagraphy-time="1419184800"
  data-sciagraphy-lat="37.386052"
  data-sciagraphy-lng="-122.083851"></div>

Boom, shadows. Cool huh? There're some good tools out there to help you get the information you'll need:

Why is this useful?

Box-sciagraphy's usefulness is dubious at best. But, if you can think of a compelling use, I'd love to hear about it!

Contributing

Box-sciagraphy is under tested...I'm pretty sure the math is correct and that it works for all appropriate times and locations. Please submit issues for any problems you may encounter. If you'd like to contribute, feel free to open an issue or pull request. Also, I'd love to hear from you if you use Box-sciagraphy in your project!

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free