Essentials of Programming and Algorithms

As we continue programming, I think it's helpful to review some of the things that we've gone over so far, since these are the building blocks, the foundation. We've gone over data, the different types of data. We see this in variables and arrays. We just went over arrays, which hopefully unlocked some creative possibilities, really powerful. We've also been thinking about control flow, which... relates to conditional statements if if else or else if You know looking at booleans and also loops so those things can help us you know determine how the program runs and so we should be getting more familiar with that and Lastly we're also kind of pushing this idea of organization using functions and objects or classes thinking about Rewriting our code making it modular and all those things are important As we move into more complex programs, having an understanding of these things is really important. So we're going to focus a little bit on algorithms, which is a general concept. It's basically a procedure or sequence of steps required to perform a task. And some of these algorithms can be really simple. We've done some early on, and then they get to be really complex. And I think as you move forward into the... complex algorithms, it's helpful to maybe have a process and an understanding of how to kind of organize your thoughts. So here is a list of steps to kind of break down your ideas or to, I guess, start the process. The first one is to have an idea maybe and to just state it out loud. From there, we might break it into different segments like looking at pseudocode so just this is writing the steps of how to do it but not using you know the programming syntax yet just thinking about what are the different steps then we want to convert it into into actual code and from there we'll do some reorganization using objects classes functions you know trying to get get things more modular and you know thinking about how to connect things and the last part is the integration of like getting you know maybe several different algorithms or you know classes functions and getting them to all talk to each other to behave you know this is cleaning up your code debugging it so it's kind of a you know that's the last important step in the process I'm gonna do an example and here is an example of a sketch that I'm going to write and you can see what is happening is There's a series of bouncing balls moving across the screen and when they intersect they change color and there's looks like there's also a line that's drawn. So if we're going through the steps this is just a quick outline. We have this idea the bouncing balls change color when they intersect and a line connects the centers. The pseudocode is well we need to draw these forms and move them on the screen and we'll make them bounce if they hit the edges. This is similar to what we've done. in the past. Also, if they intersect, change the fill color and connect the centers with the line. So we're just writing it in natural human language. And the code I said is translating the pseudocode, the actual code, we're going to do that together. But then part of this too is as you start to write this, sometimes you'll write it in the draw in separate functions, and then you'll start to move it out into classes. I mean, sometimes if you have a good understanding or a good comfort level with those things, you might start to break them out a little bit earlier and to think ahead. But certainly, I think if you are just writing the code and thinking about it in the draw, that's also a good place to be. And then the last part is integrating all the code so that it's all talking to each other. If you have different functions, how can you call those? functions. If you have data, how do you reference the data across? Because we're going to have to look at the x and y position and the size of these circles, right? And we have to access that in order to make this whole thing run. So let's start coding this. So let's go through the steps of building this out from code. Again, maybe we'll start just by stating what we're going to do. I'm going to write it all as a comment and you know it'll be kind of in pseudocode but we're we're trying to figure out how to approach this problem. We're going to create a series of balls and then we'll check if the balls intersect. you know the balls intersect we'll change the color so we'll highlight the color and draw a line in between centers I'll just put that on the next line right here. Okay, so this is a general plan for what we'll be doing. I might want to break this down into smaller sections too. So when I talk about these balls intersecting what I mean is if I was thinking about it kind of in, I guess in pseudo code, or I'm starting to think about it in technical terms, if we look at the, let's see, the distance between two circles, one way to test if they're interspersed, intersecting is if we look at the radius of each circle, here I've kind of drawn it. These circles are intersecting when the distance between the centers is less than the distance between the two radii. So in a case like this, you could say that these circles are not intersecting because if you took the distance of their two radii on a... just plop them together and you took the distance between the uh let me just show you this this the center the two centers you can see that the radii in this case that's quite small um and i hope i'm spelling radii correctly but maybe not You can see that the distance between the centers is larger than the sum of the radii. Now if I took this same thing and maybe I move these so that they're intersecting. Let's take these two things again. These are the radii. I probably could have just... Copy that other bit. That's the radii and now the distance between the centers. I'm just drawing a Line right there Whoops. I think it was not parallel. So let me fix it and Let me just do that. Okay, so now you can see the distance between the centers is Smaller than the sum of the radii and this is intersecting. So this is what we're gonna do This is the kind of math that we're gonna do to see if they're actually intersecting. I think we can start Maybe writing this out. Well We'll make another ball class again. And we'll just start going from here. I'm gonna, again, start with class ball, baller. circles or bouncing ball, whatever you want to call it. I'm going to put some data in here. So what I want to do is actually start with flow R, which is actually going to be the radius. I know I've used diameter in the past, but because I'm thinking ahead about the distance in between the two circles, now the radius is that line from the center out to the edge of the circle. I'll be calculating that distance. So I'm going to use radius. here and then for size uh or the diameter i'll just do r times two that's going to give me the the size of the circle um i'm gonna need x and y you know i'm gonna just uh start this off really randomly so i'm gonna throw all these values in at this point um i could write it to accept arguments or parameters um but just to keep it simple maybe i'll i'll set it up like this uh so we in the past with a bouncing ball we we've used speed but because we have bouncing in two directions we're going to need an x speed a horizontal speed and a y speed so let me do a similar thing where i'm setting up some numbers here and i'm making it the range from negative to positive so it could be left to right or up or down. Okay, and then maybe we'll throw a color in here as well. Color C is equal to color. I guess we'll start with color 150. Now, again, if you give color just two numbers, one will be black and white value, and the other will be opacity. So let's move on to the constructor. Now I'm going to make the constructor pretty simple here. I'm only going to pass it the radius because actually all the other stuff gets passed in here. Like I said, I could rewrite this to accept all these numbers or these values. But just to maybe make it a little bit simpler, here I'm only passing one variable, one value down to here. Let's go and start to write our methods. Oh, I can't write it correctly today. We're going to start with avoid move. So we will break this down a little bit more. Now in the past we've had x or y plus equal speed because we're doing two-direction. two directions. We need to have it happen on the x and the y. So increment x, y plus equals, whoops, I should say x speed and y speed here. So let's increment the y. Okay, that'll give us the direction. But now we need those kind of bouncing conditional statements. And again, we're having this happen on both horizontal So I'll write check horizontal edges. Oops, and I'm just going to check the vertical edges. So I'm maybe starting to flesh out what I'm trying to do before actually writing the code. For the horizontal edges, we'll say x is... If x is greater than the width, or x is less than zero, that would be the two edges. This is the right edge, and this is the left edge. So what happens if that occurs? Well, we'll do this thing where we'll say x speed. times equals negative 1 to change the direction of that bounce. And then we're going to check the vertical edges. So this will be y is greater than height. That's the bottom edge. Or, oh, the y is less than 0. So that's the upper edge. And then we'll say y speed times equals negative 1. Okay, so we're changing the direction of that. We might have another function. So this is the move function all the way up until there. Maybe we have another function that is highlight the color, right? We talked about what would happen if we change the color. So maybe we'll call this one highlight. And here, you know, we'll keep it simple. All we're going to do is change the color. we already have this variable c up here so color c is equal to color and i'm gonna throw in a color uh maybe one nine two two twenty one one ninety and one twenty uh and a little bit of opacity so i'll do that 150 um I know ahead of time I kind of want a little bit of randomness, so I'm going to just throw in a tiny bit of randomness so that each time it runs, maybe on the red and the blue values, it adds just a tiny bit of randomness so it looks maybe more organic. or just more or less artificial. Okay, so I've moved it. Oh, I haven't done the display yet here. So we haven't even drawn anything yet. So we can call this, we can write this function out. So let's turn off the stroke for this. We just want the fill to be C. So, you know, if the color is, if the highlight function is not run, then this color will pull down all the way down to here. If highlight. is run uh then the color will be changed uh and then we're gonna write our ellipse x x y r times two i said it's like the radius times two for the size r times two uh and let's see i have another i'm looking at some sample code and i actually have for some reason i have some other uh I have resetting the color here. So it looks like I actually used a different color. Reset the color. And so actually, the value up here that I used is probably not going to be correct. I think the value I ended up using was closer to this, which is kind of looks like... greenish, bluish kind of color. So just so that I'm not writing weird things in there, I'm just gonna change that. We talked about calculating or figuring out if there is an intersection. So I'm actually going to write a function or a method in this case that's a Boolean. Again, to write a function, you write the return type. A Boolean is either going to give me a true or false. And what I'm going to do is if the distance between the centers of the two circles is less than the distance of the radii, then we'll make... sure that that intersect alerts us or is true. What we're going to do is pass... We can actually pass objects into it. And I should say ahead of time what I'm probably going to do is the distance. If I'm thinking about pseudocode, we kind of want to go through each... We'll select one. Select one ball and then go through all the other balls to see if it's highlight, if it intersects. This is kind of thinking through how we're going to do that. Now, to do this, we'll probably use loops and select one and then go through all the other balls. Now, imagine we might start with a smaller number, but imagine that we want to write the code so that we could throw, like, 100 as the number of balls or 200, right? We want it to be adaptable. So let me go back into the Boolean and write this out. The way... to write this out is let's take let's find the distance between between these the centers and another ball so to go back what we're going to do is we when we run this this or when we create this object where we're used we've selected one of these and then we'll pass in another ball and run this function and see if it intersects. So to find the distance, we'll use the distance function. You give it an X and Y value and then another X and Y value and it figures out the distance between those two points. So the distance we'll start with is X and Y. That's the center point of this circle or this object. And then what we're feeding into it is. another ball in this case ball b and we want to figure out hey what's the x and y value of that ball so what we can do is use the name of the object use a period and then the name of the variable that we want to or the data that we want to collect so b dot x and b dot y that's going to allow us to feed this in this ball b as a parameter and then run this calculation on it So I'm gonna just say calculate distance. I also want to say objects can be passed into functions. Okay, semicolon at the end. Let's see if that goes. So now let's compare the distance. And what I want to say is if the distance... Now we're going to take the two radii of the object that we're working in right now, which is the current one. and the one we're comparing it to, which is ball B. And we're going to say if that distance, we've kind of created that variable up here. If the distance is less than R plus B. dot r so we're actually grabbing the radius from the other one so we're finding out this first uh this statement up here is looking at the center points and figuring out what's the distance between the center points and then we're comparing that distance to the uh the disc you know the distance of the radii this or the sum of the radii to see if that uh if that distance is smaller and if it's smaller the centers are closer than the distance between the radii or the sum of the radii, then that means they're intersecting. Okay, so let's set up a situation. Now, we said that this is a Boolean, and it wants to return a Boolean, right? So we'll say if that's the case, then the Boolean return is true. Else, well, the return is false. So we'll use that to... our advantage let's see that closes this boolean statement so this is a function to determine if two circles intersect And that, I think that will get us going. Again, we need to go now into our code, into our void set and void draw and kind of start to integrate these things. We have these different algorithms. Let's start by just setting it up. So we have void set up here. Size, let's do 960 by 540. What we're going to do here is we should also kind of set this up as an array. We're going to have a lot of these balls. So ball, again, we'll do this square brackets. We'll call ball array again is equal to new. And then what's the type? It's ball again. Let's start with 10 just to make sure we can see things and go from there. Now we want to initialize things here. initialize the objects so we're gonna do for and we'll use a for loop int equals zero again arrays they start at index zero so that this is good for us ball are we're gonna write ball array dot length so that this will auto adjust if we ever change it I plus plus And then we'll feed in the values ball array. we'll say i so that it adjusts again is equal to new ball now with the the way that we wrote this the constructor it only takes one value so and it takes a float so uh let's just feed in a random variable again i guess i i guess i could have just uh set it up randomly here but you know this will give us later on if we want to if we want to put an i or i times 10 or some other value you know that might be helpful um and again refactoring or just changing your code to make it better for your situation is uh it's something you should do as you get going so let's start the background uh i'm gonna just put a bluish kind of color down And again, I've declared it and created it. I've initialized it here. And now I need to run through all those, run through the whole array. So I'm going to grab the same for loop I'm going through here I believe earlier I said something like we'll select one ball then go through all the other balls to see the intersects so that's we're in In order to do that, I think we're going to have to have two loops going inside of here. The first thing we might want to do is just move everything. We'll run the move function to just find out the current position of everything. Okay, here's where it gets a little bit interesting. We're going to write another for loop, and you see it's nested inside of here. I'll hit Command-T to clean it up. Now, we don't want to use i again because then you would have i inside of an i, so we'll pick a different variable. I'm going to use j. So we are going to go through, again, we're going to go through, pick one. And then after we've picked that one, let's also go through all the other ones and see if there is an intersection between all of the other ones in this case. So we're going to say we can use roughly the same for loop except for the variable name. But there is, you know. If I selected the very first one, index 0, I wouldn't want to run this function on the same version of that or the same instance. I wouldn't want to run it on ball array index 0 because those would be right on top of each other. They're the same. It would be redundant and you would get an intersection, I guess. So I'm going to say if i is equal to j, so in this case, i is zero here and then this is zero or if it's one and one or two and two um sort of like don't do anything which and i can just say like you know i don't even need to write anything but i'm just gonna say don't do anything um and then i'm gonna make another conditional that's just like otherwise if that's not true and then this is where we can um check for the intersection uh you know and maybe um draw things in here so What we're going to do is run the intersection function that we wrote. So that was, the function was called intersect. Let's just verify that. The function was intersect. It's a Boolean, right? So when we run it, we're going to get a Boolean returned to us, either true or false. So you can imagine this saying, if something is true, right? That's what will be returned to us. we're intersecting and this this function takes an object uh as an argument ball b so what we can do is take ball array index of j so again we're we're comparing it to all the other ones um okay so that let me just make sure okay that closes there close this if statement out there And if that happens, then let's highlight the ball. And actually, we should do it to both of them, both i and j that were highlighted. Okay, so what that will do, again, is think of these as different functions here. That will change the color to that. highlight color we still haven't displayed anything yet uh oh we might also want to i think we talked about having a stroke in between uh those circles so we'll see stroke stroke weight uh make it 0.5 lighter and we'll just draw a line here and so again the other thing i want to think about is just like we did here is how do you call data within objects right the way to do it is by using the dot syntax in this case so we're going to say ball array how do you get the x value of this ball array item well we'll use this index right i and then we'll do dot x and then how do you get the y value we'll we'll do that dot y so this is really powerful to be able to have these objects running Separately and then being able to pull the data and connect the data can really open up a lot of possibilities okay, so we have that set up we're gonna so this is just drawing a line in between those and Now oops now is the funky part when I want to make sure everything closes correctly if that happens that okay that closes there that looks good and then this for loop yeah that closes there okay um well all those things happen they're they're drawing i've drawn the line i've changed the highlight color but uh i still haven't drawn anything yet so let's make sure we go into uh let's see it's gonna it should be inside of here I'm going to need to call that ball array item and I'll use the display function. whoo so all this is commented out I think that should run except you know there's always something unexpected token looks like I have an extra I need a right print right parentheses somewhere okay so I finally I forgot a comma right here so one two three four expecting a semicolon whoops forgot to put a semicolon right there uh expecting in the frame so it looks like i had one too many of these let's just make sure that closes out and again command t clean it up now i'm seeing these things cascading and nesting like this uh i feel better about that there you go so now this is just 10 and you can see that once they intersect here There you go. That's the highlight. And now that I've set that all up, I can go and set this to 100. Right? And it's all working like this. I could change things like maybe I want the radius to be even larger. And so I could change those values in there as well. And you can see the randomness on the fill of these circles. or there's a tiny bit of randomness. So it looks like it's flickering a little bit. And you can see when there's multiple intersections, it will connect all those lines together. So it kind of creates an interesting network. But again, we're what we're really kind of practicing is taking maybe multiple types of functions and breaking it down and just, you know, practicing the things that we've been learning using objects, creating functions, starting to integrate things. Again, being able to call data from other objects is really powerful and important and using arrays to generate all these forms. We're going to work on using a timer to link together multiple algorithms or so different types of visualizers and this will give us like a way to introduce you know transitions and pacing. Also maybe think about ways that we can create generative visuals and variety within them. This is an example of a sketch that we'll work on using sine waves to drive a lot of the form making. To start off, I want to go ahead and show two ways to make a timer. One of them uses object-oriented programming, and the other one uses a mathematical function. which to me is a little bit easier but I'm going to show both and let you decide which one you want to use. So if we wanted to make an object called a timer right it would go something like this I'm declaring it up here actually what I should probably do is write the class a timer first I don't need those so what what goes into a timer We might have a save time which is when the timer started. And to reference that or you know against that we'll have in total time. So this would be like how long is the timer supposed to last or you know what's the duration of time. Inside of here we'll have the constructor again, so it's timer. What are we passing into it? We are passing this temp variable, totalTime, and then down here we are just saying totalTime is equal to tempTotalTime. Okay and then here we'll have our methods or our functions. One of them will be a start function and what we want to do is know when the timer started. So we're going to grab let's say what the time is and we can we can do that by running uh millis or milliseconds and this will give us what the time is in milliseconds and then we'll also have We'll write our own function that's a Boolean that is, maybe it's just, we'll just write it this way. It is finished. When is this finished? So this is an example that's taken from learning processing. Again, just to show you one way of doing it. And again, this is taking a little bit of time, but it does reinforce a lot of the concepts that we learned. So we're going to have a new int that's passed time. How much time has passed? So we'll take the millis value that we pulled from up here, and then we'll minus, or sorry, the current millis time. So this is time measured in milliseconds. And then we'll subtract save time from that. And then we're going to say, hey, if this passed time, is greater than the total time. So the total time that we feed into it, which is like, how long do we want it to be? A five-second timer or a 10-second timer? So the amount that is passed is greater than the total time that we passed into it. Then we'll return true. That means the timer is finished. And if that's not the case, we'll return false. So again, another use of a Boolean. And I think that we have finished it. Let me hit Command-T to make sure it closes. OK, that closes right there. It looks like we have an extra curly brace. That's fine. Yeah, so if we wanted to just run a timer, we could say something like, here's our void setup. Honestly, we don't even need a size. We so we've declared it up here and then we're gonna make a new timer. We're gonna initialize it with a new timer now because we're doing milliseconds we want to Say 5,000 for 5 seconds right or 10,000 for 10 seconds And then we will just run the function timer start and so that's what that does is it initializes the timer and then it starts it in the void setup and then we need to we'll we'll check this boolean if timer is finished again using the dot syntax okay because it's a function we need to put those two parentheses like that let me just close that out so if that if that happens then Let's, we'll do something like just change a random background, which is what learning processing uses. And then we'll just do a new timer start. So that the process will continue again. And I think that should work. Here we go. Oh, you know what, I should probably change the size. Fine. I will put size in here. And maybe I'll put a background. I just want to see that it's working. Okay, so it should be a black background. And then after five seconds, it should change to random. There we go, right there. And maybe just to make it go really fast, 500 milliseconds is a lot quicker. And so you see that the timer is going off and it's running this code right here. And then it's restarting it. Okay, so that's one way to do it. The other way that we might want to do it, I'm actually, yeah, let me take this code, and, you know, I'm going to take out all the timer stuff, and I'm going to do, like, this similar thing, except just do it with a different code. So I could use millis again, or I could use frame count as... sort of an indicator of how much time has passed. Now we can set a frame rate up here. So for example, if I set the frame rate to 30, that's one way of setting the time. And then what I could do is say, let me delete this. I'm going to write another statement and I'm going to say if frame count The thing I'm going to use is a modulo which gives me the remainder of a after division so For example if I if I wanted to turn every There every second because I know the frame rate is 30 frames per second given You know assuming that we are running at full speed full capacity When I'm I can get this frame count modulo 30 When this is equal to zero, that means when it's in multiples of 30, or basically after every 30 frames, it's going to change. Then I could run the code in the if statement. So let's see how that works. That's also another way to do it. I'm using frame rate here. I mean, I could have also used probably... let me see if i say if millis is again let me do a modulo of 500 equals zero i think this would basically do what this other code did oops so just to verify uh every oh i i think that the frame rate is actually affecting it so let me turn that off yeah you can see that's going uh looks like that's going faster so that is this that is using modulo and then this is using the timer let me just run them right next to each other if i'm able to okay there we go so you can kind of see there's you know there's they're similar um again i think you could grab this if you want to Practice using objects. You can use this code as your timer, or you could just do something like this with the modulo function. Okay. So I'm going to start by creating the wave-like functions, and then I'll create the timer and swap between the two. Basically, if you look at the example, there's one series of waves that's more that's kind of vertical moving vertically and the other series of ways it's moving horizontally so why don't i start with maybe just writing the wave class because i'm going to be you know making a lot of these and i was using arrays to kind of have many copies of those uh sort of rectangles that were moving in a wave-like fashion so yeah i'm going to just start from here class wave and Again, just kind of hopefully at this point you're starting to see a rhythm and it's starting to the repetition is starting to help Need an X and a Y I'm gonna use a sizer as well because I'm gonna be using Sine waves I need to you I need something to measure like stand in for angles. So I'm using theta I need an increment to that, you know, how quickly is that? angle changing So call it T increment int num this will be like the number of bars or forms that I have and I can throw a color in there as well. I think they'll also work so I've my variables and then I have the constructor And in the in there, I'm gonna have yeah those basically all those values that I create up there float temp X float temp Y float I know it's annoying, but we got to do it again. Temp theta, float temp T increment. Let's see. Maybe I'll just leave it like that. Int temp. num and I think color temp C. So make sure we use the right variable type. Okay, so all those things are in there. And then I just got to pass all those things to each other. So x is equal to temp x. y is equal to temp y. Sizer is equal to temp sizer. Theta is equal to temp theta. T increment is equal to temp T increment. I think I changed it. I want to make sure that matches temp num C is equal to temp C. Whew. All right. The last part is the functions, the methods. Yeah, functions. That's fine. Okay, so in here, I'm just gonna have one function, just called run. And this is, in this case, I guess I'll use a for loop here. And actually, that makes me think, yeah, well, this is going to be a series of rectangles. So I have i equals 0. While i is less than or equal to the number of things I have, i++. And the fill of this will be fill C, rectangle. Now it's X plus width divided by number. So these are the vertical waves that I'm doing. And I want to divide the width by the number of bars I have and then times I. So that will give me the number of bars. me like a slice of each. Y plus sizer times, I'm using sizer and to multiply against the sign. the sine function which will return between negative one and one so this will give me a noticeable value change the theta plus and i also want to offset this a little bit so i'll use i as an offset um so that they don't all start the same place if i just did theta then they would all start from the same area sizer uh let's see so let's see sizer is because they uh these are vertical waves let me think times 4. So these are a little bit longer. These are vertical. And we could also put in another sine wave to add some more oscillation. And if we multiply it by sizer again so that it's just a little bit bigger. I forgot a multiplication sign. Again, while I'm doing things like this, I might also put in some math. Sometimes I don't want it to be all the sizes. It might be too big, so maybe I'll do some fractions like divided by 4 times 3 or maybe divided by 2 or divided by something, just so it gives me different proportions. Let's see. So that's in the for loop. Let me close that for loop out. I'll hit Command-T to kind of clean this up. Okay, that's in the for loop. And then outside of this, I will want to increment data. So this is my wave class that I've made. And I'm just going to start with this and try to see if I can go from here. I'm making some global variables up here. Let me start writing the rest of this out. let's see i just want to i just want to test this and see if it's working so i have a way i'm going to make an array out of those waves and i'll call that array waves is equal to a new wave that's the data type let's say it's 10 right now and so this is declare declare the waves and down here i'll have my size and i i want to initialize the arrays for i'll make another for loop Again, we'll use.length in case I change the length of the array. And here is where we initialize the values. I'm going to set a color here. Now I'm going to use the map function again because I wanted a gradient in my waves. And again, the way the map function works, it's what's the value that's being changed, what's the current minimum and maximum, and then what's the new map minimum. and maximums. So waves.length, that's the minimum zero, and this is the waves.length. I guess technically it's minus one because we never go all the way up here, but this will be good enough. Zero to 255, and then let's map. Yeah, like maybe we'll map something. We can just copy and paste this, but if we want to just change the range, Maybe instead of going to 155, it just goes to 150. And let's see. The last value, maybe it's just the constant, 200. Okay. Inside of here, maybe I'm going to say it's 30 waves. I'll grab the float sizer is equal to width divided by num in this case. And here we'll set it up. So I told it to take an X and a Y. And X so this is going to start in the left hand side and then there is a for loop inside of Inside inside of this run right so it's going to go all the way to the the edge plus I Times 40 so this is a way for us to kind of move move vertically where this is going to be, sizer times 2 for the temp or for the theta. I think that's what that other one is, temp theta. One thing you can do is if you multiply it by, you know, you could take I and then if you multiply by pi that's, you know, 180 degrees and you'll get certain kind of a relationship. or doing fractions of that, try doing 16 or 8 or 4, 6 or 3. Those also give you some interesting results. I'm going to do pi divided by 8. And the increment is pretty small, 0.05. We're going to feed in the number, which is up here, num. And the color C that we just fed in. As far as void draw goes, let's have a dark background. Turn off the stroke and let's try running this section. How do we run it? We'll do waves index i dot run. All right, that's sort of losing it there, but yeah, just run. And I think, well, let's see. Did we get it right? Not quite. Messed up on something. I think we have an extra brace. Okay. Yeah, so you can see that we have a series of waves going like this. And if I, let me, for the purpose of seeing what we actually did, let's just say we only had one. What is one of these? look like it looks like this going across but we have 10 or you could what does it look like if we have 20 you know what does it look like if we have three Okay, so this we're gonna take this idea and let's make let's make another class that will We'll call H wave so this will be like the horizontal version of that And I think we can take most of Luckily, I think we can take copy and paste most of this and just change some things which will save Some a lot of time. Okay, so we're gonna call this This H wave right here. So luckily I think we can change just most of the where it says wave will change the H wave and then we'll change the way that this is moving. So instead of instead of the sine waves acting on the Y axis or on the y values up and down we'll we'll take this part instead of size here we'll use width divided by two so it's going to be a pretty big swing theta plus i which is something that we did right right here. We don't need this to happen anymore along here, but maybe we'll say width divided by num times i. So we're using, it's a little bit different. It's not like exactly a translation, but we're just playing around with this. And again, we want the variation to happen horizontally in this along here rather than along here. So maybe we even do things like cut this out. Okay, so instead of this, maybe the size there times 10 plus sine of theta plus i. Yeah, let's try something like this and maybe we'll make it really skinny. Sides are divided by 10. Luckily, I think that will do most of the work. So why don't we just go in and try to implement the same sort of thing here. Let's put everything back to 10 so that we can use the same length. And all we need to do is say hWaves. Now we're going to call these hWaves. Now these need separate names because they're different objects. Okay, so we'll do that. And because they're using the same... Okay. Well, if they were using the same length, we could probably put all the stuff inside of here. Maybe just the future proof it will change it out so that they're actually separate. Again, I can actually use the same variables here because of the scope of these variables these are this I variable is restricted to this area and so is this so I don't need to do I and J here because they're they're not nested inside of each other and Maybe I'll do H waves that H waves that length like this and You know, the nice thing here is actually I could do things like change the ways that some of these things are being handled. Actually, here I might want to use height divided by number instead of sizer since we're going up and down. Yeah, and actually, I do want to change these around a little bit. So these should be H wave again. Maybe it starts at width divided by 2, kind of like, I guess I didn't do it up there, but maybe, like, I'm just changing the code so it starts in this, maybe this center horizontally. Okay. I think something like this might work. Or, you know, even something like, do you want the oscillation to be faster or slower here? You could, by changing this to 0.01, you could make these slower. So we've declared it here, and... Why don't we just use the same, we'll break it apart for right now. Like I said, we'll take that and then we'll do hwaves.i run. Now, okay, I'm going to turn this off for right now because I just want to see the hwaves and see if that worked. Okay, I messed up. H waves. Let's see. Found an extra character. Oh, I forgot to close that out. Command T. Okay, that looks good. So here's, yeah, here's my H wave. And you can see I made them skinnier. They're maybe going a little bit slower. As I said, I could, or here I can make it go faster by increasing the T increment. It's going way faster. Or I think. So some of this stuff is written into the code here, like size divided by 10. Maybe if it's size divided by 2, it will be less skinny. Yeah, there you go. So we have these moving. Yeah, and so what I'm going to do is I'm going to use the modulo function. And let's see how I might want to do this. I mean, I could set up something simple like this, like if frame count. modulo 100s. So this is when we divide the frame count by 100, what's the remainder? If it's exactly 100 or 200 it's going to be 0 and then it then it starts to go up. So maybe I'll say if it's less than 50 Run this code else So you're seeing that I'm starting to frame These conditional statements around other loop statements that I've written okay, so if this is basically saying if it's less the module is less than 50 then run this otherwise run the other one so it's either gonna be vertical or horizontal waves so it's going to that it switches switches and this is a way for me to just have a timer that that kind of moves around And the other thing that I might want to do is have situations where maybe I change. I've initialized it up here, but I also want to let you know that you can feed it new variables or new values as you're going through. So one other thing, maybe I have some conditions. Let's do another frame count thing. If frame count, I'm going to say modulo 200 is equal to 0, we can go in and maybe we'll just change the number of... Now I could use num here. I guess it would overwrite it, but I'm just going to write n. Maybe we change the number of bars. So now the number of bars has to be an integer, right? it can't be a point something so we'll run the random function but then we'll we'll wrap it in an integer function that will transform it so maybe it's between 10 and 60 and then what we'll do is we'll let's do on the H waves let's let's go into all the H waves again and we will Go to the H waves and we'll access the number Variable the data and then we'll set it to n right so this not this new random variable will be passed into it Into all the instances and that will and maybe we'll say maybe at the same time because sizer was also kind of if you look up here sizer was kind of affected by the number maybe we'll also So change that here, size is equal to width divided by n. So that it just, you know, resets things. Okay, so this is, that's the H-wave. So the H-waves are that size. You saw them, and maybe when they get to 200, they will switch, hopefully. Think they changed there and the or the you know the other thing you might want to do is you could you could test it by? Having it like print the line, and maybe it says changed Because I think it's changing, but maybe we're not for some reason we're not seeing it It will let us know when frame count, there you go, it changed there. And you can see there that one, it changed much smaller. That one's bigger. Yeah, and if you wanted to, you know, maybe this has to be much smaller. Let's, I'm just monitoring this and it says it changed. So look, it changed a little bit. So it's changing sizes and I'll share some sample code that has the original version that I showed, but hopefully this is enough to get you going with your own visualizer and using timers and thinking about algorithms in a really fluid type of way.

