Creating objects on event in random colours


#1

Hello again! I apologise for the multiple questions…

I’m trying to make a space where kids can ‘create’ their own landscape when inside the space. Right now my idea is to have houses and other building elements appear in random colours when they click.

I’ve tried 2 ways of doing this:
The first is to change the opacity of an initially transparent building on hover and activate:


It works for 1 item, but I’m not sure how to code the javascript block so that they can work with a list of items.

The second is to create items on activate:


The ‘set colour’ block doesn’t seem to be working in my current configuration however.


#2

Hi Yvonne,

here is an example where I create 30 houses with random position, scale, rotation and color. You can modify it so that it fits your needs.

Click here to see how it looks like.


#3

Bonus points for storing the floor co-ordinates in a list and ensuring new houses don’t enter that space! (though the house intersecting a house could be seen as a feature :wink: )


#4

Thanks @Benny for the sample!

I’d like to make them feel like they are ‘building’ the houses - so it would be ideal to have them appear where they click instead of in a random location.

Is there some method to capture the (x,y) of a click (eg. where it projects onto a ground surface)?

Right now I’m using existing items: https://cospac.es/edu/VDwG


#5

Hi Yvonne,

at the moment we don’t have an option to translate screen coordinates (x, y) to space coordinates but we are already working on such a (similar) method.

For now, maybe you can generate an invisible plane of cubes and attach onActivate event listener to it. So when you click on such an invisible cube, a house will be generated at this position. I know that this isn’t a perfect solution, so I’ll let you know when we have implemented the other method to handle such a case correctly.


#6

Hi Benny,

Thanks for the suggestion!

I have tried this:


Every cube can be activated - but the ‘position of marker’ is fixed at its final position - so the house only appears there instead of in individual markers.

Would I have to give each generated cuboid a unique name and add them all to a list somehow?


#7

Hi Yvonne,

unfortunately there are some limitations in the current version of Blockly when using nested loops and setting event listeners inside them. We’re going to fix these issues in one of our next updates.

Until then maybe you can use this piece of JavaScript to create the same effect:

const COLS = 30;
const ROWS = 30;
const XOFFSET = COLS / 2;
const YOFFSET = ROWS / 2;
const OPACITY = 0.5;

for(let x = 0; x < COLS; x++) {
    for(let y = 0; y < ROWS; y++) {
        let xPos = x - XOFFSET;
        let yPos = y - YOFFSET;

        let marker = Scene.createItem('Cuboid', xPos, yPos, 0);
        marker.setOpacity(OPACITY);

        marker.onActivate(() => {
            marker.onActivate(null);
            let house = Scene.createItem('LP_Building1', xPos, yPos, 0);
            house.setRandomColor();
        });
    }
}

You can change the values of ROWS, COLS and OPACITY.


#8

Hi Benny,

I see. Thanks for the JavaScript code - it works well :slight_smile:


#9

Wondering how to do this with Coblocks…


#10

Hi @Stephanie_Wieczorek,

we plan to release a CoBlocks - block that allows you to create building shapes (Cuboid, Torus, Pyramid, etc) for now. You can try it out once the update has happened in next few weeks :slight_smile: