Skip to content

Instantly share code, notes, and snippets.

@williamngan
williamngan / PtsCanvas.svelte
Last active March 20, 2022 07:52
This is a quick test of Pts (https://ptsjs.org) with Svelte (https://svelte.dev)
<script>
/* This is a quick test of Pts (https://ptsjs.org) with Svelte (https://svelte.dev) */
import { onMount } from "svelte";
import { CanvasSpace, Rectangle } from "pts";
let container, space, form;
onMount(() => {
space = new CanvasSpace(container).setup({bgcolor: "#52f"});
form = space.getForm();
space.add( time => {
<script type="text/javascript">
space = new CanvasSpace("#pt").setup( {bgcolor: "#f1f1f1"} )
form = new Form( space )
dot = new Circle( 250, 250 ).setRadius( 50 )
another = new Circle( 100, 100 ).setRadius( 50 )
bot = {
animate: function ( time, fs, context ) {
// Previous code omitted...
if (hits.length > 0) {
form.stroke( "#fff" ).fill("#0C9")
form.line( new Line( hits[0] ).to( hits[1] ) )
form.points( hits, 5, true )
<script type="text/javascript">
// Previous code omitted ...
bot = {
animate: function(time, fs, context) {
// Previous code omitted ...
hits = another.intersectCircle( dot )
if (hits.length > 0) {
<script type="text/javascript">
// Previous code omitted ...
bot = {
animate: function(time, fs, context) {
// Previous code omitted ...
},
onMouseAction: function(type, x, y, evt) {
if (type == "move") {
<script type="text/javascript">
// Previous code omitted ...
bot = {
animate: function(time, fs, context) {
// Previous code omitted ...
},
onMouseAction: function(type, x, y, evt) {
// Code to track mouse actions will go here
<script type="text/javascript">
// Previous code omitted ...
another = new Circle( 100, 100 ).setRadius( 50 )
bot = {
animate: function( time, fs, context ) {
// Previous code omitted ...
form.fill( false ).stroke( "#fc0", 5 )
<script type="text/javascript">
// Previous code omitted ...
bot = {
animate: function( time, fs, context ) {
form.fill( "#999" )
form.text( new Point( 20, 20 ), "frame rate is "+(1000/fs) )
form.fill( "#5AF" ).stroke( false )
<script type="text/javascript">
// Our exciting code
space = new CanvasSpace("#pt").setup( {bgcolor: "#f1f1f1"} )
form = new Form(space)
dot = new Circle( 250, 250 ).setRadius( 50 )
bot = {
<script type="text/javascript">
// Our exciting code
space = new CanvasSpace("#pt").setup( {bgcolor: "#f1f1f1"} )
form = new Form(space)
</script>