├── .ruby-version ├── assets ├── .ruby-version ├── ron-burgundy.jpg ├── starry-night.jpg ├── diamond.svg ├── spade.svg ├── club.svg ├── heart.svg └── suites.svg ├── _config.yml ├── _layouts ├── default.html └── post.html ├── _site ├── 2014 │ ├── 10 │ │ ├── 10 │ │ │ └── animated-blend-modes.html │ │ ├── 12 │ │ │ └── square-tunnel.html │ │ ├── 15 │ │ │ └── arc-grid.html │ │ ├── 01 │ │ │ └── hue-flower.html │ │ ├── 04 │ │ │ └── rainbow-pseudo-spirograph.html │ │ └── 05 │ │ │ └── geometric-star.html │ ├── 11 │ │ ├── 13 │ │ │ └── hue-flower-2.html │ │ ├── 06 │ │ │ └── spiral-circles.html │ │ └── 07 │ │ │ └── sine-wave-dots.html │ └── 09 │ │ ├── 27 │ │ └── raster-circles.html │ │ ├── 28 │ │ └── sine-waves.html │ │ └── 29 │ │ └── sine-waves-hue-shifting.html ├── 2015 │ └── 02 │ │ └── 28 │ │ └── beosound.html ├── assets │ ├── ron-burgundy.jpg │ ├── starry-night.jpg │ ├── diamond.svg │ ├── spade.svg │ ├── club.svg │ ├── heart.svg │ └── suites.svg ├── js │ └── site.js ├── README.md ├── css │ ├── site.css │ ├── syntax.css │ └── normalize.css └── page3 │ └── index.html ├── js └── site.js ├── README.md ├── _includes ├── footer.html └── header.html ├── _posts ├── 2014-11-6-spiral-circles.md ├── 2014-10-1-hue-flower.md ├── 2014-11-7-sine-wave-dots.md ├── 2014-09-28-sine-waves.md ├── 2014-10-4-rainbow-pseudo-spirograph.md ├── 2014-09-29-sine-waves-hue-shifting.md ├── 2014-10-12-square-tunnel.md ├── 2014-11-13-hue-flower-2.md ├── 2014-10-5-geometric-star.md ├── 2014-09-27-raster-circles.md ├── 2015-02-28-beosound.md ├── 2014-10-7-shaded-cubes.md ├── 2014-10-10-animated-blend-modes.md ├── 2014-10-15-arc-grid.md ├── 2014-11-11-oscillating-dots.md ├── 2014-11-14-ron-burgundy.md ├── 2014-10-13-animated-woofer.md ├── 2014-11-4-basic-voronoi.md ├── 2014-09-30-gradient-hexagon.md ├── 2014-10-30-smoke-particles.md └── 2014-11-5-identicon-invaders.md ├── index.html └── css ├── site.css ├── syntax.css └── normalize.css /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.1.2 2 | -------------------------------------------------------------------------------- /assets/.ruby-version: -------------------------------------------------------------------------------- 1 | 2.1.2-github 2 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: /pixelbits 2 | paginate: 10 3 | 4 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 | {{content}} 3 | {% include footer.html %} 4 | -------------------------------------------------------------------------------- /assets/ron-burgundy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/pixelbits/gh-pages/assets/ron-burgundy.jpg -------------------------------------------------------------------------------- /assets/starry-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/pixelbits/gh-pages/assets/starry-night.jpg -------------------------------------------------------------------------------- /_site/assets/ron-burgundy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/pixelbits/gh-pages/_site/assets/ron-burgundy.jpg -------------------------------------------------------------------------------- /_site/assets/starry-night.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jasonlong/pixelbits/gh-pages/_site/assets/starry-night.jpg -------------------------------------------------------------------------------- /js/site.js: -------------------------------------------------------------------------------- 1 | $(document).on('click', '.js-show-code', function(e){ 2 | e.preventDefault(); 3 | $(this).parent().next('.code').show(); 4 | }); 5 | -------------------------------------------------------------------------------- /_site/js/site.js: -------------------------------------------------------------------------------- 1 | $(document).on('click', '.js-show-code', function(e){ 2 | e.preventDefault(); 3 | $(this).parent().next('.code').show(); 4 | }); 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is an experiment to do a regular creative coding sketch. So far, I've only used Paper.js, but I plan on trying P5.js, Three.js, and others. 2 | -------------------------------------------------------------------------------- /_site/README.md: -------------------------------------------------------------------------------- 1 | This is an experiment to do a regular creative coding sketch. So far, I've only used Paper.js, but I plan on trying P5.js, Three.js, and others. 2 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | {% include header.html %} 2 |
3 | {{ page.content }} 4 | {{ page.date | date_to_string }} 5 |

{{ page.description }}