We just went over arrays, which hopefully unlocked some creative possibilities, really powerful. We've also been thinking about control flow, which... relates to conditional statements if if else or else if You know looking at booleans and also loops so those things can help us you know determine how the program runs and so we should be getting more familiar with that and Lastly we're also kind of pushing this idea of organization using functions and objects or classes thinking about Rewriting our code making it modular and all those things are important As we move into more complex programs, having an understanding of these things is really important.

So we're going to focus a little bit on algorithms, which is a general concept. It's basically a procedure or sequence of steps required to perform a task. And some of these algorithms can be really simple. We've done some early on, and then they get to be really complex. And I think as you move forward into the...

complex algorithms, it's helpful to maybe have a process and an understanding of how to kind of organize your thoughts. So here is a list of steps to kind of break down your ideas or to, I guess, start the process. The first one is to have an idea maybe and to just state it out loud.

From there, we might break it into different segments like looking at pseudocode so just this is writing the steps of how to do it but not using you know the programming syntax yet just thinking about what are the different steps then we want to convert it into into actual code and from there we'll do some reorganization using objects classes functions you know trying to get get things more modular and you know thinking about how to connect things and the last part is the integration of like getting you know maybe several different algorithms or you know classes functions and getting them to all talk to each other to behave you know this is cleaning up your code debugging it so it's kind of a you know that's the last important step in the process I'm gonna do an example and here is an example of a sketch that I'm going to write and you can see what is happening is There's a series of bouncing balls moving across the screen and when they intersect they change color and there's looks like there's also a line that's drawn. So if we're going through the steps this is just a quick outline. We have this idea the bouncing balls change color when they intersect and a line connects the centers. The pseudocode is well we need to draw these forms and move them on the screen and we'll make them bounce if they hit the edges.

