*Tiddler CanvasTest :*
<$mycanvas display="pendulum">
*Tiddler **$:/MyCanvas.js (type : application/javascript,
module-type:widget) :*
/*\
title: $:/mycanvas.js
type: application/javascript
module-type: widget
mycanvas widget
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var MyCanvasWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
MyCanvasWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
MyCanvasWidget.prototype.render = function(parent,nextSibling) {
// Save the parent dom node
this.parentDomNode = parent;
// Compute our attributes
this.computeAttributes();
this.displayFunc = this.getAttribute("display");
// Create our element
this.canvasDomNode = $tw.utils.domMaker("canvas",{
document: this.document,
"class":"tw-mycanvas",
eventListeners: [{
name: "mousedown", handlerObject: this, handlerMethod:
"handleMouseDownEvent"
}]
});
// this.canvasDomNode.width = 200;
// this.canvasDomNode.height = 200;
// Insert the elements into the DOM
parent.insertBefore(this.canvasDomNode,nextSibling);
this.domNodes.push(this.canvasDomNode);
};
MyCanvasWidget.prototype.handleMouseDownEvent = function(event) {
//this.pendulumInit(); // THIS 1sT VERSION WAS WORKING
//window[this.displayFunc](this.canvasDomNode);
(eval(this.displayFunc))(this.canvasDomNode); // PROBLEM HERE, but
this.displayFunc = "pendulum" as expected
event.preventDefault();
event.stopPropagation();
return false;
};
exports["mycanvas"] = MyCanvasWidget;
MyCanvasWidget.prototype.PendulumSim =
function (length_m, gravity_mps2, initialAngle_rad, timestep_ms, callback) {
var velocity = 0;
var angle = initialAngle_rad;
var k = -gravity_mps2/length_m;
var timestep_s = timestep_ms / 1000;
return setInterval(function () {
var acceleration = k * Math.sin(angle);
velocity += acceleration * timestep_s;
angle += velocity * timestep_s;
callback(angle);
}, timestep_ms);
}
MyCanvasWidget.prototype.pendulumInit = function () {
var canvas = this.canvasDomNode;
var context = canvas.getContext('2d');
var prev=0;
context.fillStyle = "rgba(255,255,0,1)";
context.fillRect(0, 0, canvas.width, canvas.height);
var sim = this.PendulumSim(1, 9.80665, Math.PI*99/100, 10, function (angle) {
var rPend = Math.min(canvas.width, canvas.height) * 0.47;
var rBall = Math.min(canvas.width, canvas.height) * 0.02;
var rBar = Math.min(canvas.width, canvas.height) * 0.005;
var ballX = Math.sin(angle) * rPend;
var ballY = Math.cos(angle) * rPend;
context.fillStyle = "rgba(255,255,255,0.51)";
context.globalCompositeOperation = "destination-out";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "yellow";
context.strokeStyle =
"rgba(0,0,0,"+Math.max(0,1-Math.abs(prev-angle)*10)+")";
context.globalCompositeOperation = "source-over";
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(angle);
context.beginPath();
context.rect(-rBar, -rBar, rBar*2, rPend+rBar*2);
context.fill();
context.stroke();
context.beginPath();
context.arc(0, rPend, rBall, 0, Math.PI*2, false);
context.fill();
context.stroke();
context.restore();
prev=angle;
});
}
})();
*Tiddler $:/pendulum.js (type : application/javascript, module-type:unknown ?)*
function PendulumSim (length_m, gravity_mps2, initialAngle_rad, timestep_ms,
callback) {
var velocity = 0;
var angle = initialAngle_rad;
var k = -gravity_mps2/length_m;
var timestep_s = timestep_ms / 1000;
return setInterval(function () {
var acceleration = k * Math.sin(angle);
velocity += acceleration * timestep_s;
angle += velocity * timestep_s;
callback(angle);
}, timestep_ms);
}
function pendulum(canvas) {
//var canvas = this.canvasDomNode;
var context = canvas.getContext('2d');
var prev=0;
context.fillStyle = "rgba(255,255,0,1)";
context.fillRect(0, 0, canvas.width, canvas.height);
var sim = PendulumSim(1, 9.80665, Math.PI*99/100, 10, function (angle) {
var rPend = Math.min(canvas.width, canvas.height) * 0.47;
var rBall = Math.min(canvas.width, canvas.height) * 0.02;
var rBar = Math.min(canvas.width, canvas.height) * 0.005;
var ballX = Math.sin(angle) * rPend;
var ballY = Math.cos(angle) * rPend;
context.fillStyle = "rgba(255,255,255,0.51)";
context.globalCompositeOperation = "destination-out";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "yellow";
context.strokeStyle =
"rgba(0,0,0,"+Math.max(0,1-Math.abs(prev-angle)*10)+")";
context.globalCompositeOperation = "source-over";
context.save();
context.translate(canvas.width/2, canvas.height/2);
context.rotate(angle);
context.beginPath();
context.rect(-rBar, -rBar, rBar*2, rPend+rBar*2);
context.fill();
context.stroke();
context.beginPath();
context.arc(0, rPend, rBall, 0, Math.PI*2, false);
context.fill();
context.stroke();
context.restore();
prev=angle;
});
}
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/tiddlywikidev.
For more options, visit https://groups.google.com/groups/opt_out.
