Develop Reference

jquery does not work with diango

I have a problem with this code. I cannot see the effect of this code in my html page. I use DJANGO framework with python.
I added jquery to my settings.py in my django project but should I do anything for it to be compatible with django?
var canvas = $('canvas')[0];
var context = canvas.getContext('2d');
var Dots = [];
var ID = 0;
var colors = ['#FF9900', '#424242', '#BCBCBC', '#3299BB','#B9D3B0','#81BDA4','#F88F79', '#F6AA93'];
var maximum = 100;
function Dot() {
this.active = true;
this.id = ID; ID++;
this.diameter = 2 + Math.random() * 7;
this.x = Math.round(Math.random() * canvas.width);
this.y = Math.round(Math.random() * canvas.height);
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.4,
y: (Math.random() < 0.5 ? -1 : 1) * Math.random() * 0.4
};
this.alpha = 0.1;
this.maxAlpha = this.diameter < 5 ? 0.3 : 0.8;
this.hex = colors[Math.round(Math.random() * 7)];
this.color = HexToRGBA(this.hex, this.alpha);
}
Dot.prototype = {
Update: function() {
if(this.alpha <= this.maxAlpha) {
this.alpha += 0.005;
this.color = HexToRGBA(this.hex, this.alpha);
}
this.x += this.velocity.x;
this.y += this.velocity.y;
if(this.x > canvas.width + 5 || this.x < 0 - 5 || this.y > canvas.height + 5 || this.y < 0 - 5) {
this.active = false;
}
},
Draw: function() {
context.strokeStyle = this.color;
context.fillStyle = this.color;
context.save();
context.beginPath();
context.translate(this.x, this.y);
context.moveTo(0, -this.diameter);
for (var i = 0; i < 7; i++)
{
context.rotate(Math.PI / 7);
context.lineTo(0, -(this.diameter / 2));
context.rotate(Math.PI / 7);
context.lineTo(0, -this.diameter);
}
if(this.id % 2 == 0) {
context.stroke();
} else {
context.fill();
}
context.closePath();
context.restore();
}
}
function Update() {
GenerateDots();
Dots.forEach(function(Dot) {
Dot.Update();
});
Dots = Dots.filter(function(Dot) {
return Dot.active;
});
Render();
requestAnimationFrame(Update);
}
function Render() {
context.clearRect(0, 0, canvas.width, canvas.height);
Dots.forEach(function(Dot) {
Dot.Draw();
});
}
function GenerateDots() {
if(Dots.length < maximum) {
for(var i = Dots.length; i < maximum; i++) {
Dots.push(new Dot());
}
}
return false;
}
function HexToRGBA(hex, alpha) {
var red = parseInt((TrimHex(hex)).substring(0, 2), 16);
var green = parseInt((TrimHex(hex)).substring(2, 4), 16);
var blue = parseInt((TrimHex(hex)).substring(4, 6), 16);
return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
}
function TrimHex(hex) {
return (hex.charAt(0) == "#") ? hex.substring(1, 7) : hex;
}
function WindowSize(width, height) {
if(width != null) { canvas.width = width; } else { canvas.width = window.innerWidth; }
if(height != null) { canvas.height = height; } else { canvas.height = window.innerHeight; }
}
$(window).resize(function() {
Dots = [];
WindowSize();
});
WindowSize();
GenerateDots();
Update();

I found the problem...(silly one)
I got this error in my browser's console.ReferenceError: $ is not define
I just needed to load jquery library before my jquery code.

Canvas Animation Javascript reverse

I have a top to bottom falling canvas animation, but I want to reverse it (go from bottom to top). I can't figure out how to change the direction
I have my code here
http://js.do/code/176399
sample:
function Ember(x, y, s /*radius*/ , p /*num points*/ ) {
this.x = x;
this.y = y;
this.s = s;
this.p = p;
this.img = document.createElement('canvas');
var context = this.img.getContext('2d'),
len = this.s / 1.45;
this.img.height = this.img.width = this.s * 2;
context.translate(this.s, this.s);
context.rotate((Math.PI * 1 / 10));
context.beginPath();
for (var i = 0; i < p; i++) {
context.lineTo(0, -s);
context.rotate((Math.PI * 2 / (p * 2)));
context.lineTo(0, s);
context.rotate((Math.PI * 2 / (p * 2)));
}
context.closePath();
context.shadowBlur = this.s / 3;
context.shadowColor = 'rgba(174, 12, 1, 0.9)';
context.fillStyle = 'rgba(133,80,33,.45)';
context.fill();
}
Just need to reverse the "fall" to bottom to top.
Update:
following off of Jared's suggestion
Changed:
embers[i].y += embers[i].vy;
to:
embers[i].y -= embers[i].vy;
However, I only get one animation cycle would like to have it continually animate new embers on the screen

