Apple ][ Coding Challenge: Fractal Tree

Hello YouTube, welcome to code together in the previous episode. I programmed the snake game in Applesoft Basic on this Apple II plus computer printing text on the screen today. I'm so excited because guess what we're going to do today. Overseas computer graphics together. I have everything I need here, my Apple II reference manual, my basic programming reference manual for basic

apple

sauce, and my newly released Applesoft tutorial, published in 1979, just to refresh your memory for printing text on the screen. I use the print command if I want to draw on the screen instead of using print. I can enter Graphics mode with the GR command.

Let's take a look at the tutorial on how Graphics mode works. The first thing he shows me how to do is how to set the color of the TV, now one of these days I'm going to get my hands on a color TV, but for now I only have this monochrome monitor. Good news for you the way I'm capturing the output of the Apple II through an analog to HDMI converter and on a modern PC with open streaming studio, although I can't see it, you will see full color in the video you are watching right now.

One of the nice things about Graphics mode is that I have a little warning here. still at the bottom I have about three rows of text to work with while I have graphics mode at the top of the screen and I can set the color to test which tells me it's purple light purple lavender and then we're going to plot a point zero zero, look, that's purple. I don't know. I'm just seeing green here, but you're probably seeing purple right at the top left, like I'm rendering or p500, top left. What is the resolution of this screen? the top right corner 39 point zero so we have 40 pixels wide and 40 down in the four corners.

I can also draw lines with the h line for the horizontal line and the V line for the vertical line if I want to draw a horizontal line from 0 to 39 those are the horizontal positions in a vertical position like 20. there we go to the horizontal line in the half vertical line up and down in the middle we clear the screen we go back to text mode and here we are, what should we try to do? let's program a bouncing ball if you remember, if I want to write some code that it can run, I have to give it line numbers, so let's start with line number 10 by entering Graphics mode, line number 20, let's create an X and a Y for where the ball will be strange, so on line 30 let's set the color of a nice purple ball, line 40.

We trace the ball and on line 50 let's go back to line 30. There we go, the ball is not moving because I need to add a speed a speed and what happens if I make them random? some value between 0 and 3 for speed X some value between 0 and 3 for speed y. You could include negative numbers in random, but this is for demonstration purposes only. I'll leave it as It's a

challenge

for you to try it in an emulator now, right after plotting the XY position. Let's increase X by speed X and Y by speed y. Let's try to run this syntax error on line 25.

So this is something I've been noticing. A lot when I program in Applesoft Basic there are a lot of reserved words and if I ever use those reserved words even as part of a variable name I can get into trouble, so let's try x s just for speed X. You could also use DX for Delta X. or VX for similar speed Because I left the limits of where I am. I am allowed to draw so I can add an if statement. Let's overwrite line 50 and say that if x is greater than 39, then VX is equal to VX multiplied by negative one, so it should reverse the direction of the x velocity.

Can I actually say a or I think I could put an or here because I also want to do this if it is or if x is less than zero then VX is equal to VX multiplied by negative one and then 60 well let's make it 70 because I know I'm going to make a and we're also going to say let's go to 30. Hmm, so we still have an illegal amount. Because I haven't done the Y yet, I like how it looks, it's like trying to draw something beyond where it can and does put these pounds. signs, let's try adding Y ah, you know what the problem is, if x is greater than 39, that means it's 40 and what was the last thing I did to plot X Y, so I let myself try to plot it in column 40, which No.

It doesn't exist, there are different ways you could handle this, maybe greater or equal, but just for simplicity now let's make the limit 38 and less than one, then let's make the Y. What have I done here? I messed up my line number so line 50 is Still there, now I have to change X and Y by checking 40. Wow, look at that. my bouncing ball or my giant spider and eventually it covers all the ground where it's going to go and now it's just canceling out, of course, you're probably noticing that it's drawing a trail. I'm not clearing the background like you might say by rendering or Q5, this is actually a big topic of discussion, we assume that rendering and in JavaScript there is a request animation box that handles what is known as double buffer animation , there is always an off-screen memory buffer of what is being drawn on the screen that can be swapped.

If you've ever seen a computer graphics program flickering, it's because double-buffered animation is not implemented correctly. This is something I really think I'd like to do another time. video on how to do double buffer animation maybe I can create a simple 3D renderer in basic oh that would be fun but for now let's see how to clear the previous position of the ball so we only see one moving how about Just before change X and Y, I save the position X and Y previous, let's say X previous is equal to after having changed. X and Y I can set the color again and leave it white for now because I actually have no idea what it looks like in what you're looking at, just to make sure I have something that works, let's set the color to 15 and then on the line 55, let's plot line 52. followed by a space and then and no, this is now working fine, it seems like my random values ​​were a little wonky, come on, yeah, there we go, so I got a negative number, so clearly something went wrong and probably have to do with The way I'm using floating point values, you could anytime you get to the edge, if you went a little bit, you could slide it back to the last column, last row, First column, first row, let's do that, so on line 60 I need to do that instead. than just investing VX, I need to invest VX and put X back into a position.

I need to do two things, which means I need an external subroutine for line 70. The first subroutine inverts VX, if x is less than one I can actually just set X. back to zero, oh I realize that This will also solve the problem of using 38 and 1 as a limit, but let's not worry about that now, if x is less than one then x is equal to zero if x is greater than 39. then x is equal to 39. returns lo What's wrong with me that I'm using? I'm being so inconsistent with my edges, let's see if this works.

Whoa, oh, I think I forgot. it comes back there, no errors no matter what I do. I still don't delete the previous position correctly, let me fix all the limits so they are what they should be correctly 48 how did it come to be 48 I should really plot X and Y after doing this because this is where my constraints are now so we can get undone from this print feel pretty confident now we can get rid of line 50 line 55 and it's 75 we can say plot we can say color 15. plot at 75, oh my gosh, I would go under 1000 also on line 70.

There we go, now I have my perfect bouncing ball. I'm just not going to delete the previous position, how am I going to do that? oh no I see you my logic is one hundred percent correct go to 40 is where I trace pxpy 30 is where I set the color to Black here we go everyone oh you know what we should do we should make it beep when it taps . the edge how do I make a sound sound equal to Peak oh I can use a peak let's look at our click speaker Peaks is four nine two hundred so that gives me a syntax error probably because like it tells me here I need set it to a variable, did you hear something?

I didn't hear that hum. I love it, okay, let's write another Gene server and then I want to call this hum subroutine in the X and Y limit subroutines, here we go, it's a satisfying sound. This is too much fun, there are so many things I could do here. We could try creating pong bricks. We could make a more elegant version of the snake game with color. I won't stop here because although I have shown you the Graphics mode, I have something even more exciting and futuristic to show you high resolution graphics. What happens if now I say plot well?

Let's set the color back to 15. What happens if I say plot 10 point 10? I don't see anything H plot 10 point 10. ah look On that, a little dot up there. I have amazing high resolution graphics. We will need a whiteboard for these high resolution graphics. For high resolution graphics, instead of having a low resolution 40 by 40 grid, I now have a canvas to draw on and that's it. 280 pixels wide by 160 pixels tall and I think hdr2 will actually allow me to draw 20 pixels more underneath, but I like being able to have a command prompt here and as we've seen, instead of a graph, now I have a high resolution graphic or H Plot says here now high resolution in terms of color The graphics are really wonderful, but you have to make some sacrifices to be able to use them.

Fewer colors available. High resolution colors range from zero black to seven white. Let's set the color to white. just to start now, let's see if we can draw a line from the top left to the bottom right with 280 by 160. The border pixels have an index of 279 159. Oh look at that beautiful line, this makes me want to make a for loop and draw as Some lines rotate very badly. I'm going to delete our bouncing ball program by saying new, so let's do a loop where X goes from zero to 279. Let's draw from 40 next X ah, let's make the step a little higher.

I just don't know where I put that, let me look here. I just put it with the for loop so I can say on line 20 for x equals zero at step 279. five I should probably stop here, but I want to try something with a fairly high degree of difficulty. Can I make my

coding

challenge

a

fractal

tree

right here in Applesoft Basic on this Apple 2 plus computer? Now I don't have access to press. I don't have access to pop. I don't have rotate, but I think I can do it with a line and some basic trigonometry.

What would happen if I started drawing a line from the bottom center here to about the center? So let's say what I want. What you have to do is draw the following line half as long but rotated let's say 45 degrees, what does that mean? Let's not worry about reducing the line. We know it's about 80 pixels, so what is the x offset and the y offset to find this? The next point is certainly something I have covered extensively in videos on polar coordinates and trigonometry. I'll be sure to include plenty of resources and references to those videos along with this one, but the quick answer here is if I know this angle using the Greek letter theta to note it, the sine of that angle is the opposite side and divided by the length of this line I just said was 80.

The cosine of this angle is the adjacent side x divided by 80. So I can actually get these offsets. to find this point by saying x is equal to 80 times the cosine of that angle and is equal to 80 times the sine of that angle, this will be the length of a given branch of the

tree

and then I need to find the next branch of the tree by drawing a line from its end point to a new point offset by an angle, let's see if I can get it to work in a basic program, let's start again, enter hgr, set the color to three, just make everything white.

I need a length, what is the length of this? first Rama, what did I say? 80, then I need to draw a line if I'm finally going to start drawing this tree pattern. I need to start with this point, move it to this point and then move it to this point, so I need a variable. for that let's call that X that would be at the bottom 159 and Y that would be in the middle 140. Sorry forinterrupt, I don't know what I was thinking but I wrote whatever code you post, 50 graphs from X Y to X Y minus l, there's my line, that's really the middle one, no, that's it. not in the middle, you swap the x and y changes approximately, let's make the minus length start at 50.

Now, what am I doing here? DX is equal to the length times the cosine of an angle and let's say the angle is about 45 degrees, which is, you know, 90. degrees is about 1.5 radians 1.6 divide that in half, let's call it 0, 7 for an approximation and actually let's make a variable a for the angle and d and is the length multiplied by the sine of that angle let's set the angle on line 25 the angle is 0.7 once We've drawn that first line, let's move y and then the next line will be H plot X comma y to new line to that new point, okay?

So what did I do? If you're wrong, the angle is actually this angle here and I want it to be this angle up here, so I think I can reverse what I'm doing with Y and say h plot X Y to X plus DX and minus d and much better this . It looks like the beginning of my tree, so now I have the calculations I need for branching, but I need some kind of loop because ultimately I want to attach another branch to this branch and I also want to have another one that goes the opposite way if I've seen my

fractal

recursion videos.

I start with this line, I attach two lines to that line and to those I attach two more and to those I attach more and so on, this is a process known as recursion and again I have several videos. where I cover this much more extensively, the question is: can I do basic recursion on this Apple II computer? I think the first thing I need is a subroutine to draw each line of the tree and I'm going to set it to a thousand. in fact, in thousand I'm going to calculate DX and d and then let's put in a variable the next position X Y.

I'm going to put it in a line minus d and then let's draw. I'm just going to put line 1900 uh, come back, no I don't want 50 55 60 or 70 or 80 anymore, so on line 50 I say go sub 1000 and then on line 60 I'm going to say finish when I come back it'll be ready, like this that I have that line, oh because the angle to the right of that first line is now a branch to the right, so let's make angle B start at zero and have a variable for angle Delta. I'll call it d a, we'll see where that comes in, but now it's okay. is doing it horizontally, this is where it all gets reversed because my y axis is actually my x axis which is a little awkward but I think there will be a quick and easy way to solve this by simply swapping the sine and cos or the and the Y.

I don't know what will be the least confusing for me. Know? I could also start the angle at 90 degrees which is about pi times 0.5 with my Delta angle and you know what this should be in a separate line of code because I'm going to want to change that Delta angle quite frequently so let's make that line 27. The tree is fine, what do I do next as soon as I draw that line? The next thing I do is move output if I just said go below 1000 is I will do it forever so what else can I do here?

Ah, in addition to changing the angle, let's reduce the length, so let's add another variable, let's call it reduction so that each new line is about two-thirds the length and so on line 1060. the length is equal to the length times the reduction and then it goes up to less than 1000 oh no, if L is greater than 10 then it goes up to a thousand as long as there are more than 10 pixels, so calculate the offset, get the new position, draw the line, move to the next point, change the angle change the length and do it again go to the other side just after going below 1000, what should I do?

I need to rotate back in the other direction to make it 1080 to equal. I just changed it to D A A minus D A multiplied by 2 .1090 if L is greater than 10 then go below 1000. Hmm, well unfortunately I have a problem, in addition to reversing the angle, I also have to go back to the previous position, I don't think this is going to work. I think I'm going to need an array to keep track of all the previous positions, but in theory I could say x equals x minus DX y equals y minus d and that's what I want to undo after I've drawn the second line I need. to go back to the original angle and reduce the length, add d to back and say l equals L divided by shrink, it's like getting there, but see, all my positions are wrong, so this is the main problem, just subtract back It doesn't take me to the right.

Instead I need an array to keep track of what is known as a stack of all the previous positions and in fact something I can use is this idea of ​​a level, this would maybe be level zero of the tree, this is the level one from tree two. three Etc., so each generation that I could also call that generation is something I want to track separately, so at the beginning of the program, just before we go to sub 1000, let's add the line level 45 is equal to zero and I also want to have a maximum number of levels, well let's try two to start, let's call it Max Lev is equal to two, so instead of my output condition being the length, let's keep track of what level of the tree I'm in, SO would be 1070 if the level is less than the maximum. the level then goes up 1000 and 1090 would also be if the level is less than the maximum level then it goes up a thousand and every time I get a new position I go to the next foreign level, those branches I go back to a previous level, let's list from one thousand to two thousand so this is just the subroutine what is happening in the subroutine I find the offset I get the new position I draw the line I go to the next position I increase the level I turn if I'm not at the end I go back and Do the next one and then undo it, go to the other side , go back and do the next one, then go back to the previous level if you have to continue.

Illegal amount error in 10 30. Again, I'm going to outer space. I'm not tracking positions correctly. I'm going to need an array, let's make it a little awkward on line 48. Remember that for an array I used dim for Dimension was called max level of a two-dimensional array. Here we only have the maximum number of levels and then two for the second dimension instead of two arrays, but anyway I find this a little easier to think about and then once I've gone back to the level. You should be able to update and recover that position. I'm sure I'm missing something here.

Oh, okay, I didn't go back so you can see that this is the second correct branch for two levels, but that's how it was. It doesn't appear here correctly, why is it so strange that it looks like the X came back but the Y didn't, so it could be a typo? Oh I don't need to do this anymore, I don't need to try to come back with 1085 that's what my array will do, oh that's closer but I need to go back there, where did I do it? I saved it in the wrong place, maybe I'm supposed to save X and Y before getting NX and NY if I move the line. 1040 to 1043 look at that, oh my gosh, I'm sure if I change the maximum levels to three, there will be some unforeseen problem here, but this is very close.

The maximum level is equal to three foreigners, oh my God, it is also a fractal tree in the

apple

, oh, this is it. Amazing, okay, come on, let's go for it. The maximum level is equal to let's try seven, that might be too ambitious. Look how slow it is drawing, like all the little bits by bits. Well now you see what is possible with high resolution graphics. Recursion draws lines. Algorithmic ways can. you make your own tree, can you alter the angles? Oh, you know, it would be fun, let's just do one thing. I want to show you how I can get information from me, the user, maybe I can enter an angle and a maximum number of branches or something like that or a color, let's just do the angle.

I'm going to enter the angle. Let's just list the beginning of the program, so before we enter Graphics mode, I really wish there was a command to renumber everything. the numbers and it used to be renumber or renumber, sorry, Future Dan again looks like that renumber command I remember so fondly, but it's not available when the Apple 2 plus boots without any disk inserted, but I'm pretty sure that That's how it was. part of the prodas from Dos 3.3, remember? If you know, let me know in the comments and I'll link to some resources on how to renumber a basic program, so I have to use between 0 and 10.

I can say, let's call it a line. two, I can use the input and I can enter a variable d a, let's delete line 27 and say a line five, let's say the input d a 0.5 is a different angle, I think it's 0.1, we make it much more extreme, yeah, here we go, Yeah. so I'll exit the screen with that. I don't have any errors checking, let's do like 1.5, wow, that's wild. I should probably print a query and say start and all that, so let's do this a little better before we go in. an angle in radians, okay, let's run this program.

I'll draw you a tree, enter an angle in radians something like 1.5, let's try two or 1.8, this is too much fun, but I have to stop here. I hope you can. Take what I have done, find one of the emulators. I'll link them in the description of this video. Try running this code. Make it yours. How can you alter the tree? Can you try the color? One advantage you will have is that it will probably run a little faster than here, what should be the topic of the next co-

coding

video? Should it be double buffered animation and 3D renderer on this Apple II?

Also, do you need me to go back to processing in P5 because I can do that? Also let me know in the comments on Twitter at Shiftman at The Cutting Train any of these places you can find me. I can't wait to be with you again coding together abroad.