playing with paperjs

index.html

<canvas id="paper-canvas" resize="true"></canvas>

playing-with-paperjs.markdown

playing with paperjs

This is a simple Paper.js effect

A Pen by tildebyte on CodePen.

License.

script.js

paper.setup('paper-canvas')

let h = window.innerHeight,
    w = window.innerWidth,
    halfH = h * 0.5,
    speed = 0.18,
    strokeWidth = 15,
    frequency = 4,
    pathCount = 5,
    pathPoints = 16,
    path = [],
    offsetRandom = 0.5,
    randomOffsets = [],
    maxDistRandom = 1,
    randomDistances = [],
    randomHeights = [],
    magnitude = 0.2 


for (let i = 0; i < pathCount; i++) { 
    randomOffsets[i] = Math.random()  * offsetRandom 
    randomDistances[i] = Math.random() * maxDistRandom
    randomHeights[i] = Math.max(Math.random() + 0.2, 0.5)
    // Create a Paper.js Path to draw a line into it:
    path[i] = new paper.Path()
    path[i].lineCap='round'	
    // Give the stroke a color
    path[i].strokeColor = "rgba(255,255,255," + Math.random() + ")"
    path[i].strokeWidth = strokeWidth * randomDistances[i]
    for(let v = 0; v < pathPoints; v++) {
    	path[i].add(new paper.Point(w * (v / (pathPoints - 1)), halfH))
    }
}

function loop(event) {
    for(let p = 0; p < path.length; p ++) {	  
        // Loop through the segments of the path:
        for (let i = 0; i < pathPoints; i++) {
            let segment = path[p].segments[i],
                // A cylic value between -1 and 1
                sinus = Math.sin((event.time * speed + ((i / pathPoints) *
                                  frequency * randomHeights[p]) + randomOffsets[p]))
            // Change the y position of the segment point:
            segment.point.y = halfH + sinus * (h * magnitude ) 
        }
        path[p].smooth()
    }
}


paper.view.onFrame = event => loop(event)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.24/paper-full.js"></script>

style.css

#paper-canvas {
  width: 100%;
  background: gold;
}