Take a look at this line where you update the ember's Y position:
embers[i].y = -embers[i].s;
Try changing this to something like this:
embers[i].y = embers[i].s;

<canvas id="canvas"></canvas>
<script>
function Ember(x, y, s /*radius*/ , p /*num points*/ ) {
this.x = x;
this.y = y;
this.s = s;
this.p = p;
this.img = document.createElement('canvas');
var context = this.img.getContext('2d'),
len = this.s / 1.45;
this.img.height = this.img.width = this.s * 2;
context.translate(this.s, this.s);
context.rotate((Math.PI * 1 / 10));
context.beginPath();
for (var i = 0; i < p; i++) {
context.lineTo(0, -s);
context.rotate((Math.PI * 2 / (p * 2)));
context.lineTo(0, s);
context.rotate((Math.PI * 2 / (p * 2)));
}
context.closePath();
context.shadowBlur = this.s / 3;
context.shadowColor = 'rgba(174, 12, 1, 0.9)';
context.fillStyle = 'rgba(133,80,33,.45)';
context.fill();
}
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var canvas, context, height, width, embers;
setTimeout(init, 10);
function init() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
height = canvas.height = document.body.offsetHeight;
width = canvas.width = document.body.offsetWidth;
embers = [];
for (var i = 0; i < 150; i++) {
var x = Math.random() * width,
y = Math.random() * height,
s = Math.random() * 5 + 5,
p = Math.random() * 8 + 8;
var s = new Ember(x, y, s, p);
s.vx = Math.random() * 2 - 1;
s.vy = Math.random() * 2 + 1;
s.r = Math.random() * 360;
embers.push(s);
}
update();
render();
}
function update() {
for (var i = 0, l = embers.length; i < l; i++) {
embers[i].r += embers[i].vx / 10;
embers[i].x += embers[i].vx;
embers[i].y -= embers[i].vy;
if (embers[i].y < 0) {
embers[i].y = Math.random()*height;
embers[i].vx = Math.random() * 2 - 1;
embers[i].vy = Math.random() * 2 + 1;
}
}
setTimeout(update, 1000 / 30);
}
function render() {
context.clearRect(0, 0, width, height);
for (var i = 0, l = embers.length; i < l; i++) {
context.save();
context.translate(embers[i].x, embers[i].y);
context.rotate(embers[i].r);
context.drawImage(embers[i].img, 0, 0);
context.restore();
}
requestAnimationFrame(render);
}
</script>
Wrong if condition in update function, change it to check if v(embers[i].y < 0), ans set appropriate new y position
if (embers[i].y < 0) {
embers[i].y = Math.random()*height;

start confetti on click

i'd like to start this confetti animation only after user clicked on a button.
here is a link co codepen:https://codepen.io/gamanox/pen/FkEbH?page=1&
var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, drawCircle2, drawCircle3, i, range, xpos;
NUM_CONFETTI = 60;
COLORS = [[255, 255, 255], [255, 144, 0], [255, 255, 255], [255, 144, 0], [0, 277, 235]];
PI_2 = 2 * Math.PI;
canvas = document.getElementById("confeti");
context = canvas.getContext("2d");
window.w = 0;
window.h = 0;
window.resizeWindow = function() {
window.w = canvas.width = window.innerWidth;
return window.h = canvas.height = window.innerHeight;
};
window.addEventListener('resize', resizeWindow, false);
window.onload = function() {
return setTimeout(resizeWindow, 0);
};
range = function(a, b) {
return (b - a) * Math.random() + a;
};
drawCircle = function(x, y, r, style) {
context.beginPath();
context.moveTo(x, y);
context.bezierCurveTo(x - 17, y + 14, x + 13, y + 5, x - 5, y + 22);
context.lineWidth = 3;
context.strokeStyle = style;
return context.stroke();
};
drawCircle2 = function(x, y, r, style) {
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + 10, y + 10);
context.lineTo(x + 10, y);
context.closePath();
context.fillStyle = style;
return context.fill();
};
drawCircle3 = function(x, y, r, style) {
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + 10, y + 10);
context.lineTo(x + 10, y);
context.closePath();
context.fillStyle = style;
return context.fill();
};
xpos = 0.9;
document.onmousemove = function(e) {
return xpos = e.pageX / w;
};
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 100 / 20);
};
})();
Confetti = (function() {
function Confetti() {
this.style = COLORS[~~range(0, 5)];
this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
this.r = ~~range(2, 6);
this.r2 = 2 * this.r;
this.replace();
}
Confetti.prototype.replace = function() {
this.opacity = 0;
this.dop = 0.03 * range(1, 4);
this.x = range(-this.r2, w - this.r2);
this.y = range(-20, h - this.r2);
this.xmax = w - this.r;
this.ymax = h - this.r;
this.vx = range(0, 2) + 8 * xpos - 5;
return this.vy = 0.7 * this.r + range(-1, 1);
};
Confetti.prototype.draw = function() {
var ref;
this.x += this.vx;
this.y += this.vy;
this.opacity += this.dop;
if (this.opacity > 1) {
this.opacity = 1;
this.dop *= -1;
}
if (this.opacity < 0 || this.y > this.ymax) {
this.replace();
}
if (!((0 < (ref = this.x) && ref < this.xmax))) {
this.x = (this.x + this.xmax) % this.xmax;
}
drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
drawCircle3(~~this.x * 0.5, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
return drawCircle2(~~this.x * 1.5, ~~this.y * 1.5, this.r, this.rgb + "," + this.opacity + ")");
};
return Confetti;
})();
confetti = (function() {
var j, ref, results;
results = [];
for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
results.push(new Confetti);
}
return results;
})();
window.step = function() {
var c, j, len, results;
requestAnimationFrame(step);
context.clearRect(0, 0, w, h);
results = [];
for (j = 0, len = confetti.length; j < len; j++) {
c = confetti[j];
results.push(c.draw());
}
return results;
};
step();
i tried to wrap the following code into a function and then call it with jquery on click but it does not work. any suggestions would be highly appreciated

