Skip to content

Instantly share code, notes, and snippets.

@manorius

manorius/index.html

Last active August 29, 2015 14:15
Show Gist options
  • Save manorius/1b7e20568703bbd4d2da to your computer and use it in GitHub Desktop.
Save manorius/1b7e20568703bbd4d2da to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. manorius revised this gist Feb 11, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions jsbin.kezizi.js
    View file
    Original file line number Diff line number Diff line change
    @@ -138,7 +138,7 @@ function visualiseArray(ar)
    for(i=0;i<40;i++)
    {
    //console.log(ar[n][i]);
    var v = ar[n][i];
    var v = (i!=39)? ar[n][i]+",":ar[n][i];
    visArr = visArr.concat(v);
    }
    visArr = visArr+="]";
    @@ -147,4 +147,4 @@ function visualiseArray(ar)
    visArr = visArr.concat("]");

    return visArr
    }
    }
  2. manorius revised this gist Feb 11, 2015. No changes.
  3. manorius revised this gist Feb 11, 2015. No changes.
  4. manorius created this gist Feb 11, 2015.
    2,929 changes: 2,929 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2929 @@
    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Template - PaperJS with Zepto framework</title>

    <meta name="description" content="Template - PaperJS with Zepto framework">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style id="jsbin-css">
    *,
    *:before,
    *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
    display: block;
    }
    html,
    button,
    input,
    select,
    textarea {
    font-family: sans-serif;
    }
    body,
    form,
    fieldset,
    legend,
    input,
    select,
    textarea,
    button {
    margin: 0;
    }
    html {
    font-size: 100%;
    }
    body {
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 21px;
    line-height: 1.3125rem;
    color: #434343;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }
    .clear:before,
    .clear:after {
    content: "";
    display: table;
    }
    .clear:after {
    clear: both;
    }
    .clear {
    zoom: 1;
    }
    i,
    em,
    .em,
    dfn,
    blockquote,
    q {
    font-style: italic;
    }
    a {
    color: #27ae61;
    }
    a:hover {
    text-decoration: none;
    }
    a:focus {
    outline: thin dotted;
    }
    a:active,
    a:hover {
    outline: 0;
    }
    p {
    margin: 0 0 1.6em 0;
    }
    pre {
    margin: 1em 0;
    }
    ul + p,
    ul + pre,
    ol + p,
    ol + pre {
    margin-top: 0;
    }
    abbr[title] {
    border-bottom: 1px dotted;
    }
    mark {
    background: #ff0;
    color: #111;
    }
    audio:not([controls]) {
    height: 0;
    }
    small {
    font-size: 80%;
    }
    sub,
    sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    }
    sup {
    top: -0.5em;
    }
    sub {
    bottom: -0.25em;
    }
    img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    }
    svg:not(:root) {
    overflow: hidden;
    }
    figure {
    margin: 0;
    }
    hr {
    border: 0;
    background: none;
    outline: 0;
    background-color: #ddd;
    margin: 2em 0;
    *margin: 1em 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 1px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    line-height: normal;
    font-weight: normal;
    margin: 0 0 0.33em 0;
    }
    h1,
    .h1 {
    font-size: 40px;
    font-size: 2.5rem;
    }
    h2,
    .h2 {
    font-size: 32px;
    font-size: 2rem;
    }
    h3,
    .h3 {
    font-size: 26px;
    font-size: 1.625rem;
    }
    h4,
    .h4 {
    font-size: 20px;
    font-size: 1.25rem;
    }
    h5,
    .h5 {
    font-size: 18px;
    font-size: 1.125rem;
    }
    h6,
    .h6 {
    font-size: 16px;
    font-size: 1rem;
    }
    .no-style-heading {
    font-size: 100%;
    }
    dl,
    menu,
    ol,
    ul {
    margin: 1em 0;
    }
    dd,
    ul ul,
    ol ol,
    ul ol,
    ol ul {
    margin: 0;
    }
    dd {
    margin-bottom: 1em;
    }
    menu,
    ol,
    ul {
    padding: 0 0 0 22px;
    }
    nav ul,
    nav ol {
    list-style: none;
    list-style-image: none;
    }
    .list-unstyled,
    .list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .list-unstyled li,
    .list-inline li {
    margin-top: 0;
    margin-bottom: 0;
    }
    blockquote {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 32px;
    line-height: 2rem;
    color: #434343;
    margin: 1em 0;
    }
    blockquote p {
    margin: 1em 0;
    }
    cite {
    color: #434343;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
    line-height: normal;
    }
    q {
    quotes: none;
    }
    q:before,
    q:after {
    content: '';
    content: none;
    }
    code,
    kbd,
    pre,
    samp {
    word-wrap: break-word;
    font-family: 'courier new', monospace, serif;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: normal;
    font-weight: normal;
    background-color: #f1f1f1;
    padding: 10px;
    }
    code {
    color: #111;
    }
    table {
    width: 100%;
    margin: 1em 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    *white-space: normal;
    }
    table th,
    table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    }
    table thead th,
    table tfoot th {
    vertical-align: bottom;
    background-color: #f1f1f1;
    color: #333;
    }
    table caption {
    padding: 8px;
    font-weight: normal;
    font-style: normal;
    border-bottom: 0;
    }
    fieldset {
    border: 0;
    padding: 0;
    }
    legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px;
    }
    label {
    margin: 0;
    cursor: pointer;
    }
    button,
    input,
    select,
    textarea {
    font-size: 100%;
    vertical-align: baseline;
    *vertical-align: middle;
    }
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: normal;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #111;
    }
    input[type=checkbox],
    input[type=radio] {
    cursor: pointer;
    box-sizing: border-box;
    line-height: normal;
    margin: 0;
    padding: 0;
    *height: 13px;
    *width: 13px;
    }
    .checkbox {
    margin: 0.2em 0;
    }
    .checkbox input[type=checkbox],
    .checkbox input[type=radio] {
    margin-top: 0.05em;
    }
    .checkbox label {
    padding-left: 5px;
    overflow: hidden;
    display: table;
    *zoom: 1;
    }
    button,
    input {
    line-height: normal;
    }
    button,
    select {
    text-transform: none;
    }
    textarea {
    overflow: auto;
    vertical-align: top;
    resize: none;
    }
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
    }
    button[disabled],
    html input[disabled] {
    cursor: default;
    }
    input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    }
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
    border: 0;
    padding: 0;
    }
    .button {
    border: 0;
    padding: 1em 3em;
    background-color: #e74b3c;
    color: #fff;
    text-decoration: none;
    position: relative;
    }
    .button:hover {
    background-color: #f43f3f;
    }
    .button:active {
    top: 1px;
    }
    .grey-button {
    background-color: #eee;
    color: #434343;
    }
    .grey-button:hover {
    background-color: #f1f1f1;
    }
    .button[disabled],
    .button.disabled {
    color: #999;
    background-color: #f1f1f1;
    }
    .button-unstyled {
    font-size: 16px;
    font-size: 1rem;
    color: #27ae61;
    text-decoration: underline;
    border: 0;
    background: transparent;
    height: auto;
    padding: 0;
    cursor: pointer;
    outline: 0;
    }
    .button-unstyled:hover {
    text-decoration: none;
    }
    .button-unstyled[disabled],
    .button-unstyled.disabled {
    text-decoration: none;
    color: #999;
    background-color: #ccc;
    }
    .left,
    .checkbox input[type=checkbox],
    .checkbox input[type=radio] {
    float: left;
    }
    .right {
    float: right;
    }
    .block,
    .checkbox {
    display: block;
    }
    .inline {
    display: inline;
    }
    .inline-block,
    audio,
    canvas,
    video,
    .list-inline,
    .list-inline li,
    .button {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    }
    .none,
    [hidden],
    audio:not([controls]) {
    display: none;
    }
    .font-ultra-bold {
    font-weight: 900;
    }
    .font-bold,
    b,
    strong,
    .strong {
    font-weight: 700;
    }
    .font-normal,
    dt,
    cite,
    table thead th,
    table tfoot th,
    table caption,
    legend,
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    font-weight: 500;
    }
    .font-light {
    font-weight: 300;
    }
    .font-thin {
    font-weight: 100;
    }
    .font-normal,
    dt,
    cite,
    table thead th,
    table tfoot th,
    table caption,
    legend,
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    font-style: normal;
    }
    .capitalize {
    text-transform: capitalize;
    }
    .uppercase {
    text-transform: uppercase;
    }
    .text-left,
    table caption {
    text-align: left;
    }
    .text-right {
    text-align: right;
    }
    .text-center,
    .button {
    text-align: center;
    }
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    left: -9999em;
    }
    .image-left {
    margin-right: 20px;
    }
    .image-right {
    margin-left: 20px;
    }
    .section {
    position: relative;
    }
    .container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    }
    .container-full {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    }
    .col {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    }
    [class*="pull-"],
    [class*="push-"] {
    position: relative;
    }
    .no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .col-1 {
    width: 8.33333%;
    width: calc(100% / 12 * 1);
    width: -webkit-calc(100% / 12 * 1);
    width: -moz-calc(100% / 12 * 1);
    }
    .col-2 {
    width: 16.66667%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    }
    .col-3,
    .col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .col-4,
    .col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .col-5 {
    width: 41.66665%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    }
    .col-6,
    .col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .col-7 {
    width: 58.33333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    }
    .col-8 {
    width: 66.66666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    }
    .col-9,
    .col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    }
    .col-11 {
    width: 91.66666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    }
    .col-12 {
    width: 100%;
    }
    .push-1 {
    left: 8.33333%;
    left: calc(100% / 12 * 1);
    left: -webkit-calc(100% / 12 * 1);
    left: -moz-calc(100% / 12 * 1);
    }
    .pull-1 {
    left: -8.33333%;
    left: calc(-100% / 12 * 1);
    left: -webkit-calc(-100% / 12 * 1);
    left: -moz-calc(-100% / 12 * 1);
    }
    .push-2 {
    left: 16.66667%;
    left: calc(100% / 12 * 2);
    left: -webkit-calc(100% / 12 * 2);
    left: -moz-calc(100% / 12 * 2);
    }
    .pull-2 {
    left: -16.66667%;
    left: calc(-100% / 12 * 2);
    left: -webkit-calc(-100% / 12 * 2);
    left: -moz-calc(-100% / 12 * 2);
    }
    .push-3,
    .push-1-4 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .pull-3,
    .pull-1-4 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .push-4,
    .push-1-3 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .pull-4,
    .pull-1-3 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .push-5 {
    left: 41.66665%;
    left: calc(100% / 12 * 5);
    left: -webkit-calc(100% / 12 * 5);
    left: -moz-calc(100% / 12 * 5);
    }
    .pull-5 {
    left: -41.66665%;
    left: calc(-100% / 12 * 5);
    left: -webkit-calc(-100% / 12 * 5);
    left: -moz-calc(-100% / 12 * 5);
    }
    .push-6,
    .push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .pull-6,
    .pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .push-7 {
    left: 58.33333%;
    left: calc(100% / 12 * 7);
    left: -webkit-calc(100% / 12 * 7);
    left: -moz-calc(100% / 12 * 7);
    }
    .pull-7 {
    left: -58.33333%;
    left: calc(-100% / 12 * 7);
    left: -webkit-calc(-100% / 12 * 7);
    left: -moz-calc(-100% / 12 * 7);
    }
    .push-8 {
    left: 66.66666%;
    left: calc(100% / 12 * 8);
    left: -webkit-calc(100% / 12 * 8);
    left: -moz-calc(100% / 12 * 8);
    }
    .pull-8 {
    left: -66.66666%;
    left: calc(-100% / 12 * 8);
    left: -webkit-calc(-100% / 12 * 8);
    left: -moz-calc(-100% / 12 * 8);
    }
    .push-9,
    .push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .pull-9,
    .pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10);
    }
    .pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10);
    }
    .push-11 {
    left: 91.66666%;
    left: calc(100% / 12 * 11);
    left: -webkit-calc(100% / 12 * 11);
    left: -moz-calc(100% / 12 * 11);
    }
    .pull-11 {
    left: -91.66666%;
    left: calc(-100% / 12 * 11);
    left: -webkit-calc(-100% / 12 * 11);
    left: -moz-calc(-100% / 12 * 11);
    }
    .row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .no-desktop {
    display: none;
    }
    .no-margin,
    .no-style-heading {
    margin: 0;
    }
    .no-padding {
    padding: 0;
    }
    @media only screen and (min-width: 740px) and (max-width: 959px) {
    .container,
    .tablet-container {
    max-width: 960px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .container:first-child,
    .tablet-container:first-child {
    margin-left: auto;
    }
    .tablet-container-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .tablet-container-full:first-child {
    margin-left: auto;
    }
    .tablet-no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .tablet-col-1 {
    width: 8.33333%;
    width: calc(100% / 12 * 1);
    width: -webkit-calc(100% / 12 * 1);
    width: -moz-calc(100% / 12 * 1);
    }
    .tablet-col-2 {
    width: 16.66667%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    }
    .tablet-col-3,
    .tablet-col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .tablet-col-4,
    .tablet-col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .tablet-col-5 {
    width: 41.66665%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    }
    .tablet-col-6,
    .tablet-col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .tablet-col-7 {
    width: 58.33333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    }
    .tablet-col-8 {
    width: 66.66666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    }
    .tablet-col-9,
    .tablet-col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .tablet-col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    }
    .tablet-col-11 {
    width: 91.66666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    }
    .tablet-col-12 {
    width: 100%;
    }
    .tablet-push-1 {
    left: 8.33333%;
    left: calc(100% / 12 * 1);
    left: -webkit-calc(100% / 12 * 1);
    left: -moz-calc(100% / 12 * 1);
    }
    .tablet-pull-1 {
    left: -8.33333%;
    left: calc(-100% / 12 * 1);
    left: -webkit-calc(-100% / 12 * 1);
    left: -moz-calc(-100% / 12 * 1);
    }
    .tablet-push-2 {
    left: 16.66667%;
    left: calc(100% / 12 * 2);
    left: -webkit-calc(100% / 12 * 2);
    left: -moz-calc(100% / 12 * 2);
    }
    .tablet-pull-2 {
    left: -16.66667%;
    left: calc(-100% / 12 * 2);
    left: -webkit-calc(-100% / 12 * 2);
    left: -moz-calc(-100% / 12 * 2);
    }
    .tablet-push-3,
    .tablet-push-1-4 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .tablet-pull-3,
    .tablet-pull-1-4 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .tablet-push-4,
    .tablet-push-1-3 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .tablet-pull-4,
    .tablet-pull-1-3 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .tablet-push-5 {
    left: 41.66665%;
    left: calc(100% / 12 * 5);
    left: -webkit-calc(100% / 12 * 5);
    left: -moz-calc(100% / 12 * 5);
    }
    .tablet-pull-5 {
    left: -41.66665%;
    left: calc(-100% / 12 * 5);
    left: -webkit-calc(-100% / 12 * 5);
    left: -moz-calc(-100% / 12 * 5);
    }
    .tablet-push-6,
    .tablet-push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .tablet-pull-6,
    .tablet-pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .tablet-push-7 {
    left: 58.33333%;
    left: calc(100% / 12 * 7);
    left: -webkit-calc(100% / 12 * 7);
    left: -moz-calc(100% / 12 * 7);
    }
    .tablet-pull-7 {
    left: -58.33333%;
    left: calc(-100% / 12 * 7);
    left: -webkit-calc(-100% / 12 * 7);
    left: -moz-calc(-100% / 12 * 7);
    }
    .tablet-push-8 {
    left: 66.66666%;
    left: calc(100% / 12 * 8);
    left: -webkit-calc(100% / 12 * 8);
    left: -moz-calc(100% / 12 * 8);
    }
    .tablet-pull-8 {
    left: -66.66666%;
    left: calc(-100% / 12 * 8);
    left: -webkit-calc(-100% / 12 * 8);
    left: -moz-calc(-100% / 12 * 8);
    }
    .tablet-push-9,
    .tablet-push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .tablet-pull-9,
    .tablet-pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .tablet-push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10);
    }
    .tablet-pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10);
    }
    .tablet-push-11 {
    left: 91.66666%;
    left: calc(100% / 12 * 11);
    left: -webkit-calc(100% / 12 * 11);
    left: -moz-calc(100% / 12 * 11);
    }
    .tablet-pull-11 {
    left: -91.66666%;
    left: calc(-100% / 12 * 11);
    left: -webkit-calc(-100% / 12 * 11);
    left: -moz-calc(-100% / 12 * 11);
    }
    .tablet-no-push,
    .tablet-no-pull {
    left: auto;
    }
    .tablet-row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .tablet-full {
    left: auto;
    clear: both;
    float: none;
    width: 100%;
    margin: 1em 0 0 0;
    display: block;
    }
    .tablet-full:first-child {
    margin-top: 0;
    }
    .tablet-text-left {
    text-align: left;
    }
    .tablet-text-right {
    text-align: right;
    }
    .tablet-text-center {
    text-align: center;
    }
    .tablet-left {
    float: left;
    }
    .tablet-right {
    float: right;
    }
    .tablet-no-float {
    float: none;
    }
    .tablet-no-margin {
    margin: 0;
    }
    .tablet-no-padding {
    padding: 0;
    }
    .no-tablet {
    display: none;
    }
    .show-tablet {
    display: block;
    }
    }
    @media only screen and (max-width: 739px) {
    .container,
    .mobile-container {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .container:first-child,
    .mobile-container:first-child {
    margin-left: auto;
    }
    .mobile-container-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .mobile-container-full:first-child {
    margin-left: auto;
    }
    .mobile-no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .mobile-col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .mobile-col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .mobile-col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .mobile-col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .mobile-push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .mobile-pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .mobile-push-1-3 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .mobile-pull-1-3 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .mobile-push-1-4 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .mobile-pull-1-4 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .mobile-push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .mobile-pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .mobile-no-push,
    .mobile-no-pull {
    left: auto;
    }
    .mobile-row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .mobile-full {
    left: auto;
    clear: both;
    float: none;
    width: 100%;
    margin: 0.2em 0 0 0;
    display: block;
    }
    .mobile-full:first-child {
    margin-top: 0;
    }
    .mobile-text-left {
    text-align: left;
    }
    .mobile-text-right {
    text-align: right;
    }
    .mobile-text-center {
    text-align: center;
    }
    .mobile-left {
    float: left;
    }
    .mobile-right {
    float: right;
    }
    .mobile-no-float {
    float: none;
    }
    .mobile-no-margin {
    margin: 0;
    }
    .mobile-no-padding {
    padding: 0;
    }
    .no-mobile {
    display: none;
    }
    .show-mobile {
    display: block;
    }
    }
    @media print {
    * {
    background: transparent;
    }
    a,
    a:visited {
    text-decoration: underline;
    }
    abbr[title]:after {
    content: " (" attr(title) ")";
    }
    pre,
    blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
    }
    thead {
    display: table-header-group;
    }
    tr,
    img {
    page-break-inside: avoid;
    }
    img {
    max-width: 100%;
    }
    @page {
    margin: 0.5cm;
    }
    p,
    h2,
    h3 {
    orphans: 3;
    widows: 3;
    }
    h2,
    h3 {
    page-break-after: avoid;
    }
    }
    </style>
    </head>
    <body>

    <script src="http://zeptojs.com/zepto.min.js"></script>
    <script type="text/javascript" src="http://yourjavascript.com/051041113450/paper.js"></script>

    <canvas resize id="canvas" > Your browser doesn't support canvas </canvas>


    <script id="jsbin-javascript">
    /* ==========================================================
    Base Default JavaScript
    -- Table of Contents --
    */

    // MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW:
    paper.install(window);

    // VARIABLE FOR THE CANVAS ELEMENT
    var c;

    // EXECUTE CALLBACK WHEN THE PAGE IS READY:
    Zepto(function($){

    // CANAVAS ELEMENT
    c = document.getElementById("canvas");

    // DRAW STAGE
    drawStage();

    });


    function drawStage()
    {

    // GET WINDOW ELEMENT
    var _window = $( window );

    // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS:
    paper.setup(c);

    // SET A STYLE FOR THE PROJECT
    project.currentStyle = {
    fillColor:'red'
    };

    // CREATE A CIRCLE

    var leds = [];
    var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
    //noprotect
    for(n=0;n<20;n++)
    {

    var row=[];

    for(i=0;i<40;i++)
    {
    var round = new Path.Circle(new Point(10,10),10);
    round.position = new Point(i*20+20,n*20+20);
    // console.log(round.position.y);
    var nm = "r"+n+"c"+i;
    //round.name=nm;
    // console.log("-----"+round.name);
    round.name = 'red';
    round.data.coordinates={r:n,c:i};
    round.onMouseDown = function(event) {

    console.log(this.data.coordinates);

    if(this.name=='red'){this.fillColor = 'black';
    this.name = 'black';}
    else
    {
    this.fillColor = 'red';
    this.name = 'red';
    }
    // CHANGE BLACK VALUE
    darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1;
    // RETURN NEW ARRAY
    console.log(visualiseArray(darkShape));
    };
    row.push(round);
    }
    leds.push(row);
    }

    // DRAW THE CÅURRENT VIEW
    // paper.view.draw();

    // OR DRAW REPEATEDLY
    view.onFrame = function(event) {
    // MOVE COLOURS
    // for(n=0;n<20;n++)
    // {
    // for(i=0;i<40;i++)
    // {

    // //console.log(leds[n][i].name);
    // //c = new Color(Math.random(), Math.random(), Math.random());
    // // leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random());
    // }

    // }
    // UPDATE ARRAY
    for(n=0;n<20;n++)
    {
    for(i=0;i<40;i++)
    {

    }

    }


    };



    }

    function visualiseArray(ar)
    {
    var visArr = "[";
    for(n=0;n<20;n++)
    {
    visArr = visArr.concat("[");
    for(i=0;i<40;i++)
    {
    //console.log(ar[n][i]);
    var v = ar[n][i];
    visArr = visArr.concat(v);
    }
    visArr = visArr+="]";
    if(n!=19)visArr = visArr.concat(",");
    }
    visArr = visArr.concat("]");

    return visArr
    }
    </script>

    <script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Template - PaperJS with Zepto framework</title>

    <meta name="description" content="Template - PaperJS with Zepto framework">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>

    <script src="http://zeptojs.com/zepto.min.js"><\/script>
    <script type="text/javascript" src="http://yourjavascript.com/051041113450/paper.js"><\/script>

    <canvas resize id="canvas" > Your browser doesn't support canvas </canvas>


    </body>
    </html>
    </script>

    <script id="jsbin-source-css" type="text/css">*,
    *:before,
    *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
    display: block;
    }
    html,
    button,
    input,
    select,
    textarea {
    font-family: sans-serif;
    }
    body,
    form,
    fieldset,
    legend,
    input,
    select,
    textarea,
    button {
    margin: 0;
    }
    html {
    font-size: 100%;
    }
    body {
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 21px;
    line-height: 1.3125rem;
    color: #434343;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }
    .clear:before,
    .clear:after {
    content: "";
    display: table;
    }
    .clear:after {
    clear: both;
    }
    .clear {
    zoom: 1;
    }
    i,
    em,
    .em,
    dfn,
    blockquote,
    q {
    font-style: italic;
    }
    a {
    color: #27ae61;
    }
    a:hover {
    text-decoration: none;
    }
    a:focus {
    outline: thin dotted;
    }
    a:active,
    a:hover {
    outline: 0;
    }
    p {
    margin: 0 0 1.6em 0;
    }
    pre {
    margin: 1em 0;
    }
    ul + p,
    ul + pre,
    ol + p,
    ol + pre {
    margin-top: 0;
    }
    abbr[title] {
    border-bottom: 1px dotted;
    }
    mark {
    background: #ff0;
    color: #111;
    }
    audio:not([controls]) {
    height: 0;
    }
    small {
    font-size: 80%;
    }
    sub,
    sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    }
    sup {
    top: -0.5em;
    }
    sub {
    bottom: -0.25em;
    }
    img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    }
    svg:not(:root) {
    overflow: hidden;
    }
    figure {
    margin: 0;
    }
    hr {
    border: 0;
    background: none;
    outline: 0;
    background-color: #ddd;
    margin: 2em 0;
    *margin: 1em 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 1px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    line-height: normal;
    font-weight: normal;
    margin: 0 0 0.33em 0;
    }
    h1,
    .h1 {
    font-size: 40px;
    font-size: 2.5rem;
    }
    h2,
    .h2 {
    font-size: 32px;
    font-size: 2rem;
    }
    h3,
    .h3 {
    font-size: 26px;
    font-size: 1.625rem;
    }
    h4,
    .h4 {
    font-size: 20px;
    font-size: 1.25rem;
    }
    h5,
    .h5 {
    font-size: 18px;
    font-size: 1.125rem;
    }
    h6,
    .h6 {
    font-size: 16px;
    font-size: 1rem;
    }
    .no-style-heading {
    font-size: 100%;
    }
    dl,
    menu,
    ol,
    ul {
    margin: 1em 0;
    }
    dd,
    ul ul,
    ol ol,
    ul ol,
    ol ul {
    margin: 0;
    }
    dd {
    margin-bottom: 1em;
    }
    menu,
    ol,
    ul {
    padding: 0 0 0 22px;
    }
    nav ul,
    nav ol {
    list-style: none;
    list-style-image: none;
    }
    .list-unstyled,
    .list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .list-unstyled li,
    .list-inline li {
    margin-top: 0;
    margin-bottom: 0;
    }
    blockquote {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 32px;
    line-height: 2rem;
    color: #434343;
    margin: 1em 0;
    }
    blockquote p {
    margin: 1em 0;
    }
    cite {
    color: #434343;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
    line-height: normal;
    }
    q {
    quotes: none;
    }
    q:before,
    q:after {
    content: '';
    content: none;
    }
    code,
    kbd,
    pre,
    samp {
    word-wrap: break-word;
    font-family: 'courier new', monospace, serif;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: normal;
    font-weight: normal;
    background-color: #f1f1f1;
    padding: 10px;
    }
    code {
    color: #111;
    }
    table {
    width: 100%;
    margin: 1em 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    *white-space: normal;
    }
    table th,
    table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    }
    table thead th,
    table tfoot th {
    vertical-align: bottom;
    background-color: #f1f1f1;
    color: #333;
    }
    table caption {
    padding: 8px;
    font-weight: normal;
    font-style: normal;
    border-bottom: 0;
    }
    fieldset {
    border: 0;
    padding: 0;
    }
    legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px;
    }
    label {
    margin: 0;
    cursor: pointer;
    }
    button,
    input,
    select,
    textarea {
    font-size: 100%;
    vertical-align: baseline;
    *vertical-align: middle;
    }
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: normal;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #111;
    }
    input[type=checkbox],
    input[type=radio] {
    cursor: pointer;
    box-sizing: border-box;
    line-height: normal;
    margin: 0;
    padding: 0;
    *height: 13px;
    *width: 13px;
    }
    .checkbox {
    margin: 0.2em 0;
    }
    .checkbox input[type=checkbox],
    .checkbox input[type=radio] {
    margin-top: 0.05em;
    }
    .checkbox label {
    padding-left: 5px;
    overflow: hidden;
    display: table;
    *zoom: 1;
    }
    button,
    input {
    line-height: normal;
    }
    button,
    select {
    text-transform: none;
    }
    textarea {
    overflow: auto;
    vertical-align: top;
    resize: none;
    }
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
    }
    button[disabled],
    html input[disabled] {
    cursor: default;
    }
    input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    }
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
    border: 0;
    padding: 0;
    }
    .button {
    border: 0;
    padding: 1em 3em;
    background-color: #e74b3c;
    color: #fff;
    text-decoration: none;
    position: relative;
    }
    .button:hover {
    background-color: #f43f3f;
    }
    .button:active {
    top: 1px;
    }
    .grey-button {
    background-color: #eee;
    color: #434343;
    }
    .grey-button:hover {
    background-color: #f1f1f1;
    }
    .button[disabled],
    .button.disabled {
    color: #999;
    background-color: #f1f1f1;
    }
    .button-unstyled {
    font-size: 16px;
    font-size: 1rem;
    color: #27ae61;
    text-decoration: underline;
    border: 0;
    background: transparent;
    height: auto;
    padding: 0;
    cursor: pointer;
    outline: 0;
    }
    .button-unstyled:hover {
    text-decoration: none;
    }
    .button-unstyled[disabled],
    .button-unstyled.disabled {
    text-decoration: none;
    color: #999;
    background-color: #ccc;
    }
    .left,
    .checkbox input[type=checkbox],
    .checkbox input[type=radio] {
    float: left;
    }
    .right {
    float: right;
    }
    .block,
    .checkbox {
    display: block;
    }
    .inline {
    display: inline;
    }
    .inline-block,
    audio,
    canvas,
    video,
    .list-inline,
    .list-inline li,
    .button {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    }
    .none,
    [hidden],
    audio:not([controls]) {
    display: none;
    }
    .font-ultra-bold {
    font-weight: 900;
    }
    .font-bold,
    b,
    strong,
    .strong {
    font-weight: 700;
    }
    .font-normal,
    dt,
    cite,
    table thead th,
    table tfoot th,
    table caption,
    legend,
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    font-weight: 500;
    }
    .font-light {
    font-weight: 300;
    }
    .font-thin {
    font-weight: 100;
    }
    .font-normal,
    dt,
    cite,
    table thead th,
    table tfoot th,
    table caption,
    legend,
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    font-style: normal;
    }
    .capitalize {
    text-transform: capitalize;
    }
    .uppercase {
    text-transform: uppercase;
    }
    .text-left,
    table caption {
    text-align: left;
    }
    .text-right {
    text-align: right;
    }
    .text-center,
    .button {
    text-align: center;
    }
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    left: -9999em;
    }
    .image-left {
    margin-right: 20px;
    }
    .image-right {
    margin-left: 20px;
    }
    .section {
    position: relative;
    }
    .container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    }
    .container-full {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    }
    .col {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    }
    [class*="pull-"],
    [class*="push-"] {
    position: relative;
    }
    .no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .col-1 {
    width: 8.33333%;
    width: calc(100% / 12 * 1);
    width: -webkit-calc(100% / 12 * 1);
    width: -moz-calc(100% / 12 * 1);
    }
    .col-2 {
    width: 16.66667%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    }
    .col-3,
    .col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .col-4,
    .col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .col-5 {
    width: 41.66665%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    }
    .col-6,
    .col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .col-7 {
    width: 58.33333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    }
    .col-8 {
    width: 66.66666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    }
    .col-9,
    .col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    }
    .col-11 {
    width: 91.66666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    }
    .col-12 {
    width: 100%;
    }
    .push-1 {
    left: 8.33333%;
    left: calc(100% / 12 * 1);
    left: -webkit-calc(100% / 12 * 1);
    left: -moz-calc(100% / 12 * 1);
    }
    .pull-1 {
    left: -8.33333%;
    left: calc(-100% / 12 * 1);
    left: -webkit-calc(-100% / 12 * 1);
    left: -moz-calc(-100% / 12 * 1);
    }
    .push-2 {
    left: 16.66667%;
    left: calc(100% / 12 * 2);
    left: -webkit-calc(100% / 12 * 2);
    left: -moz-calc(100% / 12 * 2);
    }
    .pull-2 {
    left: -16.66667%;
    left: calc(-100% / 12 * 2);
    left: -webkit-calc(-100% / 12 * 2);
    left: -moz-calc(-100% / 12 * 2);
    }
    .push-3,
    .push-1-4 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .pull-3,
    .pull-1-4 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .push-4,
    .push-1-3 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .pull-4,
    .pull-1-3 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .push-5 {
    left: 41.66665%;
    left: calc(100% / 12 * 5);
    left: -webkit-calc(100% / 12 * 5);
    left: -moz-calc(100% / 12 * 5);
    }
    .pull-5 {
    left: -41.66665%;
    left: calc(-100% / 12 * 5);
    left: -webkit-calc(-100% / 12 * 5);
    left: -moz-calc(-100% / 12 * 5);
    }
    .push-6,
    .push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .pull-6,
    .pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .push-7 {
    left: 58.33333%;
    left: calc(100% / 12 * 7);
    left: -webkit-calc(100% / 12 * 7);
    left: -moz-calc(100% / 12 * 7);
    }
    .pull-7 {
    left: -58.33333%;
    left: calc(-100% / 12 * 7);
    left: -webkit-calc(-100% / 12 * 7);
    left: -moz-calc(-100% / 12 * 7);
    }
    .push-8 {
    left: 66.66666%;
    left: calc(100% / 12 * 8);
    left: -webkit-calc(100% / 12 * 8);
    left: -moz-calc(100% / 12 * 8);
    }
    .pull-8 {
    left: -66.66666%;
    left: calc(-100% / 12 * 8);
    left: -webkit-calc(-100% / 12 * 8);
    left: -moz-calc(-100% / 12 * 8);
    }
    .push-9,
    .push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .pull-9,
    .pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10);
    }
    .pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10);
    }
    .push-11 {
    left: 91.66666%;
    left: calc(100% / 12 * 11);
    left: -webkit-calc(100% / 12 * 11);
    left: -moz-calc(100% / 12 * 11);
    }
    .pull-11 {
    left: -91.66666%;
    left: calc(-100% / 12 * 11);
    left: -webkit-calc(-100% / 12 * 11);
    left: -moz-calc(-100% / 12 * 11);
    }
    .row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .no-desktop {
    display: none;
    }
    .no-margin,
    .no-style-heading {
    margin: 0;
    }
    .no-padding {
    padding: 0;
    }
    @media only screen and (min-width: 740px) and (max-width: 959px) {
    .container,
    .tablet-container {
    max-width: 960px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .container:first-child,
    .tablet-container:first-child {
    margin-left: auto;
    }
    .tablet-container-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .tablet-container-full:first-child {
    margin-left: auto;
    }
    .tablet-no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .tablet-col-1 {
    width: 8.33333%;
    width: calc(100% / 12 * 1);
    width: -webkit-calc(100% / 12 * 1);
    width: -moz-calc(100% / 12 * 1);
    }
    .tablet-col-2 {
    width: 16.66667%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    }
    .tablet-col-3,
    .tablet-col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .tablet-col-4,
    .tablet-col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .tablet-col-5 {
    width: 41.66665%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    }
    .tablet-col-6,
    .tablet-col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .tablet-col-7 {
    width: 58.33333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    }
    .tablet-col-8 {
    width: 66.66666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    }
    .tablet-col-9,
    .tablet-col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .tablet-col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    }
    .tablet-col-11 {
    width: 91.66666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    }
    .tablet-col-12 {
    width: 100%;
    }
    .tablet-push-1 {
    left: 8.33333%;
    left: calc(100% / 12 * 1);
    left: -webkit-calc(100% / 12 * 1);
    left: -moz-calc(100% / 12 * 1);
    }
    .tablet-pull-1 {
    left: -8.33333%;
    left: calc(-100% / 12 * 1);
    left: -webkit-calc(-100% / 12 * 1);
    left: -moz-calc(-100% / 12 * 1);
    }
    .tablet-push-2 {
    left: 16.66667%;
    left: calc(100% / 12 * 2);
    left: -webkit-calc(100% / 12 * 2);
    left: -moz-calc(100% / 12 * 2);
    }
    .tablet-pull-2 {
    left: -16.66667%;
    left: calc(-100% / 12 * 2);
    left: -webkit-calc(-100% / 12 * 2);
    left: -moz-calc(-100% / 12 * 2);
    }
    .tablet-push-3,
    .tablet-push-1-4 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .tablet-pull-3,
    .tablet-pull-1-4 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .tablet-push-4,
    .tablet-push-1-3 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .tablet-pull-4,
    .tablet-pull-1-3 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .tablet-push-5 {
    left: 41.66665%;
    left: calc(100% / 12 * 5);
    left: -webkit-calc(100% / 12 * 5);
    left: -moz-calc(100% / 12 * 5);
    }
    .tablet-pull-5 {
    left: -41.66665%;
    left: calc(-100% / 12 * 5);
    left: -webkit-calc(-100% / 12 * 5);
    left: -moz-calc(-100% / 12 * 5);
    }
    .tablet-push-6,
    .tablet-push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .tablet-pull-6,
    .tablet-pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .tablet-push-7 {
    left: 58.33333%;
    left: calc(100% / 12 * 7);
    left: -webkit-calc(100% / 12 * 7);
    left: -moz-calc(100% / 12 * 7);
    }
    .tablet-pull-7 {
    left: -58.33333%;
    left: calc(-100% / 12 * 7);
    left: -webkit-calc(-100% / 12 * 7);
    left: -moz-calc(-100% / 12 * 7);
    }
    .tablet-push-8 {
    left: 66.66666%;
    left: calc(100% / 12 * 8);
    left: -webkit-calc(100% / 12 * 8);
    left: -moz-calc(100% / 12 * 8);
    }
    .tablet-pull-8 {
    left: -66.66666%;
    left: calc(-100% / 12 * 8);
    left: -webkit-calc(-100% / 12 * 8);
    left: -moz-calc(-100% / 12 * 8);
    }
    .tablet-push-9,
    .tablet-push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .tablet-pull-9,
    .tablet-pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .tablet-push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10);
    }
    .tablet-pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10);
    }
    .tablet-push-11 {
    left: 91.66666%;
    left: calc(100% / 12 * 11);
    left: -webkit-calc(100% / 12 * 11);
    left: -moz-calc(100% / 12 * 11);
    }
    .tablet-pull-11 {
    left: -91.66666%;
    left: calc(-100% / 12 * 11);
    left: -webkit-calc(-100% / 12 * 11);
    left: -moz-calc(-100% / 12 * 11);
    }
    .tablet-no-push,
    .tablet-no-pull {
    left: auto;
    }
    .tablet-row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .tablet-full {
    left: auto;
    clear: both;
    float: none;
    width: 100%;
    margin: 1em 0 0 0;
    display: block;
    }
    .tablet-full:first-child {
    margin-top: 0;
    }
    .tablet-text-left {
    text-align: left;
    }
    .tablet-text-right {
    text-align: right;
    }
    .tablet-text-center {
    text-align: center;
    }
    .tablet-left {
    float: left;
    }
    .tablet-right {
    float: right;
    }
    .tablet-no-float {
    float: none;
    }
    .tablet-no-margin {
    margin: 0;
    }
    .tablet-no-padding {
    padding: 0;
    }
    .no-tablet {
    display: none;
    }
    .show-tablet {
    display: block;
    }
    }
    @media only screen and (max-width: 739px) {
    .container,
    .mobile-container {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .container:first-child,
    .mobile-container:first-child {
    margin-left: auto;
    }
    .mobile-container-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .mobile-container-full:first-child {
    margin-left: auto;
    }
    .mobile-no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .mobile-col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .mobile-col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .mobile-col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .mobile-col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .mobile-push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .mobile-pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .mobile-push-1-3 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .mobile-pull-1-3 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .mobile-push-1-4 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .mobile-pull-1-4 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .mobile-push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .mobile-pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .mobile-no-push,
    .mobile-no-pull {
    left: auto;
    }
    .mobile-row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .mobile-full {
    left: auto;
    clear: both;
    float: none;
    width: 100%;
    margin: 0.2em 0 0 0;
    display: block;
    }
    .mobile-full:first-child {
    margin-top: 0;
    }
    .mobile-text-left {
    text-align: left;
    }
    .mobile-text-right {
    text-align: right;
    }
    .mobile-text-center {
    text-align: center;
    }
    .mobile-left {
    float: left;
    }
    .mobile-right {
    float: right;
    }
    .mobile-no-float {
    float: none;
    }
    .mobile-no-margin {
    margin: 0;
    }
    .mobile-no-padding {
    padding: 0;
    }
    .no-mobile {
    display: none;
    }
    .show-mobile {
    display: block;
    }
    }
    @media print {
    * {
    background: transparent;
    }
    a,
    a:visited {
    text-decoration: underline;
    }
    abbr[title]:after {
    content: " (" attr(title) ")";
    }
    pre,
    blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
    }
    thead {
    display: table-header-group;
    }
    tr,
    img {
    page-break-inside: avoid;
    }
    img {
    max-width: 100%;
    }
    @page {
    margin: 0.5cm;
    }
    p,
    h2,
    h3 {
    orphans: 3;
    widows: 3;
    }
    h2,
    h3 {
    page-break-after: avoid;
    }
    }
    </script>

    <script id="jsbin-source-javascript" type="text/javascript">/* ==========================================================
    Base Default JavaScript
    -- Table of Contents --
    */

    // MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW:
    paper.install(window);

    // VARIABLE FOR THE CANVAS ELEMENT
    var c;

    // EXECUTE CALLBACK WHEN THE PAGE IS READY:
    Zepto(function($){

    // CANAVAS ELEMENT
    c = document.getElementById("canvas");

    // DRAW STAGE
    drawStage();

    });


    function drawStage()
    {

    // GET WINDOW ELEMENT
    var _window = $( window );

    // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS:
    paper.setup(c);

    // SET A STYLE FOR THE PROJECT
    project.currentStyle = {
    fillColor:'red'
    };

    // CREATE A CIRCLE

    var leds = [];
    var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
    //noprotect
    for(n=0;n<20;n++)
    {

    var row=[];

    for(i=0;i<40;i++)
    {
    var round = new Path.Circle(new Point(10,10),10);
    round.position = new Point(i*20+20,n*20+20);
    // console.log(round.position.y);
    var nm = "r"+n+"c"+i;
    //round.name=nm;
    // console.log("-----"+round.name);
    round.name = 'red';
    round.data.coordinates={r:n,c:i};
    round.onMouseDown = function(event) {

    console.log(this.data.coordinates);

    if(this.name=='red'){this.fillColor = 'black';
    this.name = 'black';}
    else
    {
    this.fillColor = 'red';
    this.name = 'red';
    }
    // CHANGE BLACK VALUE
    darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1;
    // RETURN NEW ARRAY
    console.log(visualiseArray(darkShape));
    };
    row.push(round);
    }
    leds.push(row);
    }

    // DRAW THE CÅURRENT VIEW
    // paper.view.draw();

    // OR DRAW REPEATEDLY
    view.onFrame = function(event) {
    // MOVE COLOURS
    // for(n=0;n<20;n++)
    // {
    // for(i=0;i<40;i++)
    // {

    // //console.log(leds[n][i].name);
    // //c = new Color(Math.random(), Math.random(), Math.random());
    // // leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random());
    // }

    // }
    // UPDATE ARRAY
    for(n=0;n<20;n++)
    {
    for(i=0;i<40;i++)
    {

    }

    }


    };



    }

    function visualiseArray(ar)
    {
    var visArr = "[";
    for(n=0;n<20;n++)
    {
    visArr = visArr.concat("[");
    for(i=0;i<40;i++)
    {
    //console.log(ar[n][i]);
    var v = ar[n][i];
    visArr = visArr.concat(v);
    }
    visArr = visArr+="]";
    if(n!=19)visArr = visArr.concat(",");
    }
    visArr = visArr.concat("]");

    return visArr
    }
    </script></body>
    </html>
    1,287 changes: 1,287 additions & 0 deletions jsbin.kezizi.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,1287 @@
    *,
    *:before,
    *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    nav,
    section,
    summary {
    display: block;
    }
    html,
    button,
    input,
    select,
    textarea {
    font-family: sans-serif;
    }
    body,
    form,
    fieldset,
    legend,
    input,
    select,
    textarea,
    button {
    margin: 0;
    }
    html {
    font-size: 100%;
    }
    body {
    font-family: sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 21px;
    line-height: 1.3125rem;
    color: #434343;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }
    .clear:before,
    .clear:after {
    content: "";
    display: table;
    }
    .clear:after {
    clear: both;
    }
    .clear {
    zoom: 1;
    }
    i,
    em,
    .em,
    dfn,
    blockquote,
    q {
    font-style: italic;
    }
    a {
    color: #27ae61;
    }
    a:hover {
    text-decoration: none;
    }
    a:focus {
    outline: thin dotted;
    }
    a:active,
    a:hover {
    outline: 0;
    }
    p {
    margin: 0 0 1.6em 0;
    }
    pre {
    margin: 1em 0;
    }
    ul + p,
    ul + pre,
    ol + p,
    ol + pre {
    margin-top: 0;
    }
    abbr[title] {
    border-bottom: 1px dotted;
    }
    mark {
    background: #ff0;
    color: #111;
    }
    audio:not([controls]) {
    height: 0;
    }
    small {
    font-size: 80%;
    }
    sub,
    sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    }
    sup {
    top: -0.5em;
    }
    sub {
    bottom: -0.25em;
    }
    img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    }
    svg:not(:root) {
    overflow: hidden;
    }
    figure {
    margin: 0;
    }
    hr {
    border: 0;
    background: none;
    outline: 0;
    background-color: #ddd;
    margin: 2em 0;
    *margin: 1em 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 1px;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    line-height: normal;
    font-weight: normal;
    margin: 0 0 0.33em 0;
    }
    h1,
    .h1 {
    font-size: 40px;
    font-size: 2.5rem;
    }
    h2,
    .h2 {
    font-size: 32px;
    font-size: 2rem;
    }
    h3,
    .h3 {
    font-size: 26px;
    font-size: 1.625rem;
    }
    h4,
    .h4 {
    font-size: 20px;
    font-size: 1.25rem;
    }
    h5,
    .h5 {
    font-size: 18px;
    font-size: 1.125rem;
    }
    h6,
    .h6 {
    font-size: 16px;
    font-size: 1rem;
    }
    .no-style-heading {
    font-size: 100%;
    }
    dl,
    menu,
    ol,
    ul {
    margin: 1em 0;
    }
    dd,
    ul ul,
    ol ol,
    ul ol,
    ol ul {
    margin: 0;
    }
    dd {
    margin-bottom: 1em;
    }
    menu,
    ol,
    ul {
    padding: 0 0 0 22px;
    }
    nav ul,
    nav ol {
    list-style: none;
    list-style-image: none;
    }
    .list-unstyled,
    .list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .list-unstyled li,
    .list-inline li {
    margin-top: 0;
    margin-bottom: 0;
    }
    blockquote {
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 32px;
    line-height: 2rem;
    color: #434343;
    margin: 1em 0;
    }
    blockquote p {
    margin: 1em 0;
    }
    cite {
    color: #434343;
    font-style: normal;
    font-size: 16px;
    font-size: 1rem;
    line-height: normal;
    }
    q {
    quotes: none;
    }
    q:before,
    q:after {
    content: '';
    content: none;
    }
    code,
    kbd,
    pre,
    samp {
    word-wrap: break-word;
    font-family: 'courier new', monospace, serif;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: normal;
    font-weight: normal;
    background-color: #f1f1f1;
    padding: 10px;
    }
    code {
    color: #111;
    }
    table {
    width: 100%;
    margin: 1em 0;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
    border-right: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    *white-space: normal;
    }
    table th,
    table td {
    padding: 8px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    }
    table thead th,
    table tfoot th {
    vertical-align: bottom;
    background-color: #f1f1f1;
    color: #333;
    }
    table caption {
    padding: 8px;
    font-weight: normal;
    font-style: normal;
    border-bottom: 0;
    }
    fieldset {
    border: 0;
    padding: 0;
    }
    legend {
    border: 0;
    padding: 0;
    white-space: normal;
    *margin-left: -7px;
    }
    label {
    margin: 0;
    cursor: pointer;
    }
    button,
    input,
    select,
    textarea {
    font-size: 100%;
    vertical-align: baseline;
    *vertical-align: middle;
    }
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: normal;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #111;
    }
    input[type=checkbox],
    input[type=radio] {
    cursor: pointer;
    box-sizing: border-box;
    line-height: normal;
    margin: 0;
    padding: 0;
    *height: 13px;
    *width: 13px;
    }
    .checkbox {
    margin: 0.2em 0;
    }
    .checkbox input[type=checkbox],
    .checkbox input[type=radio] {
    margin-top: 0.05em;
    }
    .checkbox label {
    padding-left: 5px;
    overflow: hidden;
    display: table;
    *zoom: 1;
    }
    button,
    input {
    line-height: normal;
    }
    button,
    select {
    text-transform: none;
    }
    textarea {
    overflow: auto;
    vertical-align: top;
    resize: none;
    }
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
    *overflow: visible;
    }
    button[disabled],
    html input[disabled] {
    cursor: default;
    }
    input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    }
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
    border: 0;
    padding: 0;
    }
    .button {
    border: 0;
    padding: 1em 3em;
    background-color: #e74b3c;
    color: #fff;
    text-decoration: none;
    position: relative;
    }
    .button:hover {
    background-color: #f43f3f;
    }
    .button:active {
    top: 1px;
    }
    .grey-button {
    background-color: #eee;
    color: #434343;
    }
    .grey-button:hover {
    background-color: #f1f1f1;
    }
    .button[disabled],
    .button.disabled {
    color: #999;
    background-color: #f1f1f1;
    }
    .button-unstyled {
    font-size: 16px;
    font-size: 1rem;
    color: #27ae61;
    text-decoration: underline;
    border: 0;
    background: transparent;
    height: auto;
    padding: 0;
    cursor: pointer;
    outline: 0;
    }
    .button-unstyled:hover {
    text-decoration: none;
    }
    .button-unstyled[disabled],
    .button-unstyled.disabled {
    text-decoration: none;
    color: #999;
    background-color: #ccc;
    }
    .left,
    .checkbox input[type=checkbox],
    .checkbox input[type=radio] {
    float: left;
    }
    .right {
    float: right;
    }
    .block,
    .checkbox {
    display: block;
    }
    .inline {
    display: inline;
    }
    .inline-block,
    audio,
    canvas,
    video,
    .list-inline,
    .list-inline li,
    .button {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    }
    .none,
    [hidden],
    audio:not([controls]) {
    display: none;
    }
    .font-ultra-bold {
    font-weight: 900;
    }
    .font-bold,
    b,
    strong,
    .strong {
    font-weight: 700;
    }
    .font-normal,
    dt,
    cite,
    table thead th,
    table tfoot th,
    table caption,
    legend,
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    font-weight: 500;
    }
    .font-light {
    font-weight: 300;
    }
    .font-thin {
    font-weight: 100;
    }
    .font-normal,
    dt,
    cite,
    table thead th,
    table tfoot th,
    table caption,
    legend,
    input[type=text],
    input[type=password],
    input[type=email],
    input[type=search],
    input[type=tel],
    textarea {
    font-style: normal;
    }
    .capitalize {
    text-transform: capitalize;
    }
    .uppercase {
    text-transform: uppercase;
    }
    .text-left,
    table caption {
    text-align: left;
    }
    .text-right {
    text-align: right;
    }
    .text-center,
    .button {
    text-align: center;
    }
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    left: -9999em;
    }
    .image-left {
    margin-right: 20px;
    }
    .image-right {
    margin-left: 20px;
    }
    .section {
    position: relative;
    }
    .container {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    }
    .container-full {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    }
    .col {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    }
    [class*="pull-"],
    [class*="push-"] {
    position: relative;
    }
    .no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .col-1 {
    width: 8.33333%;
    width: calc(100% / 12 * 1);
    width: -webkit-calc(100% / 12 * 1);
    width: -moz-calc(100% / 12 * 1);
    }
    .col-2 {
    width: 16.66667%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    }
    .col-3,
    .col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .col-4,
    .col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .col-5 {
    width: 41.66665%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    }
    .col-6,
    .col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .col-7 {
    width: 58.33333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    }
    .col-8 {
    width: 66.66666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    }
    .col-9,
    .col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    }
    .col-11 {
    width: 91.66666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    }
    .col-12 {
    width: 100%;
    }
    .push-1 {
    left: 8.33333%;
    left: calc(100% / 12 * 1);
    left: -webkit-calc(100% / 12 * 1);
    left: -moz-calc(100% / 12 * 1);
    }
    .pull-1 {
    left: -8.33333%;
    left: calc(-100% / 12 * 1);
    left: -webkit-calc(-100% / 12 * 1);
    left: -moz-calc(-100% / 12 * 1);
    }
    .push-2 {
    left: 16.66667%;
    left: calc(100% / 12 * 2);
    left: -webkit-calc(100% / 12 * 2);
    left: -moz-calc(100% / 12 * 2);
    }
    .pull-2 {
    left: -16.66667%;
    left: calc(-100% / 12 * 2);
    left: -webkit-calc(-100% / 12 * 2);
    left: -moz-calc(-100% / 12 * 2);
    }
    .push-3,
    .push-1-4 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .pull-3,
    .pull-1-4 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .push-4,
    .push-1-3 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .pull-4,
    .pull-1-3 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .push-5 {
    left: 41.66665%;
    left: calc(100% / 12 * 5);
    left: -webkit-calc(100% / 12 * 5);
    left: -moz-calc(100% / 12 * 5);
    }
    .pull-5 {
    left: -41.66665%;
    left: calc(-100% / 12 * 5);
    left: -webkit-calc(-100% / 12 * 5);
    left: -moz-calc(-100% / 12 * 5);
    }
    .push-6,
    .push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .pull-6,
    .pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .push-7 {
    left: 58.33333%;
    left: calc(100% / 12 * 7);
    left: -webkit-calc(100% / 12 * 7);
    left: -moz-calc(100% / 12 * 7);
    }
    .pull-7 {
    left: -58.33333%;
    left: calc(-100% / 12 * 7);
    left: -webkit-calc(-100% / 12 * 7);
    left: -moz-calc(-100% / 12 * 7);
    }
    .push-8 {
    left: 66.66666%;
    left: calc(100% / 12 * 8);
    left: -webkit-calc(100% / 12 * 8);
    left: -moz-calc(100% / 12 * 8);
    }
    .pull-8 {
    left: -66.66666%;
    left: calc(-100% / 12 * 8);
    left: -webkit-calc(-100% / 12 * 8);
    left: -moz-calc(-100% / 12 * 8);
    }
    .push-9,
    .push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .pull-9,
    .pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10);
    }
    .pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10);
    }
    .push-11 {
    left: 91.66666%;
    left: calc(100% / 12 * 11);
    left: -webkit-calc(100% / 12 * 11);
    left: -moz-calc(100% / 12 * 11);
    }
    .pull-11 {
    left: -91.66666%;
    left: calc(-100% / 12 * 11);
    left: -webkit-calc(-100% / 12 * 11);
    left: -moz-calc(-100% / 12 * 11);
    }
    .row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .no-desktop {
    display: none;
    }
    .no-margin,
    .no-style-heading {
    margin: 0;
    }
    .no-padding {
    padding: 0;
    }
    @media only screen and (min-width: 740px) and (max-width: 959px) {
    .container,
    .tablet-container {
    max-width: 960px;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .container:first-child,
    .tablet-container:first-child {
    margin-left: auto;
    }
    .tablet-container-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .tablet-container-full:first-child {
    margin-left: auto;
    }
    .tablet-no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .tablet-col-1 {
    width: 8.33333%;
    width: calc(100% / 12 * 1);
    width: -webkit-calc(100% / 12 * 1);
    width: -moz-calc(100% / 12 * 1);
    }
    .tablet-col-2 {
    width: 16.66667%;
    width: calc(100% / 12 * 2);
    width: -webkit-calc(100% / 12 * 2);
    width: -moz-calc(100% / 12 * 2);
    }
    .tablet-col-3,
    .tablet-col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .tablet-col-4,
    .tablet-col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .tablet-col-5 {
    width: 41.66665%;
    width: calc(100% / 12 * 5);
    width: -webkit-calc(100% / 12 * 5);
    width: -moz-calc(100% / 12 * 5);
    }
    .tablet-col-6,
    .tablet-col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .tablet-col-7 {
    width: 58.33333%;
    width: calc(100% / 12 * 7);
    width: -webkit-calc(100% / 12 * 7);
    width: -moz-calc(100% / 12 * 7);
    }
    .tablet-col-8 {
    width: 66.66666%;
    width: calc(100% / 12 * 8);
    width: -webkit-calc(100% / 12 * 8);
    width: -moz-calc(100% / 12 * 8);
    }
    .tablet-col-9,
    .tablet-col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .tablet-col-10 {
    width: 83.33333%;
    width: calc(100% / 12 * 10);
    width: -webkit-calc(100% / 12 * 10);
    width: -moz-calc(100% / 12 * 10);
    }
    .tablet-col-11 {
    width: 91.66666%;
    width: calc(100% / 12 * 11);
    width: -webkit-calc(100% / 12 * 11);
    width: -moz-calc(100% / 12 * 11);
    }
    .tablet-col-12 {
    width: 100%;
    }
    .tablet-push-1 {
    left: 8.33333%;
    left: calc(100% / 12 * 1);
    left: -webkit-calc(100% / 12 * 1);
    left: -moz-calc(100% / 12 * 1);
    }
    .tablet-pull-1 {
    left: -8.33333%;
    left: calc(-100% / 12 * 1);
    left: -webkit-calc(-100% / 12 * 1);
    left: -moz-calc(-100% / 12 * 1);
    }
    .tablet-push-2 {
    left: 16.66667%;
    left: calc(100% / 12 * 2);
    left: -webkit-calc(100% / 12 * 2);
    left: -moz-calc(100% / 12 * 2);
    }
    .tablet-pull-2 {
    left: -16.66667%;
    left: calc(-100% / 12 * 2);
    left: -webkit-calc(-100% / 12 * 2);
    left: -moz-calc(-100% / 12 * 2);
    }
    .tablet-push-3,
    .tablet-push-1-4 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .tablet-pull-3,
    .tablet-pull-1-4 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .tablet-push-4,
    .tablet-push-1-3 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .tablet-pull-4,
    .tablet-pull-1-3 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .tablet-push-5 {
    left: 41.66665%;
    left: calc(100% / 12 * 5);
    left: -webkit-calc(100% / 12 * 5);
    left: -moz-calc(100% / 12 * 5);
    }
    .tablet-pull-5 {
    left: -41.66665%;
    left: calc(-100% / 12 * 5);
    left: -webkit-calc(-100% / 12 * 5);
    left: -moz-calc(-100% / 12 * 5);
    }
    .tablet-push-6,
    .tablet-push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .tablet-pull-6,
    .tablet-pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .tablet-push-7 {
    left: 58.33333%;
    left: calc(100% / 12 * 7);
    left: -webkit-calc(100% / 12 * 7);
    left: -moz-calc(100% / 12 * 7);
    }
    .tablet-pull-7 {
    left: -58.33333%;
    left: calc(-100% / 12 * 7);
    left: -webkit-calc(-100% / 12 * 7);
    left: -moz-calc(-100% / 12 * 7);
    }
    .tablet-push-8 {
    left: 66.66666%;
    left: calc(100% / 12 * 8);
    left: -webkit-calc(100% / 12 * 8);
    left: -moz-calc(100% / 12 * 8);
    }
    .tablet-pull-8 {
    left: -66.66666%;
    left: calc(-100% / 12 * 8);
    left: -webkit-calc(-100% / 12 * 8);
    left: -moz-calc(-100% / 12 * 8);
    }
    .tablet-push-9,
    .tablet-push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .tablet-pull-9,
    .tablet-pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .tablet-push-10 {
    left: 83.33333%;
    left: calc(100% / 12 * 10);
    left: -webkit-calc(100% / 12 * 10);
    left: -moz-calc(100% / 12 * 10);
    }
    .tablet-pull-10 {
    left: -83.33333%;
    left: calc(-100% / 12 * 10);
    left: -webkit-calc(-100% / 12 * 10);
    left: -moz-calc(-100% / 12 * 10);
    }
    .tablet-push-11 {
    left: 91.66666%;
    left: calc(100% / 12 * 11);
    left: -webkit-calc(100% / 12 * 11);
    left: -moz-calc(100% / 12 * 11);
    }
    .tablet-pull-11 {
    left: -91.66666%;
    left: calc(-100% / 12 * 11);
    left: -webkit-calc(-100% / 12 * 11);
    left: -moz-calc(-100% / 12 * 11);
    }
    .tablet-no-push,
    .tablet-no-pull {
    left: auto;
    }
    .tablet-row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .tablet-full {
    left: auto;
    clear: both;
    float: none;
    width: 100%;
    margin: 1em 0 0 0;
    display: block;
    }
    .tablet-full:first-child {
    margin-top: 0;
    }
    .tablet-text-left {
    text-align: left;
    }
    .tablet-text-right {
    text-align: right;
    }
    .tablet-text-center {
    text-align: center;
    }
    .tablet-left {
    float: left;
    }
    .tablet-right {
    float: right;
    }
    .tablet-no-float {
    float: none;
    }
    .tablet-no-margin {
    margin: 0;
    }
    .tablet-no-padding {
    padding: 0;
    }
    .no-tablet {
    display: none;
    }
    .show-tablet {
    display: block;
    }
    }
    @media only screen and (max-width: 739px) {
    .container,
    .mobile-container {
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .container:first-child,
    .mobile-container:first-child {
    margin-left: auto;
    }
    .mobile-container-full {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    float: none;
    }
    .mobile-container-full:first-child {
    margin-left: auto;
    }
    .mobile-no-gutter {
    padding-left: 0;
    padding-right: 0;
    }
    .mobile-col-1-2 {
    width: 50%;
    width: calc(100% / 12 * 6);
    width: -webkit-calc(100% / 12 * 6);
    width: -moz-calc(100% / 12 * 6);
    }
    .mobile-col-1-3 {
    width: 33.33333%;
    width: calc(100% / 12 * 4);
    width: -webkit-calc(100% / 12 * 4);
    width: -moz-calc(100% / 12 * 4);
    }
    .mobile-col-1-4 {
    width: 25%;
    width: calc(100% / 12 * 3);
    width: -webkit-calc(100% / 12 * 3);
    width: -moz-calc(100% / 12 * 3);
    }
    .mobile-col-3-4 {
    width: 75%;
    width: calc(100% / 12 * 9);
    width: -webkit-calc(100% / 12 * 9);
    width: -moz-calc(100% / 12 * 9);
    }
    .mobile-push-1-2 {
    left: 50%;
    left: calc(100% / 12 * 6);
    left: -webkit-calc(100% / 12 * 6);
    left: -moz-calc(100% / 12 * 6);
    }
    .mobile-pull-1-2 {
    left: -50%;
    left: calc(-100% / 12 * 6);
    left: -webkit-calc(-100% / 12 * 6);
    left: -moz-calc(-100% / 12 * 6);
    }
    .mobile-push-1-3 {
    left: 25%;
    left: calc(100% / 12 * 3);
    left: -webkit-calc(100% / 12 * 3);
    left: -moz-calc(100% / 12 * 3);
    }
    .mobile-pull-1-3 {
    left: -25%;
    left: calc(-100% / 12 * 3);
    left: -webkit-calc(-100% / 12 * 3);
    left: -moz-calc(-100% / 12 * 3);
    }
    .mobile-push-1-4 {
    left: 33.33333%;
    left: calc(100% / 12 * 4);
    left: -webkit-calc(100% / 12 * 4);
    left: -moz-calc(100% / 12 * 4);
    }
    .mobile-pull-1-4 {
    left: -33.33333%;
    left: calc(-100% / 12 * 4);
    left: -webkit-calc(-100% / 12 * 4);
    left: -moz-calc(-100% / 12 * 4);
    }
    .mobile-push-3-4 {
    left: 75%;
    left: calc(100% / 12 * 9);
    left: -webkit-calc(100% / 12 * 9);
    left: -moz-calc(100% / 12 * 9);
    }
    .mobile-pull-3-4 {
    left: -75%;
    left: calc(-100% / 12 * 9);
    left: -webkit-calc(-100% / 12 * 9);
    left: -moz-calc(-100% / 12 * 9);
    }
    .mobile-no-push,
    .mobile-no-pull {
    left: auto;
    }
    .mobile-row {
    padding-top: 1em;
    padding-bottom: 1em;
    }
    .mobile-full {
    left: auto;
    clear: both;
    float: none;
    width: 100%;
    margin: 0.2em 0 0 0;
    display: block;
    }
    .mobile-full:first-child {
    margin-top: 0;
    }
    .mobile-text-left {
    text-align: left;
    }
    .mobile-text-right {
    text-align: right;
    }
    .mobile-text-center {
    text-align: center;
    }
    .mobile-left {
    float: left;
    }
    .mobile-right {
    float: right;
    }
    .mobile-no-float {
    float: none;
    }
    .mobile-no-margin {
    margin: 0;
    }
    .mobile-no-padding {
    padding: 0;
    }
    .no-mobile {
    display: none;
    }
    .show-mobile {
    display: block;
    }
    }
    @media print {
    * {
    background: transparent;
    }
    a,
    a:visited {
    text-decoration: underline;
    }
    abbr[title]:after {
    content: " (" attr(title) ")";
    }
    pre,
    blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
    }
    thead {
    display: table-header-group;
    }
    tr,
    img {
    page-break-inside: avoid;
    }
    img {
    max-width: 100%;
    }
    @page {
    margin: 0.5cm;
    }
    p,
    h2,
    h3 {
    orphans: 3;
    widows: 3;
    }
    h2,
    h3 {
    page-break-after: avoid;
    }
    }
    150 changes: 150 additions & 0 deletions jsbin.kezizi.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,150 @@
    /* ==========================================================
    Base Default JavaScript
    -- Table of Contents --
    */

    // MAKE THE PAPER SCOPE GLOBAL, BY INJECTING IT INTO WINDOW:
    paper.install(window);

    // VARIABLE FOR THE CANVAS ELEMENT
    var c;

    // EXECUTE CALLBACK WHEN THE PAGE IS READY:
    Zepto(function($){

    // CANAVAS ELEMENT
    c = document.getElementById("canvas");

    // DRAW STAGE
    drawStage();

    });


    function drawStage()
    {

    // GET WINDOW ELEMENT
    var _window = $( window );

    // CREATE AN EMPTY PROJECT AND A VIEW FOR THE CANVAS:
    paper.setup(c);

    // SET A STYLE FOR THE PROJECT
    project.currentStyle = {
    fillColor:'red'
    };

    // CREATE A CIRCLE

    var leds = [];
    var darkShape = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
    //noprotect
    for(n=0;n<20;n++)
    {

    var row=[];

    for(i=0;i<40;i++)
    {
    var round = new Path.Circle(new Point(10,10),10);
    round.position = new Point(i*20+20,n*20+20);
    // console.log(round.position.y);
    var nm = "r"+n+"c"+i;
    //round.name=nm;
    // console.log("-----"+round.name);
    round.name = 'red';
    round.data.coordinates={r:n,c:i};
    round.onMouseDown = function(event) {

    console.log(this.data.coordinates);

    if(this.name=='red'){this.fillColor = 'black';
    this.name = 'black';}
    else
    {
    this.fillColor = 'red';
    this.name = 'red';
    }
    // CHANGE BLACK VALUE
    darkShape[this.data.coordinates.r][this.data.coordinates.c] = (this.name == 'red')? 0:1;
    // RETURN NEW ARRAY
    console.log(visualiseArray(darkShape));
    };
    row.push(round);
    }
    leds.push(row);
    }

    // DRAW THE CÅURRENT VIEW
    // paper.view.draw();

    // OR DRAW REPEATEDLY
    view.onFrame = function(event) {
    // MOVE COLOURS
    // for(n=0;n<20;n++)
    // {
    // for(i=0;i<40;i++)
    // {

    // //console.log(leds[n][i].name);
    // //c = new Color(Math.random(), Math.random(), Math.random());
    // // leds[n][i].fillColor = new Color(Math.random(), Math.random(), Math.random());
    // }

    // }
    // UPDATE ARRAY
    for(n=0;n<20;n++)
    {
    for(i=0;i<40;i++)
    {

    }

    }


    };



    }

    function visualiseArray(ar)
    {
    var visArr = "[";
    for(n=0;n<20;n++)
    {
    visArr = visArr.concat("[");
    for(i=0;i<40;i++)
    {
    //console.log(ar[n][i]);
    var v = ar[n][i];
    visArr = visArr.concat(v);
    }
    visArr = visArr+="]";
    if(n!=19)visArr = visArr.concat(",");
    }
    visArr = visArr.concat("]");

    return visArr
    }