Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" >
<script type="text/javascript" src="./../PaperJSEngine/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
var radius = 20;
var amount = 270; //250
var spacing = 0.8;
var group = createPhyllotaxis(amount);
group.fitBounds(view.bounds.scale(0.7))
group.position = view.center
function createPhyllotaxis(amount) {
var group = new Group();
var rotation = 137.5077640500;
for (var i = 1; i <= amount; i++) {
var element = new Path.Rectangle({
point: {
length: spacing * radius * Math.sqrt(i),
angle: i * rotation
},
size: new Size(radius, radius),
parent: group,
fillColor: new Color(i / amount, 0, 0.5),
opacity: 0.0,
});
var scale = 0.2 + Math.sin(i / rotation + 0.4 * Math.PI / 2 * i / rotation)
element.scale(scale)
var arrow = new Path.Rectangle({
size: 20,
fillColor: new Color.random(),
radius: 5
})
arrow.onFrame = function(event){
this.fillColor.hue += 0.5
}
arrow.fillColor.lightness += 0.4
arrow.fillColor.saturation += 0.5
arrow.fitBounds(element.bounds)
arrow.position = element.position
arrow.rotate(i * rotation + 90)
var distance = view.center.getDistance(arrow.position)
arrow.fillColor.hue = (view.size.width / distance) * 150
arrow.parent = group
var saturationValue = 0.2
arrow.fillColor.saturation -= saturationValue
arrow.fillColor.lightness -= saturationValue
}
return group
}
group.position = view.center
var topLeft = -view.size.width / 2
var bottomRight = view.center
function onMouseMove(event) {
group.children.map(function(object, i) {
var distance = event.point.getDistance(object.position)
object.fillColor.hue = i * 0.5 - distance
})
}
function onResize(event) {
group.position = view.center
group.fitBounds(view.bounds.scale(0.7))
}
</script>
</head>
<body>
<canvas hidpi="true" id="canvas" resize ></canvas>
</body>
</html>
