I want to make a game where there is a dot in the middle of the screen and three buttons at the top. (Start, Pause, and reset.) When you press start, two branches come out at random spots. At the end of those, two more come out randomly but cannot pass through other branches. Is there a way to do this?
Welcome Eli.
With App Inventor you would probably make your game using the Canvas.
How to make games ; the link describes basic game programming
What do you mean by two branches. Your description about what you app needs to do needs a better description. Do you mean draw two lines. What does this look like?
Lines can be drawn on the Canvas, however there isn't a tool that can automatically generate lines and avoiding crossing over when another the way you described. 
You could try this:
In App Inventor, you can draw lines on the Canvas component and create branches that do not intersect using the Canvas.drawLine block. To ensure lines don't intersect, you need to calculate the end points of your branches based on the desired angle and distance from the parent line, and then draw the branches accordingly.
Here's a step-by-step guide:
-
Draw the Parent Line: Use Canvas.drawLine(x1, y1, x2, y2, color, width) to draw the initial line.
-
Calculate Branch End Points:
• Determine the desired angle(s) for your branches relative to the parent line.
• Calculate the x and y coordinates of the branch endpoints based on the parent line's end point, the desired angle, and the desired branch length.
• Use trigonometry (sine, cosine) to find the x and y components of the branch length. -
Draw the Branches:
• For each branch, use Canvas.drawLine(x1, y1, x2, y2, color, width) to draw the branch line. Make sure x1 and y1 are the end point of the parent line (or the previous branch), and x2 and y2 are the calculated endpoint of the current branch.
Example Calculation:
Suppose you want to draw a branch at a 45-degree angle, extending from the parent line's end point:
• Parent line end point: (x2, y2)
• Branch length: branchLength
• Angle: 45 degrees (or π/4 radians)
- Calculate x-coordinate change: dx = branchLength * cos(angle)
- Calculate y-coordinate change: dy = branchLength * sin(angle)
- Calculate branch endpoint: (x2 + dx, y2 + dy)
Code Example (App Inventor Blocks):
// Draw the parent line
Canvas.drawLine(x1, y1, x2, y2, color, width);
// Calculate branch endpoint (example for one branch)
let branchLength = 50;
let angle = 45; // degrees
let dx = branchLength * Math.cos(angle * Math.PI / 180); // Convert to radians
let dy = branchLength * Math.sin(angle * Math.PI / 180);
let x3 = x2 + dx;
let y3 = y2 + dy;
// Draw the branch
Canvas.drawLine(x2, y2, x3, y3, color, width);
By carefully calculating the endpoint coordinates for each branch and drawing them individually, you can avoid creating intersecting lines.
AI responses may include mistakes and this is an AI solution. Beware. 
1 Like
give me a recipe for a apple pie, simple
The AI did not know that AI2 sin and cos use degrees, not radians.
You would need to keep a list of all line segments drawn so far, and for each new segment check if it would intersect any of them (except for its immediate parent)..
to check if two line segments intersect, see
You could package that up as a value procedure.
To generate new segments, take the end of the last generated segment, and randomly choose a new endpoint as the other end of a new branch. Test it against all accepted branches. If it is clear, accept it into your branch list, otherwise try again.
Here is a half way solution, just random lines that don't intersect each other.
intersects.aia (8.5 KB)
To match your original specs, the random line generator would have to use the end of the most recently generated branch as one of its endpoints, and the collision loop would have to ignore the latest branch in its loop.
Feel free to reuse its procedures, transcribed from C code at
(I should have named the Project UncookedSpaghettiCode)
This can also be done without lists by pixel coloring and the Bresenham line drawing algorithm.
Test for line crossings by probing the pixel colors along the planned branch.
Use three colors
Background
Branch
Growth tip
Here's a solution version that slows down as the number of branches increases.
It saves two lists:
- the branches that were drawn so far
- the endpoints of the branches that have not yet had two more branches attached.
The Clock Timer loops over the endpoints list, making a few (8) attempts to fill its quota (2) of branches at the node at the front of the list (item 1). If successful, the two new branches are drawn and added to the list of branches, and the node at the front of the list is removed. Otherwise, that node is sent to the back of the list to be retried later.
random_bush.aia (12.6 KB)
I seem to be enjoying this problem more than the OP.
Here's a refinement of the line crossing detection method, with abandonment of dead nodes.
It still eventually slows down, as it gets overloaded with branches.
It also has ugly ingrown thorns.
random_bush_V2.aia (12.7 KB)
2 Likes