-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
68 lines (63 loc) · 2.22 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
'use strict';
/**
* Conways Game of Life but with cows in vr
*/
import { board, setBoard, subBoard } from './store.js';
import { nextBoard } from './conway.js';
const timeBetweenBoards = 1000;
const bigCowSize = '0.025';
const smolCowSize = '0.015';
const bigCow = `${bigCowSize} `.repeat(3).trim();
const smolCow = `${smolCowSize} `.repeat(3).trim();
const bigCowAnimation = 'property: rotation; to: 0 720 0; loop: false; dur: 1000';
const smolCowAnimation = '';
const bigCowRotation = '0 0 0';
const smolCowRotation = '0 45 0';
const assetLinks = [
{ id: 'cow', src: './assets/cow.glb' }
];
const app = document.querySelector('#app');
const scene = document.createElement('a-scene');
const createPosition = (x, y) => `${x / 8} 1.2 ${-y / 8}`;
const createCow = (x, y) => {
const cow = document.createElement('a-gltf-model');
cow.setAttribute('position', createPosition(x, y));
cow.setAttribute('rotation', smolCowRotation);
cow.setAttribute('color', '#4CC3D9');
cow.setAttribute('scale', smolCow);
cow.setAttribute('src', '#cow');
return cow;
}
const createGround = () => {
const ground = document.createElement('a-box');
ground.setAttribute('color', '#00FF00');
ground.setAttribute('height', '2');
ground.setAttribute('width', '4');
ground.setAttribute('depth', '4');
return ground;
};
const createAssets = () => {
const assets = document.createElement('a-assets');
assetLinks.forEach(({ id, src }) => {
const asset = document.createElement('a-asset-item');
asset.setAttribute('id', id);
asset.setAttribute('src', src);
assets.appendChild(asset);
});
return assets;
};
scene.appendChild(createAssets());
scene.appendChild(createGround());
const cows = board().map((row, i) => row.map((_isFilled, j) => {
return createCow(i - 10, j - 10);
}));
cows.flat().forEach(cow => scene.appendChild(cow));
app.appendChild(scene);
subBoard(board => board.forEach((row, i) => row.map((isFilled, j) => {
cows[i][j].setAttribute('scale', isFilled ? bigCow : smolCow);
cows[i][j].setAttribute('animation', isFilled ? bigCowAnimation : smolCowAnimation);
cows[i][j].setAttribute('rotation', isFilled ? bigCowRotation : smolCowRotation);
})));
setInterval(() => {
setBoard(nextBoard(board()));
}, timeBetweenBoards);