This is similar to what we've done. in the past. Also, if they intersect, change the fill color and connect the centers with the line. So we're just writing it in natural human language. And the code I said is translating the pseudocode, the actual code, we're going to do that together.

But then part of this too is as you start to write this, sometimes you'll write it in the draw in separate functions, and then you'll start to move it out into classes. I mean, sometimes if you have a good understanding or a good comfort level with those things, you might start to break them out a little bit earlier and to think ahead. But certainly, I think if you are just writing the code and thinking about it in the draw, that's also a good place to be.

And then the last part is integrating all the code so that it's all talking to each other. If you have different functions, how can you call those? functions. If you have data, how do you reference the data across?

Because we're going to have to look at the x and y position and the size of these circles, right? And we have to access that in order to make this whole thing run. So let's start coding this. So let's go through the steps of building this out from code.

Again, maybe we'll start just by stating what we're going to do. I'm going to write it all as a comment and you know it'll be kind of in pseudocode but we're we're trying to figure out how to approach this problem. We're going to create a series of balls and then we'll check if the balls intersect. you know the balls intersect we'll change the color so we'll highlight the color and draw a line in between centers I'll just put that on the next line right here.

Okay, so this is a general plan for what we'll be doing. I might want to break this down into smaller sections too. So when I talk about these balls intersecting what I mean is if I was thinking about it kind of in, I guess in pseudo code, or I'm starting to think about it in technical terms, if we look at the, let's see, the distance between two circles, one way to test if they're interspersed, intersecting is if we look at the radius of each circle, here I've kind of drawn it. These circles are intersecting when the distance between the centers is less than the distance between the two radii. So in a case like this, you could say that these circles are not intersecting because if you took the distance of their two radii on a...

