35 lines
26 KiB
HTML
35 lines
26 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en-US">
|
||
|
|
<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 portfolio site">
|
||
|
|
<link rel="stylesheet" href="/assets/style.7893fc09.css">
|
||
|
|
<link rel="modulepreload" href="/assets/app.e9531dc8.js">
|
||
|
|
<link rel="modulepreload" href="/assets/public_kronos_docs_particles.md.d071da6e.lean.js">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,600;1,400">
|
||
|
|
<link rel="manifest" href="/site.webmanifest">
|
||
|
|
<script defer="true" data-domain="thepaperpilot.org" src="https://plausible.io/js/plausible.js"></script>
|
||
|
|
<meta name="og:description" content="The Paper Pilot portfolio site">
|
||
|
|
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app"><div class="Layout" data-v-c6a644e1><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav no-sidebar" data-v-c6a644e1 data-v-a71a30f1><div class="VPNavBar" data-v-a71a30f1 data-v-6f1d18b5><div class="container" data-v-6f1d18b5><div class="VPNavBarTitle" data-v-6f1d18b5 data-v-d5925166><a class="title" href="/" data-v-d5925166><!--[--><!--]--><!----><!--[-->The Paper Pilot<!--]--><!--[--><!--]--></a></div><div class="content" data-v-6f1d18b5><!--[--><!--]--><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6f1d18b5 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide-to-incrementals/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Guide to Incrementals<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/projects/" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Projects<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://moddingtree.com" target="_blank" rel="noreferrer" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Profectus<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6f1d18b5 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" aria-checked="false" data-v-a3e7452b data-v-1899cd41 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1899cd41><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-1899cd41><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6f1d18b5 data-v-738bef5a data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/thepaperpilot" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.2
|
||
|
|
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myParticle {</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">image</span><span style="color:#89DDFF;">:</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">options_wheel.png</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">spread</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">gravity</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">time</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">speed</span><span style="color:#A6ACCD;">() </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// Randomize speed a bit</span></span>
|
||
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">Math</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">random</span><span style="color:#F07178;">() </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1.2</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">*</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">8</span><span style="color:#F07178;"> </span></span>
|
||
|
|
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;"> etc</span><span style="color:#89DDFF;">...</span></span>
|
||
|
|
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||
|
|
<span class="line"></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>""</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, <a href="http://this.id" target="_blank" rel="noreferrer">this.id</a>) 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><!--[--><!--]--><!----><!--[--><!--]--></div></div></div></div></div><!----><!--[--><!--]--></div></div>
|
||
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide-to-incrementals_index.md\":\"28c9718d\",\"guide-to-incrementals_ludology_appeal-developers.md\":\"e64ceb17\",\"guide-to-incrementals_ludology_appeal-gamers.md\":\"f6d4e5d0\",\"guide-to-incrementals_ludology_content.md\":\"1f41e38f\",\"guide-to-incrementals_ludology_definition.md\":\"c4102960\",\"index.md\":\"c73bfda3\",\"projects_index.md\":\"731b42a4\",\"public_gamedevtree_2.0-format-changes.md\":\"217271e0\",\"public_gamedevtree_readme.md\":\"78107550\",\"public_gamedevtree_changelog.md\":\"f2587796\",\"public_gamedevtree_docs_!general-info.md\":\"a5502bd1\",\"public_gamedevtree_docs_achievements.md\":\"1bc072a9\",\"public_gamedevtree_docs_bars.md\":\"716526e0\",\"public_gamedevtree_docs_basic-layer-breakdown.md\":\"a5f1efc6\",\"public_gamedevtree_docs_buyables.md\":\"5f1f2288\",\"public_gamedevtree_docs_challenges.md\":\"3e8887e1\",\"public_gamedevtree_docs_clickables.md\":\"0ba251c8\",\"public_gamedevtree_docs_custom-tab-layouts.md\":\"d16e7fd1\",\"public_gamedevtree_docs_getting-started.md\":\"609487ab\",\"public_gamedevtree_docs_infoboxes.md\":\"bb5781a4\",\"public_gamedevtree_docs_layer-features.md\":\"a52f61c7\",\"public_gamedevtree_docs_main-mod-info.md\":\"6853261c\",\"public_gamedevtree_docs_milestones.md\":\"1635038d\",\"public_gamedevtree_docs_subtabs-and-microtabs.md\":\"b376e886\",\"public_gamedevtree_docs_updating-tmt.md\":\"4cc2a138\",\"public_gamedevtree_docs_upgrades.md\":\"a39aa163\",\"public_kronos_old things_2.0-format-changes.md\":\"4500c8d3\",\"public_kronos_readme.md\":\"17bf9897\",\"public_kronos_changelog.md\":\"e4951500\",\"public_kronos_docs_!general-info.md\":\"c586db5a\",\"public_kronos_docs_achievements.md\":\"f7a44809\",\"public_kronos_docs_bars.md\":\"71b8cc8a\",\"public_kronos_docs_basic-layer-breakdown.md\":\"211c78af\",\"public_kronos_docs_buyables.md\":\"8a7e4758\",\"public_kronos_docs_challenges.md\":\"a51d59ed\",\"public_kronos_docs_clickables.md\":\"d8e0c110\",\"public_kronos_docs_custom-tab-layouts.md\":\"264b2f40\",\"public_kronos_docs_getting-started.md\":\"1deda510\",\"public_kronos_docs_grids.md\":\"bb6a8c96\",\"public_kronos_docs_infoboxes.md\":\"38382706\",\"public_kronos_docs_layer-features.md\":\"10589753\",\"public_kronos_docs_main-mod-info.md\":\"dc90c42b\",\"public_kronos_docs_milestones.md\":\"625224d2\",\"public_kronos_docs_particles.md\":\"d071da6e\",\"public_kronos_docs_subtabs-and-microtabs.md\":\"80665b53\",\"public_kronos_docs_trees-and-tree-customization.md\":\"15034420\",\"public_kronos_docs_updating-tmt.md\":\"fa200589\",\"public_kronos_docs_upgrades.md\":\"dbbdae14\",\"public_lit_old things_2.0-format-changes.md\":\"66b587d8\",\"public_lit_readme.md\":\"4a72cbff\",\"public_lit_changelog.md\":\"a8eab689\",\"public_lit_docs_!general-info.md\":\"1057a028\",\"public_lit_docs_achievements.md\":\"1a8fc990\",\"public_lit_docs_bars.md\":\"8de3276c\",\"public_lit_docs_basic-layer-breakdown.md\":\"8dac473f\",\"public_lit_docs_buyables.md\":\"05fdb9a3\",\"public_lit_docs_challenges.md\":\"f229730d\",\"public_lit_docs_clickables.md\":\"a851270c\",\"public_lit_docs_custom-tab-layouts.md\":\"c1d4ec6b\",\"public_lit_docs_getting-started.md\":\"70ac5617\",\"public_lit_docs_infoboxes.md\":\"ae20902b\",\"public_lit_docs_layer-features.md\":\"8a8675fe\",\"public_lit_docs_main-mod-info.md\":\"b4735f7a\",\"public_lit_docs_milestones.md\":\"c7d15b5c\",\"public_lit_docs_subtabs-and-microtabs.md\":\"4ee3918f\",\"public_lit_docs_trees-and-tree-customization.md\":\"ab101667\",\"public_lit_docs_updating-tmt.md\":\"ce408f9f\",\"public_lit_docs_upgrades.md\":\"8b96ffe6\"}")</script>
|
||
|
|
<script type="module" async src="/assets/app.e9531dc8.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|