6 | 7 | {% highlight javascript %} 8 | {{ page.content }} 9 | {% endhighlight %} 10 |
11 | {% include footer.html %} 12 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /_posts/2014-11-6-spiral-circles.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Spiral circles 4 | 5 | description: Simple spiral experiment with circles and radians. 6 | tags: 7 | - paperjs 8 | --- 9 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /_posts/2014-10-1-hue-flower.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Hue flower 4 | 5 | description: Rotating paths, hue shifting, and blending modes. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /_posts/2014-11-7-sine-wave-dots.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Sine wave dots 4 | 5 | description: Derping around with sine wave phasing. 6 | tags: 7 | - paperjs 8 | --- 9 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /_posts/2014-09-28-sine-waves.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Sine waves 4 | 5 | description: Sine waves made by manipulating bezier handles. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /_posts/2014-10-4-rainbow-pseudo-spirograph.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Rainbow pseudo-spirograph 4 | 5 | description: Pseudo-spirograph made of rotating rounded squares. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /assets/diamond.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path2139 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_posts/2014-09-29-sine-waves-hue-shifting.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Sine waves with hue shifting 4 | 5 | description: Shifting hues using yesterday's sine wave. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /_site/assets/diamond.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path2139 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | -------------------------------------------------------------------------------- /_posts/2014-10-12-square-tunnel.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Rotating square tunnel 4 | 5 | description: Rotating square tunnel inspired by Albert Omoss' Pivot project. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /assets/spade.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path2076 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_site/assets/spade.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path2076 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_posts/2014-11-13-hue-flower-2.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Hue flower 2 4 | 5 | description: Another hue flower. You can get some interesting effects just adding more layers and playing with blend modes. 6 | 7 | tags: 8 | - paperjs 9 | --- 10 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /assets/club.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | rect3667 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_site/assets/club.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | rect3667 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_posts/2014-10-5-geometric-star.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Geometric star 4 | 5 | description: Copying and rotating shape groups. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /_posts/2014-09-27-raster-circles.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Raster circles 4 | 5 | description: Getting colors from raster image. Basically copied from the Paper.js Mona Lisa example. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /_posts/2015-02-28-beosound.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Beosound UI 4 | 5 | description: I thought the Bang & Olufsen BeoSound Moment was pretty slick looking and tried to make something similar. This required manually creating an angular gradient since paper.js only supports linear and radial. 6 | tags: 7 | - paperjs 8 | --- 9 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 | {% for post in paginator.posts %} 6 |
7 | {{ post.content }} 8 | {{ post.date | date_to_string }} 9 |

10 | {{ post.description }} Show code 11 |