just plop them together and you took the distance between the uh let me just show you this this the center the two centers you can see that the radii in this case that's quite small um and i hope i'm spelling radii correctly but maybe not You can see that the distance between the centers is larger than the sum of the radii. Now if I took this same thing and maybe I move these so that they're intersecting. Let's take these two things again.

These are the radii. I probably could have just... Copy that other bit. That's the radii and now the distance between the centers.

I'm just drawing a Line right there Whoops. I think it was not parallel. So let me fix it and Let me just do that.

Okay, so now you can see the distance between the centers is Smaller than the sum of the radii and this is intersecting. So this is what we're gonna do This is the kind of math that we're gonna do to see if they're actually intersecting. I think we can start Maybe writing this out.

Well We'll make another ball class again. And we'll just start going from here. I'm gonna, again, start with class ball, baller. circles or bouncing ball, whatever you want to call it.

I'm going to put some data in here. So what I want to do is actually start with flow R, which is actually going to be the radius. I know I've used diameter in the past, but because I'm thinking ahead about the distance in between the two circles, now the radius is that line from the center out to the edge of the circle.

I'll be calculating that distance. So I'm going to use radius. here and then for size uh or the diameter i'll just do r times two that's going to give me the the size of the circle um i'm gonna need x and y you know i'm gonna just uh start this off really randomly so i'm gonna throw all these values in at this point um i could write it to accept arguments or parameters um but just to keep it simple maybe i'll i'll set it up like this uh so we in the past with a bouncing ball we we've used speed but because we have bouncing in two directions we're going to need an x speed a horizontal speed and a y speed so let me do a similar thing where i'm setting up some numbers here and i'm making it the range from negative to positive so it could be left to right or up or down. Okay, and then maybe we'll throw a color in here as well. Color C is equal to color.

