Kodular | Random Colors Generation

 

Since you are on my blog, I am assuming that you guys have some basic understanding of kodular like how it works, different functionality and blocks understanding. So, lets move forward and play with colors. We will create a random color generating app which needs just a button to change the background color of our screen.   

First, lets create a new project and we need three components, a button, a test label, and a canvas, which can be found under the drawing and animation tab.   

So, what this app does is we want to change the color of this canvas by tapping the button and it will generate a random color. So first what we need to do is to change some of the properties of our components, like change the button text and set canvas height and width to full. Colors are usually combined with three elements, the RGB values are also called a color code. An R stand for red G stands for green and blue is B so for the label we want to show the RGB value so.

 


Next, move onto the blocks view. Here we are going to try some function blocks if you guys have no idea what it is, just follow the instructions. They are extremely easy to use. We need a variable, lets call it color list. For the color list, we need to create a list, so simply just drag the make list block and as I mentioned, the color consists of three different components to RGB values, but we only have two. So, what we have to do is to click the little blue button on make list block and drag a new item. Now we have an option of making three colors. Assign 0 to all three for the time being.  


What we are trying to do is when we click the button, we first want to change the values in our list. So, for that, we need for each loop. Drag and drop for each loop under the click button operation and change the variable name to whatever you want I will just change it to "no". We have three colors from one to three. Here, by 1 means the interval, so, by 1 means we do something three times.  

And now what we want to do in our loop is to generate a random number and assign it to our list in each turn. For that lets drag a new block called replace list item. Here, list and index mean which item we want to change its values. So, remember we have a loop in which "no" will be changed from one to three. The index will be "no". And for list, we have the color list. For replacement, drag random integer block which can be found under the math tab since we are going to display the values with a random number and for colors, the color RGB value will range from zero to 255. 

After changing it, we have to change our canvas background color with the list. Go to canvas and drag the set canvas background color block. But before that we also need a make color block. We are going to make the color using our global color list and I want to show the number we just generated, so we go to the label and set list to our label. 


That is it. Go ahead and run the application, it should work fine.



1 Comments

Previous Post Next Post