12 | 13 |
14 | {% highlight javascript %} 15 | {{ post.content }} 16 | {% endhighlight %} 17 |
18 |
19 | {% endfor %} 20 | 21 | {% if paginator.total_pages > 1 %} 22 | 45 | {% endif %} 46 | -------------------------------------------------------------------------------- /_posts/2014-10-7-shaded-cubes.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Shaded cubes 4 | 5 | description: Isometric cubes with faux shadows. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /css/site.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #555; 12 | background-color: #fff; 13 | } 14 | 15 | @media (min-width: 990px) { 16 | body { 17 | font-size: 18px; 18 | } 19 | } 20 | 21 | a { 22 | color: #0074d9; 23 | text-decoration: none; 24 | } 25 | 26 | a:hover { 27 | color: #0063b9; 28 | } 29 | 30 | .lead { 31 | font-size: 20px; 32 | font-weight: 300; 33 | } 34 | 35 | @media (min-width: 990px) { 36 | .lead { 37 | font-size: 24px; 38 | } 39 | } 40 | 41 | .container { 42 | padding: 20px; 43 | } 44 | 45 | @media (min-width: 990px) { 46 | .container { 47 | width: 80%; 48 | max-width: 800px; 49 | padding-top: 30px; 50 | padding-bottom: 30px; 51 | margin: 0 auto; 52 | } 53 | } 54 | 55 | canvas { 56 | width: 100%; 57 | } 58 | 59 | .post { 60 | margin-bottom: 60px; 61 | } 62 | 63 | .post-date { 64 | font-size: 14px; 65 | color: #aaa; 66 | } 67 | 68 | .post-description { 69 | margin-top: 0; 70 | } 71 | 72 | .code { 73 | display: none; 74 | } 75 | 76 | pre, 77 | code { 78 | font-size: 14px; 79 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 80 | } 81 | 82 | .highlight > pre { 83 | border-radius: 3px; 84 | background-color: #f9f9f9; 85 | padding: 10px; 86 | } 87 | 88 | .pagination a, 89 | .pagination strong, 90 | .pagination span { 91 | margin-right: 6px; 92 | } 93 | 94 | .paginate-disabled { 95 | color: #aaa; 96 | } 97 | -------------------------------------------------------------------------------- /_site/css/site.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; 9 | font-size: 16px; 10 | line-height: 1.5; 11 | color: #555; 12 | background-color: #fff; 13 | } 14 | 15 | @media (min-width: 990px) { 16 | body { 17 | font-size: 18px; 18 | } 19 | } 20 | 21 | a { 22 | color: #0074d9; 23 | text-decoration: none; 24 | } 25 | 26 | a:hover { 27 | color: #0063b9; 28 | } 29 | 30 | .lead { 31 | font-size: 20px; 32 | font-weight: 300; 33 | } 34 | 35 | @media (min-width: 990px) { 36 | .lead { 37 | font-size: 24px; 38 | } 39 | } 40 | 41 | .container { 42 | padding: 20px; 43 | } 44 | 45 | @media (min-width: 990px) { 46 | .container { 47 | width: 80%; 48 | max-width: 800px; 49 | padding-top: 30px; 50 | padding-bottom: 30px; 51 | margin: 0 auto; 52 | } 53 | } 54 | 55 | canvas { 56 | width: 100%; 57 | } 58 | 59 | .post { 60 | margin-bottom: 60px; 61 | } 62 | 63 | .post-date { 64 | font-size: 14px; 65 | color: #aaa; 66 | } 67 | 68 | .post-description { 69 | margin-top: 0; 70 | } 71 | 72 | .code { 73 | display: none; 74 | } 75 | 76 | pre, 77 | code { 78 | font-size: 14px; 79 | font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; 80 | } 81 | 82 | .highlight > pre { 83 | border-radius: 3px; 84 | background-color: #f9f9f9; 85 | padding: 10px; 86 | } 87 | 88 | .pagination a, 89 | .pagination strong, 90 | .pagination span { 91 | margin-right: 6px; 92 | } 93 | 94 | .paginate-disabled { 95 | color: #aaa; 96 | } 97 | -------------------------------------------------------------------------------- /_posts/2014-10-10-animated-blend-modes.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Animated blending modes 4 | 5 | description: Animated circles shifting hues and cycling between color blending modes. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /_posts/2014-10-15-arc-grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Animated woofer 4 | 5 | description: Random arc grid inspired by the way more awesome Is this art? project by James Mellers. 6 | tags: 7 | - paperjs 8 | - animation 9 | --- 10 | 11 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /assets/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path30 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_posts/2014-11-11-oscillating-dots.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Oscillating dots 4 | 5 | description: Trying out some polar coordinates to make oscillating dots. The circle sizing here is linear and would be nicer if it followed a sine wave. 6 | 7 | tags: 8 | - paperjs 9 | - animation 10 | --- 11 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /_site/assets/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | path30 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /_posts/2014-11-14-ron-burgundy.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Ron Burgundy 4 | 5 | description: I tried to recreate the background effect from this Ticketmaster redesign concept. This was the first time I've tried masking paths using boolean intersections. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /_posts/2014-10-13-animated-woofer.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Animated woofer 4 | 5 | description: Animated woofer. The frequency is so low you probably can't even hear it. 6 | tags: 7 | - paperjs 8 | - animation 9 | --- 10 | 11 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /_posts/2014-11-4-basic-voronoi.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Voronoi diagram 4 | 5 | description: An initial experiment with Voronoi diagrams. The points for the cells are randomly generated and each cell has a random color brightness applied. 6 | tags: 7 | - paperjs 8 | - random 9 | - voronoi 10 | --- 11 | 12 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /_posts/2014-09-30-gradient-hexagon.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Gradient hexagon 4 | 5 | description: Overly verbose code for a continuous gradient hexagon. 6 | tags: 7 | - paperjs 8 | --- 9 | 10 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /_posts/2014-10-30-smoke-particles.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Smoke effect 4 | 5 | description: I recreated the smoke effect I made for http://bounty.github.com with Paper.js. It is a fairly straightforward particle emitter using circles whereas the Bounty site uses a png image. The effect here isn't quite as nice, but could probably be made better with some further variable tweaking. 6 | tags: 7 | - paperjs 8 | - animation 9 | --- 10 | 11 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /_posts/2014-11-5-identicon-invaders.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Identicon invaders 4 | 5 | description: This uses a similar algorithm to our GitHub identicons. The colors stay the same, but the identicon shapes are random each time this page loads. (BTW, if you're a GitHub user, did you know that everyone has an identicon – even if you use an avatar? Just swap in your user name in this URL https://github.com/identicons/jasonlong.png. 6 | tags: 7 | - paperjs 8 | - random 9 | --- 10 | 11 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /css/syntax.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .highlight .k { font-weight: bold } /* Keyword */ 5 | .highlight .o { font-weight: bold } /* Operator */ 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 14 | .highlight .gh { color: #999999 } /* Generic.Heading */ 15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 17 | .highlight .go { color: #888888 } /* Generic.Output */ 18 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 19 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 20 | .highlight .gu { color: #aaaaaa } /* Generic.Subheading */ 21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 24 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 25 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 26 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 27 | .highlight .m { color: #009999 } /* Literal.Number */ 28 | .highlight .s { color: #d14 } /* Literal.String */ 29 | .highlight .na { color: #008080 } /* Name.Attribute */ 30 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 31 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 32 | .highlight .no { color: #008080 } /* Name.Constant */ 33 | .highlight .ni { color: #800080 } /* Name.Entity */ 34 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 35 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 36 | .highlight .nn { color: #555555 } /* Name.Namespace */ 37 | .highlight .nt { color: #000080 } /* Name.Tag */ 38 | .highlight .nv { color: #008080 } /* Name.Variable */ 39 | .highlight .ow { font-weight: bold } /* Operator.Word */ 40 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 41 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 42 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 43 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 44 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 45 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 46 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 47 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 48 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 49 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 50 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 51 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 52 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 53 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 54 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 55 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 56 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 57 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 58 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 59 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 60 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 61 | -------------------------------------------------------------------------------- /_site/css/syntax.css: -------------------------------------------------------------------------------- 1 | .highlight { background: #ffffff; } 2 | .highlight .c { color: #999988; font-style: italic } /* Comment */ 3 | .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 4 | .highlight .k { font-weight: bold } /* Keyword */ 5 | .highlight .o { font-weight: bold } /* Operator */ 6 | .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 7 | .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ 8 | .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ 9 | .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 10 | .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 11 | .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ 12 | .highlight .ge { font-style: italic } /* Generic.Emph */ 13 | .highlight .gr { color: #aa0000 } /* Generic.Error */ 14 | .highlight .gh { color: #999999 } /* Generic.Heading */ 15 | .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 16 | .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ 17 | .highlight .go { color: #888888 } /* Generic.Output */ 18 | .highlight .gp { color: #555555 } /* Generic.Prompt */ 19 | .highlight .gs { font-weight: bold } /* Generic.Strong */ 20 | .highlight .gu { color: #aaaaaa } /* Generic.Subheading */ 21 | .highlight .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .highlight .kc { font-weight: bold } /* Keyword.Constant */ 23 | .highlight .kd { font-weight: bold } /* Keyword.Declaration */ 24 | .highlight .kp { font-weight: bold } /* Keyword.Pseudo */ 25 | .highlight .kr { font-weight: bold } /* Keyword.Reserved */ 26 | .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 27 | .highlight .m { color: #009999 } /* Literal.Number */ 28 | .highlight .s { color: #d14 } /* Literal.String */ 29 | .highlight .na { color: #008080 } /* Name.Attribute */ 30 | .highlight .nb { color: #0086B3 } /* Name.Builtin */ 31 | .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ 32 | .highlight .no { color: #008080 } /* Name.Constant */ 33 | .highlight .ni { color: #800080 } /* Name.Entity */ 34 | .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ 35 | .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ 36 | .highlight .nn { color: #555555 } /* Name.Namespace */ 37 | .highlight .nt { color: #000080 } /* Name.Tag */ 38 | .highlight .nv { color: #008080 } /* Name.Variable */ 39 | .highlight .ow { font-weight: bold } /* Operator.Word */ 40 | .highlight .w { color: #bbbbbb } /* Text.Whitespace */ 41 | .highlight .mf { color: #009999 } /* Literal.Number.Float */ 42 | .highlight .mh { color: #009999 } /* Literal.Number.Hex */ 43 | .highlight .mi { color: #009999 } /* Literal.Number.Integer */ 44 | .highlight .mo { color: #009999 } /* Literal.Number.Oct */ 45 | .highlight .sb { color: #d14 } /* Literal.String.Backtick */ 46 | .highlight .sc { color: #d14 } /* Literal.String.Char */ 47 | .highlight .sd { color: #d14 } /* Literal.String.Doc */ 48 | .highlight .s2 { color: #d14 } /* Literal.String.Double */ 49 | .highlight .se { color: #d14 } /* Literal.String.Escape */ 50 | .highlight .sh { color: #d14 } /* Literal.String.Heredoc */ 51 | .highlight .si { color: #d14 } /* Literal.String.Interpol */ 52 | .highlight .sx { color: #d14 } /* Literal.String.Other */ 53 | .highlight .sr { color: #009926 } /* Literal.String.Regex */ 54 | .highlight .s1 { color: #d14 } /* Literal.String.Single */ 55 | .highlight .ss { color: #990073 } /* Literal.String.Symbol */ 56 | .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ 57 | .highlight .vc { color: #008080 } /* Name.Variable.Class */ 58 | .highlight .vg { color: #008080 } /* Name.Variable.Global */ 59 | .highlight .vi { color: #008080 } /* Name.Variable.Instance */ 60 | .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ 61 | -------------------------------------------------------------------------------- /_site/2014/11/06/spiral-circles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 38 | 39 | 40 | 41 | 06 Nov 2014 42 |