I guess we'll start with color 150. Now, again, if you give color just two numbers, one will be black and white value, and the other will be opacity. So let's move on to the constructor. Now I'm going to make the constructor pretty simple here. I'm only going to pass it the radius because actually all the other stuff gets passed in here. Like I said, I could rewrite this to accept all these numbers or these values.

But just to maybe make it a little bit simpler, here I'm only passing one variable, one value down to here. Let's go and start to write our methods. Oh, I can't write it correctly today.

We're going to start with avoid move. So we will break this down a little bit more. Now in the past we've had x or y plus equal speed because we're doing two-direction.

two directions. We need to have it happen on the x and the y. So increment x, y plus equals, whoops, I should say x speed and y speed here. So let's increment the y.

Okay, that'll give us the direction. But now we need those kind of bouncing conditional statements. And again, we're having this happen on both horizontal So I'll write check horizontal edges. Oops, and I'm just going to check the vertical edges. So I'm maybe starting to flesh out what I'm trying to do before actually writing the code.

For the horizontal edges, we'll say x is... If x is greater than the width, or x is less than zero, that would be the two edges. This is the right edge, and this is the left edge. So what happens if that occurs?

Well, we'll do this thing where we'll say x speed. times equals negative 1 to change the direction of that bounce. And then we're going to check the vertical edges. So this will be y is greater than height. That's the bottom edge.

Or, oh, the y is less than 0. So that's the upper edge. And then we'll say y speed times equals negative 1. Okay, so we're changing the direction of that. We might have another function.

So this is the move function all the way up until there. Maybe we have another function that is highlight the color, right? We talked about what would happen if we change the color.

So maybe we'll call this one highlight. And here, you know, we'll keep it simple. All we're going to do is change the color.

we already have this variable c up here so color c is equal to color and i'm gonna throw in a color uh maybe one nine two two twenty one one ninety and one twenty uh and a little bit of opacity so i'll do that 150 um I know ahead of time I kind of want a little bit of randomness, so I'm going to just throw in a tiny bit of randomness so that each time it runs, maybe on the red and the blue values, it adds just a tiny bit of randomness so it looks maybe more organic. or just more or less artificial. Okay, so I've moved it. Oh, I haven't done the display yet here.

So we haven't even drawn anything yet. So we can call this, we can write this function out. So let's turn off the stroke for this. We just want the fill to be C. So, you know, if the color is, if the highlight function is not run, then this color will pull down all the way down to here.

If highlight. is run uh then the color will be changed uh and then we're gonna write our ellipse x x y r times two i said it's like the radius times two for the size r times two uh and let's see i have another i'm looking at some sample code and i actually have for some reason i have some other uh I have resetting the color here. So it looks like I actually used a different color.

