alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

Add antigravity demo

Browse Source
This commit is contained in:
Philipp Rudiger
2022-04-25 21:05:51 +02:00
parent 3eb41d73ed
commit dcac055f43
2 changed files with 145 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
pyscriptjs/examples/antigravity.html Normal file
View File

@@ -0,0 +1,73 @@
<html>
<head>
<title>Antigravity</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../build/pyscript.css" />
<script defer src="../build/pyscript.js"></script>
<style>
.loading {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: black;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<b>
Based on xkcd: antigravity https://xkcd.com/353/.
</b>
<div style="display: flex; flex-direction: row">
<div id="antigravity" style="width: 400px; height: 400px">
<div class="loading"></div>
</div>
</div>
<py-script output="antigravity">
import random
from js import document, setInterval
from pyodide import create_proxy
from pyodide.http import open_url
class Antigravity():
def __init__(self, node):
self.node = node
self.xoffset, self.yoffset = 0, 0
setInterval(create_proxy(self.move), 10)
def move(self):
char = document.getElementById('python')
console.log(char)
char.setAttribute('transform', f'translate({self.xoffset}, {-self.yoffset})')
self.xoffset += random.normalvariate(0, 1)/20
if self.yoffset < 50:
self.yoffset += 0.1
else:
self.yoffset += random.normalvariate(0, 1)/20
def _repr_svg_(self):
return open_url('./antigravity.svg').read()
node = document.getElementById('antigravity')
console.log(node)
node.replaceChildren()
Antigravity(node)
</py-script>
</body>
</html>

72
pyscriptjs/examples/antigravity.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB