254 lines
5.8 KiB
JavaScript
254 lines
5.8 KiB
JavaScript
// Author: Jidong Xiao
|
|
// first we need to create a stage
|
|
var stage = new Konva.Stage({
|
|
container: 'container', // id of container <div>
|
|
width: 2000,
|
|
height: 1000
|
|
});
|
|
|
|
// Create a layer
|
|
var layer = new Konva.Layer();
|
|
stage.add(layer);
|
|
|
|
function makeText(x,y,str,id) {
|
|
let text = new Konva.Text({
|
|
x: x,
|
|
y: y,
|
|
text: str,
|
|
id: 'text_'+id,
|
|
fontSize: 18,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
width: 400,
|
|
padding: 20,
|
|
});
|
|
layer.add(text);
|
|
}
|
|
|
|
// Create a function to draw nodes
|
|
function drawNode(x, y, label) {
|
|
var circle = new Konva.Circle({
|
|
x: x,
|
|
y: y,
|
|
radius: 40,
|
|
fill: 'lightgray',
|
|
stroke: 'black',
|
|
strokeWidth: 1
|
|
});
|
|
layer.add(circle);
|
|
|
|
var text = new Konva.Text({
|
|
x: x - 20,
|
|
y: y - 10,
|
|
text: label,
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
layer.add(text);
|
|
}
|
|
|
|
// Draw lines connecting nodes
|
|
var line = new Konva.Line({
|
|
points: [650, 100, 450, 200, 650, 100, 850, 200],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var arrow1 = new Konva.Arrow({
|
|
points: [925, 200, 1150, 200],
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow1",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
var line1 = new Konva.Line({
|
|
points: [450, 200, 350, 300, 450, 200, 550, 300],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var line2 = new Konva.Line({
|
|
points: [850, 200, 750, 300, 850, 200, 950, 300],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var arrow2 = new Konva.Arrow({
|
|
points: [1000, 300, 1150, 300],
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow2",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
var line3 = new Konva.Line({
|
|
points: [350, 300, 300, 400, 350, 300, 400, 400],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var line4 = new Konva.Line({
|
|
points: [550, 300, 500, 400, 550, 300, 600, 400],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var line5 = new Konva.Line({
|
|
points: [750, 300, 700, 400, 750, 300, 800, 400],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var line6 = new Konva.Line({
|
|
points: [950, 300, 900, 400, 950, 300, 1000, 400],
|
|
stroke: 'black',
|
|
strokeWidth: 1,
|
|
lineCap: 'round',
|
|
lineJoin: 'round'
|
|
});
|
|
|
|
var arrow3 = new Konva.Arrow({
|
|
points: [1050, 400, 1150, 400],
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow3",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
// Create a dotted line
|
|
var dottedLine = new Konva.Line({
|
|
points: [300, 400, 200, 600],
|
|
stroke: 'black',
|
|
strokeWidth: 2,
|
|
dash: [5, 5]
|
|
});
|
|
var dottedLine2 = new Konva.Line({
|
|
points: [1000, 400, 1050, 600],
|
|
stroke: 'black',
|
|
strokeWidth: 2,
|
|
dash: [5, 5]
|
|
});
|
|
|
|
var arrow4 = new Konva.Arrow({
|
|
points: [1070, 600, 1150, 600],
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow4",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
var messageBox = new Konva.Rect({
|
|
x: 150,
|
|
y: 650,
|
|
width: 800,
|
|
height: 60,
|
|
fill: 'lightblue',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var arrow = new Konva.Arrow({
|
|
x: messageBox.x() + messageBox.width() / 2,
|
|
y: messageBox.y(),
|
|
points: [0, 0, 0, -150],
|
|
pointerLength: 20,
|
|
pointerWidth: 20,
|
|
fill: 'black',
|
|
stroke: 'black',
|
|
strokeWidth: 4
|
|
});
|
|
|
|
var messageText = new Konva.Text({
|
|
x: messageBox.x() + 10,
|
|
y: messageBox.y() + 20,
|
|
text: 'In summary, T(n) = (2^0+2^1+2^2+2^3+...+2^(n-2)) * C = O(2^(n-1)) = O((2^n)/2) = O(2^n)',
|
|
fontSize: 20,
|
|
fontFamily: 'Calibri',
|
|
fill: 'black'
|
|
});
|
|
|
|
var pc=1;
|
|
function nextstep() {
|
|
if(pc == 1){
|
|
// Draw nodes
|
|
drawNode(650, 100, 'T(n)');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 2){
|
|
layer.add(line);
|
|
drawNode(450, 200, 'T(n-1)');
|
|
drawNode(850, 200, 'T(n-2)');
|
|
layer.add(arrow1);
|
|
makeText(1150,170,"T(n-1)+T(n-2), 1 add operation, and we know 1 is 2^0, thus, time taken: (2^0 * C)",'L1');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 3){
|
|
layer.add(line1);
|
|
layer.add(line2);
|
|
drawNode(350, 300, 'T(n-2)');
|
|
drawNode(550, 300, 'T(n-3)');
|
|
drawNode(750, 300, 'T(n-3)');
|
|
drawNode(950, 300, 'T(n-4)');
|
|
layer.add(arrow2);
|
|
makeText(1150,270,"T(n-2)+T(n-3) and T(n-3)+T(n-4), 2 add operations, and we know 2 is 2^1, thus, time taken: (2^1 * C)",'L2');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 4){
|
|
layer.add(line3);
|
|
layer.add(line4);
|
|
layer.add(line5);
|
|
layer.add(line6);
|
|
layer.add(arrow3);
|
|
drawNode(300, 400, 'T(n-3)');
|
|
drawNode(400, 400, 'T(n-4)');
|
|
drawNode(500, 400, 'T(n-4)');
|
|
drawNode(600, 400, 'T(n-5)');
|
|
drawNode(700, 400, 'T(n-4)');
|
|
drawNode(800, 400, 'T(n-5)');
|
|
drawNode(900, 400, 'T(n-5)');
|
|
drawNode(1000, 400, 'T(n-6)');
|
|
makeText(1150,370,"T(n-3)+T(n-4), T(n-4)+T(n-5), T(n-4)+T(n-5) and T(n-5)+T(n-6), 4 add operations, and we know 4 is 2^2, thus, time taken: (2^2 * C)",'L3');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 5){
|
|
layer.add(dottedLine);
|
|
layer.add(dottedLine2);
|
|
drawNode(200, 600, 'T(1)');
|
|
layer.add(arrow4);
|
|
makeText(1150,570,"2^(n-2) add operations, time taken: (2^(n-2) * C)",'L4');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 6){
|
|
layer.add(messageBox);
|
|
layer.add(messageText);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 7){
|
|
alert("End of animation! Refresh the page if you want to re-run the animation.");
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}
|
|
}
|