How to set rectangles as objects to array in JS? - javascript

I am a beginer. I want to create a pixel art site. For this I try to develope my javascript code. Now I am on the way to simplify the code by setting the different rectangles using var as object and array to avoid to type milles of lines. Than I think to create at the second part an array constructor with defining coords(other x, other y) for every single rectangle in 2D array.
At the moment I don't relise why the first part of the code is not working. Can you please suggest your mind? Thanks a lot in advance.
Here is my code (link on JS Bin):
var canvas;
var ctx;
var x = 0;
var y = 0;
var w = 10; // Width=10px
var h = w; // Heigth=10px
function init() {
canvas = document.querySelector('#myCanvas');
ctx = canvas.getContext('2d');
draw();
}
// Create a rect by path method for restoring the buffer
var rect;
function draw(){
ctx.beginPath();
ctx.rect(x,y,w,h);
}
var c = ['#66757F', '#F7F7F7', '#CCD6DD']; // Setting a color palette as an array
for (var i=0; i<c.length; i++){
c[i]=ctx.fillStyle();
}
// Define colored rectangles as the Objects
var r1 = {rect;[0]}
var r2 = {rect;[1]}
var r3 = {rect;[2]}
ctx.fill();
// Setting three rectangle by diagonal
var r=[r1,r2,r3];// Array of setted rectangles
function draw(){
for (var j=0; j<r.length; j++){
r[j]=ctx.moveTo(x+w*j,y+h*j);
}
}

for (var j=0; j<r.length; i++){
r[j]=ctx.moveTo(x+w*j,y+h*j);
}
You typed 'i++' when using the letter 'j'.
Not sure whether this solves the problem.
Why do you use Math.abs in
var w = Math.abs(-10); // Width=10px
Isn't it easier to set 'var w' to 10 ?
var w = 10;

Is what you're looking for how to create classes and make objects from that class?
If so this is how you would create a class and make objects.
//This will hold all of your objects.
var listOfObjects = [];
//This is a class. You can create objects with it.
function myClass() {
//location
this.X = 0;
this.Y = 0;
//size
this.width = 5;
this.height = 5;
}
function CreateNewObject() {
//This will create and add an object of myClass to your array.
//Now you can loop through the array and modify the values as you wish.
listOfObjects.push(new myClass());
}

Related

Multiple html canvas element with random graphics on same page

Trying to create multiple canvas element on a single html page and then draw different graphics on each of them . But the issue is , the same graphics is drawn on all of them without any randomization
canvas_container_div = document.getElementById('canvas_container_div');
let animation_frame_id;
let canvas_array = [];
let context_array = [];
let number_of_canvas = 5;
//creating canvas and storing it in an array
for(var i = 0;i < number_of_canvas ; i++){
var canvas1 = document.createElement('canvas');
canvas1.style.width = '200px';
canvas1.style.height = '200px';
canvas1.style.margin = '10px';
canvas1.style.border = '1px solid white';
canvas_array.push(canvas1);
}
//displaying all canvas inside the div element
for(var i = 0;i < canvas_array.length ; i++){
canvas_container_div.appendChild(canvas_array[i]);
}
//getting all the contex for all the canvas
for(var i = 0;i < canvas_array.length ; i++){
context_array.push(canvas_array[i].getContext('2d'));
}
//random values generating
let hue = Math.random()*360;
//or other radom parameters
//updating each graphics
function update(ctx){
ctx.fillStyle = 'hsl('+hue+',100%,50%)';
}
function render(){
//getting all the context
for(var i = 0;i < context_array.length ; i++){
//clearing bg for perticular canvas
context_array[i].clearRect(0,0,canvas_array[i].width,canvas_array[i].height);
//passing perticular canvas context to update method
update(context_array[i]);
//drawing with pertucular context
context_array[i].beginPath();
context_array[i].arc(canvas_array[i].width/2,canvas_array[i].height/2,40,0,Math.PI *2);
context_array[i].closePath();
context_array[i].fill();
}
animation_frame_id = requestAnimationFrame(render);
}
render();
Wanted to have different color for all the circle drawn on different canvas , but all the circles are of same color . cannot randomize
You are defining your hue outside of your renders for loop, so each time it runs the loop and calls on the hue, it is getting the same color for the fill style. You could create a function that randomizes the hue inside a for loop to to create an array of colors that is the same length as your canvas array.
Then in your for loop within the render function call on the array and its index to make each individual circle a different color fill style.
NOTE: This only randomizes the colors, it does not check if a color already exists, so you may want additional code to check if a number is already in the array before pushing the value into the array. Furthermore, you will notice some hues randomize within a certain number close enough to each other that they actually look like they are the same, you could also include code within the setHue() function that checks to see if the the numbers are within a certain restraint of each other, this would likely be a .include() or even a conditional that checks the difference between the hue array and the current value within the loop.
let hue = [];
function setHue() {
for (let h = 0; h < context_array.length; h++) {
hue.push(Math.trunc(Math.random() * 360));
}
}
setHue();
canvas_container_div = document.getElementById('canvas_container_div');
let animation_frame_id;
let canvas_array = [];
let context_array = [];
let number_of_canvas = 5;
//creating canvas and storing it in an array
for (var i = 0; i < number_of_canvas; i++) {
var canvas1 = document.createElement('canvas');
canvas1.style.width = '200px';
canvas1.style.height = '200px';
canvas1.style.margin = '10px';
canvas1.style.border = '1px solid white';
canvas_array.push(canvas1);
}
//displaying all canvas inside the div element
for (var i = 0; i < canvas_array.length; i++) {
canvas_container_div.appendChild(canvas_array[i]);
}
//getting all the contex for all the canvas
for (var i = 0; i < canvas_array.length; i++) {
context_array.push(canvas_array[i].getContext('2d'));
}
//Randomize your hue value and make an array to hold the value
//Then in your for loop within the render function call on the
//array and its index to make each individual circle a different color fill style
let hue = [];
function setHue() {
for (let h = 0; h < context_array.length; h++) {
let color = Math.trunc(Math.random() * 360);
hue.push(color);
}
console.log(hue);
}
setHue();
function render() {
//getting all the context
for (var i = 0; i < context_array.length; i++) {
//clearing bg for perticular canvas
context_array[i].clearRect(0, 0, canvas_array[i].width, canvas_array[i].height);
//drawing with particular context
context_array[i].beginPath();
context_array[i].arc(canvas_array[i].width / 2, canvas_array[i].height / 2, 40, 0, Math.PI * 2);
context_array[i].closePath();
context_array[i].fill();
context_array[i].fillStyle = 'hsl(' + hue[i] + ',100%,50%)';
}
animation_frame_id = requestAnimationFrame(render);
}
render();
<div id="canvas_container_div"></div>

