This commit is contained in:
“chrisshank” 2024-11-18 13:30:53 -08:00
parent a6552d8927
commit c7d6243cb9
4 changed files with 16 additions and 20 deletions

View File

@ -25,21 +25,19 @@
</style>
</head>
<body>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="100" width="50" height="50"> Hello World </fc-geometry>
<fc-geometry x="200" y="200" width="50" height="50"></fc-geometry>
<script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
FolkGeometry.register();
const geometryElements = document.querySelectorAll('fc-geometry');
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}

View File

@ -16,6 +16,8 @@
}
fc-geometry:has(record-player) {
box-shadow: 10px 0px 150px 0px rgba(0, 0, 0, 0.61);
&::part(resize-nw),
&::part(resize-ne),
&::part(resize-se),
@ -30,14 +32,9 @@
</style>
</head>
<body>
<!--
sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
-->
<fc-geometry x="100" y="75" width="330" height="198">
<record-player>
<audio src="/Feather.mp3"></audio>
<audio src="/Feather.mov"></audio>
</record-player>
</fc-geometry>
@ -69,11 +66,15 @@
FolkGeometry.register();
RecordPlayer.register();
let proximityDistance = 200;
/**
sips -c 326 276 --cropOffset 1 1 *.png --out pngs/
ffmpeg -framerate 25 -pattern_type glob -i '*.png' -c:v prores -pix_fmt yuva444p10le dancing-flower.mov
ffmpeg -framerate 25 -f image2 -pattern_type glob -i '*.png' -c:v libvpx-vp9 -pix_fmt yuva420p dancing-flowers.webm
*/
let proximityDistance = 150;
const proximitySet = new Set();
const recordPlayerGeometry = document.querySelector(
'fc-geometry:has(record-player)'
);
const recordPlayerGeometry = document.querySelector('fc-geometry:has(record-player)');
const recordPlayer = recordPlayerGeometry.firstElementChild;
const flowers = document.querySelectorAll('fc-geometry:has(video)');
// set playback rate when video is ready
@ -88,10 +89,7 @@
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top
);
}

BIN
demo/public/Feather.mov Normal file

Binary file not shown.

View File

@ -5,7 +5,7 @@ styles.replaceSync(`
--column-number: 10;
--row-number: 10;
--cell-height: 1.75rem;
--cell-width: 200px;
--cell-width: 100px;
--border-color: #e1e1e1;
border: solid 1px var(--border-color);
box-sizing: border-box;