pages/public/kronos/docs/particles.html

42 lines
35 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Particles | The Paper Pilot</title>
<meta name="description" content="The Paper Pilot's Digital Garden">
<meta name="generator" content="VitePress v1.2.2">
<link rel="preload stylesheet" href="/assets/style.BhozF2zR.css" as="style">
<script type="module" src="/assets/app.D9newYOy.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.Cpfv34D1.js">
<link rel="modulepreload" href="/assets/chunks/theme.DhY7-jtk.js">
<link rel="modulepreload" href="/assets/public_kronos_docs_particles.md.DnfnBO1x.lean.js">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico&amp;family=Roboto+Mono:ital,wght@0,400;0,600;1,400&amp;display=swap">
<link rel="manifest" href="/site.webmanifest">
<link rel="alternate" type="text/mf2+html" href="/changelog">
<link rel="alternate" type="application/rss+xml" title="Changelog" href="/changelog/rss">
<link rel="alternate" type="application/atom+xml" title="Changelog" href="/changelog/atom">
<link rel="alternate" type="application/json+xml" title="Changelog" href="/changelog/json">
<meta name="og:description" content="The Paper Pilot's Digital Garden">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--[--><!--]--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle has-sidebar" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>The Paper Pilot</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Profectus</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://incremental.social" target="_blank" rel="noreferrer" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>Incremental Social</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ccf7ddec data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/thepaperpilot" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://www.linkedin.com/pub/anthony-lawn/a9/a98/2" aria-label="linkedin" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-linkedin" /></a><a class="VPSocialLink no-icon" href="https://matrix.to/#/@thepaperpilot:incremental.social" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg></a><a class="VPSo
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myParticle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;options_wheel.png&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> spread</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> gravity</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> time</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> speed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Randomize speed a bit</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (Math.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">random</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1.2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">*</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> etc</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Features can be functions or constant. These features will be called when each particle is made, with an <code>id</code> argument, which is assigned based on which of the <code>amount</code> particles being spawned this is. <strong>All of these are optional</strong>, with a default value.</p><p>All distances are in pixels and angles are in degrees, with 0 being up and going clockwise.</p><ul><li><p>time: The amount of time, in seconds, that the particle will last. Default is 3.</p></li><li><p>fadeOutTime: The amount of seconds that fading out at the end should take (part of the total lifetime). Default is 1.</p></li><li><p>fadeInTime: The amount of seconds that fading in should take (part of the total lifetime). Default is 0.</p></li><li><p>image: The image the particle should display. <code>&quot;&quot;</code> will display no image. Default is a generic particle.</p></li><li><p>text: Displays text on the particle. Can use basic HTML.</p></li><li><p>style: Lets you apply other CSS styling to the particle.</p></li><li><p>width, height: The dimensions of the particle. Default is 35 and 35.</p></li><li><p>color: Sets the color of the image to this color.</p></li><li><p>angle: The angle that the particle should face. Default is 0.</p></li><li><p>dir: The initial angle that the particles should move in, before spread is factored in. Default is whatever angle is.</p></li><li><p>spread: If there are several particles, they will be spread out by this many degrees, centered on dir. Default is 30.</p></li><li><p>rotation: The amount that the (visual) angle of the particle should change by. Default is 0.</p></li><li><p>speed: The starting speed of the particle. Default is 15.</p></li><li><p>gravity: The amount the particle should accelerate downwards. Default is 0.</p></li><li><p>x, y: The starting coordinates of the particle. Default is at the mouse position.</p></li><li><p>offset: How far from the start each particle should appear. Default is 10.</p></li><li><p>xVel, yVel: Set initially based on other properties, then used to update movement.</p></li><li><p>layer: When changing tabs, if leaving the <code>layer</code> tab, this particle will be erased.</p></li><li><p>You can add other features to particles, but you must impliment their effects yourself.</p></li></ul><p>Function features: These stay as functions and are for more advanced things. They are optional.</p><ul><li>update(): Called each tick. Lets you do more advanced visual and movement behaviors by changing other properties.</li><li>onClick(), onMouseOver(), onMouseLeave(): Called when the particle is interacted with.</li></ul><p>Other useful things that are not features of the particle object:</p><ul><li>setDir(particle, dir), setSpeed(particle, speed): Set the speed/direction on a particle.</li><li>clearParticles(check): Function to delete particles. With no check, it deletes all particles. Check is a function that takes a particle, and returns true if that particle should be deleted.</li><li>You can use Vue.delete(particles, this.id) to make a particle delete itself.</li><li>mouseX and mouseY are variables that track the mouse position.</li><li>sin(x), cos(x), tan(x): functions that do these operations, with x in degrees. (Instead of radians).</li><li>asin(x), acos(x), atan(x): functions that do these operations, with the returned value in degrees. (instead of radians).</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-d4a0bba5><!--[--><!--]--><div class="edit-info" data-v-d4a0bba5><!----><div class="last-updated" data-v-d4a0bba5><p class="VPLastUpdated" data-v-d4a0bba5 data-v-7e05ebdb>Last updated: <time datetime="2021-05-18T20:06:03.000Z" data-v-7e05ebdb></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-d4a0bba5><span class="visually-hidden" id="doc-footer-aria-label" data-v-d4a0bba5>Pager</span><div class="pager" data-v-d4a0bba5><!----></div><div class="pager" data-v-d4a0bba5><a c
<script>window.__VP_HASH_MAP__=JSON.parse("{\"changelog_index.md\":\"BMqXQzK4\",\"garden_federated-identity_index.md\":\"j6r579JV\",\"garden_digital-gardens_index.md\":\"BldD0zlm\",\"garden_advent-incremental_index.md\":\"BmYtTz1z\",\"garden_chronological_index.md\":\"C4L9q0av\",\"garden_fedi-v2_index.md\":\"CBF5XDR8\",\"garden_cinny_index.md\":\"DBwPLLl1\",\"garden_chat-glue_index.md\":\"CvV9MtZd\",\"garden_v-ecs_index.md\":\"DODjcrDI\",\"guide-to-incrementals_ludology_appeal-developers_index.md\":\"DE6WY2J5\",\"garden_wanderstop_index.md\":\"CJ-5Agfs\",\"garden_this-knowledge-hub_index.md\":\"Bu6XYys9\",\"garden_webrings_index.md\":\"zS7oehWc\",\"garden_atproto_index.md\":\"DIDegZRp\",\"guide-to-incrementals_index.md\":\"B0IXv4J5\",\"garden_weird_index.md\":\"COiElaJs\",\"guide-to-incrementals_design_criticism_index.md\":\"DcVjFq47\",\"garden_kronos_index.md\":\"CpJ4Etf4\",\"garden_activitypub_index.md\":\"BCXcA4Dn\",\"garden_incremental-social_index.md\":\"UNYiz4n3\",\"garden_commune_index.md\":\"BDcGQgoK\",\"garden_vitepress_index.md\":\"DeRMJ4W3\",\"garden_matrix_index.md\":\"BjzSOZx0\",\"garden_planar-pioneers_index.md\":\"CaIOrvya\",\"garden_logseq_index.md\":\"BH4wkQ5m\",\"garden_game-dev-tree_index.md\":\"BrJ3-iwM\",\"garden_guide-to-incrementals_appeal-to-developers_index.md\":\"DHDjZHHP\",\"garden_forgejo_index.md\":\"D6s55xSM\",\"garden_freeform_index.md\":\"D8ict-54\",\"garden_guide-to-incrementals_what-is-content_index.md\":\"CbNEf92q\",\"garden_nostr_index.md\":\"CIcbJSYb\",\"garden_garden-rss_index.md\":\"DFOuH9zc\",\"garden_social-media_index.md\":\"DTqEFCf8\",\"garden_the-small-web_index.md\":\"BU_vHdR1\",\"garden_the-cozy-web_index.md\":\"CmzI35gc\",\"garden_capture-the-citadel_index.md\":\"KkFtOA-_\",\"garden_synapse_index.md\":\"DFdMjdKE\",\"garden_the-beginner-s-guide_index.md\":\"CUKdk-e1\",\"garden_my-personal-website_index.md\":\"DbrD9nuP\",\"garden_babble-buds_index.md\":\"DFQVOhME\",\"garden_freeform-vs-chronological-dichotomy_index.md\":\"l7I8OLYs\",\"garden_dice-armor_index.md\":\"D3UCrG_I\",\"garden_guide-to-incrementals_index.md\":\"Y8_ouU2v\",\"garden_fediverse_index.md\":\"BHmi6UaA\",\"garden_guide-to-incrementals_defining-the-genre_index.md\":\"7amNXa8_\",\"garden_decentralized_index.md\":\"BSBGXD1m\",\"garden_open-source_index.md\":\"czYJmJ7n\",\"garden_profectus_index.md\":\"DUWsChKa\",\"garden_guide-to-incrementals_appeal-to-players_index.md\":\"DUrad2YE\",\"garden_opti-speech_index.md\":\"BnaVvFl1\",\"garden_ivy-road_index.md\":\"kxzi8BFO\",\"public_kronos_docs_milestones.md\":\"ZOlvhIbz\",\"public_kronos_docs_particles.md\":\"DnfnBO1x\",\"public_kronos_docs_subtabs-and-microtabs.md\":\"c1oZYPvO\",\"public_kronos_docs_trees-and-tree-customization.md\":\"CsaD7Yrl\",\"public_gamedevtree_docs_milestones.md\":\"RCH7p-yJ\",\"public_gamedevtree_2.0-format-changes.md\":\"Kbkj0-4U\",\"public_gamedevtree_readme.md\":\"DHbCUzGq\",\"garden_guide-to-incrementals_navigating-criticism_index.md\":\"DLp9C82j\",\"guide-to-incrementals_ludology_appeal-gamers_index.md\":\"BbzZLY_-\",\"public_lit_docs_layer-features.md\":\"C1B8li5N\",\"public_lit_docs_main-mod-info.md\":\"3TfKZ_6R\",\"public_lit_docs_milestones.md\":\"aD5vz3Yn\",\"public_lit_docs_subtabs-and-microtabs.md\":\"D3_-SUfi\",\"public_lit_docs_trees-and-tree-customization.md\":\"qS8LRFwm\",\"public_kronos_docs_grids.md\":\"GIjDOlNb\",\"public_kronos_docs_clickables.md\":\"CUoQ73NI\",\"public_kronos_docs_custom-tab-layouts.md\":\"DxtdaLKX\",\"public_kronos_docs_getting-started.md\":\"9QoojP-1\",\"public_kronos_docs_challenges.md\":\"8PdQpqaH\",\"guide-to-incrementals_ludology_definition_index.md\":\"D2zmPVu9\",\"public_gamedevtree_docs_challenges.md\":\"Ber3uNym\",\"public_lit_docs_infoboxes.md\":\"CCZ2u4OV\",\"public_gamedevtree_docs_clickables.md\":\"B9bxR7GG\",\"public_lit_docs_custom-tab-layouts.md\":\"CEobgcFf\",\"public_lit_docs_basic-layer-breakdown.md\":\"CM2Ud0R_\",\"public_gamedevtree_docs_achievements.md\":\"DwJKgF6g\",\"public_lit_docs_buyables.md\":\"DUFI4nuM\",\"public_lit_docs_challenges.md\":\"B0Aj7DE1\",\"public_lit_docs_c
</body>
</html>