<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="no" name="msapplication-tap-highlight">
<link href="/assets/css/style.css" rel="stylesheet">
<link href="/assets/favicon.ico" rel="icon" type="image/x-icon">
<link href="/assets/favicon.ico" rel="shortcut icon">
<script src="/assets/js/jquery.js">
</script>
<script src="/assets/js/paper.js">
</script>
<script src="/assets/js/codemirror.js">
</script>
<script src="/assets/js/scripts.js">
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-10082945-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<title>
Paper.js — Rounded Rectangles
</title>
</head>
<body class="fullscreen">
<nav>
<h1>
<a href="/">
Paper.js
</a>
</h1>
<ul>
<li>
<a href="/about/">
About
</a>
</li>
<li>
<a href="/features/">
Features
</a>
</li>
<li class="spacer">
</li>
<li>
<a href="/examples/">
Examples
</a>
<ul>
<li>
<a href="/examples/boolean-operations/">
Boolean Operations
</a>
</li>
<li>
<a href="/examples/candy-crash/">
Candy Crash
</a>
</li>
<li>
<a href="/examples/satie-liked-to-draw/">
Satie Liked To Draw
</a>
</li>
<li>
<a href="/examples/chain/">
Chain
</a>
</li>
<li>
<a href="/examples/tadpoles/">
Tadpoles
</a>
</li>
<li>
<a href="/examples/nyan-rainbow/">
Nyan Rainbow
</a>
</li>
<li class="active">
<a href="/examples/rounded-rectangles/">
Rounded Rectangles
</a>
</li>
<li>
<a href="/examples/radial-rainbows/">
Radial Rainbows
</a>
</li>
<li>
<a href="/examples/meta-balls/">
Meta Balls
</a>
</li>
<li>
<a href="/examples/voronoi/">
Voronoi
</a>
</li>
<li>
<a href="/examples/future-splash/">
Future Splash
</a>
</li>
<li>
<a href="/examples/smoothing/">
Smoothing
</a>
</li>
<li>
<a href="/examples/spiral-raster/">
Spiral Raster
</a>
</li>
<li>
<a href="/examples/division-raster/">
Division Raster
</a>
</li>
<li>
<a href="/examples/q-bertify/">
Q-bertify
</a>
</li>
<li>
<a href="/examples/path-intersections/">
Path Intersections
</a>
</li>
<li>
<a href="/examples/path-simplification/">
Path Simplification
</a>
</li>
<li>
<a href="/examples/hit-testing/">
Hit Testing
</a>
</li>
<li>
<a href="/examples/bouncing-balls/">
Bouncing Balls
</a>
</li>
</ul>
</li>
<li>
<a href="/showcase/">
Showcase
</a>
</li>
<li class="spacer">
</li>
<li>
<a href="/tutorials/">
Tutorials
</a>
</li>
<li>
<a href="/reference/">
Reference
</a>
</li>
<li>
<a href="http://sketch.paperjs.org/">
Sketch
</a>
</li>
<li class="spacer">
</li>
<li>
<a href="/download/">
Download
</a>
</li>
<li>
<a href="/donation/">
Donation
</a>
</li>
<li>
<a href="/license/">
License
</a>
</li>
<li class="spacer">
</li>
<li>
<a href="http://groups.google.com/group/paperjs" target="_blank">
Mailing List
</a>
</li>
<li>
<a href="http://twitter.com/PaperJS" target="_blank">
Follow on Twitter
</a>
</li>
<li>
<a href="http://github.com/paperjs/paper.js" target="_blank">
Watch on Github
</a>
</li>
</ul>
</nav>
<article>
<div class="paperscript">
<div class="buttons">
<div class="button run">
Source
</div>
<div class="explain">
</div>
</div>
<script canvas="canvas-1" type="text/paperscript">
var mousePoint = view.center;
var amount = 25;
var colors = ['red','white','blue','white'];
for (var i = 0; i < amount; i++) {
var rect = new Rectangle([0,0], [25,25]);
rect.center = mousePoint;
var path = new Path.Rectangle(rect, 6);
path.fillColor = colors[i % 4];
var scale = (1 - i / amount) * 20;
path.scale(scale);
}
function onMouseMove(event) {
mousePoint = event.point;
}
var children = project.activeLayer.children;
function onFrame(event) {
for (var i = 0, l = children.length; i < l; i++) {
var item = children[i];
var delta = (mousePoint - item.position) / (i + 5);
item.rotate(Math.sin((event.count + i) / 10) * 7);
if (delta.length > 0.1) item.position += delta;
}
}
</script>
<div class="canvas">
<canvas hidpi="off" id="canvas-1" resize="true">
</canvas>
</div>
</div>
</article>
</body>
</html>