Published
Edited
Feb 15, 2018
1 star
{
let i = 0;
let size = 200
let n = 2;
let k = 2;
let x = 0;
let y = 0;
const canvas = DOM.canvas(k*size, k*size);
const context = canvas.getContext("2d");
function genRect(x, y){
context.clearRect(0, 0, canvas.width, canvas.height);
setTimeout(function(){makeRect(x, y, context);}, 100);
}
let input_coords = [];
let target_coords = [];
let show_interval = null;
function genRectOnClick(click) {
x = Math.floor(click.layerX / size);
y = Math.floor(click.layerY / size);
genRect(x, y);
i++;
input_coords.push({'x': x, 'y': y});
let correct = JSON.stringify(input_coords) === JSON.stringify(target_coords);
console.log("Coords Equal? ", correct);
if (correct) {
setTimeout(function(){context.clearRect(0, 0, canvas.width, canvas.height);}, 100);
n++;
i = 0;
input_coords = [];
target_coords = genCoords(n, k);
show_interval.stop();
setTimeout(function(){show_interval = showSeq(target_coords);}, 200);
} else if (!correct && (input_coords.length == target_coords.length)){
setTimeout(function(){context.clearRect(0, 0, canvas.width, canvas.height);}, 100);
n--;
i = 0;
input_coords = [];
target_coords = genCoords(n, k);
show_interval.stop();
setTimeout(function(){show_interval = showSeq(target_coords);}, 200);
}
}
canvas.addEventListener('click', click => genRectOnClick(click), false);
function showSeq(coordSeq){
console.log(coordSeq);
return d3.interval(
function(){
if (i < coordSeq.length) {
x = coordSeq[i].x; y = coordSeq[i].y;
i++;
genRect(x, y);
}
else if (i == coordSeq.length) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
},
500);
}
target_coords = genCoords(n, k);
show_interval = showSeq(target_coords);
//const timer = d3.timer(() => genRect(x, y));//=> div.textContent = ++i);
try {
console.log("yielding");
yield context.canvas;
yield invalidation; // Let the timer run forever,
} finally {
show_interval.stop(); // but dispose if re-evaluated.
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