Add a click listener to the document, and run step() inside of it:
//step()
document.addEventListener "click", () =>
step()
https://codepen.io/jdoyle/pen/mMpQKR
This works, but if you click more than once, you get some weird results. Do a little refactoring and remove the event listener once the user clicks:
// step()
start = ->
requestAnimationFrame(step)
document.removeEventListener "click", start
document.addEventListener "click", start

Replace:
confetti = (function() {
var j, ref, results;
results = [];
for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
results.push(new Confetti);
}
return results;
})();
to
confetti = [];
Put inside click listener:
var j, ref;
for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
confetti.push(new Confetti);
}

Resizing a <canvas> Element

I have the following canvas. I'm trying to make it smaller using the width and height attributes, but it doesn't work. This is my code:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
<script>
//set the variables
var a = document.getElementById('canvas'),
c = a.getContext('2d'),
w = a.width = window.innerWidth,
h = a.height = window.innerHeight,
area = w * h,
particleNum = 300,
ANIMATION;
var particles = [];
//create the particles
function Particle(i) {
this.id = i;
this.hue = rand(50, 0, 1);
this.active = false;
}
Particle.prototype.build = function() {
this.x = w / 2;
this.y = h / 2;
this.r = rand(7, 2, 1);
this.vx = Math.random() * 10 - 5;
this.vy = Math.random() * 10 - 5;
this.gravity = .01;
this.opacity = Math.random() + .5;
this.active = true;
c.beginPath();
c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)";
c.fill();
};
Particle.prototype.draw = function() {
this.active = true;
this.x += this.vx;
this.y += this.vy;
this.vy += this.gravity;
this.hue -= 0.5;
this.r = Math.abs(this.r - .05);
c.beginPath();
c.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
c.fillStyle = "hsla(" + this.hue + ",100%,50%,1)";
c.fill();
// reset particle
if(this.r <= .05) {
this.active = false;
}
};
//functionality
function drawScene() {
c.fillStyle = "black";
c.fillRect(0,0,w,h);
for(var i = 0; i < particles.length; i++) {
if(particles[i].active === true) {
particles[i].draw();
} else {
particles[i].build();
}
}
ANIMATION = requestAnimationFrame(drawScene);
}
function initCanvas() {
var s = getComputedStyle(a);
if(particles.length) {
particles = [];
cancelAnimationFrame(ANIMATION);
ANIMATION;
console.log(ANIMATION);
}
w = a.width = window.innerWidth;
h = a.height = window.innerHeight;
for(var i = 0; i < particleNum; i++) {
particles.push(new Particle(i));
}
drawScene();
console.log(ANIMATION);
}
//init
(function() {
initCanvas();
addEventListener('resize', initCanvas, false);
})();
//helper functions
function rand(max, min, _int) {
var max = (max === 0 || max)?max:1,
min = min || 0,
gen = min + (max - min) * Math.random();
return (_int) ? Math.round(gen) : gen;
};
</script>
</body>
</html>

