Могу ли я контролировать, как гладко обрабатывает руль сегмента?

Question

Я работаю с Paper.js впервые и работаю над желтым кубом с текучими / волнообразными сторонами.Мне нужна сторона волны куба, подобная этой:

http://paperjs.org/tutorials/animation/creating-animations/#animating-path-segments

Но я хочу, чтобы углы куба были зафиксированы.Я почти добираюсь, но я вхожу в один проблемный сегмент 1 (угол оборота выше [0]) ведет себя странноРучки расположены по диагонали, а не по горизонтали, как остальные.

Как это исправить?

Мой текущий эскиз можно найти здесь .

Полный код

var values = {
    margin: 64,
    header: 132,
    height: 60,
    amount: 5
};

 var path, springs;

function createPath(strength) {
    var size = view.size;

    var blockSize = {
        width: size.width - values.margin,
        height: size.height - values.header,
        segmentX: (size.width - values.margin)/(values.amount + 1),
        segmentY: (size.height - values.header)/(values.amount + 1)
    };

    var blockPosition = {
        top: size.height - blockSize.height,
        left: 0
    }

    var path = new Path({
        fillColor: 'yellow'
    });

    for (var i = 0; i <= values.amount; i++) {
        //top
        path.add(new Point((blockPosition.left + (blockSize.segmentX * i)), blockPosition.top));
    }

    for (var i = 0; i <= values.amount; i++) {
        //left
        path.add(new Point(blockSize.width, blockPosition.top + (blockSize.segmentY * i)));
    }

    path.add(new Point(blockSize.width, blockSize.height + blockPosition.top));
    path.add(new Point(blockPosition.left, blockSize.height + blockPosition.top));


    path.fullySelected = true;
    path.closed = true;
    return path;
}

function onResize() {
    if (path)
        path.remove();
    path = createPath();
}

function onFrame(event) {
    for (var i = 1; i <= values.amount - 1; i++) {
        var segmentTop = path.segments[i];
        var segmentRight = path.segments[i + values.amount + 1];

        // A cylic value between -1 and 1
        var sinus = Math.sin(event.time * 3 + i);

        // Change the y position of the segment point:
        segmentTop.point.y = sinus * values.height + 100;
       // segmentRight.point.x = sinus * 1;

        path.smooth();
    }

    path.segments[0].handleIn.x = 0;
    path.segments[0].handleIn.y = 100;
    path.segments[0].handleOut.x = 100;
    path.segments[0].handleOut.y = 0;

    path.segments[6].handleIn.x = -100;
    path.segments[6].handleIn.y = 0;
    path.segments[6].handleOut.x = 0;
    path.segments[6].handleOut.y = 100;
}

Answer 1

Проблема, с которой вы сталкиваетесь, связана с тем, что вы применяете алгоритм сглаживания ко всему квадрату, включая углы. Поэтому, если вы сделаете снимок экрана перед установкой маркеров углов по горизонтали / вертикали, вы увидите это: Я думаю, это достаточно ясно объясняет, почему у вашего второго сегмента есть диагональный маркер, потому что у предыдущего сегмента тоже есть один ...

Вот эскиз , демонстрирующий эффект, подобный тому, что вы пытаетесь достичь.

// Define constants.
const POINTS_AMOUNT = 7;
const SQUARE_WIDTH = 500;
const WAVE_AMPLITUDE = 25;
const SQUARE_OFFSET = new Point(100, 100);

// Initialize path variable, we will use this reference to delete the previous
// path on each frame.
let path;

function draw(time) {
    // Delete existing path.
    if (path) {
        path.remove();
    }

    // Create new path.
    path = new Path();
    // First, draw the top side.
    for (let i = 0; i < POINTS_AMOUNT; i++) {
        // For each point of the line, create a wave effect by using sine
        // function. Do not apply it on first and last point to make square
        // corners stay constant.
        const sinus = i === 0 || i === POINTS_AMOUNT - 1
            ? 0
            : Math.sin(time * 3 + i);
        const x = SQUARE_WIDTH / POINTS_AMOUNT * i;
        const y = sinus * WAVE_AMPLITUDE;
        path.add(new Point(x, y));
    }
    // Apply smoothing algorithm on the line.
    path.smooth();

    // Duplicate this line 3 times to form a square.
    const right = path.clone().rotate(-90, path.lastSegment.point);
    right.reverse();
    const bottom = right.clone().rotate(-90, right.lastSegment.point);
    bottom.reverse();
    const left = bottom.clone().rotate(-90, bottom.lastSegment.point);

    // Join all parts together.
    path.join(right).join(bottom).join(left);
    path.closed = true;

    // Place the square somewhere we can see it.
    path.translate(SQUARE_OFFSET);

    // Stylize the square.
    path.fullySelected = true;
    path.fillColor = 'yellow';
}

function onFrame(event) {
    draw(event.time);
}