Simple spiral experiment with circles and radians.

43 | 44 | 45 | 
<script type="text/paperscript" canvas="canvas-0016">
46 | for (var i=15; i<100; i++) {
47 |   var f = i * 0.8;
48 |   var x = Math.cos(radians(i * 5)) * f;
49 |   var y = Math.sin(radians(i * 5)) * f;
50 |   var r = i * 1.6;
51 |   var shape = new Shape.Circle(new Point(x, y), r);
52 |   shape.strokeColor = '#aaa';
53 | }
54 | 
55 | project.activeLayer.position = view.center;
56 | 
57 | function radians(angle) {
58 |   return (angle / 180) * Math.PI;
59 | }
60 | </script>
61 | 
62 | <canvas id="canvas-0016"></canvas>
63 | 64 |
65 |
66 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /_site/2014/10/01/hue-flower.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 45 | 46 | 47 | 48 | 01 Oct 2014 49 |

Rotating paths, hue shifting, and blending modes.

50 | 51 | 52 | 
<script type="text/paperscript" canvas="canvas-0005">
53 |   var color = new Color('#0074d9');
54 |   color.alpha = 0.6;
55 | 
56 |   var circle = new Path.Circle({
57 |         center: [100, 100],
58 |         radius: 20,
59 |         fillColor: color
60 |       });
61 | 
62 |   circle.scale(1.5, 3.5);
63 | 
64 |   for (i = 0; i < 360; i += 60) {
65 |     var newCircle = circle.clone();
66 |     newCircle.fillColor.hue += i;
67 |     newCircle.blendMode = 'screen';
68 |     newCircle.rotate(i, [100, 150]);
69 |   }
70 | 
71 |   circle.remove();
72 | 
73 |   project.activeLayer.position = view.center;
74 | </script>
75 | 
76 | <canvas id="canvas-0005" height="250"></canvas>
77 | 78 |
79 |
80 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /assets/suites.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | 20 | 46 | 48 | 49 | 51 | image/svg+xml 52 | 54 | Anglo-American card suits 55 | 56 | 57 | Jeff Bonham 58 | 59 | 60 | 62 | Anglo-American card suits: clubs, diamonds, hearts and spades. Created in Inkscape. 63 | 64 | 65 | anglo-american 66 | cards 67 | club 68 | clubs 69 | diamond 70 | diamonds 71 | heart 72 | hearts 73 | spade 74 | spades 75 | 76 | 77 | http://commons.wikimedia.org/wiki/Image:Anglo-American_card_suits.svg 78 | 79 | 81 | 83 | 85 | 87 | 89 | 91 | 93 | 94 | 95 | 96 | 100 | 105 | 110 | 115 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /_site/2014/10/04/rainbow-pseudo-spirograph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 43 | 44 | 45 | 46 | 04 Oct 2014 47 |

