0

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!

2
  • 2
    HTML5 is just an upgrade to HTML, giving you elements like <canvas>. What you're writing there is Javascript. For generating random numbers, use Math.random as you have above.
    – Mike Cluck
    Commented Feb 16, 2016 at 20:11
  • Thank you, I guess I'm on the right track then...
    – jess_JS
    Commented Feb 16, 2016 at 20:25

1 Answer 1

0

Ellipse is missing from FireFox. Here's a function to make ellipse but I'm not sure how it compares to the official implementation. You're also missing the x and y for the css so I commented that out.

var can = document.getElementsByTagName('canvas')[0];
if (can.getContext) {
  var ctx = can.getContext('2d');

  function ellipse(x, y, rx, ry, rotate, startAng, endAng) {
    ctx.save();
    var w = rx * 2;
    var h = ry * 2;
    ctx.translate(x + w / 2, y + h / 2);
    ctx.scale(rx, ry);
    ctx.rotate(rotate);
    ctx.beginPath();
    ctx.arc(0, 0, 1, startAng, endAng, false);
    ctx.restore();
  }

  var ice_cell = function() {
    ctx.beginPath();
    var rand_posX = Math.random() * can.width;
    var rand_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);

    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_cell();
  ice();
  ctx.rotate(degrees * Math.PI / 180);
};

ctx.translate(can.width / 2, can.height / 2);
<canvas></canvas>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.