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.

random image

Create two variables: x and y:

random image

Now drag and drop the "set y/x to" block twice here:

random image

Find the "123" block in the"Math" section, and drop it the previous block that will set the coordinates for the variables.

random image

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.

random image

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".

random image

Drag and drop that block here:

random image

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.

random image

Let's call this function "drawDot":

random image

When you name the function, it will appear on the screen and a few more options will appear in the "Functions" section.

random image

Drag and drop the "call drawDot" function and place it after the clear the display one:

random image

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.

random image

Drag and drop this block in the drawDot function.

random image

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:

random image

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.

random image

Drag and drop it at the end of the "drawDot" function:

random image

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".

random image

Drag and drop this block twice:

random image

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.
random image

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.
random image

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.

random image