Pseudo-spirograph made of rotating rounded squares.

48 | 49 | 50 | 
<script type="text/paperscript" canvas="canvas-0006">
51 |   view.element.style.backgroundColor = '#111111';
52 | 
53 |   var rectSize = view.size.width * 0.3;
54 |   var cornerRadius = rectSize * 0.1;
55 | 
56 |   var color = new Color('#0074d9');
57 |   var rect = new Rectangle(new Point(0, 0), new Size(rectSize, rectSize));
58 |   var cornerSize = new Size(cornerRadius, cornerRadius);
59 |   var shape = new Shape.Rectangle(rect, cornerSize);
60 |   shape.strokeColor = color;
61 | 
62 |   for (i = 0; i < 360; i += 10) {
63 |       var newShape = shape.clone();
64 |       newShape.strokeColor.hue += i;
65 |       newShape.rotate(i, [rectSize/4, rectSize/4]);
66 |   }
67 | 
68 |   shape.remove();
69 |   project.activeLayer.position = view.center;
70 | </script>
71 | 
72 | <canvas id="canvas-0006" height="250"></canvas>
73 | 74 |
75 |
76 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /_site/assets/suites.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 18 | 20 | 46 | 48 | 49 | 51 | image/svg+xml 52 | 54 | Anglo-American card suits 55 | 56 | 57 | Jeff Bonham 58 | 59 | 60 | 62 | Anglo-American card suits: clubs, diamonds, hearts and spades. Created in Inkscape. 63 | 64 | 65 | anglo-american 66 | cards 67 | club 68 | clubs 69 | diamond 70 | diamonds 71 | heart 72 | hearts 73 | spade 74 | spades 75 | 76 | 77 | http://commons.wikimedia.org/wiki/Image:Anglo-American_card_suits.svg 78 | 79 | 81 | 83 | 85 | 87 | 89 | 91 | 93 | 94 | 95 | 96 | 100 | 105 | 110 | 115 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /_site/2014/09/28/sine-waves.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 45 | 46 | 47 | 48 | 28 Sep 2014 49 |

Sine waves made by manipulating bezier handles.

50 | 51 | 52 | 
<script type="text/paperscript" canvas="canvas-0002">
53 | 
54 |   var y = view.size.height / 2;
55 |   var width = view.size.width * 0.9;
56 |   var vector = new Point({
57 |         angle: 45,
58 |         length: width / 5
59 |         });
60 |   var offset = width / 30;
61 | 
62 |   for (var i = 0; i < 40; i+=3) {
63 |     var path = new Path();
64 |     vector.length += i;
65 |     path.segments = [
66 |       [[offset, y], null, vector.rotate(-90-i)],
67 |       [[width / 2, y], vector.rotate(-180+i), vector.rotate(i)],
68 |       [[width - offset, y], vector.rotate(90-i), null]
69 |     ];
70 |     path.strokeColor = '#0074d9';
71 |   }
72 | 
73 |   project.activeLayer.position = view.center;
74 | </script>
75 | 
76 | <canvas id="canvas-0002" height="300"></canvas>
77 | 78 |
79 |
80 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /_site/2014/10/12/square-tunnel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 50 | 51 | 52 | 53 | 12 Oct 2014 54 |

Rotating square tunnel inspired by Albert Omoss' Pivot project.

55 | 56 | 57 | 
<script type="text/paperscript" canvas="canvas-0010">
 58 |   var i = 1;
 59 |   var color = 'dark';
 60 |   while (i < view.size.width / 2) {
 61 |     var rect = new Rectangle({
 62 |                   center: view.center,
 63 |                   size: i * 1.5
 64 |                 });
 65 |     var path = new Path.Rectangle(rect);
 66 |     path.strokeWidth = 0.2 * i;
 67 | 
 68 |     // I tried to rotate the furthest away and nearest squares for a
 69 |     // a nice twisting effect, but the furthest away squares are so
 70 |     // small that they aren't even visible.
 71 |     path.rotate(Math.pow(Math.abs(i - view.size.width/2), 2) * 0.0008);
 72 | 
 73 |     if (color == 'dark') {
 74 |       path.strokeColor = '#111111';
 75 |       color = 'light';
 76 |     }
 77 |     else {
 78 |       path.strokeColor = '#ffffff';
 79 |       color = 'dark';
 80 |     }
 81 |     // Simulate perspective with top squares appearing closer
 82 |     i *= 1.1;
 83 |   }
 84 | </script>
 85 | 
 86 | <canvas id="canvas-0010" height="250"></canvas>
87 | 88 |
89 |
90 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /_site/2014/11/07/sine-wave-dots.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 42 | 43 | 44 | 45 | 07 Nov 2014 46 |

Derping around with sine wave phasing.

