Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created October 9, 2014 21:59
Show Gist options
  • Save naeluh/b432d2627fcb75587721 to your computer and use it in GitHub Desktop.
Save naeluh/b432d2627fcb75587721 to your computer and use it in GitHub Desktop.
Download ZIP
gifpainting wip rectangle instead of circle // source http://jsbin.com/cudufo/15
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta name="description" content="gifpainting wip rectangle instead of circle" />
<meta charset="utf-8">
<title></title>
<style id="jsbin-css">
body {
margin: 0 auto;
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow: hidden;
}
canvas {
position:absolute;
top:0px;
left:0px;
overflow: hidden;
}
#loading {
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 30%;
height: 100%;
color: #fff;
/* padding: 5%; */
margin: 0 auto;
}
#loading p {
float:left;
margin-right:9%;
}
#contain {
position: absolute;
margin: 0 auto;
background: #000;
width: 100%;
height: 100%;
line-height: 10px;
}
</style>
</head>
<body>
<div id="contain">
<div id="loading" style="display:none;">
<p style="float:left;margin-right:2%;">Loading....</p>
</div>
</div>
<div id="testbox"></div>
<div id="gifs" style="display:block;"></div>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script src="http://www.loganfranken.com/projects/cursometer/script/jquery.cursometer.1.0.0.min.js"></script>
<script id="jsbin-javascript">
var ajaxlength = [];
var value = isNaN(value) ? 10 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var cvs = document.getElementById("mycanvas");
var previousEvent = false;
var animationFrame = new AnimationFrame(60);
var ct = [];
var ct2 = [];
var g = [];
var gifLoad = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
if (token) {authorization = "Bearer " + token;} else {authorization = "Client-ID " + clientId;}
$.ajax({
url : "https://api.imgur.com/3/gallery/random/random/page=" + Math.floor(Math.random() * 50),
method : "GET",
headers : {Authorization: authorization, Accept: "application/json"},
crossDomain : true,
data : {image: localStorage.dataBase64, type: "base64"},
beforeSend : function () {$("#loading").css("display", "block");},
success : function (result) {
$.each(result.data, function (idx, image) {
if ((result.data[idx].animated !== false) && (result.data[idx].is_album !== true)) {
var newimage = GIF(image.link);
newimage.render();
g.push (newimage);
$("#gifs").html(g.length);
recursiveLoad(newimage);
}
});
}
});
function recursiveLoad(img) {
setTimeout(function () {
var colorA = "#" + Math.random().toString(16).slice(2, 8);
if (img.rendered === true) {
done(img, colorA);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image, color) {
trueArr.push(image.src);
$("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
if (g.length === trueArr.length) {
$("#loading").fadeOut(2E3);
$("#contain").fadeOut(2E3);
animloop();
}
}
/*
function makeVelocityCalculator(e_init, e) {
var x = e_init.clientX,
new_x, new_y, new_t,
x_dist, y_dist, interval, velocity,
y = e_init.clientY,
t;
if (e === false) {
return 0;
}
t = e.time;
new_x = e.clientX;
new_y = e.clientY;
new_t = Date.now();
x_dist = new_x - x;
y_dist = new_y - y;
interval = new_t - t;
// update values:
x = new_x;
y = new_y;
velocity = Math.sqrt(x_dist * x_dist + y_dist * y_dist) / interval;
return velocity;
}
*/
function calculateVelocities(pos) {
return pos.reduce(function (out, pos, index, posArr) {
if (index > 0) {
var prevIndex = index - 1;
var dx = pos.x - posArr[prevIndex].x;
var dy = pos.y - posArr[prevIndex].y;
out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
}
return out;
}, []);
}
function calculateAccelerations(vels) {
return vels.reduce(function (out, vel, index, velsArr) {
if (index > 0) {
var prevIndex = index - 1;
out.push(velsArr[prevIndex] - vel);
}
return out;
}, []);
}
function average(arr) {
if (arr.length > 0) {
return arr.reduce(function (sum, val) {
return sum + val;
}, 0) / arr.length;
}
return 0;
}
function createCanvas(arrayOne, arrayTwo) {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
arrayOne.push(context);
if (arrayTwo) {
arrayTwo.push(canvas);
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
window.addEventListener('mousedown', function (e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
window.addEventListener('mousemove', function (e) {
pos.unshift({
x: e.clientX,
y: e.clientY,
t: performance.now()
});
pos.length = Math.min(pos.length, 30);
var vels = calculateVelocities(pos);
var accels = calculateAccelerations(vels);
var vel = average(vels);
var accel = average(accels);
if (accel >= 0) {
console.log('more');
r = value ++;
} else {
console.log('less');
r = value --;
}
if (r > 100) {
r = value -= 100;
}
if (r < 5) {
r = value += 100;
}
console.log(r);
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.clientX, e.clientY, r, 0, Math.PI * 2, false);
//ctx2.arc(e.pageX/2, e.pageY/2, r, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
document.addEventListener('touchstart', function (e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
document.addEventListener('touchmove', function (e) {
var r = getRandomInt(0.1, 30.0);
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 50;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.pageX, e.pageY, r, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
function animloop() {
animationFrame.request(animloop);
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var gif = g[gifNum];
var ctx = ct[gifNum];
var ctx2 = ct2[gifNum];
var can = canarr[gifNum];
if (ct.length > 0 && ct2.length > 0 && canarr.length > 0 && g.length > 0 && ctx !== undefined) {
if (gif.rendered === true && gif.loaded === true) {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-over';
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, window.innerWidth, window.innerHeight);
ctx.drawImage(can, 0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-atop';
}
}
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta name="description" content="gifpainting wip rectangle instead of circle" />
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="contain">
<div id="loading" style="display:none;">
<p style="float:left;margin-right:2%;">Loading....</p>
</div>
</div>
<div id="testbox"></div>
<div id="gifs" style="display:block;"></div>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"><\/script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"><\/script>
<script src="http://www.loganfranken.com/projects/cursometer/script/jquery.cursometer.1.0.0.min.js"><\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
margin: 0 auto;
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow: hidden;
}
canvas {
position:absolute;
top:0px;
left:0px;
overflow: hidden;
}
#loading {
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 30%;
height: 100%;
color: #fff;
/* padding: 5%; */
margin: 0 auto;
}
#loading p {
float:left;
margin-right:9%;
}
#contain {
position: absolute;
margin: 0 auto;
background: #000;
width: 100%;
height: 100%;
line-height: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> var ajaxlength = [];
var value = isNaN(value) ? 10 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var cvs = document.getElementById("mycanvas");
var previousEvent = false;
var animationFrame = new AnimationFrame(60);
var ct = [];
var ct2 = [];
var g = [];
var gifLoad = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
if (token) {authorization = "Bearer " + token;} else {authorization = "Client-ID " + clientId;}
$.ajax({
url : "https://api.imgur.com/3/gallery/random/random/page=" + Math.floor(Math.random() * 50),
method : "GET",
headers : {Authorization: authorization, Accept: "application/json"},
crossDomain : true,
data : {image: localStorage.dataBase64, type: "base64"},
beforeSend : function () {$("#loading").css("display", "block");},
success : function (result) {
$.each(result.data, function (idx, image) {
if ((result.data[idx].animated !== false) && (result.data[idx].is_album !== true)) {
var newimage = GIF(image.link);
newimage.render();
g.push (newimage);
$("#gifs").html(g.length);
recursiveLoad(newimage);
}
});
}
});
function recursiveLoad(img) {
setTimeout(function () {
var colorA = "#" + Math.random().toString(16).slice(2, 8);
if (img.rendered === true) {
done(img, colorA);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image, color) {
trueArr.push(image.src);
$("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
if (g.length === trueArr.length) {
$("#loading").fadeOut(2E3);
$("#contain").fadeOut(2E3);
animloop();
}
}
/*
function makeVelocityCalculator(e_init, e) {
var x = e_init.clientX,
new_x, new_y, new_t,
x_dist, y_dist, interval, velocity,
y = e_init.clientY,
t;
if (e === false) {
return 0;
}
t = e.time;
new_x = e.clientX;
new_y = e.clientY;
new_t = Date.now();
x_dist = new_x - x;
y_dist = new_y - y;
interval = new_t - t;
// update values:
x = new_x;
y = new_y;
velocity = Math.sqrt(x_dist * x_dist + y_dist * y_dist) / interval;
return velocity;
}
*/
function calculateVelocities(pos) {
return pos.reduce(function (out, pos, index, posArr) {
if (index > 0) {
var prevIndex = index - 1;
var dx = pos.x - posArr[prevIndex].x;
var dy = pos.y - posArr[prevIndex].y;
out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
}
return out;
}, []);
}
function calculateAccelerations(vels) {
return vels.reduce(function (out, vel, index, velsArr) {
if (index > 0) {
var prevIndex = index - 1;
out.push(velsArr[prevIndex] - vel);
}
return out;
}, []);
}
function average(arr) {
if (arr.length > 0) {
return arr.reduce(function (sum, val) {
return sum + val;
}, 0) / arr.length;
}
return 0;
}
function createCanvas(arrayOne, arrayTwo) {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
arrayOne.push(context);
if (arrayTwo) {
arrayTwo.push(canvas);
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
window.addEventListener('mousedown', function (e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
window.addEventListener('mousemove', function (e) {
pos.unshift({
x: e.clientX,
y: e.clientY,
t: performance.now()
});
pos.length = Math.min(pos.length, 30);
var vels = calculateVelocities(pos);
var accels = calculateAccelerations(vels);
var vel = average(vels);
var accel = average(accels);
if (accel >= 0) {
console.log('more');
r = value ++;
} else {
console.log('less');
r = value --;
}
if (r > 100) {
r = value -= 100;
}
if (r < 5) {
r = value += 100;
}
console.log(r);
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.clientX, e.clientY, r, 0, Math.PI * 2, false);
//ctx2.arc(e.pageX/2, e.pageY/2, r, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
document.addEventListener('touchstart', function (e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
document.addEventListener('touchmove', function (e) {
var r = getRandomInt(0.1, 30.0);
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 50;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.pageX, e.pageY, r, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
function animloop() {
animationFrame.request(animloop);
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var gif = g[gifNum];
var ctx = ct[gifNum];
var ctx2 = ct2[gifNum];
var can = canarr[gifNum];
if (ct.length > 0 && ct2.length > 0 && canarr.length > 0 && g.length > 0 && ctx !== undefined) {
if (gif.rendered === true && gif.loaded === true) {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-over';
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, window.innerWidth, window.innerHeight);
ctx.drawImage(can, 0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-atop';
}
}
}
}</script></body>
</html>
Raw
jsbin.cudufo.css
body {
margin: 0 auto;
}
html {
font-family:"Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
overflow: hidden;
}
canvas {
position:absolute;
top:0px;
left:0px;
overflow: hidden;
}
#loading {
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
width: 30%;
height: 100%;
color: #fff;
/* padding: 5%; */
margin: 0 auto;
}
#loading p {
float:left;
margin-right:9%;
}
#contain {
position: absolute;
margin: 0 auto;
background: #000;
width: 100%;
height: 100%;
line-height: 10px;
}
Raw
jsbin.cudufo.js
var ajaxlength = [];
var value = isNaN(value) ? 10 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
var cvs = document.getElementById("mycanvas");
var previousEvent = false;
var animationFrame = new AnimationFrame(60);
var ct = [];
var ct2 = [];
var g = [];
var gifLoad = [];
var canarr = [];
var canarr2 = [];
var trueArr = [];
var pos = [];
var prevVelocity = null;
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
if (token) {authorization = "Bearer " + token;} else {authorization = "Client-ID " + clientId;}
$.ajax({
url : "https://api.imgur.com/3/gallery/random/random/page=" + Math.floor(Math.random() * 50),
method : "GET",
headers : {Authorization: authorization, Accept: "application/json"},
crossDomain : true,
data : {image: localStorage.dataBase64, type: "base64"},
beforeSend : function () {$("#loading").css("display", "block");},
success : function (result) {
$.each(result.data, function (idx, image) {
if ((result.data[idx].animated !== false) && (result.data[idx].is_album !== true)) {
var newimage = GIF(image.link);
newimage.render();
g.push (newimage);
$("#gifs").html(g.length);
recursiveLoad(newimage);
}
});
}
});
function recursiveLoad(img) {
setTimeout(function () {
var colorA = "#" + Math.random().toString(16).slice(2, 8);
if (img.rendered === true) {
done(img, colorA);
} else {
recursiveLoad(img);
}
}, 1000);
}
function done(image, color) {
trueArr.push(image.src);
$("#loading").append('<p style="color:' + color + ';">' + trueArr.length + '</>');
if (g.length === trueArr.length) {
$("#loading").fadeOut(2E3);
$("#contain").fadeOut(2E3);
animloop();
}
}
/*
function makeVelocityCalculator(e_init, e) {
var x = e_init.clientX,
new_x, new_y, new_t,
x_dist, y_dist, interval, velocity,
y = e_init.clientY,
t;
if (e === false) {
return 0;
}
t = e.time;
new_x = e.clientX;
new_y = e.clientY;
new_t = Date.now();
x_dist = new_x - x;
y_dist = new_y - y;
interval = new_t - t;
// update values:
x = new_x;
y = new_y;
velocity = Math.sqrt(x_dist * x_dist + y_dist * y_dist) / interval;
return velocity;
}
*/
function calculateVelocities(pos) {
return pos.reduce(function (out, pos, index, posArr) {
if (index > 0) {
var prevIndex = index - 1;
var dx = pos.x - posArr[prevIndex].x;
var dy = pos.y - posArr[prevIndex].y;
out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
}
return out;
}, []);
}
function calculateAccelerations(vels) {
return vels.reduce(function (out, vel, index, velsArr) {
if (index > 0) {
var prevIndex = index - 1;
out.push(velsArr[prevIndex] - vel);
}
return out;
}, []);
}
function average(arr) {
if (arr.length > 0) {
return arr.reduce(function (sum, val) {
return sum + val;
}, 0) / arr.length;
}
return 0;
}
function createCanvas(arrayOne, arrayTwo) {
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
arrayOne.push(context);
if (arrayTwo) {
arrayTwo.push(canvas);
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
window.addEventListener('mousedown', function (e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
window.addEventListener('mousemove', function (e) {
pos.unshift({
x: e.clientX,
y: e.clientY,
t: performance.now()
});
pos.length = Math.min(pos.length, 30);
var vels = calculateVelocities(pos);
var accels = calculateAccelerations(vels);
var vel = average(vels);
var accel = average(accels);
if (accel >= 0) {
console.log('more');
r = value ++;
} else {
console.log('less');
r = value --;
}
if (r > 100) {
r = value -= 100;
}
if (r < 5) {
r = value += 100;
}
console.log(r);
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 20;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.clientX, e.clientY, r, 0, Math.PI * 2, false);
//ctx2.arc(e.pageX/2, e.pageY/2, r, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
document.addEventListener('touchstart', function (e) {
createCanvas(ct, canarr);
createCanvas(ct2);
});
document.addEventListener('touchmove', function (e) {
var r = getRandomInt(0.1, 30.0);
var ctx2 = ct2[(Number(ct2.length) - 1)];
if ((Number(ct2.length) - 1) >= Number(g.length)) {
ctx2 = ct2[(Number(g.length) - 1)];
}
if (ctx2 !== undefined) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.shadowBlur = 50;
ctx2.shadowColor = 'rgb(0, 0, 0)';
ctx2.arc(e.pageX, e.pageY, r, 0, Math.PI * 2, false);
ctx2.fill();
ctx2.fillStyle = "rgba(255,255,255,1)";
}
});
function animloop() {
animationFrame.request(animloop);
for (var i = 0; i < g.length; i++) {
var gifNum = i % g.length;
var gif = g[gifNum];
var ctx = ct[gifNum];
var ctx2 = ct2[gifNum];
var can = canarr[gifNum];
if (ct.length > 0 && ct2.length > 0 && canarr.length > 0 && g.length > 0 && ctx !== undefined) {
if (gif.rendered === true && gif.loaded === true) {
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-over';
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif.frames[gif.currentFrame()].ctx.canvas, 0, 0, window.innerWidth, window.innerHeight);
ctx.drawImage(can, 0, 0, window.innerWidth, window.innerHeight);
ctx.globalCompositeOperation = 'source-atop';
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment