paper.js

2025-02-07 16:38:56 +01:00
parent 803e4407f4
commit b1c9f6170b
186 changed files with 178519 additions and 0 deletions
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Animated Star</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var layer = project.activeLayer;
+
+        var values = {
+            count: 34,
+            points: 32
+        };
+
+        for (var i = 0; i < values.count; i++) {
+            var path = new Path({
+                fillColor: i % 2 ? 'red' : 'black',
+                closed: true
+            });
+
+            var offset = new Point(20 + 10 * i, 0);
+            var l = offset.length;
+            for (var j = 0; j < values.points * 2; j++) {
+                offset.angle += 360 / values.points;
+                var vector = offset.normalize(l * (j % 2 ? 0.1 : -0.1));
+                path.add(offset + vector);
+            }
+            path.smooth({ type: 'continuous' });
+            layer.insertChild(0, new Group({
+                children: [path],
+                applyMatrix: false
+            }));
+        }
+
+        function onFrame(event) {
+            for (var i = 0; i < values.count; i++) {
+                var item = layer.children[i];
+                var angle = (values.count - i) * Math.sin(event.count / 128) / 10;
+                item.rotate(angle);
+            }
+        }
+
+        // Reposition the paths whenever the window is resized:
+        function onResize(event) {
+            layer.position = view.center;
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize stats hidpi="off"></canvas>
+</body>
+</html>
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Boolean Operations</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var text = new PointText({
+            position: view.center + [0, 200],
+            fillColor: 'black',
+            justification: 'center',
+            fontSize: 20
+        });
+
+        var originals = new Group({ insert: false }); // Don't insert in DOM.
+
+        var square = new Path.Rectangle({
+            position: view.center,
+            size: 300,
+            parent: originals,
+            fillColor: 'white'
+        });
+
+        // Make a ring using subtraction of two circles:
+        var inner = new Path.Circle({
+            center: view.center,
+            radius: 100,
+            parent: originals,
+            fillColor: 'white'
+        });
+
+        var outer = new Path.Circle({
+            center: view.center,
+            radius: 140,
+            parent: originals,
+            fillColor: 'white'
+        });
+
+        var ring = outer.subtract(inner);
+
+        var operations = ['unite', 'intersect', 'subtract', 'exclude', 'divide'];
+        var colors = ['red', 'green', 'blue', 'black'];
+        var curIndex = -1;
+        var operation, result, activeItem;
+
+        // Change the mode every 3 seconds:
+        setInterval(setMode, 3000);
+
+        // Set the initial mode:
+        setMode();
+
+        function setMode() {
+            curIndex++;
+            if (curIndex == operations.length * 2)
+                curIndex = 0;
+            operation = operations[curIndex % operations.length];
+        }
+
+        function onMouseDown(event) {
+            var hitResult = originals.hitTest(event.point);
+            activeItem = hitResult && hitResult.item;
+        }
+
+        function onMouseDrag(event) {
+            if (activeItem)
+                activeItem.position = event.point;
+        }
+
+        function onMouseUp() {
+            activeItem = null;
+            square.position = view.center;
+        }
+
+        function onFrame(event) {
+            if (activeItem != ring) {
+                // Move the ring around:
+                var offset = new Point(140, 80) * [Math.sin(event.count / 60), Math.sin(event.count / 40)];
+                ring.position = view.center + offset;
+            }
+
+            // Remove the result of the last path operation:
+            if (result)
+                result.remove();
+
+            // Perform the path operation on the ring:
+            if (curIndex < operations.length) {
+                result = square[operation](ring);
+                text.content = 'square.' + operation + '(ring)';
+            } else {
+                result = ring[operation](square);
+                text.content = 'ring.' + operation + '(square)';
+            }
+            result.selected = true;
+            result.fillColor = colors[curIndex % colors.length];
+            result.moveBelow(text);
+
+            // If the result is a group, color each of its children differently:
+            if (result instanceof Group) {
+                for (var i = 0; i < result.children.length; i++) {
+                    result.children[i].fillColor = colors[i];
+                }
+            }
+        };
+
+        function onResize() {
+            text.position = view.center + [0, 200];
+            square.position = view.center;
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize stats></canvas>
+</body>
+</html>
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Candy Crash</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    // kynd.info 2014
+
+    function Ball(r, p, v) {
+        this.radius = r;
+        this.point = p;
+        this.vector = v;
+        this.maxVec = 15;
+        this.numSegment = Math.floor(r / 3 + 2);
+        this.boundOffset = [];
+        this.boundOffsetBuff = [];
+        this.sidePoints = [];
+        this.path = new Path({
+            fillColor: {
+                hue: Math.random() * 360,
+                saturation: 1,
+                brightness: 1
+            },
+            blendMode: 'lighter'
+        });
+
+        for (var i = 0; i < this.numSegment; i ++) {
+            this.boundOffset.push(this.radius);
+            this.boundOffsetBuff.push(this.radius);
+            this.path.add(new Point());
+            this.sidePoints.push(new Point({
+                angle: 360 / this.numSegment * i,
+                length: 1
+            }));
+        }
+    }
+
+    Ball.prototype = {
+        iterate: function() {
+            this.checkBorders();
+            if (this.vector.length > this.maxVec)
+                this.vector.length = this.maxVec;
+            this.point += this.vector;
+            this.updateShape();
+        },
+
+        checkBorders: function() {
+            var size = view.size;
+            if (this.point.x < -this.radius)
+                this.point.x = size.width + this.radius;
+            if (this.point.x > size.width + this.radius)
+                this.point.x = -this.radius;
+            if (this.point.y < -this.radius)
+                this.point.y = size.height + this.radius;
+            if (this.point.y > size.height + this.radius)
+                this.point.y = -this.radius;
+        },
+
+        updateShape: function() {
+            var segments = this.path.segments;
+            for (var i = 0; i < this.numSegment; i ++)
+                segments[i].point = this.getSidePoint(i);
+
+            this.path.smooth();
+            for (var i = 0; i < this.numSegment; i ++) {
+                if (this.boundOffset[i] < this.radius / 4)
+                    this.boundOffset[i] = this.radius / 4;
+                var next = (i + 1) % this.numSegment;
+                var prev = (i > 0) ? i - 1 : this.numSegment - 1;
+                var offset = this.boundOffset[i];
+                offset += (this.radius - offset) / 15;
+                offset += ((this.boundOffset[next] + this.boundOffset[prev]) / 2 - offset) / 3;
+                this.boundOffsetBuff[i] = this.boundOffset[i] = offset;
+            }
+        },
+
+        react: function(b) {
+            var dist = this.point.getDistance(b.point);
+            if (dist < this.radius + b.radius && dist != 0) {
+                var overlap = this.radius + b.radius - dist;
+                var direc = (this.point - b.point).normalize(overlap * 0.015);
+                this.vector += direc;
+                b.vector -= direc;
+
+                this.calcBounds(b);
+                b.calcBounds(this);
+                this.updateBounds();
+                b.updateBounds();
+            }
+        },
+
+        getBoundOffset: function(b) {
+            var diff = this.point - b;
+            var angle = (diff.angle + 180) % 360;
+            return this.boundOffset[Math.floor(angle / 360 * this.boundOffset.length)];
+        },
+
+        calcBounds: function(b) {
+            for (var i = 0; i < this.numSegment; i ++) {
+                var tp = this.getSidePoint(i);
+                var bLen = b.getBoundOffset(tp);
+                var td = tp.getDistance(b.point);
+                if (td < bLen) {
+                    this.boundOffsetBuff[i] -= (bLen  - td) / 2;
+                }
+            }
+        },
+
+        getSidePoint: function(index) {
+            return this.point + this.sidePoints[index] * this.boundOffset[index];
+        },
+
+        updateBounds: function() {
+            for (var i = 0; i < this.numSegment; i ++)
+                this.boundOffset[i] = this.boundOffsetBuff[i];
+        }
+    };
+
+    //--------------------- main ---------------------
+
+    var balls = [];
+    var numBalls = 18;
+    for (var i = 0; i < numBalls; i++) {
+        var position = Point.random() * view.size;
+        var vector = new Point({
+            angle: 360 * Math.random(),
+            length: Math.random() * 10
+        });
+        var radius = Math.random() * 60 + 60;
+        balls.push(new Ball(radius, position, vector));
+    }
+
+    function onFrame() {
+        for (var i = 0; i < balls.length - 1; i++) {
+            for (var j = i + 1; j < balls.length; j++) {
+                balls[i].react(balls[j]);
+            }
+        }
+        for (var i = 0, l = balls.length; i < l; i++) {
+            balls[i].iterate();
+        }
+    }
+
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
+</body>
+</html>
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Extruded</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var lineGroup = new Group();
+        var lineCount = 100;
+        for (var i = 0; i < lineCount; i++) {
+            var linePath = new Path.Line([0, 0], [0, 0]);
+            lineGroup.addChild(linePath);
+        }
+        lineGroup.strokeColor = 'red';
+
+        var path1 = new Path('M63.39307,265.71387c10.8667,6.96631 26.4707,12.26025 43.18896,12.26025c24.79932,0 39.28857,-13.09619 39.28857,-32.04346c0,-17.27588 -10.03125,-27.58545 -35.38721,-37.05908c-30.65088,-11.146 -49.59814,-27.30713 -49.59814,-53.49902c0,-29.25732 24.2417,-50.9917 60.74365,-50.9917c18.94727,0 33.1582,4.4585 41.23877,9.19531L156.18018,133.35986c-5.85156,-3.62256 -18.39014,-8.9165 -35.38721,-8.9165c-25.63525,0 -35.3877,15.3252 -35.3877,28.14258c0,17.5542 11.42432,26.19238 37.33789,36.22314c31.76514,12.26025 47.64795,27.58545 47.64795,55.1709c0,28.979 -21.17676,54.33496 -65.48096,54.33496c-18.11133,0 -37.89502,-5.57275 -47.92578,-12.26025z');
+        path1.position = view.center;
+
+        var path2 = path1.clone();
+        path1.scale(1.5);
+        path2.scale(2);
+
+        var length1 = path1.length;
+        var length2 = path2.length;
+        function onFrame(event) {
+            var vector = new Point({
+                angle: -event.count % 360,
+                length: 100
+            });
+            path1.rotate(-0.5);
+            path1.position = view.center - vector;
+
+            path2.rotate(-0.5);
+            path2.position = view.center + vector.normalize(50);
+
+            for (var i = 0; i < lineCount; i++) {
+                var path = lineGroup.children[i];
+                var l1 = (length1 / lineCount * (i + event.count / 10)) % length1;
+                var l2 = (length2 / lineCount * (i + event.count / 10)) % length2;
+                path.firstSegment.point = path1.getPointAt(l1),
+                path.lastSegment.point = path2.getPointAt(l2);
+            }
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Lines</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var amount = 45;
+        for (var i = 0; i < amount; i++) {
+            var path = new Path({
+                fillColor: {
+                    hue: 1,
+                    saturation: 1,
+                    brightness: Math.random()
+                },
+                closed: true
+            });
+        }
+
+        var position = view.center;
+        var mousePos = view.center;
+        var children = project.activeLayer.children;
+
+        function iterate(count) {
+            var delta = mousePos - position;
+            position += delta / 10;
+            for (var i = 1; i < amount; i++) {
+                var path = children[i];
+                var length = Math.abs(Math.sin(i + count / 40) * 300);
+                path.segments = [
+                    position + delta / 1.5,
+                    position + { angle: i / amount * 360, length: length },
+                    position + { angle: (i + 1) / amount * 360, length: length }
+                ];
+                path.fillColor.hue = count - length;
+            }
+        }
+
+        function onFrame(event) {
+            iterate(event.count);
+        }
+
+        function onMouseMove(event) {
+            iterate();
+            mousePos = event.point;
+        }
+    </script>
+</head>
+<body style="background:black">
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Smoothing</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+        var width, height, center;
+        var points = 10;
+        var smooth = true;
+        var path = new Path({
+            fillColor: 'black'
+        });
+        var mousePos = view.center / 2;
+        var pathHeight = mousePos.y;
+        initializePath();
+
+        function initializePath() {
+            center = view.center;
+            width = view.size.width;
+            height = view.size.height / 2;
+            path.segments = [];
+            path.add(view.bounds.bottomLeft);
+            for (var i = 1; i < points; i++) {
+                var point = new Point(width / points * i, center.y);
+                path.add(point);
+            }
+            path.add(view.bounds.bottomRight);
+            path.fullySelected = true;
+        }
+
+        function onFrame(event) {
+            pathHeight += (center.y - mousePos.y - pathHeight) / 10;
+            for (var i = 1; i < points; i++) {
+                var sinSeed = event.count + (i + i % 10) * 100;
+                var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
+                var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
+                path.segments[i].point.y = yPos;
+            }
+            if (smooth)
+                path.smooth({ type: 'continuous' });
+        }
+
+        function onMouseMove(event) {
+            mousePos = event.point;
+        }
+
+        function onMouseDown(event) {
+            smooth = !smooth;
+            if (!smooth) {
+                // If smooth has been turned off, we need to reset
+                // the handles of the path:
+                for (var i = 0, l = path.segments.length; i < l; i++) {
+                    var segment = path.segments[i];
+                    segment.handleIn = segment.handleOut = null;
+                }
+            }
+        }
+
+        // Reposition the path whenever the window is resized:
+        function onResize(event) {
+            initializePath();
+        }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize></canvas>
+</body>
+</html>
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Space</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    // The amount of symbol we want to place;
+    var count = 150;
+
+    // Create a symbol, which we will use to place instances of later:
+    var path = new Path.Circle({
+        center: new Point(0, 0),
+        radius: 5,
+        fillColor: 'white',
+        strokeColor: 'black'
+    });
+
+    var symbol = new SymbolDefinition(path);
+
+    // Place the instances of the symbol:
+    for (var i = 0; i < count; i++) {
+        // The center position is a random point in the view:
+        var center = Point.random() * view.size;
+        var placed = symbol.place(center);
+        var scale = (i + 1) / count;
+        placed.scale(scale);
+        placed.data.vector = new Point({
+            angle: Math.random() * 360,
+            length : scale * Math.random() / 5
+        });
+    }
+
+    var vector = new Point({
+        angle: 45,
+        length: 0
+    });
+
+    var mouseVector = vector.clone();
+
+    function onMouseMove(event) {
+        mouseVector = view.center - event.point;
+    }
+
+    // The onFrame function is called up to 60 times a second:
+    function onFrame(event) {
+        vector = vector + (mouseVector - vector) / 30;
+
+        // Run through the active layer's children list and change
+        // the position of the placed symbols:
+        for (var i = 0; i < count; i++) {
+            var item = project.activeLayer.children[i];
+            var size = item.bounds.size;
+            var length = vector.length / 10 * size.width / 10;
+            item.position += vector.normalize(length) + item.data.vector;
+            keepInView(item);
+        }
+    }
+
+    function keepInView(item) {
+        var position = item.position;
+        var itemBounds = item.bounds;
+        var bounds = view.bounds;
+        if (itemBounds.left > bounds.width) {
+            position.x = -item.bounds.width;
+        }
+
+        if (position.x < -itemBounds.width) {
+            position.x = bounds.width + itemBounds.width;
+        }
+
+        if (itemBounds.top > view.size.height) {
+            position.y = -itemBounds.height;
+        }
+
+        if (position.y < -itemBounds.height) {
+            position.y = bounds.height  + itemBounds.height / 2;
+        }
+    }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
+</body>
+</html>
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Space</title>
+    <link rel="stylesheet" href="../css/style.css">
+    <script type="text/javascript" src="../../dist/paper-full.js"></script>
+    <script type="text/paperscript" canvas="canvas">
+    // The amount of symbol we want to place;
+    var count = 150;
+
+    project.currentStyle = {
+        fillColor: 'white'
+    };
+
+    // Place the instances of the symbol:
+    for (var i = 0; i < count; i++) {
+        // The center position is a random point in the view:
+        var center = Point.random() * view.size;
+        var scale = (i + 1) / count;
+        var path = new Shape.Circle(center, 5 * scale);
+        path.data.vector = new Point({
+            angle: Math.random() * 360,
+            length : scale * Math.random() / 5
+        });
+    }
+
+    var vector = new Point({
+        angle: 45,
+        length: 0
+    });
+
+    var mouseVector = vector.clone();
+
+    function onMouseMove(event) {
+        mouseVector = view.center - event.point;
+    }
+
+    // The onFrame function is called up to 60 times a second:
+    function onFrame(event) {
+        vector = vector + (mouseVector - vector) / 30;
+
+        // Run through the active layer's children list and change
+        // the position of the placed symbols:
+        for (var i = 0; i < count; i++) {
+            var item = project.activeLayer.children[i];
+            var size = item.bounds.size;
+            var length = vector.length / 10 * size.width / 10;
+            item.position += vector.normalize(length) + item.data.vector;
+            keepInView(item);
+        }
+    }
+
+    function keepInView(item) {
+        var position = item.position;
+        var itemBounds = item.bounds;
+        var bounds = view.bounds;
+        if (itemBounds.left > bounds.width) {
+            position.x = -item.bounds.width;
+        }
+
+        if (position.x < -itemBounds.width) {
+            position.x = bounds.width + itemBounds.width;
+        }
+
+        if (itemBounds.top > view.size.height) {
+            position.y = -itemBounds.height;
+        }
+
+        if (position.y < -itemBounds.height) {
+            position.y = bounds.height  + itemBounds.height / 2;
+        }
+    }
+    </script>
+</head>
+<body>
+    <canvas id="canvas" resize hidpi="off" style="background:black"></canvas>
+</body>
+</html>