Reset the color. And so actually, the value up here that I used is probably not going to be correct. I think the value I ended up using was closer to this, which is kind of looks like...

greenish, bluish kind of color. So just so that I'm not writing weird things in there, I'm just gonna change that. We talked about calculating or figuring out if there is an intersection. So I'm actually going to write a function or a method in this case that's a Boolean. Again, to write a function, you write the return type.

A Boolean is either going to give me a true or false. And what I'm going to do is if the distance between the centers of the two circles is less than the distance of the radii, then we'll make... sure that that intersect alerts us or is true. What we're going to do is pass...

We can actually pass objects into it. And I should say ahead of time what I'm probably going to do is the distance. If I'm thinking about pseudocode, we kind of want to go through each...

We'll select one. Select one ball and then go through all the other balls to see if it's highlight, if it intersects. This is kind of thinking through how we're going to do that. Now, to do this, we'll probably use loops and select one and then go through all the other balls. Now, imagine we might start with a smaller number, but imagine that we want to write the code so that we could throw, like, 100 as the number of balls or 200, right?

We want it to be adaptable. So let me go back into the Boolean and write this out. The way... to write this out is let's take let's find the distance between between these the centers and another ball so to go back what we're going to do is we when we run this this or when we create this object where we're used we've selected one of these and then we'll pass in another ball and run this function and see if it intersects.

So to find the distance, we'll use the distance function. You give it an X and Y value and then another X and Y value and it figures out the distance between those two points. So the distance we'll start with is X and Y. That's the center point of this circle or this object. And then what we're feeding into it is. another ball in this case ball b and we want to figure out hey what's the x and y value of that ball so what we can do is use the name of the object use a period and then the name of the variable that we want to or the data that we want to collect so b dot x and b dot y that's going to allow us to feed this in this ball b as a parameter and then run this calculation on it So I'm gonna just say calculate distance.

I also want to say objects can be passed into functions. Okay, semicolon at the end. Let's see if that goes.

So now let's compare the distance. And what I want to say is if the distance... Now we're going to take the two radii of the object that we're working in right now, which is the current one. and the one we're comparing it to, which is ball B. And we're going to say if that distance, we've kind of created that variable up here.

If the distance is less than R plus B. dot r so we're actually grabbing the radius from the other one so we're finding out this first uh this statement up here is looking at the center points and figuring out what's the distance between the center points and then we're comparing that distance to the uh the disc you know the distance of the radii this or the sum of the radii to see if that uh if that distance is smaller and if it's smaller the centers are closer than the distance between the radii or the sum of the radii, then that means they're intersecting. Okay, so let's set up a situation.

Now, we said that this is a Boolean, and it wants to return a Boolean, right? So we'll say if that's the case, then the Boolean return is true. Else, well, the return is false.

So we'll use that to... our advantage let's see that closes this boolean statement so this is a function to determine if two circles intersect And that, I think that will get us going. Again, we need to go now into our code, into our void set and void draw and kind of start to integrate these things.

We have these different algorithms. Let's start by just setting it up. So we have void set up here. Size, let's do 960 by 540. What we're going to do here is we should also kind of set this up as an array. We're going to have a lot of these balls.

So ball, again, we'll do this square brackets. We'll call ball array again is equal to new. And then what's the type? It's ball again.

Let's start with 10 just to make sure we can see things and go from there. Now we want to initialize things here. initialize the objects so we're gonna do for and we'll use a for loop int equals zero again arrays they start at index zero so that this is good for us ball are we're gonna write ball array dot length so that this will auto adjust if we ever change it I plus plus And then we'll feed in the values ball array. we'll say i so that it adjusts again is equal to new ball now with the the way that we wrote this the constructor it only takes one value so and it takes a float so uh let's just feed in a random variable again i guess i i guess i could have just uh set it up randomly here but you know this will give us later on if we want to if we want to put an i or i times 10 or some other value you know that might be helpful um and again refactoring or just changing your code to make it better for your situation is uh it's something you should do as you get going so let's start the background uh i'm gonna just put a bluish kind of color down And again, I've declared it and created it.

I've initialized it here. And now I need to run through all those, run through the whole array. So I'm going to grab the same for loop I'm going through here I believe earlier I said something like we'll select one ball then go through all the other balls to see the intersects so that's we're in In order to do that, I think we're going to have to have two loops going inside of here.

The first thing we might want to do is just move everything. We'll run the move function to just find out the current position of everything. Okay, here's where it gets a little bit interesting.

We're going to write another for loop, and you see it's nested inside of here. I'll hit Command-T to clean it up. Now, we don't want to use i again because then you would have i inside of an i, so we'll pick a different variable. I'm going to use j.

So we are going to go through, again, we're going to go through, pick one. And then after we've picked that one, let's also go through all the other ones and see if there is an intersection between all of the other ones in this case. So we're going to say we can use roughly the same for loop except for the variable name.

But there is, you know. If I selected the very first one, index 0, I wouldn't want to run this function on the same version of that or the same instance. I wouldn't want to run it on ball array index 0 because those would be right on top of each other.

They're the same. It would be redundant and you would get an intersection, I guess. So I'm going to say if i is equal to j, so in this case, i is zero here and then this is zero or if it's one and one or two and two um sort of like don't do anything which and i can just say like you know i don't even need to write anything but i'm just gonna say don't do anything um and then i'm gonna make another conditional that's just like otherwise if that's not true and then this is where we can um check for the intersection uh you know and maybe um draw things in here so What we're going to do is run the intersection function that we wrote.

So that was, the function was called intersect. Let's just verify that. The function was intersect. It's a Boolean, right?

So when we run it, we're going to get a Boolean returned to us, either true or false. So you can imagine this saying, if something is true, right? That's what will be returned to us. we're intersecting and this this function takes an object uh as an argument ball b so what we can do is take ball array index of j so again we're we're comparing it to all the other ones um okay so that let me just make sure okay that closes there close this if statement out there And if that happens, then let's highlight the ball.

And actually, we should do it to both of them, both i and j that were highlighted. Okay, so what that will do, again, is think of these as different functions here. That will change the color to that.

highlight color we still haven't displayed anything yet uh oh we might also want to i think we talked about having a stroke in between uh those circles so we'll see stroke stroke weight uh make it 0.5 lighter and we'll just draw a line here and so again the other thing i want to think about is just like we did here is how do you call data within objects right the way to do it is by using the dot syntax in this case so we're going to say ball array how do you get the x value of this ball array item well we'll use this index right i and then we'll do dot x and then how do you get the y value we'll we'll do that dot y so this is really powerful to be able to have these objects running Separately and then being able to pull the data and connect the data can really open up a lot of possibilities okay, so we have that set up we're gonna so this is just drawing a line in between those and Now oops now is the funky part when I want to make sure everything closes correctly if that happens that okay that closes there that looks good and then this for loop yeah that closes there okay um well all those things happen they're they're drawing i've drawn the line i've changed the highlight color but uh i still haven't drawn anything yet so let's make sure we go into uh let's see it's gonna it should be inside of here I'm going to need to call that ball array item and I'll use the display function. whoo so all this is commented out I think that should run except you know there's always something unexpected token looks like I have an extra I need a right print right parentheses somewhere okay so I finally I forgot a comma right here so one two three four expecting a semicolon whoops forgot to put a semicolon right there uh expecting in the frame so it looks like i had one too many of these let's just make sure that closes out and again command t clean it up now i'm seeing these things cascading and nesting like this uh i feel better about that there you go so now this is just 10 and you can see that once they intersect here There you go. That's the highlight.

And now that I've set that all up, I can go and set this to 100. Right? And it's all working like this. I could change things like maybe I want the radius to be even larger.

And so I could change those values in there as well. And you can see the randomness on the fill of these circles. or there's a tiny bit of randomness. So it looks like it's flickering a little bit. And you can see when there's multiple intersections, it will connect all those lines together.

