How to fill shape inside of GUI?

Asked by

y3_th 176

6 years ago

Edited 6 years ago

I am creating a cloth simulation, and I have decided that the best method is to create a cage made of Parts and SpringConstraints inside of the Workspace service, then use Camera:WorldToScreenPoint() to generate a wire-frame with edges and vertices inside of the UI. My only problem is being able to generate faces, which require filling in the space in-between edges. So far, the simulation is very realistic, and I do not want to abandon it.

Here is what the simulation looks like so far.

If you want the source code for edges and vertices, here it is. They are all LocalScripts under Frames.

VERTEX:

01local RunService = game:GetService("RunService") --RUNSERVICE
02 
03--CAMERA
04local camera = workspace.CurrentCamera
05 
06--PART OF CAGE
07local vertex = workspace:WaitForChild("vertex1")
08 
09local point = script.Parent --FRAME
10 
11--DRAW--
12RunService.RenderStepped:Connect(function()
13    --FIND WHERE POINT IS ON SCREEN
14    local vertPos, vertOnScreen = camera:WorldToScreenPoint(vertex.Position)
15 
16    --IS THE POINT ON SCREEN?
17    if vertOnScreen then
18        point.BackgroundTransparency = 0 --VISIBLE
19 
20        point.Size = UDim2.new(0, 10*(10/vertPos.Z), 0, 10*(10/vertPos.Z)) --SET SCALE BASED ON Z
21        point.Position = UDim2.new(0, vertPos.X - (point.Size.X.Offset / 2), 0, vertPos.Y - (point.Size.Y.Offset / 2)) --CENTERED ON POINT IN CAGE
22    else
23        point.BackgroundTransparency = 1 --INVISIBLE
24    end
25end)
26 
27--BLAHBLAHIDONTKNO
 View all 27 lines...

EDGE:

01local RunService = game:GetService("RunService") --RUNSERVICE
02 
03--CAMERA
04local camera = workspace.CurrentCamera
05 
06--PARTS OF CAGE
07local vertex1 = workspace:WaitForChild("vertex1")
08local vertex2 = workspace:WaitForChild("vertex2")
09 
10--FRAME
11local edge = script.Parent
12 
13--DRAW--
14RunService.RenderStepped:Connect(function()
15    --FIND WHERE POINT IS ON SCREEN
16    local vert1Pos, vert1OnScreen = camera:WorldToScreenPoint(vertex1.Position)
17    local vert2Pos, vert2OnScreen = camera:WorldToScreenPoint(vertex2.Position)
18 
19    --CHECK IF POINT IS ON SCREEN
20    if vert1OnScreen and vert2OnScreen then
21        edge.BackgroundTransparency = 0 --VISIBLE
22 
23        --DISTANCES FOR X AND Y
24        local yDelta = vert2Pos.Y - vert1Pos.Y
25        local xDelta = vert2Pos.X - vert1Pos.X
26 
27        --SET POSITION TO MIDDLE OF TWO POINTS
28        edge.Position = UDim2.new(0, (vert1Pos.X - (edge.Size.X.Offset / 2)) + (xDelta / 2), 0, vert1Pos.Y - (edge.Size.Y.Offset / 2) + (yDelta / 2))
29 
30        local dist = math.sqrt((xDelta^2)+(yDelta^2)) --DISTANCE BETWEEN TWO POINTS
31        edge.Rotation = math.deg(math.atan(yDelta/xDelta)) --USE XDELTA AND YDELTA TO COMPUTE ANGLE IN DEGREES
32 
33        edge.Size = UDim2.new(0, dist, 0, 5*(5/vert1Pos.Z)) --SET LENGTH TO DISTANCE, SET THICKNESS BASED ON Z DIST
34    else
35        edge.BackgroundTransparency = 1 --INVISIBLE
36    end
37end)
38 
39--BLAHBLAHIDONTKNO
 View all 39 lines...

How should I approach filling in the faces?

EDIT: Actually, using knowledge from vector graphics, it could be possible to use the three edges as an "enclosed vector curve", and then create a grid of pixels confined to that group of edges, allowing for custom shapes.

Here is what I am talking about.

So far, I have gotten the grid to track to the triangle by taking the minimum and maximum points, and then positioning and scaling the grid based on those points.