Bidimensional Array Uncaught TypeError: Cannot set property '0' of undefined

I need to animate some circle in my page, in order to do that, i'm trying to store that circle in a matrix.
var elementWidth = parseInt($('#svg').width()); //Take container element's width
var circleRadius = parseInt(elementWidth/10); //Calculate radius and the distance from a circle to another
var circleMatrix = [[]]; //The 2d matrix
var s = Snap("#svg"); //Initialize Snap (it's a svg framework)
var x,y=0; //My index
for(var i=0; i<=elementWidth; i+=circleRadius){
x=0;
for(var m=0; m<=elementWidth; m+=circleRadius){
console.log("y("+y+"): "+i+" x("+x+"): "+m);
circleMatrix[y][x] = s.circle(m,i,50);
x++;
}
y++;
}
The code is really easy and a i can't understand why it returns this error:
Uncaught TypeError: Cannot set property '0' of undefined
JavaScript doesn't really have two-dimensional arrays; it has arrays of arrays instead.
This line:
var circleMatrix = [[]]; //The 2d matrix
creates an array with one entry: A blank array. So circleMatrix[1] (for instance) is undefined.
You'll have to add arrays at all of the positions in the outer array for which you need them. One way to do that would be to add:
if (!circleMatrix[y]) {
circleMatrix[y] = [];
}
just before this line:
circleMatrix[y][x] = s.circle(m,i,50);
E.g.:
var elementWidth = parseInt($('#svg').width()); //Take container element's width
var circleRadius = parseInt(elementWidth/10); //Calculate radius and the distance from a circle to another
var circleMatrix = []; // *** Changed
var s = Snap("#svg"); //Initialize Snap (it's a svg framework)
var x,y=0; //My index
for(var i=0; i<=elementWidth; i+=circleRadius){
x=0;
for(var m=0; m<=elementWidth; m+=circleRadius){
console.log("y("+y+"): "+i+" x("+x+"): "+m);
if (!circleMatrix[y]) { // *** Added
circleMatrix[y] = []; // *** Added
} // *** Added
circleMatrix[y][x] = s.circle(m,i,50);
x++;
}
y++;
}
To create a 2D matrix in JavaScript, you have to do something like the following:
var circleMatrix = [[],[],[]];
You have to know ahead of time what one dimension is, or plan to create each "row" as you iterate the outer loop.

HTML5 canvas array creation error