So it kind of creates an interesting network. But again, we're what we're really kind of practicing is taking maybe multiple types of functions and breaking it down and just, you know, practicing the things that we've been learning using objects, creating functions, starting to integrate things. Again, being able to call data from other objects is really powerful and important and using arrays to generate all these forms. We're going to work on using a timer to link together multiple algorithms or so different types of visualizers and this will give us like a way to introduce you know transitions and pacing. Also maybe think about ways that we can create generative visuals and variety within them.

This is an example of a sketch that we'll work on using sine waves to drive a lot of the form making. To start off, I want to go ahead and show two ways to make a timer. One of them uses object-oriented programming, and the other one uses a mathematical function.

which to me is a little bit easier but I'm going to show both and let you decide which one you want to use. So if we wanted to make an object called a timer right it would go something like this I'm declaring it up here actually what I should probably do is write the class a timer first I don't need those so what what goes into a timer We might have a save time which is when the timer started. And to reference that or you know against that we'll have in total time. So this would be like how long is the timer supposed to last or you know what's the duration of time.

Inside of here we'll have the constructor again, so it's timer. What are we passing into it? We are passing this temp variable, totalTime, and then down here we are just saying totalTime is equal to tempTotalTime.

Okay and then here we'll have our methods or our functions. One of them will be a start function and what we want to do is know when the timer started. So we're going to grab let's say what the time is and we can we can do that by running uh millis or milliseconds and this will give us what the time is in milliseconds and then we'll also have We'll write our own function that's a Boolean that is, maybe it's just, we'll just write it this way.

It is finished. When is this finished? So this is an example that's taken from learning processing. Again, just to show you one way of doing it.

And again, this is taking a little bit of time, but it does reinforce a lot of the concepts that we learned. So we're going to have a new int that's passed time. How much time has passed? So we'll take the millis value that we pulled from up here, and then we'll minus, or sorry, the current millis time.

So this is time measured in milliseconds. And then we'll subtract save time from that. And then we're going to say, hey, if this passed time, is greater than the total time.

So the total time that we feed into it, which is like, how long do we want it to be? A five-second timer or a 10-second timer? So the amount that is passed is greater than the total time that we passed into it.

Then we'll return true. That means the timer is finished. And if that's not the case, we'll return false.

So again, another use of a Boolean. And I think that we have finished it. Let me hit Command-T to make sure it closes. OK, that closes right there. It looks like we have an extra curly brace.

That's fine. Yeah, so if we wanted to just run a timer, we could say something like, here's our void setup. Honestly, we don't even need a size.

We so we've declared it up here and then we're gonna make a new timer. We're gonna initialize it with a new timer now because we're doing milliseconds we want to Say 5,000 for 5 seconds right or 10,000 for 10 seconds And then we will just run the function timer start and so that's what that does is it initializes the timer and then it starts it in the void setup and then we need to we'll we'll check this boolean if timer is finished again using the dot syntax okay because it's a function we need to put those two parentheses like that let me just close that out so if that if that happens then Let's, we'll do something like just change a random background, which is what learning processing uses. And then we'll just do a new timer start. So that the process will continue again.

And I think that should work. Here we go. Oh, you know what, I should probably change the size.

Fine. I will put size in here. And maybe I'll put a background.

I just want to see that it's working. Okay, so it should be a black background. And then after five seconds, it should change to random. There we go, right there.

And maybe just to make it go really fast, 500 milliseconds is a lot quicker. And so you see that the timer is going off and it's running this code right here. And then it's restarting it. Okay, so that's one way to do it. The other way that we might want to do it, I'm actually, yeah, let me take this code, and, you know, I'm going to take out all the timer stuff, and I'm going to do, like, this similar thing, except just do it with a different code.

So I could use millis again, or I could use frame count as... sort of an indicator of how much time has passed. Now we can set a frame rate up here.

So for example, if I set the frame rate to 30, that's one way of setting the time. And then what I could do is say, let me delete this. I'm going to write another statement and I'm going to say if frame count The thing I'm going to use is a modulo which gives me the remainder of a after division so For example if I if I wanted to turn every There every second because I know the frame rate is 30 frames per second given You know assuming that we are running at full speed full capacity When I'm I can get this frame count modulo 30 When this is equal to zero, that means when it's in multiples of 30, or basically after every 30 frames, it's going to change.

Then I could run the code in the if statement. So let's see how that works. That's also another way to do it.

I'm using frame rate here. I mean, I could have also used probably... let me see if i say if millis is again let me do a modulo of 500 equals zero i think this would basically do what this other code did oops so just to verify uh every oh i i think that the frame rate is actually affecting it so let me turn that off yeah you can see that's going uh looks like that's going faster so that is this that is using modulo and then this is using the timer let me just run them right next to each other if i'm able to okay there we go so you can kind of see there's you know there's they're similar um again i think you could grab this if you want to Practice using objects.

You can use this code as your timer, or you could just do something like this with the modulo function. Okay. So I'm going to start by creating the wave-like functions, and then I'll create the timer and swap between the two.

Basically, if you look at the example, there's one series of waves that's more that's kind of vertical moving vertically and the other series of ways it's moving horizontally so why don't i start with maybe just writing the wave class because i'm going to be you know making a lot of these and i was using arrays to kind of have many copies of those uh sort of rectangles that were moving in a wave-like fashion so yeah i'm going to just start from here class wave and Again, just kind of hopefully at this point you're starting to see a rhythm and it's starting to the repetition is starting to help Need an X and a Y I'm gonna use a sizer as well because I'm gonna be using Sine waves I need to you I need something to measure like stand in for angles. So I'm using theta I need an increment to that, you know, how quickly is that? angle changing So call it T increment int num this will be like the number of bars or forms that I have and I can throw a color in there as well.

I think they'll also work so I've my variables and then I have the constructor And in the in there, I'm gonna have yeah those basically all those values that I create up there float temp X float temp Y float I know it's annoying, but we got to do it again. Temp theta, float temp T increment. Let's see.

Maybe I'll just leave it like that. Int temp. num and I think color temp C. So make sure we use the right variable type. Okay, so all those things are in there.

And then I just got to pass all those things to each other. So x is equal to temp x. y is equal to temp y. Sizer is equal to temp sizer.

Theta is equal to temp theta. T increment is equal to temp T increment. I think I changed it.

I want to make sure that matches temp num C is equal to temp C. Whew. All right. The last part is the functions, the methods. Yeah, functions.

That's fine. Okay, so in here, I'm just gonna have one function, just called run. And this is, in this case, I guess I'll use a for loop here. And actually, that makes me think, yeah, well, this is going to be a series of rectangles.

So I have i equals 0. While i is less than or equal to the number of things I have, i++. And the fill of this will be fill C, rectangle. Now it's X plus width divided by number.

So these are the vertical waves that I'm doing. And I want to divide the width by the number of bars I have and then times I. So that will give me the number of bars. me like a slice of each. Y plus sizer times, I'm using sizer and to multiply against the sign.

the sine function which will return between negative one and one so this will give me a noticeable value change the theta plus and i also want to offset this a little bit so i'll use i as an offset um so that they don't all start the same place if i just did theta then they would all start from the same area sizer uh let's see so let's see sizer is because they uh these are vertical waves let me think times 4. So these are a little bit longer. These are vertical. And we could also put in another sine wave to add some more oscillation. And if we multiply it by sizer again so that it's just a little bit bigger. I forgot a multiplication sign.

Again, while I'm doing things like this, I might also put in some math. Sometimes I don't want it to be all the sizes. It might be too big, so maybe I'll do some fractions like divided by 4 times 3 or maybe divided by 2 or divided by something, just so it gives me different proportions.

Let's see. So that's in the for loop. Let me close that for loop out. I'll hit Command-T to kind of clean this up. Okay, that's in the for loop.

