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 amount = 30
var strokeWidth = 10
var waveAmplitude = 10
var waveLength = 100
var animationSpeed = 0.02
var padding = 20
var colorWidth = -8
var distanceFromCenter = 0 // 0
var array = []
var rootGroup = new Group()
function createPath(i, amount){
var path = new Path.Line({
from: [0, 0],
to: [0, distanceFromCenter],
strokeColor: 'blue',
strokeWidth: strokeWidth,
strokeCap: 'round',
position: view.center,
applyMatrix: false,
// dashArray: [5, 30]
})
path.strokeColor.hue = 360 / amount * i
//cool:
// path.rotate(360 / amount * i, view.center + [0, 100])
path.onFrame = function(event){
this.segments[1].point.y = Math.sin(animationSpeed * event.count + i ) * waveAmplitude
this.segments[0].point.y = Math.cos(animationSpeed * event.count + i * waveLength) * waveAmplitude
}
return path
}
for (var i = 0; i < amount; i++){
var path = createPath(i, amount)
array.push(path)
rootGroup.addChild(path)
path.rotate(360 / amount * i, view.center + [0, 100])
}
rootGroup.position = view.center
</script>
</head>
<body>
<canvas id="canvas" resize style="background: black; "></canvas>
</body>
</html>
