Let's code some more
Did you know that you can draw on Jay-D's display?
In this step of the coding guide, we'll show you how to set up everything you need for getting creative with Jay-D's drawing pen.
Open a new Jay-D block project.
Now create two new variables called x and y. X means the coordinate on the x-axis while y means the coordinate on the y-axis.
Create two variables: x and y:
Now drag and drop the "set y/x to" block twice here:
Find the "123" block in the"Math" section, and drop it the previous block that will set the coordinates for the variables.
Place the "123" block in both "set x/y to" blocks.
Since the display's dimensions are 128x160, let's set the starting dot in the center of the display. Set the y variable to 64 and the x variable to 80.
To set the background color to black so you can draw on it, go to the "Display" section and find a block that says "clear the display with screen color".
Drag and drop that block here:
Now when we've set the starting point of our pen and the background to black, let's create a function that will draw the dots with a color of your choice.
Find a "Create a Function" option in the "Functions" section.
Let's call this function "drawDot":
When you name the function, it will appear on the screen and a few more options will appear in the "Functions" section.
Drag and drop the "call drawDot" function and place it after the clear the display one:
In the following step, we have to define what does this drawDot function does.
Go to the "Display" section and find a shape that draws a rectangle with a color.
Drag and drop this block in the drawDot function.
When you place the block into the function, do the following:
- Set the "filled" option in the first drop-down menu and choose a color you'd like. We'll keep the color green for now.
- Place the x and y variables (from the "Variables" section) into white boxes next to x and y.
- Set the width and height to 1 since we'll be drawing a small dot.
Take a look:
To get those functions working, we'll use another block from the "Display" section that will apply the "drawDot" function.
Open the "Display" section and find the "draw sprite to display" block.
Drag and drop it at the end of the "drawDot" function:
Almost everything is ready for drawing, but there's one more thing that we need.
We need a certain input that will serve as a pen. In this case, let's use the encoders. One will be for drawing on the x-axis and the other one for the y-axis.
For this, we are using the "Input" section and two identical blocks that say "when encoder middle moves".
Drag and drop this block twice:
For moving along the y-axis, let's select the following:
- Choose the left top encoder in the drop-down menu.
- Go to the "Variables" section and drag and drop the "change" block into the function. Select y in the drop-down menu.
- Drag the "amount" value from the bottom of the function to the "change" block.
- Go to the "Functions" section and place the "call drawDot" block at the end of this block.
For moving along the x-axis, let's select the following:
- Choose the right top encoder in the drop-down menu.
- Go to the "Variables" section and drag and drop the "change" block into the function. Select x in the drop-down menu.
- Drag the "amount" value from the bottom of the function to the "change" block.
- Go to the "Functions" section and place the "call drawDot" block at the end of this block.
And that's it. Your Jay-D is a blank canvas now.
You just have to Save the project, give it a name and then Run it.
Running the project might take some time since CircuitBlock first needs to compile the core libraries for the newly-made sketch.
This is how the project looks at the end.
