Paper.js ajoute 2 points de plus aux coins pour plus de hauteur

Question

Je débute avec paper.js et j'ai des problèmes pour ajouter et positionner de nouveaux points. Je veux mettre 2 nouveaux points en bas à gauche et en bas à droite pour faire plus de hauteur. En ce moment j'ai joué avec le code de démo et j'ai ceci: (voir l'image ci-dessous) Je veux l'utiliser comme arrière-plan qui bouge.

1. Comment ajouter 2 points de plus pour gagner de l'espace et de la hauteur?
2. Quand j'arrive à cela, comment je le contrôle pour le rendre réactif (tablette, mobile, etc.)? Voici le example code working.

<script type="text/paperscript" canvas="myCanvas"> 

    var width, height, center; 
    var points = 4; 
    var smooth = true; 
    var path = new Path(); 
    var mousePos = view.center/2; 
    var pathHeight = mousePos.y; 
    var topLeft = view.center - [80, 80]; 
    var bottomRight = view.center + [80, 80]; 
    path.fillColor = { 
    gradient: { 
      stops: ['#532e8e', '#662e8f'] 
     }, 
     origin: topLeft, 
     destination: bottomRight 
    } 
    initializePath(); 

    function initializePath() { 
    center = view.center; 
    width = view.size.width; 
    height = view.size.height/4; 
    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; 
    console.log(path.segments); 
    } 

    function onFrame(event) { 
    pathHeight += (center.y - mousePos.y - pathHeight)/2; 
    for (var i = 1; i < points; i++) { 
    var sinSeed = event.count + (i + i % 10) * 100 /2; 
    var sinHeight = Math.sin(sinSeed/200) * pathHeight /2; 
    var yPos = Math.sin(sinSeed/100) * sinHeight + height/1; 
    path.segments[i].point.y = yPos; 
    } 
    if (smooth) 
    path.smooth({ type: 'continuous' }); 
    } 

    // Reposition the path whenever the window is resized: 
    function onResize(event) { 
    initializePath(); 
    } 

    </script> 

Answer 1

Pour plus de hauteur, si je comprends bien, vous pouvez ajouter deux points au début/fin du chemin (lignes 26 et 32), et itérer 2 points (ligne 40): working example:

var width, height, center; 
    var points = 12; 
    var smooth = true; 
    var path = new Path(); 
    var mousePos = view.center/2; 
    var pathHeight = mousePos.y; 
    var topLeft = view.center - [80, 80]; 
    var bottomRight = view.center + [80, 80]; 
    path.fillColor = { 
    gradient: { 
      stops: ['#532e8e', '#662e8f'] 
     }, 
     origin: topLeft, 
     destination: bottomRight 
    } 
    initializePath(); 

    function initializePath() { 
    center = view.center; 
    width = view.size.width; 
    height = view.size.height/4; 
    path.segments = []; 
    path.add(view.bounds.bottomLeft); 
    path.add(view.bounds.topLeft); 
    for (var i = 1; i < points; i++) { 
    var point = new Point(width/points * i, center.y); 
    path.add(point); 
    } 
    path.add(view.bounds.topRight); 
    path.add(view.bounds.bottomRight); 
    path.fullySelected = true; 
console.log(path.segments); 
    } 

    function onFrame(event) { 
    pathHeight += (center.y - mousePos.y - pathHeight)/2; 
    for (var i = 1; i < points+2; i++) { 
    var sinSeed = event.count + (i + i % 10) * 100 /2; 
    var sinHeight = Math.sin(sinSeed/200) * pathHeight /2; 
    var yPos = Math.sin(sinSeed/100) * sinHeight + height/1; 
    path.segments[i].point.y = yPos; 
    } 
    if (smooth) 
    path.smooth({ type: 'continuous' }); 
    } 

    // Reposition the path whenever the window is resized: 
    function onResize(event) { 
    initializePath(); 
    } 

pour le rendre réactif, vous pouvez utiliser l'événement onResize pour modifier le comportement en fonction de la taille de votre toile.