AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add interactive demo to particle gallery

Browse Source 
Docs-Preview: https://skia.org/?cl=248805
Bug: skia:9513
Change-Id: Id862ebdc58c2cde38720e26f0140e20c5338c78c
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/248805
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Brian Osman <brianosman@google.com>
This commit is contained in:
Brian Osman 2019-10-15 13:35:04 -04:00 committed by Skia Commit-Bot
parent fb6a1abe45
commit 4beafa69ab
2 changed files with 77 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/canvaskit/particles_bindings.cpp
View File

@ -23,7 +23,9 @@ EMSCRIPTEN_BINDINGS(Particles) {
.smart_ptr<sk_sp<SkParticleEffect>>("sk_sp<SkParticleEffect>")
.function("draw", &SkParticleEffect::draw, allow_raw_pointers())
.function("start", select_overload<void (double, bool)>(&SkParticleEffect::start))
.function("update", select_overload<void (double)>(&SkParticleEffect::update));
.function("update", select_overload<void (double)>(&SkParticleEffect::update))
.function("setPosition", select_overload<void (SkPoint)>(&SkParticleEffect::setPosition))
.function("setRate", select_overload<void (float)>(&SkParticleEffect::setRate));
function("MakeParticles", optional_override([](std::string json)->sk_sp<SkParticleEffect> {
static bool didInit = false;

82
site/user/modules/particles.md
View File

@ -28,6 +28,13 @@ Samples
</style>
<div id=demo>
<figure>
<canvas id=trail width=400 height=400></canvas>
<figcaption>
<a href="https://particles.skia.org/84a757d92c424b3d378b55481a4b2394"
target=_blank rel=noopener>Trail (Click and Drag!)</a>
</figcaption>
</figure>
<figure>
<canvas id=confetti width=400 height=400></canvas>
<figcaption>
@ -86,6 +93,7 @@ Samples
locateFile: (file) => locate_file + file,
}).ready().then((CK) => {
CanvasKit = CK;
TrailExample(CanvasKit, 'trail', trail);
ParticleExample(CanvasKit, 'confetti', confetti, 200, 200);
ParticleExample(CanvasKit, 'curves', curves, 200, 300);
ParticleExample(CanvasKit, 'fireworks', fireworks, 200, 300);
@ -93,14 +101,6 @@ Samples
ParticleExample(CanvasKit, 'text', text, 75, 250);
});
function preventScrolling(canvas) {
canvas.addEventListener('touchmove', (e) => {
// Prevents touch events in the canvas from scrolling the canvas.
e.preventDefault();
e.stopPropagation();
});
}
function ParticleExample(CanvasKit, id, jsonData, cx, cy) {
if (!CanvasKit || !jsonData) {
return;
@ -432,6 +432,72 @@ const text = {
]
};
function preventScrolling(canvas) {
canvas.addEventListener('touchmove', (e) => {
// Prevents touch events in the canvas from scrolling the canvas.
e.preventDefault();
e.stopPropagation();
});
}
function TrailExample(CanvasKit, id, jsonData) {
if (!CanvasKit || !jsonData) {
return;
}
const surface = CanvasKit.MakeCanvasSurface(id);
if (!surface) {
console.error('Could not make surface');
return;
}
const context = CanvasKit.currentContext();
const canvas = surface.getCanvas();
const particles = CanvasKit.MakeParticles(JSON.stringify(jsonData));
particles.start(Date.now() / 1000.0, true);
function drawFrame(canvas) {
particles.update(Date.now() / 1000.0);
canvas.clear(CanvasKit.WHITE);
particles.draw(canvas);
surface.requestAnimationFrame(drawFrame);
}
surface.requestAnimationFrame(drawFrame);
let interact = (e) => {
particles.setPosition([e.offsetX, e.offsetY]);
particles.setRate(e.pressure * 1000);
};
document.getElementById('trail').addEventListener('pointermove', interact);
document.getElementById('trail').addEventListener('pointerdown', interact);
document.getElementById('trail').addEventListener('pointerup', interact);
preventScrolling(document.getElementById('trail'));
}
const trail = {
"MaxCount": 2000,
"Drawable": {
"Type": "SkCircleDrawable",
"Radius": 4
},
"EffectCode": "",
"Code": [
"void spawn(inout Particle p) {",
" p.lifetime = 2 + rand;",
" float a = radians(rand * 360);",
" p.vel = float2(cos(a), sin(a)) * mix(5, 15, rand);",
" p.scale = mix(0.25, 0.75, rand);",
"}",
"",
"void update(inout Particle p) {",
" p.color.r = p.age;",
" p.color.g = 1 - p.age;",
"}",
""
],
"Bindings": []
};
}
document.head.appendChild(s);
})();