Circular Maze

JavaScript Circle Maze

What is Vibe Coding?

Vibe Coding is a cool way to write programs with the help of AI (artificial intelligence). Imagine having a super-smart assistant by your side while coding! The AI can help you in different ways -- it might create an entire program for you, or just give you ideas and help with specific parts, depending on what you need.

To get started, you simply talk to the AI and explain what you want your program to do. The AI will then create a rough version of the program for you. After that, you can ask the AI questions, make suggestions, or request changes to add new features or fix things until the program is just the way you want it.

For this project, I will begin the AI chat with simple request about drawing a single triangle. As the conversation progresses, the requests will get more complex.

In this project, we will create a circular maze by drawing a complete circle and then selecting a small part of that circle to then draw a white disk (thereby erasing part of the circles edge). This erasure will form a doorway (or path) to enter or exit the circle. Subsequent layers of circles will be drawn with openings at various places to create a circular maze.

We will create a rough draft of the maze and then ask the computer to create a program that would replicate it.

To begin, create a single circle.

2D Art version

Example:

circle(100,100,15)

Now we will erase part of the circle by drawing over it with another.

Example:

circle(100,100,15)
circle(100, 85,5).fill('white').border('white')

Now we will draw two circles.

Example:

circle(100,100,15)
circle(100, 85,5).fill('white').border('white')
circle(100,100,30)

Next, we need to create an opening in this second circle.

Example:

circle(100,100,15)
circle(100, 85,5).fill('white').border('white')
circle(100,100,30)
circle(130,100,5).fill('white').border('white')

Now let's continue this process for two additional circles.

Example:

circle(100,100,15)
circle(100, 85,5).fill('white').border('white')
circle(100,100,30)
circle(130,100,5).fill('white').border('white')
circle(100,100,45)
circle( 55,100,5).fill('white').border('white')
circle(100,100,60)
circle(100,160,5).fill('white').border('white')

Now that we have a rough draft of the maze, let's ask AI to analyze what we started and create a new program from it.

I am using a 2D graphics program to teach JavaScript. It contains a function called: circle(x,y,radius). The 2D environment has the origin point in the upper left corner and positive values on the y-axis are descending on the computer screen. The width of the draw area is about 400 pixels and the height is about 200 pixels.

Here are a set of concentric circles with small openings at various places to form a simple maze. Look at the following JavaScript code. Do you see a pattern in the following?

circle(100,100,15) 
circle(100, 85,5).fill('white').border('white') 
circle(100,100,30) 
circle(130,100,5).fill('white').border('white') 
circle(100,100,45) 
circle( 55,100,5).fill('white').border('white') 
circle(100,100,60) 
circle(100,160,5).fill('white').border('white')

Write a program that draws a maze of 6 circles. The small openings in each circle should be placed at random locations along the circumference of the circle. There should be only one opening for each circle drawn. Use sine and cosine to calculate the coordinates of the smaller white circle.

Did the AI give you a program?
Does the program contain any 'let' keywords?

In this particular graphics API, can you change the 'let' to 'var'?

3D Art version

Example:

radius = 0
gap = 2

radius+=gap
circle(0, 6,radius).rotate(90)
degree=90
line(cos(degree)*radius,6,sin(degree)*radius, cos(degree)*(radius-gap),6,sin(degree)*(radius-gap))

radius+=gap
circle(0, 6,radius).rotate(90)
degree=210
line(cos(degree)*radius,6,sin(degree)*radius, cos(degree)*(radius-gap),6,sin(degree)*(radius-gap))

radius+=gap
circle(0, 6,radius).rotate(90)
degree=140
line(cos(degree)*radius,6,sin(degree)*radius, cos(degree)*(radius-gap),6,sin(degree)*(radius-gap))

radius+=gap
circle(0, 6,radius).rotate(90)
degree=304
line(cos(degree)*radius,6,sin(degree)*radius, cos(degree)*(radius-gap),6,sin(degree)*(radius-gap))

radius+=gap
circle(0, 6,radius).rotate(90)
degree=110
line(cos(degree)*radius,6,sin(degree)*radius, cos(degree)*(radius-gap),6,sin(degree)*(radius-gap))