adding the animation directory

animations/pointers/example1/example1.js

@@ -0,0 +1,286 @@
+// 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: 'prog'+id,
+        fontSize: 18,
+        fontFamily: 'Calibri',
+        fill: '#000000',
+        width: 400,
+        padding: 20,
+        // align: 'center',
+    });
+	layer.add(text);
+}
+
+function makeContent(x,y,str,id) {
+    let text = new Konva.Text({
+        x: x,
+        y: y,
+        text: str,
+        id: 'cont_'+id,
+        fontSize: 18,
+        fontFamily: 'Calibri',
+        fill: '#900C3F',
+        width: 400,
+        padding: 20,
+    });
+	layer.add(text);
+}
+
+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
+}
+
+makeMemory(800,0,6,200,100);
+makeText(800+350, -20, "0x1000", "addr0");
+makeText(800+350, 80, "0x1008", "addr2");
+makeText(800+350, 180, "0x1010", "addr3");
+makeText(800+350, 280, "0x1018", "addr4");
+makeText(800+350, 380, "0x1020", "addr5");
+makeText(800+350, 480, "0x1028", "addr6");
+
+var rect1 = new Konva.Rect({
+    x: 20,
+    y: 60,
+    id:"prec1",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var rect2 = new Konva.Rect({
+    x: 20,
+    y: 370,
+    id:"console",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var memoryText = new Konva.Text({
+    x: 830,
+    y: 635,
+    id:"memory",
+    text: "Memory",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var codeLabel = new Konva.Text({
+    x: 150,
+    y: 305,
+    id:"code",
+    text: "Code",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var consoleLabel = new Konva.Text({
+    x: 130,
+    y: 635,
+    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 arrowLeft1 = new Konva.Arrow({
+    points: [925, 250, 1100, 200, 1005, 150],
+        tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowright1",
+    fill: 'green',
+    stroke: 'green',
+    strokeWidth: 5,
+});
+
+// box for code
+layer.add(rect1);
+// box for console
+layer.add(rect2);
+
+layer.add(memoryText);
+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: 400,
+        padding: 20,
+    });
+}
+
+// hard code here, we assume we only have 8 lines of code.
+function makeBold(id){
+	for(let i=1;i<=8;i++){
+		if(i!=id){
+			stage.find('#line'+i).fontStyle('normal');
+		}else{
+			stage.find('#line'+id).fontStyle('bold');
+		}
+	}
+}
+
+var code=["1. float x = 15.5;",
+    "2. float *p;",
+    "3. p = &x;",
+    "4. *p = 72; ",
+    "5. if (x > 20 )",
+    "6. \t\t cout << \"Bigger\\n\";",
+    "7. else",
+    "8. \t\t cout << \"Smaller\\n\"; "];
+
+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,80+(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);
+
+// add the layer to the stage
+stage.add(layer);
+
+// draw the image
+layer.draw();
+
+//t=makeContent(850,220,"0x8",'value2');
+//layer.add(t);
+
+var pc=1;
+
+function nextstep() {
+	if(pc == 1){
+		makeBold(pc);
+		makeText(650,120,"float x",'x');
+		// this has to be after makeMemory so that the memory doesn't overwrite this.
+		makeContent(850,120,"15.5",'value1');
+               /* update last occurrence of c */
+        //        stage.find('#text_c').text("0");
+        /* highlight the box for c */
+        //stage.find('#lastseenbuf_2').fill("#5f9ea0");
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 2){
+		makeBold(pc);
+		makeText(650,220,"float *p",'p');
+		// at first, it's just garbage.
+		makeContent(850,220,"\ \ \ ?",'value2');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 3){
+		makeBold(pc);
+		// p takes the address of x.
+		stage.find('#cont_value2').text('0x1008');
+		// add the arrow here.
+		layer.add(arrowLeft1);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 4){
+		makeBold(pc);
+		stage.find('#cont_value1').text('72.0');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 5){
+		makeBold(pc);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 6){
+		makeBold(pc);
+		stage.find('#console_text').text('$ Bigger');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 7){
+		alert("End of animation! Refresh the page if you want to re-run the animation.");
+	}
+}
+
+/* vim: set ts=4: */

animations/pointers/example1/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pointers: example 1</title>
+    <script src="../../konva.js"></script>
+</head>
+<body>
+
+<h1>Pointers: example 1</h1>
+<p>This is the animation of example 1. Click the "next step" button to run the animation.</p>
+
+<button onclick="nextstep()">next step</button>
+
+<div id="container"></div>
+<script src="example1.js"></script>
+</body>
+</html>

animations/pointers/example2/example2.js

@@ -0,0 +1,262 @@
+// 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: 'prog'+id,
+        fontSize: 18,
+        fontFamily: 'Calibri',
+        fill: '#000000',
+        width: 400,
+        padding: 20,
+        // align: 'center',
+    });
+	layer.add(text);
+}
+
+function makeContent(x,y,str,id) {
+    let text = new Konva.Text({
+        x: x,
+        y: y,
+        text: str,
+        id: 'cont_'+id,
+        fontSize: 18,
+        fontFamily: 'Calibri',
+        fill: '#900C3F',
+        width: 400,
+        padding: 20,
+    });
+	layer.add(text);
+}
+
+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
+}
+
+makeMemory(800,0,6,200,100);
+makeText(800+250, -20, "0x1000", "addr0");
+makeText(800+250, 80, "0x1008", "addr2");
+makeText(800+250, 180, "0x1010", "addr3");
+makeText(800+250, 280, "0x1018", "addr4");
+makeText(800+250, 380, "0x1020", "addr5");
+makeText(800+250, 480, "0x1028", "addr6");
+
+var rect1 = new Konva.Rect({
+    x: 20,
+    y: 60,
+    id:"prec1",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var rect2 = new Konva.Rect({
+    x: 20,
+    y: 370,
+    id:"console",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var memoryText = new Konva.Text({
+    x: 830,
+    y: 635,
+    id:"memory",
+    text: "Memory",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var codeLabel = new Konva.Text({
+    x: 150,
+    y: 305,
+    id:"code",
+    text: "Code",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var consoleLabel = new Konva.Text({
+    x: 130,
+    y: 635,
+    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 arrowLeft1 = new Konva.Arrow({
+    points: [920, 250, 1100, 200, 1005, 150],
+        tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowright1",
+    fill: 'green',
+    stroke: 'green',
+    strokeWidth: 5,
+});
+
+// box for code
+layer.add(rect1);
+// box for console
+layer.add(rect2);
+
+layer.add(memoryText);
+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: 400,
+        padding: 20,
+    });
+}
+
+// hard code here, we assume we only have 3 lines of code.
+function makeBold(id){
+	for(let i=1;i<=3;i++){
+		if(i!=id){
+			stage.find('#line'+i).fontStyle('normal');
+		}else{
+			stage.find('#line'+id).fontStyle('bold');
+		}
+	}
+}
+
+var code=["1. int * p, q;",
+    "2. float *s, *t;",
+    "3. *p = 15;"];
+
+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,80+(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);
+
+// add the layer to the stage
+stage.add(layer);
+
+// draw the image
+layer.draw();
+
+var pc=1;
+
+function nextstep() {
+	if(pc == 1){
+		makeBold(pc);
+		t=makeText(650,120,"int *p",'p');
+		// this has to be after makeMemory so that the memory doesn't overwrite this.
+		makeContent(870,120,"?",'value1');
+		makeText(650,220,"int q",'q');
+		makeContent(870,220,"?",'value2');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 2){
+		makeBold(pc);
+		makeText(650,320,"float *s",'s');
+		// at first, it's just garbage.
+		makeContent(870,320,"?",'value3');
+		makeText(650,420,"float *t",'t');
+		// at first, it's just garbage.
+		makeContent(870,420,"?",'value4');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 3){
+		makeBold(pc);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 4){
+		alert("p is not initialized!");
+		pc=pc+1;
+	}
+}
+
+/* vim: set ts=4: */

animations/pointers/example2/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pointers: example 2</title>
+    <script src="../../konva.js"></script>
+</head>
+<body>
+
+<h1>Pointers: example 2</h1>
+<p>This is the animation of example 2. Click the "next step" button to run the animation. Note: this animation makes an unrealistic assumption, which is it takes 8 bytes to store each of the following: an int object, an int pointer, a float object, a float pointer.</p>
+
+<button onclick="nextstep()">next step</button>
+
+<div id="container"></div>
+<script src="example2.js"></script>
+</body>
+</html>

animations/pointers/example3/example3.js

@@ -0,0 +1,309 @@
+// 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: 'prog'+id,
+        fontSize: 18,
+        fontFamily: 'Calibri',
+        fill: '#000000',
+        width: 400,
+        padding: 20,
+        // align: 'center',
+    });
+	layer.add(text);
+}
+
+function makeContent(x,y,str,id) {
+    let text = new Konva.Text({
+        x: x,
+        y: y,
+        text: str,
+        id: id,
+        fontSize: 18,
+        fontFamily: 'Calibri',
+        fill: '#900C3F',
+        width: 400,
+        padding: 20,
+    });
+	layer.add(text);
+}
+
+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
+}
+
+makeMemory(800,0,6,200,100);
+makeText(800+350, -20, "0x1000", "addr0");
+makeText(800+350, 80, "0x1008", "addr2");
+makeText(800+350, 180, "0x1010", "addr3");
+makeText(800+350, 280, "0x1018", "addr4");
+makeText(800+350, 380, "0x1020", "addr5");
+makeText(800+350, 480, "0x1028", "addr6");
+
+var rect1 = new Konva.Rect({
+    x: 20,
+    y: 60,
+    id:"prec1",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var rect2 = new Konva.Rect({
+    x: 20,
+    y: 370,
+    id:"console",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var memoryText = new Konva.Text({
+    x: 830,
+    y: 635,
+    id:"memory",
+    text: "Memory",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var codeLabel = new Konva.Text({
+    x: 150,
+    y: 305,
+    id:"code",
+    text: "Code",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var consoleLabel = new Konva.Text({
+    x: 130,
+    y: 635,
+    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 arrowLeft1 = new Konva.Arrow({
+    points: [945, 350, 1100, 200, 1005, 150],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowrleft1",
+    fill: 'green',
+    stroke: 'green',
+    strokeWidth: 5,
+});
+
+var arrowLeft2 = new Konva.Arrow({
+    points: [945, 450, 1100, 300, 1005, 250],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowleft2",
+    fill: 'yellow',
+    stroke: 'yellow',
+    strokeWidth: 5,
+});
+
+/* for the arrow */
+var arrowarray1 = [945, 450, 1100, 300, 1005, 250];
+
+function moveArrow(){
+    arrowarray1[5] = arrowarray1[5] - 100;
+    arrowarray1[3] = arrowarray1[3] - 100;
+    stage.find('#arrowleft2').points(arrowarray1);
+}
+
+// box for code
+layer.add(rect1);
+// box for console
+layer.add(rect2);
+
+layer.add(memoryText);
+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: 400,
+        padding: 20,
+    });
+}
+
+// hard code here, we assume we only have 6 lines of code.
+function makeBold(id){
+	for(let i=1;i<=6;i++){
+		if(i!=id){
+			stage.find('#line'+i).fontStyle('normal');
+		}else{
+			stage.find('#line'+id).fontStyle('bold');
+		}
+	}
+}
+
+var code=["1. float x=5, y=9;",
+	"2. float *p = &x, *q = &y;",
+	"3. *p = 17.0;",
+	"4. *q = *p;",
+	"5. q = p;",
+	"6. *q = 13.0;",
+];
+
+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,80+(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);
+
+// 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(650,120,"float x",'x');
+		// this has to be after makeMemory so that the memory doesn't overwrite this.
+		makeContent(870,120,"5",'x_value');
+		makeText(650,220,"float y",'y');
+		makeContent(870,220,"9",'y_value');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 2){
+		makeBold(pc);
+		makeText(650,320,"float *p",'p');
+		makeContent(870,320,"0x1008",'p_value');
+		// add the arrow here.
+                layer.add(arrowLeft1);
+		makeText(650,420,"float *q",'q');
+		makeContent(870,420,"0x1010",'q_value');
+		// add the second arrow here.
+                layer.add(arrowLeft2);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 3){
+		makeBold(pc);
+		// following pointer p to the address which is pointed to by p, and store 17.0 to that address.
+                stage.find('#x_value').text('17.0');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 4){
+		makeBold(pc);
+		// following pointer p to the address which is pointed to by p, and store 17.0 to that address.
+                stage.find('#y_value').text('17.0');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 5){
+		makeBold(pc);
+		// assign pointer p to q, so now p and q are both pointing to 0x8, which stores variable x.
+                stage.find('#q_value').text('0x1008');
+		// move arrow up so that both p and q point to the same address.
+		moveArrow();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 6){
+		makeBold(pc);
+		// following pointer q to the address which is pointed to by q, and store 13.0 to that address.
+                stage.find('#x_value').text('13.0');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 7){
+		alert("End of animation! Refresh the page if you want to re-run the animation!");
+		pc=pc+1;
+	}
+}
+
+/* vim: set ts=4: */

animations/pointers/example3/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pointers: example 3</title>
+    <script src="../../konva.js"></script>
+</head>
+<body>
+
+<h1>Pointers: example 3</h1>
+<p>This is the animation of example 3 in which we try to find out what the values of x and y are at the end. Click the "next step" button to run the animation.</p>
+
+<button onclick="nextstep()">next step</button>
+
+<div id="container"></div>
+<script src="example3.js"></script>
+</body>
+</html>

animations/pointers/example4/example4.js

@@ -0,0 +1,360 @@
+// 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
+}
+
+makeMemory(800,0,6,200,100);
+makeText(800+250, -20, "0x1000", "addr0");
+makeText(800+250, 80, "0x1008", "addr2");
+makeText(800+250, 180, "0x1010", "addr3");
+makeText(800+250, 280, "0x1018", "addr4");
+makeText(800+250, 380, "0x1020", "addr5");
+makeText(800+250, 480, "0x1028", "addr6");
+
+var rect1 = new Konva.Rect({
+    x: 20,
+    y: 60,
+    id:"prec1",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var rect2 = new Konva.Rect({
+    x: 20,
+    y: 370,
+    id:"console",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var memoryText = new Konva.Text({
+    x: 830,
+    y: 635,
+    id:"memory",
+    text: "Memory",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var codeLabel = new Konva.Text({
+    x: 150,
+    y: 305,
+    id:"code",
+    text: "Code",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var consoleLabel = new Konva.Text({
+    x: 130,
+    y: 635,
+    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 arrowLeft1 = new Konva.Arrow({
+    points: [945, 350, 1100, 200, 1005, 150],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowrleft1",
+    fill: 'green',
+    stroke: 'green',
+    strokeWidth: 5,
+});
+
+var arrowLeft2 = new Konva.Arrow({
+    points: [945, 450, 1100, 300, 1005, 250],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowleft2",
+    fill: 'yellow',
+    stroke: 'yellow',
+    strokeWidth: 5,
+});
+
+var arrowLeft3 = new Konva.Arrow({
+    points: [945, 550, 1100, 400, 1005, 250],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowleft2",
+    fill: 'red',
+    stroke: 'red',
+    strokeWidth: 5,
+});
+
+/* for the arrow */
+var arrowarray1 = [945, 450, 1100, 300, 1005, 250];
+
+function moveArrow(){
+    arrowarray1[5] = arrowarray1[5] - 100;
+    arrowarray1[3] = arrowarray1[3] - 100;
+    stage.find('#arrowleft2').points(arrowarray1);
+}
+
+// box for code
+layer.add(rect1);
+// box for console
+layer.add(rect2);
+
+layer.add(memoryText);
+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: 400,
+        padding: 20,
+    });
+}
+
+// hard code here, we assume we only have 9 lines of code.
+function makeBold(id){
+	for(let i=1;i<=9;i++){
+		if(i!=id){
+			stage.find('#line'+i).fontStyle('normal');
+		}else{
+			stage.find('#line'+id).fontStyle('bold');
+		}
+	}
+}
+
+var code=["1. int x = 10, y = 15;",
+    "2. int *a = &x;",
+    "3. cout << x << \" \" << y << endl;",
+    "4. int *b = &y;",
+    "5. *a = x * *b;",
+    "6. cout << x << \" \" << y << endl;",
+    "7. int *c = b;",
+    "8. *c = 25;",
+    "9. cout << x << \" \" << y << endl;",
+];
+
+
+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,400,message[0],'msg0');
+
+// 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(650,120,"int x",'x');
+		// this has to be after makeMemory so that the memory doesn't overwrite this.
+		makeContent(870,120,"10",'x_value');
+		makeText(650,220,"int y",'y');
+		makeContent(870,220,"15",'y_value');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 2){
+		makeBold(pc);
+		makeText(650,320,"int *a",'a');
+		makeContent(870,320,"0x1008",'a_value');
+		// add the arrow here.
+                layer.add(arrowLeft1);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 3){
+		makeBold(pc);
+		updateMessage("$ 10 15",0);
+                makeText(60,420,message[1],'msg1');
+		updateMessage("$ ",1);
+                makeText(60,440,message[2],'msg2');
+                makeText(60,460,message[3],'msg3');
+		// stage.find('#console_text').text('$ 10 15');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 4){
+		makeBold(pc);
+		makeText(650,420,"int *b",'b');
+		makeContent(870,420,"0x1010",'b_value');
+		// add the second arrow here.
+                layer.add(arrowLeft2);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 5){
+		makeBold(pc);
+		// following pointer a to the address which is pointed to by a, and store 150 to that address.
+		// why 150? because it's x * *b, and *b is y, which is 15, whereas x is 10, and 10*15=150.
+                stage.find('#x_value').text('150');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 6){
+		makeBold(pc);
+		updateMessage("$ 150 15",1);
+		updateMessage("$ ",2);
+		// stage.find('#console_text').text('$ 150 15');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 7){
+		makeBold(pc);
+		makeText(650,520,"int *c",'c');
+		makeContent(870,520,"0x1010",'c_value');
+		// add the 3rd arrow here.
+                layer.add(arrowLeft3);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 8){
+		makeBold(pc);
+		// following pointer c to the address which is pointed to by c, and store 25 to that address.
+		// and because we assigned b to c, so b and c are now both pointing to the address 0x16, which stores the variable y.
+                stage.find('#y_value').text('25');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 9){
+		makeBold(pc);
+		updateMessage("$ 150 25",2);
+		updateMessage("$ ",3);
+		// stage.find('#console_text').text('$ 150 25');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 10){
+		alert("End of animation! Refresh the page if you want to re-run the animation.");
+		pc=pc+1;
+	}
+}
+
+/* vim: set ts=4: */

animations/pointers/example4/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pointers: example 4</title>
+    <script src="../../konva.js"></script>
+</head>
+<body>
+
+<h1>Pointers: example 4</h1>
+<p>This is the animation of example 4. Click the "next step" button to run the animation.</p>
+
+<button onclick="nextstep()">next step</button>
+
+<div id="container"></div>
+<script src="example4.js"></script>
+</body>
+</html>

animations/pointers/example_arrays_1/array1.js

@@ -0,0 +1,455 @@
+// 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
+}
+
+makeMemory(800,0,12,200,50);
+makeText(800+350, -20, "0x1000", "addr0");
+makeText(800+350, 5, "0x1004", "addr1");
+makeText(800+350, 30, "0x1008", "addr2");
+makeText(800+350, 80, "0x1010", "addr3");
+makeText(800+350, 130, "0x1018", "addr4");
+makeText(800+350, 180, "0x1020", "addr5");
+makeText(800+350, 230, "0x1028", "addr6");
+makeText(800+350, 280, "0x1030", "addr7");
+makeText(800+350, 330, "0x1038", "addr8");
+makeText(800+350, 380, "0x1040", "addr9");
+makeText(800+350, 430, "0x1048", "addr10");
+makeText(800+350, 480, "0x1050", "addr11");
+makeText(800+350, 530, "0x1058", "addr12");
+makeText(800+350, 555, "0x105C", "addr13");
+
+var line1 = new Konva.Line({
+	points: [800, 25, 1000, 25],
+        stroke: '#343434',
+        strokeWidth: 5,
+      });
+
+layer.add(line1);
+
+var line2 = new Konva.Line({
+	points: [800, 575, 1000, 575],
+        stroke: '#343434',
+        strokeWidth: 5,
+      });
+
+var rect1 = new Konva.Rect({
+    x: 20,
+    y: 60,
+    id:"prec1",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var rect2 = new Konva.Rect({
+    x: 20,
+    y: 370,
+    id:"console",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var memoryText = new Konva.Text({
+    x: 830,
+    y: 635,
+    id:"memory",
+    text: "Memory",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var codeLabel = new Konva.Text({
+    x: 150,
+    y: 305,
+    id:"code",
+    text: "Code",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var consoleLabel = new Konva.Text({
+    x: 130,
+    y: 635,
+    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 arrowLeft1 = new Konva.Arrow({
+    points: [920, 350, 1100, 200, 1005, 150],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowrleft1",
+    fill: 'green',
+    stroke: 'green',
+    strokeWidth: 5,
+});
+
+var arrowLeft2 = new Konva.Arrow({
+    points: [930, 450, 1100, 300, 1005, 250],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowleft2",
+    fill: 'yellow',
+    stroke: 'yellow',
+    strokeWidth: 5,
+});
+
+var arrowLeft3 = new Konva.Arrow({
+    points: [930, 550, 1100, 400, 1005, 250],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowleft2",
+    fill: 'red',
+    stroke: 'red',
+    strokeWidth: 5,
+});
+
+/* for the arrow */
+var arrowarray1 = [930, 450, 1100, 300, 1005, 250];
+
+function moveArrow(){
+    arrowarray1[5] = arrowarray1[5] - 100;
+    arrowarray1[3] = arrowarray1[3] - 100;
+    stage.find('#arrowleft2').points(arrowarray1);
+}
+
+// box for code
+layer.add(rect1);
+// box for console
+layer.add(rect2);
+
+layer.add(memoryText);
+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: 400,
+        padding: 20,
+    });
+}
+
+// hard code here, we assume we only have 5 lines of code.
+function makeBold(id){
+	for(let i=1;i<=5;i++){
+		if(i!=id){
+			stage.find('#line'+i).fontStyle('normal');
+		}else{
+			stage.find('#line'+id).fontStyle('bold');
+		}
+	}
+}
+
+var code=["1. const int n = 10;",
+    "2. double a[n];",
+    "3. int i;",
+    "4. for( i=0; i<n; ++i )",
+    "5. \t\t a[i] = sqrt( double(i) );",
+];
+
+
+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,80+(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,400,message[0],'msg0');
+
+// 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(650,10,"const int n",'n');
+		// this has to be after makeMemory so that the memory doesn't overwrite this.
+		makeContent(870,10,"10",'n_value');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 2){
+		makeBold(pc);
+		makeText(650,50,"double[] a",'a');
+		makeContent(870,50,"?",'a0_value');
+		makeContent(870,100,"?",'a1_value');
+		makeContent(870,150,"?",'a2_value');
+		makeContent(870,200,"?",'a3_value');
+		makeContent(870,250,"?",'a4_value');
+		makeContent(870,300,"?",'a5_value');
+		makeContent(870,350,"?",'a6_value');
+		makeContent(870,400,"?",'a7_value');
+		makeContent(870,450,"?",'a8_value');
+		makeContent(870,500,"?",'a9_value');
+		makeText(1050,50,"a[0]",'a0');
+		makeText(1050,100,"a[1]",'a1');
+		makeText(1050,150,"a[2]",'a2');
+		makeText(1050,200,"a[3]",'a3');
+		makeText(1050,250,"a[4]",'a4');
+		makeText(1050,300,"a[5]",'a5');
+		makeText(1050,350,"a[6]",'a6');
+		makeText(1050,400,"a[7]",'a7');
+		makeText(1050,450,"a[8]",'a8');
+		makeText(1050,500,"a[9]",'a9');
+		// add the arrow here.
+                //layer.add(arrowLeft1);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 3){
+		makeBold(pc);
+		makeText(650,535,"int i",'i');
+		makeContent(870,535,"?",'i_value');
+		layer.add(line2);
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 4){
+		makeBold(pc);
+                stage.find('#i_value').text('0');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 5){
+		makeBold(pc);
+                stage.find('#a0_value').text('0.00');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 6){
+		// because it's a loop, so we just go between line 4 and line 5.
+		makeBold(4);
+                stage.find('#i_value').text('1');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 7){
+		// because it's a loop, so we just go between line 4 and line 5.
+		makeBold(5);
+                stage.find('#a1_value').text('1.00');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 8){
+		makeBold(4);
+                stage.find('#i_value').text('2');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 9){
+		makeBold(5);
+                stage.find('#a2_value').text('1.44');	// sqrt(2)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 10){
+		makeBold(4);
+                stage.find('#i_value').text('3');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 11){
+		makeBold(5);
+                stage.find('#a3_value').text('1.73');	// sqrt(3)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 12){
+		makeBold(4);
+                stage.find('#i_value').text('4');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 13){
+		makeBold(5);
+                stage.find('#a4_value').text('2.00');	// sqrt(4)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 14){
+		makeBold(4);
+                stage.find('#i_value').text('5');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 15){
+		makeBold(5);
+                stage.find('#a5_value').text('2.24');	// sqrt(5)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 16){
+		makeBold(4);
+                stage.find('#i_value').text('6');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 17){
+		makeBold(5);
+                stage.find('#a6_value').text('2.45');	// sqrt(6)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 18){
+		makeBold(4);
+                stage.find('#i_value').text('7');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 19){
+		makeBold(5);
+                stage.find('#a7_value').text('2.65');	// sqrt(7)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 20){
+		makeBold(4);
+                stage.find('#i_value').text('8');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 21){
+		makeBold(5);
+                stage.find('#a8_value').text('2.83');	// sqrt(8)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 22){
+		makeBold(4);
+                stage.find('#i_value').text('9');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 23){
+		makeBold(5);
+                stage.find('#a9_value').text('3.00');	// sqrt(9)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 24){
+		makeBold(4);
+                stage.find('#i_value').text('10');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 25){
+		alert("End of loop! Also end of animation! Refresh the page if you want to re-run the animation.");
+		pc=pc+1;
+	}
+}
+
+/* vim: set ts=4: */

animations/pointers/example_arrays_1/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Arrays: example 1</title>
+    <script src="../../konva.js"></script>
+</head>
+<body>
+
+<h1>Arrays: example 1</h1>
+<p>This is the animation of example 1. Click the "next step" button to run the animation.</p>
+
+<button onclick="nextstep()">next step</button>
+
+<div id="container"></div>
+<script src="array1.js"></script>
+</body>
+</html>

animations/pointers/example_arrays_2/array2.js

@@ -0,0 +1,443 @@
+// 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
+}
+
+makeMemory(800,0,12,200,50);
+makeText(800+350, -20, "0x1000", "addr0");
+makeText(800+350, 5, "0x1004", "addr1");
+makeText(800+350, 30, "0x1008", "addr2");
+makeText(800+350, 80, "0x1010", "addr3");
+makeText(800+350, 130, "0x1018", "addr4");
+makeText(800+350, 180, "0x1020", "addr5");
+makeText(800+350, 230, "0x1028", "addr6");
+makeText(800+350, 280, "0x1030", "addr7");
+makeText(800+350, 330, "0x1038", "addr8");
+makeText(800+350, 380, "0x1040", "addr9");
+makeText(800+350, 430, "0x1048", "addr10");
+makeText(800+350, 480, "0x1050", "addr11");
+makeText(800+350, 530, "0x1058", "addr12");
+
+var line1 = new Konva.Line({
+	points: [800, 25, 1000, 25],
+        stroke: '#343434',
+        strokeWidth: 5,
+      });
+
+layer.add(line1);
+
+var rect1 = new Konva.Rect({
+    x: 20,
+    y: 60,
+    id:"prec1",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var rect2 = new Konva.Rect({
+    x: 20,
+    y: 370,
+    id:"console",
+    stroke: '#555',
+    strokeWidth: 5,
+    fill: '#ddd',
+    width: 400,
+    height: 220,
+    shadowColor: 'black',
+    shadowBlur: 10,
+    shadowOffsetX: 10,
+    shadowOffsetY: 10,
+    shadowOpacity: 0.2,
+    cornerRadius: 10,
+});
+
+var memoryText = new Konva.Text({
+    x: 830,
+    y: 635,
+    id:"memory",
+    text: "Memory",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var codeLabel = new Konva.Text({
+    x: 150,
+    y: 305,
+    id:"code",
+    text: "Code",
+    fontSize: 28,
+    fontFamily: 'Calibri',
+    fill: '#000000',
+});
+
+var consoleLabel = new Konva.Text({
+    x: 130,
+    y: 635,
+    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 arrowLeft1 = new Konva.Arrow({
+    points: [950, 580, 1100, 400, 1005, 50],
+    tension: 0.5,
+    pointerLength: 10,
+    pointerWidth: 10,
+    id: "arrowleft1",
+    fill: 'green',
+    stroke: 'green',
+    strokeWidth: 5,
+});
+
+/* for the arrow */
+var arrowarray1 = [950, 580, 1100, 400, 1005, 50];
+
+// move downwards
+function moveArrow(){
+    arrowarray1[5] = arrowarray1[5] + 50;
+    arrowarray1[3] = arrowarray1[3] + 50;
+    stage.find('#arrowleft1').points(arrowarray1);
+}
+
+// move downwards
+function moveArrow2(){
+    arrowarray1[5] = arrowarray1[5] + 50;
+    //arrowarray1[3] = arrowarray1[3] + 10;
+    stage.find('#arrowleft1').points(arrowarray1);
+}
+
+// box for code
+layer.add(rect1);
+// box for console
+layer.add(rect2);
+
+layer.add(memoryText);
+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: 400,
+        padding: 20,
+    });
+}
+
+// hard code here, we assume we only have 5 lines of code.
+function makeBold(id){
+	for(let i=1;i<=5;i++){
+		if(i!=id){
+			stage.find('#line'+i).fontStyle('normal');
+		}else{
+			stage.find('#line'+id).fontStyle('bold');
+		}
+	}
+}
+
+var code=["1. const int n = 10;",
+    "2. double a[n];",
+    "3. double *p;",
+    "4. for( p=a; p<a+n; ++p )",
+    "5. \t\t *p = sqrt( p-a );",
+];
+
+
+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,80+(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,400,message[0],'msg0');
+
+// 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(650,10,"const int n",'n');
+		// this has to be after makeMemory so that the memory doesn't overwrite this.
+		makeContent(870,10,"10",'n_value');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 2){
+		makeBold(pc);
+		makeText(650,50,"double[] a",'a');
+		makeContent(870,50,"?",'a0_value');
+		makeContent(870,100,"?",'a1_value');
+		makeContent(870,150,"?",'a2_value');
+		makeContent(870,200,"?",'a3_value');
+		makeContent(870,250,"?",'a4_value');
+		makeContent(870,300,"?",'a5_value');
+		makeContent(870,350,"?",'a6_value');
+		makeContent(870,400,"?",'a7_value');
+		makeContent(870,450,"?",'a8_value');
+		makeContent(870,500,"?",'a9_value');
+		makeText(1050,50,"a[0]",'a0');
+		makeText(1050,100,"a[1]",'a1');
+		makeText(1050,150,"a[2]",'a2');
+		makeText(1050,200,"a[3]",'a3');
+		makeText(1050,250,"a[4]",'a4');
+		makeText(1050,300,"a[5]",'a5');
+		makeText(1050,350,"a[6]",'a6');
+		makeText(1050,400,"a[7]",'a7');
+		makeText(1050,450,"a[8]",'a8');
+		makeText(1050,500,"a[9]",'a9');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 3){
+		makeBold(pc);
+		makeText(650,550,"double *p",'p');
+		makeContent(870,550,"?",'p_value');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 4){
+		makeBold(pc);
+		// add the arrow here.
+                layer.add(arrowLeft1);
+                stage.find('#p_value').text('0x1008');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 5){
+		makeBold(pc);
+                stage.find('#a0_value').text('0.00');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 6){
+		// because it's a loop, so we just go between line 4 and line 5.
+		makeBold(4);
+                stage.find('#p_value').text('0x1010');
+		moveArrow();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 7){
+		// because it's a loop, so we just go between line 4 and line 5.
+		makeBold(5);
+                stage.find('#a1_value').text('1.00');
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 8){
+		makeBold(4);
+                stage.find('#p_value').text('0x1018');
+		moveArrow();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 9){
+		makeBold(5);
+                stage.find('#a2_value').text('1.44');	// sqrt(2)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 10){
+		makeBold(4);
+                stage.find('#p_value').text('0x1020');
+		moveArrow();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 11){
+		makeBold(5);
+                stage.find('#a3_value').text('1.73');	// sqrt(3)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 12){
+		makeBold(4);
+                stage.find('#p_value').text('0x1028');
+		moveArrow();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 13){
+		makeBold(5);
+                stage.find('#a4_value').text('2.00');	// sqrt(4)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 14){
+		makeBold(4);
+                stage.find('#p_value').text('0x1030');
+		moveArrow2();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 15){
+		makeBold(5);
+                stage.find('#a5_value').text('2.24');	// sqrt(5)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 16){
+		makeBold(4);
+                stage.find('#p_value').text('0x1038');
+		moveArrow2();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 17){
+		makeBold(5);
+                stage.find('#a6_value').text('2.45');	// sqrt(6)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 18){
+		makeBold(4);
+                stage.find('#p_value').text('0x1040');
+		moveArrow2();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 19){
+		makeBold(5);
+                stage.find('#a7_value').text('2.65');	// sqrt(7)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 20){
+		makeBold(4);
+                stage.find('#p_value').text('0x1048');
+		moveArrow2();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 21){
+		makeBold(5);
+                stage.find('#a8_value').text('2.83');	// sqrt(8)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 22){
+		makeBold(4);
+                stage.find('#p_value').text('0x1050');
+		moveArrow2();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 23){
+		makeBold(5);
+                stage.find('#a9_value').text('3.00');	// sqrt(9)
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 24){
+		makeBold(4);
+                stage.find('#p_value').text('0x1058');
+		moveArrow2();
+		layer.draw();
+		pc=pc+1;
+	}else if(pc == 25){
+		alert("End of loop! Also end of animation! Refresh the page if you want to re-run the animation.");
+		pc=pc+1;
+	}
+}
+
+/* vim: set ts=4: */

animations/pointers/example_arrays_2/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Arrays: example 2</title>
+    <script src="../../konva.js"></script>
+</head>
+<body>
+
+<h1>Arrays: example 2</h1>
+<p>This is the animation of example 2. Click the "next step" button to run the animation.</p>
+
+<button onclick="nextstep()">next step</button>
+
+<div id="container"></div>
+<script src="array2.js"></script>
+</body>
+</html>