47 | 48 | 49 | 
<script type="text/paperscript" canvas="canvas-0017">
50 | view.element.style.background = "linear-gradient(to bottom, #3a1d3a 0%,#e7584c 100%)";
51 | 
52 | width = view.size.width;
53 | yMid = view.size.height / 2;
54 | 
55 | for (var i=0; i<18; i++) {
56 |   for (var x=0; x<width; x+=3) {
57 |     _x = (x + 500) * Math.PI/180 / 20;
58 |     y = (Math.sin(_x*(8 - i/12)*Math.PI) +
59 |         Math.sin(_x*(9 + i/13)*Math.PI) +
60 |         Math.sin(_x*(10 - i/14)*Math.PI)) * 50;
61 |     var shape = new Shape.Circle(new Point(x, y), 1);
62 |     shape.fillColor = '#fff';
63 |     shape.opacity = 0.7;
64 |   }
65 | }
66 | 
67 | project.activeLayer.position = view.center;
68 | </script>
69 | 
70 | <canvas id="canvas-0017"></canvas>
71 | 72 |
73 |
74 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /_site/2014/09/29/sine-waves-hue-shifting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 47 | 48 | 49 | 50 | 29 Sep 2014 51 |

Shifting hues using yesterday's sine wave.

52 | 53 | 54 | 
<script type="text/paperscript" canvas="canvas-0003">
55 |   view.element.style.backgroundColor = '#111111';
56 | 
57 |   var y = view.size.height / 2;
58 |   var width = view.size.width * 0.9;
59 |   var vector = new Point({
60 |         angle: 45,
61 |         length: width / 5
62 |         });
63 |   var offset = width / 30;
64 |   var color = new Color('#0074d9')
65 | 
66 |   for (var i = 0; i < 40; i+=3) {
67 |     var path = new Path();
68 |     vector.length += i;
69 |     path.segments = [
70 |       [[offset, y], null, vector.rotate(-90-i)],
71 |       [[width / 2, y], vector.rotate(-180+i), vector.rotate(i)],
72 |       [[width - offset, y], vector.rotate(90-i), null]
73 |     ];
74 |     path.strokeColor = color;
75 |     path.strokeColor.hue += i * 10;
76 |   }
77 |   project.activeLayer.position = view.center;
78 | </script>
79 | 
80 | <canvas id="canvas-0003" height="300"></canvas>
81 | 82 |
83 |
84 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /_site/2014/09/27/raster-circles.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 61 | 62 | 63 | 64 | 27 Sep 2014 65 |

Getting colors from raster image. Basically copied from the Paper.js Mona Lisa example.

66 | 67 | 68 | 
<script type="text/paperscript" canvas="canvas-0001">
 69 |   var raster = new Raster('/pixelbits/assets/starry-night.jpg');
 70 | 
 71 |   // Hide the original image
 72 |   raster.visible = false;
 73 | 
 74 |   var gridSize = 13;
 75 | 
 76 |   // Space the cells by 120%:
 77 |   var spacing = 1.2;
 78 | 
 79 |   // As the web is asynchronous, we need to wait for the raster to load
 80 |   // before we can perform any operation on its pixels.
 81 |   raster.on('load', function() {
 82 |     // Resize image to a manageable size
 83 |     raster.size = new Size(50, 32);
 84 | 
 85 |     for (var y = 0; y < raster.height; y++) {
 86 |       for(var x = 0; x < raster.width; x++) {
 87 |         // Get the color of the pixel:
 88 |         var color = raster.getPixel(x, y);
 89 | 
 90 |         // Create a circle shaped path:
 91 |         var path = new Path.Circle({
 92 |           center: new Point(x, y) * gridSize,
 93 |           radius: gridSize / 2 / spacing
 94 |         });
 95 | 
 96 |         // Set the fill color of the path to the color
 97 |         // of the pixel:
 98 |         path.fillColor = color;
 99 |       }
100 |     }
101 |   });
102 | 
103 |   // Move the active layer to the center of the view:
104 |   project.activeLayer.position = view.center;
105 | 
106 | </script>
107 | 
108 | <canvas id="canvas-0001"></canvas>
109 | 110 |
111 |
112 | 121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /_site/page3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 | 22 |
23 | 62 | 63 | 64 | 65 | 27 Sep 2014 66 |

67 | Getting colors from raster image. Basically copied from the Paper.js Mona Lisa example. Show code 68 |

69 | 70 |
71 | 
<script type="text/paperscript" canvas="canvas-0001">
 72 |   var raster = new Raster('/pixelbits/assets/starry-night.jpg');
 73 | 
 74 |   // Hide the original image
 75 |   raster.visible = false;
 76 | 
 77 |   var gridSize = 13;
 78 | 
 79 |   // Space the cells by 120%:
 80 |   var spacing = 1.2;
 81 | 
 82 |   // As the web is asynchronous, we need to wait for the raster to load
 83 |   // before we can perform any operation on its pixels.
 84 |   raster.on('load', function() {
 85 |     // Resize image to a manageable size
 86 |     raster.size = new Size(50, 32);
 87 | 
 88 |     for (var y = 0; y < raster.height; y++) {
 89 |       for(var x = 0; x < raster.width; x++) {
 90 |         // Get the color of the pixel:
 91 |         var color = raster.getPixel(x, y);
 92 | 
 93 |         // Create a circle shaped path:
 94 |         var path = new Path.Circle({
 95 |           center: new Point(x, y) * gridSize,
 96 |           radius: gridSize / 2 / spacing
 97 |         });
 98 | 
 99 |         // Set the fill color of the path to the color
100 |         // of the pixel:
101 |         path.fillColor = color;
102 |       }
103 |     }
104 |   });
105 | 
106 |   // Move the active layer to the center of the view:
107 |   project.activeLayer.position = view.center;
108 | 
109 | </script>
110 | 
111 | <canvas id="canvas-0001"></canvas>
112 |
113 |
114 | 115 | 116 | 117 | 140 | 141 | 142 |
143 | 152 | 153 | 154 | 155 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /_site/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /_site/2014/11/13/hue-flower-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 58 | 59 | 60 | 61 | 62 | 13 Nov 2014 63 |

