561 lines
13 KiB
JavaScript
561 lines
13 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
|
|
});
|
|
|
|
var count=0;
|
|
|
|
// then create layer
|
|
var layer = new Konva.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,
|
|
// align: 'center',
|
|
});
|
|
layer.add(text);
|
|
}
|
|
|
|
function makeContent(x,y,str,id) {
|
|
let content = new Konva.Text({
|
|
x: x,
|
|
y: y,
|
|
text: str,
|
|
id: id,
|
|
fontSize: 18,
|
|
fontFamily: 'Calibri',
|
|
fill: '#900C3F',
|
|
width: 400,
|
|
padding: 20,
|
|
});
|
|
layer.add(content);
|
|
}
|
|
|
|
function makeMemory(xstart,ystart,bufferSize,w,h) {
|
|
for(let i=0;i<bufferSize;i++){
|
|
let tr = new Konva.Rect({
|
|
x: xstart,
|
|
y: ystart+i*h,
|
|
id:"brec"+i,
|
|
stroke: '#343434',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: w,
|
|
height: h,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
});
|
|
layer.add(tr);
|
|
} // end of for loop
|
|
}
|
|
|
|
// create stack
|
|
makeMemory(750,100,6,200,100);
|
|
makeText(750+250, 75, "0x1030", "addr0");
|
|
makeText(750+250, 175, "0x1028", "addr1");
|
|
makeText(750+250, 275, "0x1020", "addr2");
|
|
makeText(750+250, 375, "0x1018", "addr3");
|
|
makeText(750+250, 475, "0x1010", "addr4");
|
|
makeText(750+250, 575, "0x1008", "addr5");
|
|
makeText(750+250, 675, "0x1000", "addr6");
|
|
|
|
function makeHeap(xstart,ystart,bufferSize,w,h) {
|
|
for(let i=0;i<bufferSize;i++){
|
|
let tr = new Konva.Rect({
|
|
x: xstart,
|
|
y: ystart+i*h,
|
|
id:"hrec_"+i, // heap rectangle
|
|
stroke: '#343434',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: w,
|
|
height: h,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
});
|
|
layer.add(tr);
|
|
} // end of for loop
|
|
}
|
|
|
|
// create heap
|
|
makeHeap(1200,100,6,200,100);
|
|
makeText(1480, 80, "0x0228", "haddr0");
|
|
makeText(1480, 180, "0x0220", "haddr1");
|
|
makeText(1480, 280, "0x0218", "haddr2");
|
|
makeText(1480, 380, "0x0210", "haddr3");
|
|
makeText(1480, 480, "0x0208", "haddr4");
|
|
makeText(1480, 580, "0x0200", "haddr5");
|
|
|
|
// the code rectangle.
|
|
var rect1 = new Konva.Rect({
|
|
x: 20,
|
|
y: 60,
|
|
id:"code_rec1",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 550,
|
|
height: 300,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
|
|
var rect2 = new Konva.Rect({
|
|
x: 20,
|
|
y: 470,
|
|
id:"console",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 550,
|
|
height: 200,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
|
|
var rect3 = new Konva.Rect({
|
|
x: 1450,
|
|
y: 650,
|
|
id:"legend_box",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: '#ffffff',
|
|
width: 250,
|
|
height: 150,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
|
|
function makeLegendBox(xstart,ystart,color){
|
|
var rect = new Konva.Rect({
|
|
x: xstart,
|
|
y: ystart,
|
|
id:"legend_box",
|
|
stroke: '#555',
|
|
strokeWidth: 5,
|
|
fill: color,
|
|
width: 40,
|
|
height: 25,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
layer.add(rect);
|
|
}
|
|
|
|
var stackText = new Konva.Text({
|
|
x: 820,
|
|
y: 35,
|
|
id:"stack",
|
|
text: "Stack",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
});
|
|
|
|
var heapText = new Konva.Text({
|
|
x: 1270,
|
|
y: 35,
|
|
id:"heap",
|
|
text: "Heap",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
});
|
|
|
|
var codeLabel = new Konva.Text({
|
|
x: 150,
|
|
y: 405,
|
|
id:"code",
|
|
text: "Code",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
});
|
|
|
|
var consoleLabel = new Konva.Text({
|
|
x: 130,
|
|
y: 735,
|
|
id:"console",
|
|
text: "Console",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
});
|
|
|
|
var consoleText = new Konva.Text({
|
|
x: 60,
|
|
y: 400,
|
|
id:"console_text",
|
|
text: "",
|
|
fontSize: 28,
|
|
fontFamily: 'Calibri',
|
|
fill: '#581845',
|
|
});
|
|
|
|
var arrow1 = new Konva.Arrow({
|
|
points: [880, 248, 1200, 595],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow1",
|
|
fill: 'green',
|
|
stroke: 'green',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
var arrow2 = new Konva.Arrow({
|
|
points: [880, 248, 1200, 505],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow2",
|
|
fill: 'yellow',
|
|
stroke: 'yellow',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
var arrow3 = new Konva.Arrow({
|
|
points: [880, 348, 1200, 505],
|
|
tension: 0.5,
|
|
pointerLength: 10,
|
|
pointerWidth: 10,
|
|
id: "arrow3",
|
|
fill: 'red',
|
|
stroke: 'red',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
/* for the arrow */
|
|
var arrowarray2 = [880, 248, 1200, 505];
|
|
|
|
// move arrow 2 up
|
|
function moveArrowUp(){
|
|
arrowarray2[3] = arrowarray2[3] - 200;
|
|
stage.find('#arrow2').points(arrowarray2);
|
|
}
|
|
|
|
var arrowarray1 = [880, 148, 1200, 305];
|
|
|
|
// move arrow 1 down
|
|
function moveArrowDown(){
|
|
arrowarray1[3] = arrowarray1[3] + 200;
|
|
stage.find('#arrow1').points(arrowarray1);
|
|
}
|
|
|
|
// box for code
|
|
layer.add(rect1);
|
|
// box for console
|
|
layer.add(rect2);
|
|
// box for legend
|
|
layer.add(rect3);
|
|
// legend
|
|
makeText(750+690, 650, "legend (for heap)", "legend");
|
|
makeText(1490, 695, "memory not allocated", "free");
|
|
makeText(1490, 735, "memory allocated", "allocated");
|
|
makeLegendBox(1460, 715, '#ddd');
|
|
makeLegendBox(1460, 760, '#ecbeb4');
|
|
|
|
layer.add(stackText);
|
|
layer.add(heapText);
|
|
layer.add(consoleLabel);
|
|
layer.add(codeLabel);
|
|
layer.add(consoleText);
|
|
|
|
function makeCode(x,y,str,id) {
|
|
return new Konva.Text({
|
|
x: x,
|
|
y: y,
|
|
text: str,
|
|
id: 'line'+id,
|
|
fontSize: 18,
|
|
fontFamily: 'Calibri',
|
|
fill: '#000000',
|
|
width: 550,
|
|
padding: 20,
|
|
});
|
|
}
|
|
|
|
var code=["0. int main(){",
|
|
"1. \t\t\t std::cout << \"Enter the size of the array: \";",
|
|
"2. \t\t\t int n, i;",
|
|
"3. \t\t\t std::cin >> n;",
|
|
"4. \t\t\t double *a = new double[n];",
|
|
"5. \t\t\t for (i=0; i<n; ++i) { a[i] = sqrt[i]; }",
|
|
"6. \t\t\t for (i=0; i<n; ++i) {",
|
|
"7. \t\t\t \t\t\t if (double(int(a[i])) == a[i] )",
|
|
"8. \t\t\t \t\t\t \t\t\t std::cout << i << \" is a perfect square \" << std::endl;",
|
|
"9. \t\t\t }",
|
|
"10. \t delete [] a;",
|
|
"11. \t return 0;",
|
|
"12. }",
|
|
];
|
|
|
|
function makeBold(id){
|
|
for(let i=1; i<=code.length; i++){
|
|
if(i!=id){
|
|
stage.find('#line'+i).fontStyle('normal');
|
|
}else{
|
|
stage.find('#line'+id).fontStyle('bold');
|
|
}
|
|
}
|
|
}
|
|
|
|
// make multiple lines bold
|
|
function makeBold2(id, len){
|
|
for(let i=1; i<=code.length; i++){
|
|
if( i<id || i>=(id+len) ){
|
|
stage.find('#line'+i).fontStyle('normal');
|
|
}else{
|
|
stage.find('#line'+i).fontStyle('bold');
|
|
}
|
|
}
|
|
}
|
|
|
|
// write the code fragment into the code box.
|
|
for (let i=0;i<code.length;i++){
|
|
// the array starts from index 0, but we want ids to be counted from index 1.
|
|
let t=makeCode(20,60+(i*20),code[i],i+1);
|
|
layer.add(t);
|
|
}
|
|
|
|
// defining the message box
|
|
var msg_box = new Konva.Rect({
|
|
x: 900,
|
|
y: 100,
|
|
id:"message_box",
|
|
stroke: '#ffa07a',
|
|
strokeWidth: 5,
|
|
fill: '#ddd',
|
|
width: 400,
|
|
height: 200,
|
|
shadowColor: 'black',
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 10,
|
|
shadowOffsetY: 10,
|
|
shadowOpacity: 0.2,
|
|
cornerRadius: 10,
|
|
});
|
|
|
|
// layer.add(msg_box);
|
|
|
|
var message=["$",
|
|
"",
|
|
"",
|
|
"",
|
|
""];
|
|
|
|
function updateMessage(msg,i) {
|
|
stage.find('#text_msg'+i).text(msg);
|
|
}
|
|
|
|
// draw that $ sign, which is a command line prompt.
|
|
makeText(60,480,message[0],'msg0');
|
|
|
|
var line1 = new Konva.Line({
|
|
points: [750, 150, 950, 150],
|
|
stroke: '#343434',
|
|
strokeWidth: 5,
|
|
});
|
|
|
|
// add the layer to the stage
|
|
stage.add(layer);
|
|
|
|
// draw the image
|
|
layer.draw();
|
|
|
|
var pc=1;
|
|
function nextstep() {
|
|
if(pc == 1){
|
|
makeBold(pc);
|
|
//makeText(1120,320,"int",'p_heap');
|
|
// changing color to mark it as allocated
|
|
//stage.find('#hrec_2').fill('#ecbeb4');
|
|
// this has to be after makeMemory so that the memory doesn't overwrite this.
|
|
//makeContent(800,120,"0x020C",'p_value');
|
|
//makeContent(1280,320,"?",'p_heap_value');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 2){
|
|
makeBold(pc);
|
|
updateMessage("$ Enter the size of the array: ",0);
|
|
makeText(60,500,message[1],'msg1');
|
|
makeText(60,520,message[2],'msg2');
|
|
makeText(60,540,message[3],'msg3');
|
|
makeText(60,560,message[4],'msg4');
|
|
//stage.find('#p_heap_value').text('17');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 3){
|
|
makeBold(pc);
|
|
makeText(650,100,"int n",'n');
|
|
makeContent(820,100,"?",'n_value');
|
|
layer.add(line1);
|
|
makeText(650,150,"int i",'i');
|
|
makeContent(820,150,"?",'i_value');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 4){
|
|
makeBold(pc);
|
|
updateMessage("$ Enter the size of the array: 4 // we pretend someone inputs 4 here",0);
|
|
updateMessage("$", 2);
|
|
stage.find('#n_value').text('4');
|
|
//makeText(650,220,"int * q",'q');
|
|
//makeContent(800,220,"\t\t\t\t?",'q_value');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 5){
|
|
makeBold(pc);
|
|
makeText(650,220,"double *a",'a');
|
|
makeText(1070,520,"double [4]",'a_heap');
|
|
// changing color to mark it as allocated
|
|
stage.find('#hrec_1').fill('#ecbeb4');
|
|
stage.find('#hrec_2').fill('#ecbeb4');
|
|
stage.find('#hrec_3').fill('#ecbeb4');
|
|
stage.find('#hrec_4').fill('#ecbeb4');
|
|
stage.find('#q_value').text('0x0204');
|
|
makeText(1400, 210, "[3]", "haddr2");
|
|
makeText(1400, 310, "[2]", "haddr3");
|
|
makeText(1400, 410, "[1]", "haddr4");
|
|
makeText(1400, 510, "[0]", "haddr5");
|
|
makeContent(1274,220," ?",'q_heap_value3');
|
|
makeContent(1274,320," ?",'q_heap_value2');
|
|
makeContent(1274,420," ?",'q_heap_value1');
|
|
makeContent(1274,520," ?",'q_heap_value0');
|
|
makeContent(800,220,"0x0200",'a_value');
|
|
// add the 1st arrow here.
|
|
layer.add(arrow1);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 6){
|
|
makeBold(pc);
|
|
stage.find('#q_heap_value0').text('0.00');
|
|
stage.find('#q_heap_value1').text('1.00');
|
|
stage.find('#q_heap_value2').text('1.44');
|
|
stage.find('#q_heap_value3').text('1.73');
|
|
stage.find('#i_value').text('4');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 7){
|
|
makeBold(pc);
|
|
stage.find('#i_value').text('0');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 8){
|
|
makeBold(pc);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 9){
|
|
makeBold(pc);
|
|
updateMessage("$ 0 is a perfect square", 2);
|
|
updateMessage("$", 3);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 10){ // close curly brace
|
|
makeBold(pc);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 11){ // open curly brace
|
|
makeBold(7);
|
|
stage.find('#i_value').text('1');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 12){ // if statement
|
|
makeBold(8);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 13){
|
|
makeBold(9);
|
|
updateMessage("$ 1 is a perfect square", 3);
|
|
updateMessage("$ ",4);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 14){ // close curly brace
|
|
makeBold(10);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 15){ // open curly brace
|
|
makeBold(7);
|
|
stage.find('#i_value').text('2');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 16){ // if statement
|
|
makeBold(8);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 17){ // close curly brace
|
|
makeBold(10); // skip 9 because if isn't true.
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 18){ // open curly brace
|
|
makeBold(7);
|
|
stage.find('#i_value').text('3');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 19){ // if statement
|
|
makeBold(8);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 20){ // close curly brace
|
|
makeBold(10); // skip 9 because if isn't true.
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 21){ // open curl brace, but now i is 4, thus get out of the for loop.
|
|
makeBold(7);
|
|
stage.find('#i_value').text('4');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 22){
|
|
makeBold(11);
|
|
// changing color to mark it as reclaimed
|
|
stage.find('#hrec_1').fill('#ddd');
|
|
stage.find('#hrec_2').fill('#ddd');
|
|
stage.find('#hrec_3').fill('#ddd');
|
|
stage.find('#hrec_4').fill('#ddd');
|
|
stage.find('#text_a_heap').text('');
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 23){
|
|
makeBold(12);
|
|
layer.draw();
|
|
pc=pc+1;
|
|
}else if(pc == 24){
|
|
alert("End of animation! Refresh the page if you want to re-run the animation.");
|
|
pc=pc+1;
|
|
}
|
|
}
|
|
|
|
/* vim: set ts=4: */
|