Push variables into array to draw shape but nothing appears

user_18312829 0
Viewed 46

I've created a shape, and I've pushed the variables of the object into an array called allShapes, i then tried executing the function, but nothing appears seems to appear. I know the drawing works so I'm assuming I'm missing something? Here's all of my code so far. (PS. to draw the shape, I'm using functions "forward" and "turn" to determine the length and directions of the lines in the shape)

function for drawing :shape1 name of variable for array :allShapes function to push variables of shape1 into array : addObject

var canvas;
var ctx;
var w = 1000;
var h = 600;

var allShapes = [];

setUpCanvas();

for (var i = 0; i < allShapes.length; i++) {
  shape1(allShapes[i]);
}

function addObject(a) {
  a.push({
    "x": w / 2,
    "y": h / 2,
    "w": 50,
    "h": 30,
    "d": 5,
    "angle": 0,
    "changle": 15,
    "c": 180,
  })
}

function shape1(o) {
  ctx.beginPath();
  ctx.moveTo(o.x, o.y);
  for (var i = 0; i < 13; i++) {
    turn(o, 60);
    forward(o, 50 + i * 5);
    ctx.lineTo(o.x, o.y);
    ctx.stroke();
  }
}

function turn(o, angle) {
  if (angle != undefined) {
    o.changle = angle;
  };
  o.angle += o.changle;
}

function forward(o, d) {
  var changeX;
  var changeY;
  var oneDegree = Math.PI / 180;
  if (d != undefined) {
    o.d = d;
  };
  changeX = o.d * Math.cos(o.angle * oneDegree);
  changeY = o.d * Math.sin(o.angle * oneDegree);
  o.x += changeX;
  o.y += changeY;
}

//// GENERAL STUFF 

function randn(r) {
  var result = Math.random() * r - r / 2;
  return result
}

function randi(r) {
  var result = Math.floor(Math.random() * r);
  return result
}

function rand(r) {
  return Math.random() * r
}

function setUpCanvas() {
  canvas = document.querySelector("#myCanvas");
  ctx = canvas.getContext("2d");
  canvas.width = w;
  canvas.height = h;
  canvas.style.border = "5px solid orange";
}

console.log("Assignment 3");
<div>
  <canvas id="myCanvas">
  </canvas>
</div>

draw html5-canvas arrays javascript
1 Answers

Please see if this helps with finding a solution. The shape is now rendered.

let canvas, ctx;
const w = 400, h = 250; // reduced dimensions to fit demo-window
// const w = 1000, h = 600; 

const allShapes = [];

setUpCanvas();

for (var i = 0; i < allShapes.length; i++) {
  shape1(allShapes[i]);
};

function addObject(a) {
  a.push({
    "x": w / 2,
    "y": h / 2,
    "w": 50,
    "h": 30,
    "d": 5,
    "angle": 0,
    "changle": 15,
    "c": 180,
  })
}

function shape1(o) {
  ctx.beginPath();
  ctx.moveTo(o.x, o.y);
  for (let i = 0; i < 13; i++) {
    turn(o, 60);
    forward(o, 50 + i * 5);
    ctx.lineTo(o.x, o.y);
    ctx.stroke();
  }
}

function turn(o, angle) {
  if (angle != undefined) {
    o.changle = angle;
  };
  o.angle += o.changle;
}

function forward(o, d) {
  let changeX, changeY, oneDegree = Math.PI / 180;
  if (d != undefined) {
    o.d = d;
  };
  changeX = o.d * Math.cos(o.angle * oneDegree);
  changeY = o.d * Math.sin(o.angle * oneDegree);
  o.x += changeX;
  o.y += changeY;
}

//// GENERAL STUFF 

function randn(r) { return Math.random() * r - r / 2; };

function randi(r) { return Math.floor(Math.random() * r); };

function rand(r) { return Math.random() * r; };

function setUpCanvas() {
  canvas = document.querySelector("#myCanvas");
  ctx = canvas.getContext("2d");
  canvas.width = w;
  canvas.height = h;
  canvas.style.border = "5px solid orange";
  // invoked the "addObject" function with empty "allShapes" array
  addObject(allShapes);
}

console.log("Assignment 3");
<div>
  <canvas id="myCanvas">
  </canvas>
</div>

NOTES

  1. One line (a call to the "addObject" method) has been added.
  2. Where possible, preference is to use let and const (in lieu of var)
user_136588160
Related