Here's a screenshot.

Here's the current script for the face. I had to modify the size of each "pixel" from 3 pixels to 5 pixels to reduce lag.

01local RunService = game:GetService("RunService") --RUNSERVICE
02 
03local camera = workspace.CurrentCamera --CAMERA
04 
05--PARTS OF CAGE
06local vertex1 = workspace:WaitForChild("vertex1")
07local vertex2 = workspace:WaitForChild("vertex2")
08local vertex3 = workspace:WaitForChild("vertex14")
09 
10--CONTAINER OF PIXELS
11local face = script.Parent
12 
13--DRAW--
14RunService.RenderStepped:Connect(function()
15    --VERTICES THAT MAKE UP TRI
16    local vert1Pos, vert1OnScreen = camera:WorldToScreenPoint(vertex1.Position)
17    local vert2Pos, vert2OnScreen = camera:WorldToScreenPoint(vertex2.Position)
18    local vert3Pos, vert3OnScreen = camera:WorldToScreenPoint(vertex3.Position)
19 
20    local vertPos = {vert1Pos, vert2Pos, vert3Pos} --TABLE OF POSITIONS
21 
22    --DO NOT APPEAR WHEN POINTS ARE OFF SCREEN
23    if vert1OnScreen and vert2OnScreen and vert3OnScreen then
24        face.BackgroundTransparency = 1 --CONTAINER IS INVISIBLE
25 
26        --FIND MINIMUM AND MAXIMUM POINTS OF TRI
27        local minX = 999999
28        local maxX = -999999
29        local minY = 999999
30        local maxY = -999999
31        for _, v in pairs(vertPos) do
32            if v.X < minX then
33                minX = v.X
34            end
35 
36            if v.X > maxX then
37                maxX = v.X
38            end
39 
40            if v.Y < minY then
41                minY = v.Y
42            end
43 
44            if v.Y > maxY then
45                maxY = v.Y
46            end
47        end
48 
49        --DETERMINE POSITION AND SIZE OF GRID BASED ON MIN AND MAX
50        face.Position = UDim2.new(0, minX, 0, minY)
51        --local dist = math.sqrt((xDelta^2)+(yDelta^2))
52        --face.Rotation = math.deg(math.atan(v2Delta/v3Delta))
53        face.Size = UDim2.new(0, maxX - minX, 0, maxY - minY)
54 
55        --DRAW PIXELS
56        local pixelSize = UDim2.new(0, 5, 0, 5)
57        for i = 0, face.Size.X.Offset do
58            for j = 0, face.Size.Y.Offset do
59                if i % 5 == 0 and j % 5 == 0 then
60                    local pixel = Instance.new("Frame", face)
61                    pixel.Size = pixelSize
62                    pixel.Position = UDim2.new(0, i, 0, j)
63                    --pixel.BorderSizePixel = 0
64                    pixel.BackgroundColor3 = Color3.new(255, 255, 255)
65                end
66            end
67        end
68 
69        wait()
70 
71        --REFRESH
72        for _, v in pairs(face:GetChildren()) do
73            if v:IsA("Frame") then
74                v:Destroy()
75            end
76        end
77    else
78        face.BackgroundTransparency = 1
79    end
80end)
81 
82--BLAHBLAHIDONTKNO
 View all 82 lines...

Actually, now that I think about it, spamming edges would be the most efficient method, as spamming pixels generates more lag. Thanks, @StreamG0D!

So do you want the faces to be flexible too or are they static within the wire frame? SteamG00B 1633 — 6y

I do want the faces to be flexible, as the whole point of using the UI was to create a deformable mesh based on the cage. y3_th 176 — 6y

The easiest solution I can think of is to use a bunch of edges as a way to fill the grid, but I doubt the engine could handle that. SteamG00B 1633 — 6y

I guess you could place a false CanCollided Part and make it swing with the Cloth, but that'd be exceptionally hard. TheOnlySmarts 233 — 6y

So I was just looking throug unanswered questions and came across this old one, I am glad you thought my answer was best, but did it actually solve your problem or does it still lag a lot? SteamG00B 1633 — 6y

How to fill shape inside of GUI?

1 answer

Answer this question