Stretching a vector shape with control points and having the vector stay

Vectors
1

Hey Folks,
Happy new year. I wonder if anyone can push me in the right direction. I am trying to create a radar chart in hype with user interactivity. I want the user to be able to stretch each point of the radar outline and leave it set somewhere they think is close to their assessment. I have attached and example of what I am trying to accomplish, but as you can see, it does not work correctly. Ideally, I like there to be 6 points that a user can adjust (currently this is done by dragging the blue circles) to set their score for each category. I have set up three of the categories (one per timeline) but I cannot figure out how to get the set point to stay where I put it when I want to change the set point of another category.
Am trying to attach the hype document, but can find the place to add the attachment

2

Just zip your Hype document and drag it into the text field...

3

Here you go!
Radar Chart Hype.hype.zip (78.6 KB)

4

Hmm.
There probably is a coding solution that some one has using a canvas.

But possibly the simplest thing to do is duplicate the Shape and overlay them.
The key would be to keep the centre was of the Shapes the same size & shape and only move the points. Also no borders on the shape so they appear as one mass.

Similar to this.
Where each ellipse controls one layer.
( note I turned of Relative timelines also. )

Radar Chart Hype v2.hype.zip (80.1 KB)

5

Mark,

Thanks for this. This is a good idea, but I'm not sure that it will work the way that I need it too.
Like you said, I think there is some code that will do it.

I had chatGPT create this today, but I can't get it to work.

function moveSquareCorner(hypeDocument, element, event) {

    // Get the square vector shape
    const square = hypeDocument.getElementById('square-shape-id');

    // Add event listeners to the square's control points
    square.controlPoints.forEach((controlPoint) => {
        controlPoint.addEventListener('mousedown', (event) => {
            // Save the initial position of the control point
            hypeDocument.customData.initialPosition = { x: event.clientX, y: event.clientY };
        });
        controlPoint.addEventListener('mousemove', (event) => {
            if (hypeDocument.customData.initialPosition) {
                // Calculate the new position of the control point
                const newX = controlPoint.offsetLeft + (event.clientX - hypeDocument.customData.initialPosition.x);
                const newY = controlPoint.offsetTop + (event.clientY - hypeDocument.customData.initialPosition.y);
                // Update the position of the control point
                hypeDocument.setElementProperty(controlPoint, 'left', newX);
                hypeDocument.setElementProperty(controlPoint, 'top', newY);
                // Update the initial position
                hypeDocument.customData.initialPosition = { x: event.clientX, y: event.clientY };
            }
        });
        controlPoint.addEventListener('mouseup', () => {
            hypeDocument.customData.initialPosition = null;
        });
    });
}

It's just trying to get a simple square to be stretched. I'm thinking that adding more points would get me what I want.

6

That result is part of the problem with chatGPT.

i.e what are square.controlPoints. ??

Little confused. Do you meant as in the example for chatGPT or you overall goal?.
Because you was using a vector before.

Also you do not say why you think the above idea I gave will not work for you ?

7

I just wanted to chime in to formalize a few points -

  • Hype shape morphing works by considering the shape as a whole -- all vector anchor points. Therefore while you can morph one shape into a second one (including intermediate states via relative timelines), you cannot morph between 3 different shapes where only subsets of anchor points are considered.

  • As such, you will either need to get very clever with the construction (@MarkHunte's attached example) but that probably won't quite get you 100% the way with what you want, I would guess.

  • Instead you'll likely need a code based approach.

  • The most "Hype" method would be that you still use Hype to control the points via Control Timeline actions, and then with the On Drag even run some other code that looks at those point positions and redraws the shape (either using canvas or your own SVG). However it will still require a bit of finesse to get the points to move exactly how you want (constrained to various angles probably via rotation). It may still be easier to program the whole thing from scratch :man_shrugging:t2:.

1 Like
8

Sorry, been gone for a few weeks. Thank you all for your comments. This is good to know. I will try the code based approach.

1 Like