I am using the following code to try out the canvas element
Shape = function(x,y){
this.x = x;
this.y = y;
};
shapes = new array();
shapes.push(new Shape(50,50,10,10));
shapes.push(new Shape(100,100,10,10));
shapes.push(new Shape(150,150,10,10));
function animate(){
context.clearRect(0,0, canvas.width(),canvas.height());
var shapesLength = shapes.length;
for(var i = 0; i < shapesLength; i++){
var tmpShape = shapes[i];
tmpShape.x++;
context.fillRect(tmpShape.x,thmpShape.y,10,10);
}
context.fillStyle = 'yellow';
context.fill();
if(playAnimation){
setTimeout(animate, 1)
}
}
However, when I run this in the browser I get the following error -
ReferenceError: array is not defined
shapes = new array();
I have tried making it a global and local variable I just cant see where I am going wrong?
array should be capitalized, as that is the name of the constructor:
shapes = new Array();
In addition it's better to use the square bracket notation to create an array. Like this:
shapes = [];

javascript - iterating over bidimensional arrays

I am trying to write a javascript program that renders an 8x8 grid of dirt tiles on an HTML5 canvas. However, when I run this code it throws up error messages when running the draw_terrain() function and it appears to be a problem with the blockArray.length component. Can someone explain to me how to fix this problem? Thanks in advance.
//Define initial canvas variables and images
var canvas;
var ctx;
var WIDTH = 800;
var HEIGHT = 800;
var dirt = new Image();
dirt.src = 'dirt.png';
//Function called to initialise canvas variables and run draw on interval
function init(){
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
return setInterval(draw, 15);
}
//Function that generates an 8x8 Array called blockArray
function gen_terrain(){
var blockArray = new Array(8);
for(var i=0; i<blockArray.length; i++) {
blockArray[i] = new Array(8);
for(var j=0; j<blockArray[i].length; j++){
blockArray[i][j] = 0;
};
};
}
//Function that returns a random number between a min and max
function randomRange (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function draw_terrain(){
for(var i=0; i<blockArray.length; i++) {
for(var j=0; j<blockArray[i].length; j++){
ctx.drawImage(dirt,(n-1)*32,(j-1)*32);
};
};
}
function draw(){
draw_terrain();
}
gen_terrain();
init();
Your problem, as other people have explained is that the variable you are using the build the array will not exist by the time the draw occurs. Just place your array declaration outside of the function and your issue will go away.
See comment below:
function init(){
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
return setInterval(draw, 15);
}
//Function that generates an 8x8 Array called blockArray
var blockArray = []; // <== has to be global (outside function).
function gen_terrain(){
// Not here -> var blockArray = [];
for(var i=8; i--;) {
blockArray[i] = [0,0,0,0,0,0,0,0];
};
}
Example

Dynamic value storing in javascript json

I have a project regarding the Dijkstra's algorithm with a canvas to draw the graph. I have the following code in the JavaScript of my html file. This is a portion of JavaScript code.
var graph = {};
var i = 0;
function ondblclick(e)
{
var cell = getpos(e)
canvasX = cell.x-10;
canvasY = cell.y-10;
graph = {i: {coord : [cell.x,cell.y]}};
var g_canvas = document.getElementById("canvas");
var context = g_canvas.getContext("2d");
var cat = new Image();
cat.src = "dot1.png";
cat.onload = function()
{
context.drawImage(cat,canvasX , canvasY);
}
}
i = i+1
function submit()
{
for (i = 0; i<= 5; i = i + 1)
alert(graph.i.coord);
}
here I have a canvas and the 'ondblclick' is the function when the user double clicks on the canvas. Canvas is used to draw nodes and edges. 'ondblclick' is used for drawing the nodes.
My issue is on saving the coordinate values of the nodes to the 'graph' in dictionary format. it accepts only the last value. How can I update/append/extend the all values to the same dictionary using the variables I and cell.x,cell.y values??
You nearly had it.
var graph = [];
function ondblclick(e)
{
var cell = getpos(e)
canvasX = cell.x-10;
canvasY = cell.y-10;
graph.push({coord : [cell.x,cell.y]});
var g_canvas = document.getElementById("canvas");
var context = g_canvas.getContext("2d");
var cat = new Image();
cat.src = "dot1.png";
cat.onload = function()
{
context.drawImage(cat,canvasX , canvasY);
}
}
function submit()
{
for (i = 0; i<= 5; i = i + 1)
alert(graph[i].coord);
}
In order to get data into graph you need to push objects into an array, then loop through that array. Your problem was that you used the i variable incorrectly, thus storing (and retrieving) your coords ontop of each other.
A dictionary (key-value store) is the wrong data structure for a graph. Use an array where you can append nodes. Use a dictionary for each element in the array to save coordinates in them.

Categories