multi-scene.js

total 0
used 0
limit 0
/* title: Multi Scene files: head pointlist point stage stroke mouse dragging ../point_src/random.js --- This example has two running stages extending a single `BaseStage`. Both scenes run concurrently on the canvas. Only one `draw` method has a `clear` function, else we'd have two clear routines per draw. */ class BaseStage extends Stage { canvas='playspace' mounted(){ this.points = PointList.generate.random(10, [100, 200], [0,0, 5, 0]) this.points.forEach((p)=>{ p.update({vx: 0, vy:0 }) }) } updatePoints(points, target) { const distance = 20; points.forEach((point, index) => { const dx = target.x - point.x; const dy = target.y - point.y; const angle = Math.atan2(dy, dx); point.x = target.x - Math.cos(angle) * distance; point.y = target.y - Math.sin(angle) * distance; target = point; }); } } class StageOne extends BaseStage { canvas='playspace' draw(ctx){ this.clear(ctx) this.updatePoints(this.points, this.mouse.point) this.points.pen.line(ctx, { color: 'red'}) } } class StageTwo extends BaseStage { canvas='playspace' draw(ctx){ // this.clear(ctx) this.updatePoints(this.points, this.mouse.point) this.points.pen.circle(ctx, {color: 'green'}) } } ;stage1 = StageOne.go(); ;stage2 = StageTwo.go(); setTimeout(()=>{ console.log('Stages started:'); events.emit('scene:go', { stage: stage1 }); events.emit('scene:go', { stage: stage2, name: 'StageTwo' }); }, 100);
Run
Meta Data
title Multi Scene
imports ()
files ('head', 'pointlist', 'point', 'stage', 'stroke', 'mouse', 'dragging', '../point_src/random.js')
unused_keys ()
unknown_keys ()
filepath_exists True
path multi-scene.js
filepath multi-scene.js
clean_files ('../point_src/core/head.js', '../point_src/pointlistdraw.js', '../point_src/pointlistgradient.js', '../point_src/pointlistshape.js', '../point_src/pointlistgenerator.js', '../point_src/unpack.js', '../point_src/pointlist.js', '../point_src/pointlistpen.js', '../point_src/pointpen.js', '../point_src/compass.js', '../point_src/center.js', '../point_src/point-content.js', '../point_src/pointdraw.js', '../point_src/relative-xy.js', '../point_src/pointcast.js', '../point_src/point.js', '../point_src/stage-resize.js', '../point_src/functions/resolve.js', '../point_src/stage.js', '../point_src/setunset.js', '../point_src/stroke.js', '../point_src/events.js', '../point_src/automouse.js', '../point_src/functions/clamp.js', '../point_src/distances.js', '../point_src/protractor.js', '../point_src/text/beta.js', '../point_src/dragging.js', '../point_src/random.js')
markdown {'html': "<p>This example has two running stages extending a single <code>BaseStage</code>.\nBoth scenes run concurrently on the canvas.</p>\n<p>Only one <code>draw</code> method has a <code>clear</code> function, else we'd have two clear routines\nper draw.</p>", 'content': "title: Multi Scene\nfiles:\n head\n pointlist\n point\n stage\n stroke\n mouse\n dragging\n ../point_src/random.js\n---\n\nThis example has two running stages extending a single `BaseStage`.\nBoth scenes run concurrently on the canvas.\n\nOnly one `draw` method has a `clear` function, else we'd have two clear routines\nper draw."}