<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mantra.js Gallery Page - repeat entity</title>
<script src="https://yantra.gg/mantra.js"></script>
<script src="https://yantra.gg/worlds.mantra.js"></script>
</head>
<body>
<script>
let game = new MANTRA.Game({
graphics: ['css'],
plugins: ['Player', 'Teleporter', 'Gamepad', 'GamepadGUI', 'Bullet', 'Boomerang', 'SwitchGraphics'],
});
game.start(function () {
game.setBackground('black');
game.build().Player().createEntity();
game
.build()
.color('red')
.size(8)
.body(false)
.position(0, -150, 0)
.offset(12, 12, 12)
.repeaters({
size: (index, total, current) => ({
width: current.width + 2 * index,
height: current.height + 2 * index,
depth: current.depth + 2 * index
}),
color: (index, total, current) => colorFromIndex(index, total),
})
.repeat(24)
.createEntity()
game
.build()
.color('red')
.size(8)
.body(false)
.position(0, -150, 0)
.offset(12, -12, 12)
.repeaters({
size: (index, total, current) => ({
width: current.width + 2 * index,
height: current.height + 2 * index,
depth: current.depth + 2 * index
}),
color: (index, total, current) => colorFromIndex(index, total),
})
.repeat(24)
.createEntity()
game
.build()
.color('red')
.size(8)
.body(false)
.position(0, -150, 0)
.offset(-12, -12, 12)
.repeaters({
size: (index, total, current) => ({
width: current.width + 2 * index,
height: current.height + 2 * index,
depth: current.depth + 2 * index
}),
color: (index, total, current) => colorFromIndex(index, total),
})
.repeat(24)
.createEntity()
game
.build()
.color('red')
.size(8)
.body(false)
.position(0, -150, 0)
.offset(-12, 12, 12)
.repeaters({
size: (index, total, current) => ({
width: current.width + 2 * index,
height: current.height + 2 * index,
depth: current.depth + 2 * index
}),
color: (index, total, current) => colorFromIndex(index, total),
})
.repeat(24)
.createEntity()
game.build().Teleporter({
url: 'https://yantra.gg/mantra/examples/entity/repeat-entity',
}).position(-200, 0).createEntity()
});
function colorFromIndex(index, total) {
const segment = total / 3;
let r = 0, g = 0, b = 0;
if (index < segment) {
r = 255 * (1 - (index / segment));
g = 255 * (index / segment);
} else if (index < 2 * segment) {
const adjustedIndex = index - segment;
g = 255 * (1 - (adjustedIndex / segment));
b = 255 * (adjustedIndex / segment);
} else {
const adjustedIndex = index - 2 * segment;
b = 255 * (1 - (adjustedIndex / segment));
r = 255 * (adjustedIndex / segment);
}
r = Math.round(r);
g = Math.round(g);
b = Math.round(b);
const color = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
console.log('returning', color)</script>
</body>
</html>