Another hue flower. You can get some interesting effects just adding more layers and playing with blend modes.

64 | 65 | 66 | 
<script type="text/paperscript" canvas="canvas-0019">
 67 | view.element.style.backgroundColor = '#111';
 68 | 
 69 | var color = new Color('#0074d9');
 70 | var rectangle = new Rectangle(new Point(0, 0), new Size(100, 200));
 71 | var shape = new Path.Ellipse(rectangle);
 72 | shape.fillColor = color;
 73 | 
 74 | var numLayers = 3;
 75 | var blendModes = ['screen', 'screen', 'multiply'];
 76 | 
 77 | // make it pointy
 78 | shape.segments[1].handleIn.x = 0;
 79 | shape.segments[1].handleOut.x = 0;
 80 | shape.segments[3].handleIn.x = 0;
 81 | shape.segments[3].handleOut.x = 0;
 82 | 
 83 | var opacity = 0.3;
 84 | for (i = 0; i < numLayers; i++) {
 85 |     for (j = 0; j < 360; j += 15) {
 86 |         var newShape = shape.clone();
 87 |         newShape.scale(1 - (i * 0.33));
 88 |         newShape.fillColor.hue += j;
 89 |         newShape.opacity = opacity;
 90 |         newShape.blendMode = blendModes[i];
 91 |         newShape.rotate(j, [50, 220]);
 92 |     }
 93 |     opacity += 0.2;
 94 | }
 95 | 
 96 | shape.remove();
 97 | 
 98 | project.activeLayer.position = view.center;
 99 | 
100 | 
101 | </script>
102 | 
103 | <canvas id="canvas-0019" height="250"></canvas>
104 | 105 |
106 |
107 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /_site/2015/02/28/beosound.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 60 | 61 | 62 | 63 | 28 Feb 2015 64 |

I thought the Bang & Olufsen BeoSound Moment was pretty slick looking and tried to make something similar. This required manually creating an angular gradient since paper.js only supports linear and radial.

65 | 66 | 67 | 
<script type="text/paperscript" canvas="canvas-0021">
 68 | view.element.style.backgroundColor = '#111';
 69 | 
 70 | var color = new Color('#ead839');
 71 | var inc = 0.2;
 72 | var circle = new Group();
 73 | var radius = view.size.width * 0.25;
 74 | 
 75 | for (a=360; a>0; a-=inc) {
 76 |     color.hue += inc;
 77 |     var line = Path.Line({
 78 |         from: [0, 0],
 79 |         to: [radius, radius],
 80 |         strokeColor: color
 81 |     });
 82 |     line.rotate(a, [0, 0]);
 83 |     circle.addChild(line);
 84 | }
 85 | 
 86 | circle.opacity = 0.75;
 87 | circle.rotate(220);
 88 | 
 89 | var circleMid = new Shape.Circle([0, 0], radius * 1.41 * 0.75);
 90 | 
 91 | circleMid.fillColor = "#fff";
 92 | circleMid.opacity = 0.1;
 93 | circleMid.blendMode = 'color-dodge';
 94 | 
 95 | var circleInner = new Shape.Circle([0, 0], radius * 1.41 * 0.48);
 96 | circleInner.fillColor = "#fff";
 97 | circleInner.opacity = 0.15;
 98 | circleInner.blendMode = 'color-dodge';
 99 | 
100 | var hole = new Shape.Circle([0, 0], radius * 1.41 * 0.2);
101 | hole.fillColor = "#111";
102 | 
103 | project.activeLayer.position = view.center;
104 | </script>
105 | 
106 | <canvas id="canvas-0021" height="300"></canvas>
107 | 108 |
109 |
110 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /_site/2014/10/05/geometric-star.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 66 | 67 | 68 | 69 | 05 Oct 2014 70 |

Copying and rotating shape groups.

71 | 72 | 73 | 
<script type="text/paperscript" canvas="canvas-0007">
 74 |   var bgColor = "#2f325c";
 75 |   var fgColor = "#405e7d";
 76 | 
 77 |   view.element.style.backgroundColor = bgColor;
 78 | 
 79 |   var center = new Point(0, 0);
 80 |   var points = 4;
 81 |   var radius1 = view.size.height / 12;
 82 |   var radius2 = view.size.height / 3;
 83 | 
 84 |   var star = new Path.Star(center, points, radius1, radius2);
 85 |   star.strokeColor = fgColor;
 86 |   star.rotate(45);
 87 |   var lineH = new Path.Line({
 88 |       from: [0, -radius2],
 89 |       to: [0, radius2],
 90 |       strokeColor: fgColor
 91 |   });
 92 | 
 93 |   var lineV = new Path.Line({
 94 |       from: [-radius2, 0],
 95 |       to: [radius2, 0],
 96 |       strokeColor: fgColor
 97 |   });
 98 | 
 99 |   var starGroup = new Group();