Pay more attention here:
var a = document.getElementById('canvas'),
c = a.getContext('2d'),
w = a.width = window.innerWidth,
h = a.height = window.innerHeight,
area = w * h,
As you can see, w is the width of the window and h is the height of the window. Try to edit w and h variable with custom values and tell me if it worked ;)
EDIT:
Simply replace h and w with this in your script tag:
a.style.width = '500px'; //random value, insert custom here
a.style.height = '500px';

How do you put an animated canvas behind your elements?

var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, i, range, resizeWindow, xpos;
NUM_CONFETTI = 350;
COLORS = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];
PI_2 = 2 * Math.PI;
canvas = document.getElementById("world");
context = canvas.getContext("2d");
window.w = 0;
window.h = 0;
resizeWindow = function() {
window.w = canvas.width = window.innerWidth;
return window.h = canvas.height = window.innerHeight;
};
window.addEventListener('resize', resizeWindow, false);
window.onload = function() {
return setTimeout(resizeWindow, 0);
};
range = function(a, b) {
return (b - a) * Math.random() + a;
};
drawCircle = function(x, y, r, style) {
context.beginPath();
context.arc(x, y, r, 0, PI_2, false);
context.fillStyle = style;
return context.fill();
};
xpos = 0.5;
document.onmousemove = function(e) {
return xpos = e.pageX / w;
};
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
return window.setTimeout(callback, 1000 / 60);
};
})();
Confetti = (function() {
function Confetti() {
this.style = COLORS[~~range(0, 5)];
this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
this.r = ~~range(2, 6);
this.r2 = 2 * this.r;
this.replace();
}
Confetti.prototype.replace = function() {
this.opacity = 0;
this.dop = 0.03 * range(1, 4);
this.x = range(-this.r2, w - this.r2);
this.y = range(-20, h - this.r2);
this.xmax = w - this.r;
this.ymax = h - this.r;
this.vx = range(0, 2) + 8 * xpos - 5;
return this.vy = 0.7 * this.r + range(-1, 1);
};
Confetti.prototype.draw = function() {
var _ref;
this.x += this.vx;
this.y += this.vy;
this.opacity += this.dop;
if (this.opacity > 1) {
this.opacity = 1;
this.dop *= -1;
}
if (this.opacity < 0 || this.y > this.ymax) {
this.replace();
}
if (!((0 < (_ref = this.x) && _ref < this.xmax))) {
this.x = (this.x + this.xmax) % this.xmax;
}
return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
};
return Confetti;
})();
confetti = (function() {
var _results;
_results = [];
for (i = 1; 1 <= NUM_CONFETTI ? i <= NUM_CONFETTI : i >= NUM_CONFETTI; 1 <= NUM_CONFETTI ? i++ : i--) {
_results.push(new Confetti);
}
return _results;
})();
window.step = function() {
var c, _i, _len, _results;
requestAnimationFrame(step);
context.clearRect(0, 0, w, h);
_results = [];
for (_i = 0, _len = confetti.length; _i < _len; _i++) {
c = confetti[_i];
_results.push(c.draw());
}
return _results;
};
step();
header {
color: gainsboro;
text-align: center;
font-size: 100px;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #111;
}
canvas {
z-index:-1;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Falling Confetti</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="world"></canvas>
<script src="js/index.js"></script>
<header>Video Game Evolution</header>
<iframe src='//cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1z5bofC1Vo2wfXVUtAJHp-_o_tvymManjPeX8c4pNAp0&font=Default&lang=en&initial_zoom=2&height=650' width='100%' height='650' frameborder='0'></iframe>
</body>
</html>
It starts to display the header but the canvas gets in the way. I also have an embedded timeline that I want to be displayed over the canvas. Is it the js in the way? -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Make your canvas absolute positioned, give it an appropriate size, and you should get what you want
canvas {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Note: get rid of z-index on the canvas css ... this puts it behind the body, and the body has a background, so hides the canvas