Question

0

269

Views

Push variables into array to draw shape but nothing appears

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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T09:34:36.940Z

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

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

0

269

Push variables into array to draw shape but nothing appears

1 answers

0

Find remote jobs

Andres GPT