{ // // AnecdoteIntegrator.js // KillMath // // Created by Bret Victor on 4/14/11. // (c) 2011 Bret Victor. MIT open-source license. // htmlFigure1; class BottomPlot { constructor() { this.x = 0; this.y = 100; this.width = 300; this.height = 70; } valueForX(x) { return 0.5 * this.height * (1.0 - Math.cos((x / this.width) * Math.PI)); } drawInContext(ctx) { ctx.fillStyle = "#ddd"; let plotWidth = Math.min(this.revealedWidth - 4, this.width); if (plotWidth <= 0) { return; } ctx.beginPath(); ctx.moveTo(this.x, this.y + this.height); for (let x = 0; x < plotWidth; x++) { let y = this.valueForX(x); ctx.lineTo(this.x + x, this.y + this.height - y); } ctx.lineTo(this.x + plotWidth, this.y + this.height); ctx.closePath(); ctx.fill(); } } class Tank { constructor() { this.x = 0; this.y = 92; this.width = 20; this.height = 78; this.waterHeight = 0; this.opacity = 1; this.imageWidth = 26; this.imageHeight = 78; this.backgroundImage = new Image(); this.backgroundImage.src = IntegratorVial; this.fillImage = new Image(); this.fillImage.src = IntegratorVialFill; } drawBackgroundInContext(ctx) { if (!this.backgroundImage.complete) { return; } if (this.opacity <= 0) { return; } ctx.drawImage(this.backgroundImage, this.x + 5, this.y); } drawFillInContext(ctx) { if (!this.fillImage.complete) { return; } if (this.waterHeight <= 0) { return; } if (this.opacity <= 0) { return; } ctx.drawImage( this.fillImage, 0, this.imageHeight - this.waterHeight, 26, this.waterHeight, this.x + 5, this.y + this.imageHeight - this.waterHeight, 26, this.waterHeight ); if (this.opacity < 1) { ctx.fillStyle = "rgba(255,255,255," + (1 - this.opacity) + ")"; ctx.fillRect(this.x + 5, this.y, this.imageWidth, this.imageHeight); } } } const IntegratorVial = await FileAttachment("IntegratorVial.png").url(); const IntegratorVialFill = await FileAttachment( "IntegratorVialFill.png" ).url(); class Stripe { constructor(plot, x) { this.plot = plot; this.x = x; this.width = 1; this.height = this.plot.valueForX(this.x); this.initialY = this.plot.height - this.height; this.reset(); } reset() { this.y = this.initialY; this.dy = 0; this.isDropping = false; } updateWithTimeInterval(dt) { if (this.isDropping) { this.dy += 800 * dt; this.y += this.dy * dt; } else if (this.plot.revealedWidth >= this.x - 22) { this.isDropping = true; } } drawInContext(ctx) { ctx.fillStyle = "#ddd"; ctx.fillRect( this.plot.x + this.x, this.plot.y + this.initialY, this.width, this.height ); ctx.fillStyle = "#6ee6f1"; ctx.fillRect( this.plot.x + this.x, this.plot.y + this.y, this.width, this.height ); } } class TopPlot { constructor() { this.x = 0; this.y = 0; this.width = 300; this.height = 70; this.revealedWidth = 0; this.stripes = []; for (let x = 0; x < this.width; ) { let stripe = new Stripe(this, x); this.stripes.push(stripe); x += stripe.width; } } valueForX(x) { return Math.sin((x / this.width) * Math.PI) * this.height; } reset(dt) { for (let i = 0; i < this.stripes.length; i++) { this.stripes[i].reset(); } } updateWithTimeInterval(dt) { for (let i = 0; i < this.stripes.length; i++) { this.stripes[i].updateWithTimeInterval(dt); } } drawInContext(ctx) { for (let i = 0; i < this.stripes.length; i++) { this.stripes[i].drawInContext(ctx); } } } class AnecdoteIntegrator { constructor(canvas) { this.canvas = this.element = canvas; this.width = parseInt(canvas.width); this.height = parseInt(canvas.height); this.ctx = this.canvas.getContext("2d"); this.topPlot = new TopPlot(); this.bottomPlot = new BottomPlot(); this.tank = new Tank(); this.initialRevealedWidth = -65; this.revealedWidth = this.initialRevealedWidth; this.tick(); } tick() { this.updateAnimation(); window.requestAnimationFrame(this.tick.bind(this)); } updateAnimation() { let now = Date.now(); let dt = 0.001 * (now - (this.lastTimestamp || now)); this.lastTimestamp = now; if (dt === 0) { return; } this.revealedWidth += 40 * dt; this.topPlot.revealedWidth = this.revealedWidth; this.bottomPlot.revealedWidth = this.revealedWidth; this.tank.x = this.revealedWidth - 0.5 * this.tank.width; this.tank.waterHeight = this.bottomPlot.valueForX(this.revealedWidth); const limit = (value, min, max) => value < min ? min : value > max ? max : value; this.tank.opacity = limit( 1 - (this.revealedWidth - this.topPlot.width) / 20, 0, 1 ); this.topPlot.updateWithTimeInterval(dt); this.drawInContext(this.ctx); if (this.revealedWidth > this.topPlot.width + 100) { this.revealedWidth = this.initialRevealedWidth; this.topPlot.reset(); } } drawInContext(ctx) { ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, this.width, this.height); this.topPlot.drawInContext(ctx); this.tank.drawBackgroundInContext(ctx); this.tank.drawFillInContext(ctx); this.bottomPlot.drawInContext(ctx); } } const figureCanvas = document.querySelector("#integrator"); const figure = new AnecdoteIntegrator(figureCanvas); return html`Рис 1. Интеграция`; }