100 |   starGroup.addChildren([star, lineH, lineV]);
101 | 
102 |   // Stars
103 |   for (i = 0; i < 90; i += 22.5) {
104 |       var newStar = starGroup.clone();
105 |       newStar.rotate(i);
106 |   }
107 |   starGroup.remove();
108 | 
109 |   // Circles
110 |   for (i = radius1; i <= radius2; i += radius1) {
111 |       var circle = new Path.Circle(new Point(0, 0), i);
112 |       circle.strokeColor = fgColor;
113 |   }
114 | 
115 |   project.activeLayer.position = view.center;
116 | </script>
117 | 
118 | <canvas id="canvas-0007" height="250"></canvas>
119 | 120 |
121 |
122 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /_site/2014/10/10/animated-blend-modes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 72 | 73 | 74 | 75 | 10 Oct 2014 76 |

Animated circles shifting hues and cycling between color blending modes.

77 | 78 | 79 | 
<script type="text/paperscript" canvas="canvas-0009">
 80 |   var radius = view.size.width / 4;
 81 |   var start1 = new Point(radius, view.size.height / 2);
 82 |   var start2 = new Point(view.size.width - radius, view.size.height / 2);
 83 | 
 84 |   var modes = ['multiply', 'screen', 'overlay', 'soft-light', 'hard-light', 'color-dodge'];
 85 | 
 86 |   var modeIndex = 0;
 87 | 
 88 |   var circle1 = new Path.Circle({
 89 |     center: start1,
 90 |     radius: radius,
 91 |     fillColor: '#0074d9',
 92 |     blendMode: modes[modeIndex]
 93 |   });
 94 |   var circle2 = new Path.Circle({
 95 |     center: start2,
 96 |     radius: radius,
 97 |     fillColor: '#ff4136',
 98 |     blendMode: modes[modeIndex]
 99 |   });
100 | 
101 |   function onFrame(event) {
102 |     var vector1 = start2 - circle1.position;
103 |     var vector2 = start1 - circle2.position;
104 | 
105 |     if (vector1.length == 0) {
106 |       // swap directions
107 |       var tmpStart = start1;
108 |       start1 = start2;
109 |       start2 = tmpStart;
110 | 
111 |       if (modes.length - 1 == modeIndex) {
112 |         modeIndex = 0;
113 |       }
114 |       else {
115 |         modeIndex++;
116 |       }
117 | 
118 |       circle1.blendMode = modes[modeIndex];
119 |       circle2.blendMode = modes[modeIndex];
120 |     }
121 | 
122 |     circle1.position.x += (vector1.x < 0) ? -2 : 2;
123 |     circle2.position.x += (vector2.x < 0) ? -2 : 2;
124 | 
125 |     circle1.fillColor.hue += 1;
126 |     circle2.fillColor.hue += 1;
127 |   }
128 | </script>
129 | 
130 | <canvas id="canvas-0009" height="250"></canvas>
131 | 132 |
133 |
134 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /_site/2014/10/15/arc-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pixelbits by Jason Long 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

Pixelbits

19 |

Hi, I'm @jasonlong. I'm trying to make a small creative coding sketch every day(ish) to learn new things. All code is available in the GitHub repo.

20 | 21 |
22 | 73 | 74 | 75 | 76 | 15 Oct 2014 77 |

Random arc grid inspired by the way more awesome Is this art? project by James Mellers.

78 | 79 | 80 | 
<script type="text/paperscript" canvas="canvas-0012">
 81 |   view.element.style.backgroundColor = '#85144b';
 82 |   arcSize = view.size.height / 12;
 83 | 
 84 |   // Start with a circle...
 85 |   var arc = new Path.Circle(new Point(100, 70), arcSize);
 86 | 
 87 |   // And trim it down to a quarter circle.
 88 |   arc.removeSegment(3);
 89 |   arc.segments[0].handleIn.y = 0;
 90 |   arc.segments[1].handleOut.x = 0;
 91 |   arc.segments[2].handleIn.x = 0;
 92 |   arc.segments[2].handleOut.y = 0;
 93 |   arc.segments[2].point.x = 100;
 94 |   arc.fillColor = '#ffffff';
 95 | 
 96 |   for (y=0; y<10; y++) {
 97 |     for (x=0; x<10; x++) {
 98 |       newArc = arc.clone();
 99 |       newArc.position = new Point(x*arcSize, y*arcSize);
100 | 
101 |       switch (getRandomInt(0, 3)) {
102 |         case 0:
103 |           newArc.rotate(0);
104 |           break;
105 |         case 1:
106 |           newArc.rotate(90);
107 |           break;
108 |         case 2:
109 |           newArc.rotate(180);
110 |           break;
111 |         case 3:
112 |           newArc.rotate(270);
113 |       }
114 | 
115 |       opacity = getRandomInt(40, 95);
116 |       if (opacity < 45) {
117 |         opacity = 0;
118 |       }
119 |       newArc.fillColor.alpha = opacity/100;
120 |     }
121 |   }
122 | 
123 |   arc.remove();
124 | 
125 |   project.activeLayer.position = view.center;
126 | 
127 |   function getRandomInt(min, max) {
128 |     return Math.floor(Math.random() * (max - min)) + min;
129 |   }
130 | </script>
131 | 
132 | <canvas id="canvas-0012" height="250"></canvas>
133 | 134 |
135 |
136 | 145 | 146 | 147 | 148 | --------------------------------------------------------------------------------