I am currently working on the treatment of stereoscopic side by side videos, the user can choose the effect he wants to add on his video (black and white, sepia, anaglyph (which is still not done )) I added buttons for example normal and black and white, when I click on the normal button my video is displayed perfectly well then by clicking on the black and white button I try to have the effect B / W but the result that shows me is N / b..normal .... N / b ... normal ... N / b ... normal, I do not see where the problem is I need help thank you :)
<!DOCTYPE html>
<meta charset=utf-8 />
<script src="video.js" type="text/javascript"></script>
<link href="video-js.css" rel="stylesheet" type="text/css">
<title>Mon projet </title>
<h1> <marquee>Streaming </marquee></h1>
<center>
<h1> Choisir effet </h1>
<span id="cvsModeLbl">Mode:</span>
<input type="button" id="cvsbtnNormal" value="Normal" />
<input type="button" id="cvsbtnBW" value="Black & White" />
<h1> Vidéo Side by side</h1>
<video id=v controls loop width="500" height="400">
<source src=video2.mp4 type=video/mp4>
<source src=video2.webm type=video/webm>
<source src=video2.ogg type=video/ogg>
</video>
<canvas id=c width="500" height= "400"></canvas>
<style> c { background: black; } </style>
<script>
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var back1 = document.createElement('canvas');
var backcontext1 = back1.getContext('2d');
v.crossOrigin = 'anonymous';
var cw,ch;
cw = v.width;
ch = v.height;
back.width=cw;
back.hight=ch;
back1.width=cw;
back1.height=ch;
var effectNormal = document.getElementById("cvsbtnNormal");
var effectBw = document.getElementById("cvsbtnBW");
effectNormal.addEventListener("click", myFunction);
effectBw.addEventListener("click", myFunction1);
function myFunction(){
context.clearRect(0,0,500,400);
// First, draw it into the backing canvas
context.drawImage(v,0,0,cw,ch);
setTimeout(function(){ myFunction() }, 0);
}
function myFunction1(){
context.clearRect(0,0,500,400);
context.drawImage(v,0,0,cw,ch);
// Grab the pixel data from the backing canvas
var idata = context.getImageData(0,0,cw,ch);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2],
gray = (r+g+b)/3;
data[i] = gray;
data[i+1] = gray;
data[i+2] = gray;
}
idata.data = data;
// Draw the pixels onto the visible canvas
context.putImageData(idata,0,0);
// Start over!
setTimeout(function(){ myFunction1(); }, 0);
}
</script>
var to1, to2;
function myFunction(){
clearTimeout(to1)
clearTimeout(to2)
context.clearRect(0,0,500,400);
// First, draw it into the backing canvas
context.drawImage(v,0,0,cw,ch);
to1 = setTimeout(function(){ myFunction() }, 10);
}
function myFunction1(){
clearTimeout(to1)
clearTimeout(to2)
context.clearRect(0,0,500,400);
context.drawImage(v,0,0,cw,ch);
// Grab the pixel data from the backing canvas
var idata = context.getImageData(0,0,cw,ch);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4)
{
var r = data[i],
g = data[i+1],
b = data[i+2],
gray = (r+g+b)/3;
data[i] = gray;
data[i+1] = gray;
data[i+2] = gray;
}
idata.data = data;
// Draw the pixels onto the visible canvas
context.putImageData(idata,0,0);
// Start over!
to2 = setTimeout(function(){ myFunction1(); }, 10);
}
If you first click your "Normal" button, function() will be executed as fast and frequently as possible due to setTimeout() and has no way of being stopped.
If you then click your "Black & White" button, function1() will also be executed as fast and frequently as possible due to setTimeout() and has no way of being stopped.
Both functions modify the canvas in alternating fashion as they compete for CPU time.
Please consider using only 1 "render loop", and a way to break out of the loop using a stop button.
Instead of using setTimeout, consider using requestAnimationFrame and a check on video time as described here: https://stackoverflow.com/a/17048103/3931225
Related
I am trying to detect the drawn elements inside the canvas (for example: every slice in the pie) to put a click event on them later, but it seems not to be an easy task, I think the math would be the best way to carry it out, but where should I start.
Please Help me to find a solution for this.
here is the demo:
outer link
code is:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myCanvas{
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
class Piechart{
constructor(){
this.options = arguments[0];
this.canvas = arguments[0].canvas;
this.ctx = this.canvas.getContext('2d');
if(this.options.colors){
this.colors = arguments[0].colors;
}
else if (!this.options.colors){
this.colors = [
"#fde23e",
"#f16e23",
"#57d9ff",
"#937e88",
'#2fe678',
'#228888',
'#b111c1'
];
}
this.donut_hole = 0.5;
}
drawPie(){
var total_value = 0;
var color_index = 0;
for(var categ in this.options.data){
var val = this.options.data[categ];
total_value += val;
}
var start_angle = 0;
for(var categ in this.options.data){
var val = this.options.data[categ];
var slice_angle = 2*Math.PI*val/total_value;
this.drawPieSlice(
this.ctx,
this.canvas.width/2,
this.canvas.height/2,
Math.min(this.canvas.width/2,this.canvas.height/2),
start_angle,
start_angle+slice_angle,
this.colors[color_index%this.colors.length]
);
start_angle += slice_angle;
color_index++;
}
}
drawPieSlice(){
arguments[0].fillStyle = arguments[6];
arguments[0].beginPath();
arguments[0].moveTo(arguments[1],arguments[2]);
arguments[0].arc(
arguments[1],
arguments[2],
arguments[3],
arguments[4],
arguments[5]
);
arguments[0].closePath();
arguments[0].fill();
}
}
var myCanvas = document.getElementById("myCanvas");
var myCanvas_width = myCanvas.scrollWidth;
var myCanvas_height = myCanvas.scrollHeight;
myCanvas.width = myCanvas_width;
myCanvas.height = myCanvas_height;
var myVinyls = {
'Classical music':10,
'Rock':14,
'Pop':15,
'Jazz':4,
'test':6,
'test_1':7,
'test_2':8
};
var myPiechart = new Piechart(
{
canvas:myCanvas,
data:myVinyls,
colors:[
"#fde23e",
"#f16e23",
"#57d9ff",
"#937e88",
'#2fe678',
'#228888',
'#b111c1'
]
}
);
myPiechart.drawPie();
How to be able to detect each slice? Thank you.
EDIT
I have found an amazing solution for the purpose of adding hit region in the canvas and here is the link: Anton Lavrenov
First of all there are no elements on canvas you should understand this. It is a 2d plane where things are just drawn and if you want to move things around you need to redraw them entirely.
This said lets go back to the original problem.
Since you create the "object" in the canvas you know the size and distances of the object which you should keep in some js object for later use.
what i would do in this case to have an object that will hold the data of all other objects so when you click on the canvas you can get the click x and y and determine whether they are greater or equal to any of your objects' xs and ys
an example algorithm would be
if click.X>elem.X && click.X<elem.X+elem.Width
{
x is in check the same for y
}
if x__in&&y__in
{
you clicked the element
}
var starNum = 20;
var starry = new Array(starNum);
for(var s = 0 ; s < 20 ; s++){
starry[i] = new stars()
}
var starDraw = function() {
var starCanvas = document.getElementById("stars");
var starCtx = starCanvas.getContext("2d");
starCtx.clearRect(0, 0, 1000, 900);
for(i = 0; i < 20 ; i++){
var star = starry[i];
starCtx.fillStyle= "gold";
starCtx.beginPath();
// draw it
starCtx.arc(star.x, star.y, star.radius, Math.PI * 2, false);
starCtx.stroke();
starCtx.fill();
}
}
function starFinish(){
setInterval(starDraw, 10);
}
starFinish()
Now the main problem here is that the program only draws on star when it should be drawing many stars. Here is my html code. When i tried finding the x of star[i] , it tells me that it is undefined. I used the idea for this code somewhere else and it worked , not sure what went wrong here. I need this to be solved very quickly please.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xdd</title>
</head>
<body>
<canvas id="mycanvas" width="900" height="1000"
style="position: absolute; left: 0; top: 0; z-index: 1"></canvas>
<canvas id="stars" width="900" height="1000"
style="position: absolute; left: 0; top: 0; z-index: 0; ; background-color:#000066"></canvas>
<script src="Project.js"></script>
</body>
</html>
Pacifier21 spotted the error in your code, but as you have some other code thats not all that CPU friendly I have done a quick rewrite
// > Use const for variables that do not change
// var starNum = 20;
const starNum = 20;
// > Try to avoid using new Array and unless you wish to assign the array
// declare it as a const
// var starry = new Array(starNum);
const starry = [];
// > Simple mistakes due to inconsistent code style. I use i in 99% of for loops
// then j,k not because they have any special meaning, but because it stops from
// doing this type of thing, which is often very hard to spot
//for(var s = 0 ; s < 20 ; s++){
for(var i = 0; i < starNum; i ++) { // You have the const starNum you should use it
starry[i] = new stars()
}
// > The following two lines were in the function starDraw and are relatively slow
// in the great scheme of things. As neither canvas or context will change it
// is best to get them once.
const starCanvas = document.getElementById("stars");
const starCtx = starCanvas.getContext("2d");
// > Use function statements rather than function expressions. function statements
// are hoisted to the top of the current scope and are safer to use than
// function expressions
// var starDraw = function() {
function starDraw () {
// > Removed following two lines
// var starCanvas = document.getElementById("stars");
// var starCtx = starCanvas.getContext("2d");
// > Could also use canvas size saves you hunting down this line if the
// canvas size is changed
// starCtx.clearRect(0, 0, 1000, 900);
starCtx.clearRect(0, 0, starCanvas.width, starCanvas.height);
// > Using an undeclared variable, i is thus put in the global name space
// and can be a source of very hard to track bugs.
// for(i = 0; i < 20 ; i++){
for(var i = 0; i < starNum; i++){
var star = starry[i];
starCtx.fillStyle= "gold";
starCtx.beginPath();
starCtx.arc(star.x, star.y, star.radius, Math.PI * 2, false);
// > You use stroke but don't set the stroke style ?
starCtx.stroke();
starCtx.fill();
}
}
// > Never use setInterval for high frame rate animations
//function starFinish(){
// setInterval(starDraw, 10);
//}
// > Use requestAnimation frame and an animation loop function
function mainLoop(){ // > This function will be called 60 times a second
// if the browser can maintain that rendering speed.
starDraw(); // > draw the frame
requestAnimationFrame(mainLoop); // > request next frame
}
// > This will start the animation
requestAnimationFrame(mainLoop);
// starFinish() // > Not needed
<html>
<head>
<title>Sean Coyne</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<section>
<article>
<div id="logo"><img src="LogoComic.png" id="Logo"></div><br></br>
<div id="canvas">
<canvas id="c" style="border:5px solid orange" height="500" width="500"></canvas>
<p id="p1"></p>
<script>
var basket_x=100;
var basket_y=100;
var ball_x=100;
var ball_y=100;
var points=0;
//Background colour of canvas
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#0000";
ctx.fillRect(0,0,500,500);
//Here is the event listener
mycanv.addEventListener("mousemove",seenmotion,false);
function seenmotion(e) {
//This is the code for the mouse
//moving over the canvas.
var bounding_box=mycanv.getBoundingClientRect();
basket_x=(e.clientX-bounding_box.left) *
(mycanv.width/bounding_box.width);
basket_y=(e.clientY-bounding_box.top) *
(mycanv.height/bounding_box.height);
}
function start_game() {
setInterval(game_loop, 50);
}
function game_loop() {
// The code above is called every 50ms and is a
// frame-redraw-game-animation loop.
mycanv.width=mycanv.width;
// Below is the code that draw the objects
draw_basket(basket_x,basket_y);
draw_ball(ball_x,ball_y);
// Below is the code that updates the balls location
ball_x++;
if (ball_x>mycanv.width) {
ball_x=0;
}
//Here is the collision detection code
if (collision(basket_x, basket_y, ball_x, ball_y)) {
points -= 1;
}
//Here is the code for the point system
points+=1
// and let's stick it in the top right.
var integerpoints=Math.floor(points); // make it into an integer
ctx.font="bold 24px sans-serif #fff";
ctx.fillText(integerpoints, mycanv.width-50, 50);
}
function collision(basket_x, basket_y, ball_x, ball_y) {
if(basket_y + 85 < ball_y) {
return false;
}
if (basket_y > ball_y + 91) {
return false;
}
if (basket_x + 80 < ball_x) {
return false;
}
if (basket_x > ball_x + 80) {
return false;
}
return true;
}
// Code to stop the game when we're finished playing
function stop_game() {
}
//Code for the ball
function draw_ball(x,y) {
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#fff";
ctx.fillRect(0,0,20,20);
}
//Code for the basket
function draw_basket(x,y) {
var basket_img=new Image();
basket_img.src="basket.png";
ctx.drawImage(basket_img,x,y);
}
start_game()
</script>
</div>
</article>
</section>
You are never calling start_game() to start the program, thus the program just waits. Instead, at the end of your <script>, add start_game().
Just a tip: your line mycanv.width = mycanv.width is completely unnecessary, it is the equivalent of saying var x = 1; x = x;.
Ok, so me and my friends are trying to make a game with html and js. I'm the one that has to build the foundation for the program to display the blocks used on the map. For some reason though, it doesn't want to draw my images on the canvas at all. I need to display a 24x32 array of 32x32 pixel blocks whose images I need to be able to change. I've looked online, and everywhere it says to use the function drawImage() but my program doesn't see that that belongs to the canvas under the 2d context. Here is my code:
index.html:
<html lang="en">
<head>
</head>
<body>
<div class="canvas">
<canvas id="canvas" height="768" width="1024" style="border:1px solid black">
Your browser does not support canvas element.
</canvas>
<script type="text/javascript" src="Main.js"></script>
<script type="text/javascript" src="World Loader.js"></script>
</div>
</body>
</html>
Main.js:
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.font = "20px Arial";
var FPS = 60;
var Mode = 0;
function displayTick(){
Map.DisplayChunk(0,0);
}
function gameTick(){
}
Chunk.LoadNew();
window.setInterval(displayTick, 1000 / FPS);
window.setInterval(gameTick, 600);
and World_Loader.js:
var Block={
WalkThrough:true,
SeeThrough:true,
Interactable:false,
Occupied:false,
Sprite:Image,
Type:"",
X:0,
Y:0
};
var Chunk={
matrix:Block[32][24],
background:Image,
display:function(xindex, yindex){
ctx.drawImage(Background,0,0);
x=xindex;
y=yindex;
for(y=0; y<24; Y++){
for(x=0; x<32; x++){
ctx.drawImage(matrix[X][Y].sprite,X*32,Y*32);
};
};
},
loadNew:function(){
for(Y=0; Y<24; Y++){
for(X=0; X<32; X++){
block=new Block;
block.Sprite.src="test.png";
this.matrix[X][Y]=block;
};
};
}
};
var World={
matrix:Chunk[5][5],
indexX:0,
indexY:0
};
I'm still new to js and trying to teach myself so there's probably tons of errors and stuff. But can anyone see how it doesn't want to draw on the canvas?
There is some problem with your script(sintax errors, scope trouble and so on), you should start with something more simple, I suggest you to start to read this online book.
Anyway below you can see a simple script to fill and display a little grid of images on a canvas.
var Map = (function () {
var options = arguments[0] || {};
var _grid = [];
var _rNum = options.rowuUm || 10;
var _cNum = options.colNum || 10;
var _block = function (x, y) {
this.img = document.getElementById('on');
this.X = x;
this.Y = y;
};
return {
init: function () {
for (var i = 0; i < _rNum; i++) {
_grid[i] = [];
for (var j = 0; j < _cNum; j++) {
_grid[i][j] = new _block(i, j);
}
}
},
paint: function (canvasId) {
var cnv = document.getElementById(canvasId);
var ctx = cnv.getContext('2d');
var img = new Image();
img.src = 'on.jpg';
img.onload = function () {
for (var i = 0; i < _rNum; i++) {
for (var j = 0; j < _cNum; j++) {
ctx.drawImage(img, i * 32, j * 32);
}
}
};
},
}
})();
Map.init();
Map.paint('canvas');
I want to call the function upon the onmouseover="ParentFunction();" then kill it onmouseout="killParent();".
Note: in my code the parent function is called initiate(); and the killer function is called reset(); which lies outside the parent function at the bottom of the script.
I don't know how to kill the intitiate() function my first guess was:
var reset = function(){
return initiate();
};
here's my source code: any suggestions and help appreciated.
<!doctype html>
<html>
<head>
<title> function/event prototype </title>
<link rel="stylesheet" type="text/css" href="styling.css" />
</head>
<body>
<h2> <em>Fantastical place<br/>prototype</em> </h2>
<div id="button-container">
<div id="button-box">
<button id="activate" onmouseover="initiate()" onmouseout="reset();" width="50px" height="50px" title="Activate"> </button>
</div>
<div id="text-box">
</div>
</div>
<div id="container">
<canvas id="playground" width="200px" height="250px">
</canvas>
<canvas id="face" width="400px" height="200px">
</canvas>
<!-- <div id="clear"> </div> -->
</div>
<script>
alert("Welcome, there are x entries as of" +""+new Date().getHours());
//global scope
var i=0;
var c1 = []; //c is short for collect
var c2 = [];
var c3 = [];
var c4 = [];
var c5 = [];
var c6 = [];
var initiate = function(){ //the button that triggers the program
var timer = setInterval(function(){clock()},90); //copy this block for ref.
function clock(){
i+=1;
var a = Math.round(Math.random()*200);
var b = Math.round(Math.random()*250);
var c = Math.round(Math.random()*200);
var d = Math.round(Math.random()*250);
var e = Math.round(Math.random()*200);
var f = Math.round(Math.random()*250);
c1.push(a);
c2.push(b);
c3.push(c);
c4.push(d);
c5.push(e);
c6.push(f);
// document.write(i);
var c = document.getElementById("playground");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(c3[i-2], c4[i-2]);
ctx.bezierCurveTo(c1[i-2],c2[i-2],c5[i-2],c6[i-2],c3[i-1], c4[i-1]);
// ctx.lineTo(c3[i-1], c4[i-1]);
if(a<200){
ctx.strokeStyle="#FF33CC";
}
else if(a<400){
ctx.strokeStyle="#FF33aa";
}
else{
ctx.strokeStyle="#FF3388";
}
ctx.stroke();
document.getElementById("text-box").innerHTML=i+"<p>Thoughts.</p>";
if(i===20){
//alert("15 reached");
clearInterval(timer);//to clearInterval must be using a global scoped variable.
return;
}
}; //end of clock
//setInterval(clock,150);
var targetFace = document.getElementById("face");
var face = targetFace.getContext("2d");
var faceTimer = setInterval(function(){faceAnim()},80); //copy this block for ref. global scoped.
function faceAnim(){
face.beginPath();
face.strokeStyle="#FF33CC";
face.moveTo(100,104); //eye line
face.bezierCurveTo(150,125,250,125,300,104);
face.moveTo(200,1); //centre line
face.lineTo(200,400);
face.moveTo(125,111);//left eye lid
face.bezierCurveTo(160,135,170,130,185,120);
face.moveTo(150,116);//left eye
face.bezierCurveTo(155,125,165,125,170,118);
face.moveTo(275,111);//right eye lid
face.bezierCurveTo(240,135,230,130,215,120);
face.moveTo(250,116);//right eye
face.bezierCurveTo(245,125,235,125,230,118);
face.moveTo(195, 118); //left nose
face.lineTo(190, 160);
face.lineTo(200,170);
face.moveTo(190,160); //left nostroll
face.lineTo(180,160);
face.lineTo(191,154);
face.moveTo(180,160); //left lower nostrol
face.lineTo(200,170);
face.moveTo(205, 118); //right nose
face.lineTo(210, 160);
face.lineTo(200,170);
face.moveTo(210,160); //right nostroll
face.lineTo(220,160);
face.lineTo(209,154);
face.moveTo(220,160); //right lower nostrol
face.lineTo(200,170);
face.moveTo(200,140); //outer triad
face.lineTo(170, 100);
face.lineTo(230, 100);
face.lineTo(200, 140);
face.moveTo(200,145); //outer triad drop shadow
face.lineTo(170, 100);
face.lineTo(230, 100);
face.lineTo(200, 145);
face.moveTo(200,130); //inner triad
face.lineTo(180, 105);
face.lineTo(220, 105);
face.lineTo(200, 130);
//face.lineWidth =0.6;
face.moveTo(280,111);//outer right eye lid
face.bezierCurveTo(240,140,230,135,210,120);
face.moveTo(120,111);//outer left eye lid
face.bezierCurveTo(160,140,170,135,190,120);
face.moveTo(162,174); //upper mouth line
face.bezierCurveTo(170,180,230,180,238,174);
face.moveTo(165,175); //mouth line bottom
face.bezierCurveTo(190,Math.floor(Math.random()*25+180),210,Math.floor(Math.random()*25+180),235,175);
face.moveTo(232,204); //head shape
face.lineTo(340, 20);
face.moveTo(168,204); //head shape
face.lineTo(60, 20);
face.stroke(); //exicute all co-ords.
}; //end of face anim
var clearFace = function(){
document.getElementById('face').getContext('2d').clearRect(0, 0, 700, 750);
};
setInterval(clearFace,90);
}; //end of parent function
var reset = function(){
document.getElementById('playground').getContext('2d').clearRect(0, 0, 700, 750);
//clearInterval(faceTimer);
//delete initiate();
};
</script>
</body>
</html>
Set a variable in reset() e.g. stop = true;
Then check it in faceTimer or anyplace else...
Overall the structure should be this though,
///Globals
var queue = [], stop = false;
// drawing function ....
function draw(){
if(stop || !Boolean(queue) || !Boolean(queue.length)) return;
var current = undefined;
while(Boolean(current = queue.pop()))
{
if(!stop){
current();
var nextTime = Number(current.nextInterval);
if(nextTime > 0) setTimeout(nextTime , draw || this);
}
else if(Boolean(current.shouldBreak)) break;
}
}
where current is a function which has been queued to do the drawing from faceTimer
e.g.
var work = function(){ clock(); faceAnim(); queue.push(this); }; work.nextInterval = 500; work.shouldBreak = false; queue.push(work);
Then initiate becomes var initiate = work; initiate();;
I have your example working # http://jsfiddle.net/JtHQ4/18/