svg_searchlights-v3-paper

by Tristan Rentz

HTML

<link rel="stylesheet" href="http://paperjs.org/assets/css/style.css">
<script src="http://paperjs.org/assets/js/jquery.js"></script>
<script src="http://paperjs.org/assets/js/codemirror.js"></script>
<script src="http://paperjs.orghttps://jsfiddle.net/terentz/tndcxfs6/5/#/assets/js/scripts.js"></script>
<div class="canvas">
<canvas resize="true" id="canvas-1"></canvas>
</div>

CSS

@charset "UTF-8";
form,
img,
ul,
ol,
table,
td,
article,
figure,
figcaption {
  margin: 0;
  padding: 0;
  border: 0; }

a {
  outline: none;
  border: 0; }

ul,
ol {
  list-style: none outside none; }

table {
  border-spacing: 0; }

td {
  vertical-align: top; }

html {
  -webkit-text-size-adjust: none; }

html,
body {
  margin: 0;
  height: 100%; }

body {
  background: #fff;
  margin: 0;
  width: 996px; }

select,
input,
textarea {
  font-size: 12px;
  margin: 0;
  color: #000; }

a {
  text-decoration: none; }

/* Fonts */
@font-face {
  font-family: "Superstudio";
  font-weight: normal;
  font-style: normal;
  src: url("http://assets.paperjs.org/fonts/superstudio.eot");
  src: url("http://assets.paperjs.org/fonts/superstudio.eot?#iefix") format("embedded-opentype"), url("http://assets.paperjs.org/fonts/superstudio.woff") format("woff"), url("http://assets.paperjs.org/fonts/superstudio.ttf") format("truetype"), url("http://assets.paperjs.org/fonts/superstudio.svg#Superstudio") format("svg"); }

@font-face {
  font-family: "Akkurat-Mono";
  font-weight: normal;
  font-style: normal;
  src: url("http://assets.paperjs.org/fonts/akkurat-mono.eot");
  src: url("http://assets.paperjs.org/fonts/akkurat-mono.eot?#iefix") format("embedded-opentype"), url("http://assets.paperjs.org/fonts/akkurat-mono.woff") format("woff"), url("http://assets.paperjs.org/fonts/akkurat-mono.ttf") format("truetype"), url("http://assets.paperjs.org/fonts/akkurat-mono.svg#Akkurat-Mono") format("svg"); }

@font-face {
  font-family: "Executive";
  font-weight: normal;
  font-style: normal;
  src: url("http://assets.paperjs.org/fonts/executive-regular.eot");
  src: url("http://assets.paperjs.org/fonts/executive-regular.eot?#iefix") format("embedded-opentype"), url("http://assets.paperjs.org/fonts/executive-regular.woff") format("woff"), url("http://assets.paperjs.org/fonts/executive-regular.ttf") format("truetype"), url("http://assets.paperjs.org/fonts/executive-regular.svg#Executive")...

JavaScript

var text = new PointText({
    position: view.center + [0, 200],
    fillColor: 'black',
    justification: 'center',
    fontSize: 20
});

var originals = new Group({ insert: false }); // Don't insert in DOM.

var square = new Path.Rectangle({
    position: view.center,
    size: 300,
    parent: originals,
    fillColor: 'white'
});

// Make a ring using subtraction of two circles:
var inner = new Path.Circle({
    center: view.center,
    radius: 100,
    parent: originals,
    fillColor: 'white'
});

var outer = new Path.Circle({
    center: view.center,
    radius: 140,
    parent: originals,
    fillColor: 'white'
});

var ring = outer.subtract(inner);

var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
var colors = ['red', 'green', 'blue', 'black'];
var curIndex = -1;
var operation, result, activeItem;

// Change the mode every 3 seconds:
setInterval(setMode, 3000);

// Set the initial mode:
setMode();

function setMode() {
    curIndex++;
    if (curIndex == operations.length * 2)
        curIndex = 0;
    operation = operations[curIndex % operations.length];
}

function onMouseDown(event) {
    var hitResult = originals.hitTest(event.point);
    activeItem = hitResult && hitResult.item;
}

function onMouseDrag(event) {
    if (activeItem)
        activeItem.position = event.point;
}

function onMouseUp() {
    activeItem = null;
    square.position = view.center;
}

function onFrame(event) {
    if (activeItem != ring) {
        // Move the ring around:
        var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
        ring.position = view.center + offset;
    }

    // Remove the result of the last path operation:
    if (result)
        result.remove();

    // Perform the path operation on the ring:
    if (curIndex < operations.length) {
        result = square[operation](ring);
        text.content = 'square.' + operation + '(ring)';
    } else {
        result =...