Connecting toolbox with image

[muhd siddiq]

i want to make an image move according to what in the workspace.

just like the image below where the cat move based on what block in the workspace have 

 

[Maribeth Bottorff]

Hello,

It sounds like you are at the beginning stages of designing an app that uses Blockly. If you haven't already, I highly recommend doing the Getting Started codelab to learn more about what Blockly does and doesn't do.

Blockly's role is to generate code from blocks, and allow users to manipulate those blocks. You can think of it like a fancy text editor. What that generated code does is up to you and is outside the scope of Blockly itself. For example, a block could generate the JavaScript code `moveForward()`, but you would need to define the `moveForward` function, and implement the functionality of moving the image across the screen, yourself. So while we here in the forum may be able to offer you advice around how to create certain blocks or execute the generated code, the details of what your code does are more up to you and they are what will make your application different from another application using Blockly.

For more reading on the topic, see our guide on executing JS, and best practices for applications.

If you are not sure what kind of code to write that could draw and move shapes, you might be interested in p5js. As an example, you could create a block that generates the code `ellipse(50, 50, 100, 100);`. Then when you run this code inside a p5 context, it would draw an ellipse on the canvas. That might be a good place to start creating blocks if you aren't sure what kind of code to generate.

Hope that helps!

Maribeth

[muhd siddiq]

Thank you for the reply, this the what my group has done, the only problem is how do i connect blockly with with the image on the canvas

[Maribeth Bottorff]

Can you tell me more about which part you are getting stuck at? Are you unsure of what kind of code to generate, how to generate code in the first place, or how to execute the generated code? What kind of blocks do you currently have, and what code do they generate right now? 

Maribeth