Trying to make a scene using HTML5-canvas elements.
I want to generate ‘ice_cell’ objects with randomized positions inside the canvas, while also having each element of an ‘ice_cell' object have a randomized radius, angles, etc.
Here is my (non-working) code:
var can = document.getElementsByTagName('canvas')[0];
if (can.getContext) {
var ctx = can.getContext('2d');
var ice_cell = function () {
var posX = Math.random()*can.width();
var posY = Math.random()*can.height();
$(this).css({
"top": y + "px",
"left": x + "px",
"transform": "translateX(-50%) translateY(-50%)"
});
var radX = [5, 10, 30, 80, 100];
var rand_radX = radX[Math.floor(radX.length *Math.random())];
var radY = [5, 10, 30, 80, 100];
var rand_radY = radY[Math.floor(radY.length *Math.random())];
var rot = [5, 30, 200];
var rand_rot = rot[Math.floor(rot.length * Math.random())];
var start = [0, 2, 5, 10, 50];
var rand_start = start[Math.floor(start.length * Math.random())];
var end = [0, 2, 50, 10, 100];
var rand_end = end[Math.floor(end.length * Math.random())];
var tranz = [1, 3, 4, 5, 7, 10];
var rand_tranz = tranz[Math.floor(tranz.length * Math.random())];
ctx.translate(tranz, 0);
ctx.ellipse(rand_posX, rand_posY, rand_radX, rand_radY, rand_rot * Math.PI/180, rand_start, rand_end * Math.PI);
};
var colorStroke = function (color, width) {
ctx.strokeStyle = color;
ctx.lineWidth = width;
ctx.stroke();
};
var ice = function () {
for(var i = 0; i<20;i++){
colorStroke('cyan', 3);
colorStroke('white', 1);
};
};
};
var degrees = 1;
for(var i = 0; i < 50; i++){
ice();
ctx.rotate(degrees*Math.PI/180);
};
ctx.translate(can.width/2, can.height/2);
Unfortunately my Javascript knowledge is slim to none, so I have been almost guessing what goes where, syntax-wise.
Anyone able to pick out parts that I should just completely re-write? Debugging using the console hasn't been getting me very far.
Thank you so so much!
<canvas>
. What you're writing there is Javascript. For generating random numbers, useMath.random
as you have above.