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>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
"addObject" method) has been added.let and const (in lieu of var)