And then outside of this, I will want to increment data. So this is my wave class that I've made. And I'm just going to start with this and try to see if I can go from here. I'm making some global variables up here. Let me start writing the rest of this out.

let's see i just want to i just want to test this and see if it's working so i have a way i'm going to make an array out of those waves and i'll call that array waves is equal to a new wave that's the data type let's say it's 10 right now and so this is declare declare the waves and down here i'll have my size and i i want to initialize the arrays for i'll make another for loop Again, we'll use.length in case I change the length of the array. And here is where we initialize the values. I'm going to set a color here. Now I'm going to use the map function again because I wanted a gradient in my waves. And again, the way the map function works, it's what's the value that's being changed, what's the current minimum and maximum, and then what's the new map minimum.

and maximums. So waves.length, that's the minimum zero, and this is the waves.length. I guess technically it's minus one because we never go all the way up here, but this will be good enough. Zero to 255, and then let's map.

Yeah, like maybe we'll map something. We can just copy and paste this, but if we want to just change the range, Maybe instead of going to 155, it just goes to 150. And let's see. The last value, maybe it's just the constant, 200. Okay. Inside of here, maybe I'm going to say it's 30 waves.

I'll grab the float sizer is equal to width divided by num in this case. And here we'll set it up. So I told it to take an X and a Y. And X so this is going to start in the left hand side and then there is a for loop inside of Inside inside of this run right so it's going to go all the way to the the edge plus I Times 40 so this is a way for us to kind of move move vertically where this is going to be, sizer times 2 for the temp or for the theta.

I think that's what that other one is, temp theta. One thing you can do is if you multiply it by, you know, you could take I and then if you multiply by pi that's, you know, 180 degrees and you'll get certain kind of a relationship. or doing fractions of that, try doing 16 or 8 or 4, 6 or 3. Those also give you some interesting results. I'm going to do pi divided by 8. And the increment is pretty small, 0.05.

We're going to feed in the number, which is up here, num. And the color C that we just fed in. As far as void draw goes, let's have a dark background. Turn off the stroke and let's try running this section. How do we run it?

We'll do waves index i dot run. All right, that's sort of losing it there, but yeah, just run. And I think, well, let's see. Did we get it right? Not quite.

Messed up on something. I think we have an extra brace. Okay.

Yeah, so you can see that we have a series of waves going like this. And if I, let me, for the purpose of seeing what we actually did, let's just say we only had one. What is one of these? look like it looks like this going across but we have 10 or you could what does it look like if we have 20 you know what does it look like if we have three Okay, so this we're gonna take this idea and let's make let's make another class that will We'll call H wave so this will be like the horizontal version of that And I think we can take most of Luckily, I think we can take copy and paste most of this and just change some things which will save Some a lot of time.

Okay, so we're gonna call this This H wave right here. So luckily I think we can change just most of the where it says wave will change the H wave and then we'll change the way that this is moving. So instead of instead of the sine waves acting on the Y axis or on the y values up and down we'll we'll take this part instead of size here we'll use width divided by two so it's going to be a pretty big swing theta plus i which is something that we did right right here.

We don't need this to happen anymore along here, but maybe we'll say width divided by num times i. So we're using, it's a little bit different. It's not like exactly a translation, but we're just playing around with this.

And again, we want the variation to happen horizontally in this along here rather than along here. So maybe we even do things like cut this out. Okay, so instead of this, maybe the size there times 10 plus sine of theta plus i. Yeah, let's try something like this and maybe we'll make it really skinny.

Sides are divided by 10. Luckily, I think that will do most of the work. So why don't we just go in and try to implement the same sort of thing here. Let's put everything back to 10 so that we can use the same length. And all we need to do is say hWaves.

Now we're going to call these hWaves. Now these need separate names because they're different objects. Okay, so we'll do that.

And because they're using the same... Okay. Well, if they were using the same length, we could probably put all the stuff inside of here. Maybe just the future proof it will change it out so that they're actually separate. Again, I can actually use the same variables here because of the scope of these variables these are this I variable is restricted to this area and so is this so I don't need to do I and J here because they're they're not nested inside of each other and Maybe I'll do H waves that H waves that length like this and You know, the nice thing here is actually I could do things like change the ways that some of these things are being handled.

Actually, here I might want to use height divided by number instead of sizer since we're going up and down. Yeah, and actually, I do want to change these around a little bit. So these should be H wave again.

Maybe it starts at width divided by 2, kind of like, I guess I didn't do it up there, but maybe, like, I'm just changing the code so it starts in this, maybe this center horizontally. Okay. I think something like this might work. Or, you know, even something like, do you want the oscillation to be faster or slower here? You could, by changing this to 0.01, you could make these slower.

So we've declared it here, and... Why don't we just use the same, we'll break it apart for right now. Like I said, we'll take that and then we'll do hwaves.i run. Now, okay, I'm going to turn this off for right now because I just want to see the hwaves and see if that worked.

Okay, I messed up. H waves. Let's see. Found an extra character.

Oh, I forgot to close that out. Command T. Okay, that looks good. So here's, yeah, here's my H wave.

And you can see I made them skinnier. They're maybe going a little bit slower. As I said, I could, or here I can make it go faster by increasing the T increment. It's going way faster.

Or I think. So some of this stuff is written into the code here, like size divided by 10. Maybe if it's size divided by 2, it will be less skinny. Yeah, there you go. So we have these moving.

Yeah, and so what I'm going to do is I'm going to use the modulo function. And let's see how I might want to do this. I mean, I could set up something simple like this, like if frame count.

modulo 100s. So this is when we divide the frame count by 100, what's the remainder? If it's exactly 100 or 200 it's going to be 0 and then it then it starts to go up.

So maybe I'll say if it's less than 50 Run this code else So you're seeing that I'm starting to frame These conditional statements around other loop statements that I've written okay, so if this is basically saying if it's less the module is less than 50 then run this otherwise run the other one so it's either gonna be vertical or horizontal waves so it's going to that it switches switches and this is a way for me to just have a timer that that kind of moves around And the other thing that I might want to do is have situations where maybe I change. I've initialized it up here, but I also want to let you know that you can feed it new variables or new values as you're going through. So one other thing, maybe I have some conditions. Let's do another frame count thing.

If frame count, I'm going to say modulo 200 is equal to 0, we can go in and maybe we'll just change the number of... Now I could use num here. I guess it would overwrite it, but I'm just going to write n.

Maybe we change the number of bars. So now the number of bars has to be an integer, right? it can't be a point something so we'll run the random function but then we'll we'll wrap it in an integer function that will transform it so maybe it's between 10 and 60 and then what we'll do is we'll let's do on the H waves let's let's go into all the H waves again and we will Go to the H waves and we'll access the number Variable the data and then we'll set it to n right so this not this new random variable will be passed into it Into all the instances and that will and maybe we'll say maybe at the same time because sizer was also kind of if you look up here sizer was kind of affected by the number maybe we'll also So change that here, size is equal to width divided by n. So that it just, you know, resets things.

Okay, so this is, that's the H-wave. So the H-waves are that size. You saw them, and maybe when they get to 200, they will switch, hopefully.

Think they changed there and the or the you know the other thing you might want to do is you could you could test it by? Having it like print the line, and maybe it says changed Because I think it's changing, but maybe we're not for some reason we're not seeing it It will let us know when frame count, there you go, it changed there. And you can see there that one, it changed much smaller. That one's bigger. Yeah, and if you wanted to, you know, maybe this has to be much smaller.

Let's, I'm just monitoring this and it says it changed. So look, it changed a little bit. So it's changing sizes and I'll share some sample code that has the original version that I showed, but hopefully this is enough to get you going with your own visualizer and using timers and thinking about algorithms in a really fluid type of way.

Transcript for:Essentials of Programming and Algorithms

Transcript for:
Essentials of Programming and Algorithms