Develop Reference

Trying to replace random array characters within an array

This is my first ever question, please give me feedback if I suck at this. Thank you
I am trying to create a JavaScript terminal game from a paid course. The game is called 'Find My Hat'.
One section of the problem requires me to create a static method called generateField(). This method generates a field, on the field there are 4 possible characters:
hat = '^';
hole = 'O';
fieldCharacter = '░';
pathCharacter = '*';
The fieldCharacter is the background for the game area. The game area is comprised of nested arrays. I haven't had problems creating the field, but I also want to replace random fieldCharacters with holes. I tried this with Math.random and nested loops to iterate over the nested arrays. I have not been able to figure out how to get this to work.
Here is the code below, sorry if I missed any details, I will try respond to everyone I can.
class Field {
constructor(field) {
this._field = field;
}
print() {
this._field = field.join('\n');
console.log(this._field.replace(/,/g, ''))
}
static generateField(height, width) {
let finalArray = []
for (let i = 0; i < height; i++) {
finalArray.push([fieldCharacter.repeat(width)]);
}
for (let i = 0; i < finalArray.length; i++) {
let randomHole = () => {
let result = Math.random() * width;
return result;
}
for (let j = 0; j < finalArray[i].length; j++) {
if (randomHole() > width - 2) {
finalArray[i][j] = hole;
}
}
}
return finalArray.join('\n').replace(/,/g, '');
}
}
console.log(Field.generateField(5, 10));
One Random Output:
O
O
░░░░░░░░░░
░░░░░░░░░░
O
Example for good output:
░░░░O░░░░░
░░░O░OO░░░
░░O░░░O░░░
░░░░O░░░░░
OO░░░░O░░O

I did some changes to your code and use the stackoverflow snippet to show you how it works
String.prototype.replaceAt = function(index, replacement) {
return this.substr(0, index) + replacement + this.substr(index + replacement.length);
}
hat = '^';
hole = 'O';
fieldCharacter = '░';
pathCharacter = '*';
class Field {
constructor(field) {
this._field = field;
}
print() {
this._field = field.join('\n');
console.log(this._field.replace(/,/g, ''))
}
static generateField(height, width) {
let finalArray = []
for (let i = 0; i < height; i++) {
finalArray.push(fieldCharacter.repeat(width));
}
//i dont know why you did this loop but i changed the inside for marking random holes
for (let i = 0; i < finalArray.length; i++) {
//pick random x and y
let randomHoleX = Math.floor(Math.random() * width);
let randomHoleY = Math.floor(Math.random() * height);
//becouse you save array of strings you need to find the correct array and replace the char at the correct index.
finalArray[randomHoleY] = finalArray[randomHoleY].replaceAt(randomHoleX, hole);
}
return finalArray.join('\n').replace(/,/g, '');
}
}
console.log(Field.generateField(5, 10));

compute determinant of a matrix

I'm trying to compute determinant of a matrix in JS. I used algorithm from http://www.sanfoundry.com/java-program-compute-determinant-matrix/ but I lost my mind on the last condition. I just do not understand. Can you help me?
This is how looks like my code right now. In another function I create an empty 2d array and then copy it to det function. Next I retrieve values from html and then trying to compute determinant of a matrix. The first 2 cases are simple but I have a problem with the last one. I couldn't find working example in JS.
function det() {
var det = 0;
var array1 = array.slice();
for (i = 0; i < array1.length; i++) {
for (j = 0; j < array1[i].length; j++) {
array1[i][j] = parseInt(document.getElementById("element" + (i + 1) + (j + 1)).value, 10);
}
}
if (array1.length == 1) {
det = array1[0][0];
} else if (array1.length == 2) {
det = (array1[0][0] * array1[1][1]) - (array1[1][0] * array1[0][1]);
} else {
}
}

I may suggest my solution, based on recursive algorithm, which takes only few lines of code and, I guess, will suit most of practical applications:
const determinant = m =>
m.length == 1 ?
m[0][0] :
m.length == 2 ?
m[0][0]*m[1][1]-m[0][1]*m[1][0] :
m[0].reduce((r,e,i) =>
r+(-1)**(i+2)*e*determinant(m.slice(1).map(c =>
c.filter((_,j) => i != j))),0)
const test1 = [[3]] // 3
const test2 = [[3,-2],[7,4]] // 26
const test3 = [[1,3,7],[2,-1,4],[5,0,2]] // 81
console.log(determinant(test1))
console.log(determinant(test2))
console.log(determinant(test3))
.as-console-wrapper {min-height: 100%}

I created a Matrix class with some function for the basic operations, one of them the determinant calculation
Here we have the constructor
constructor(rows,cols) {
this.rows = rows;
this.cols = cols;
this.vals = new Array(rows*cols);
for(let i = 0; i < this.vals.length; i++) this.vals[i] = 0;
}
and here the determinant function
determinant() {
if (this.rows != this.cols ) {
console.log("Matrix must be square");
return;
}
let size = this.rows;
if (size == 1) return this.vals[0];
if (size == 2) return this.vals[0]*this.vals[3]-this.vals[1]*this.vals[2];
let sign = 1;
let result = 0;
for (let k = 0 ; k < size ; k++){
let cofactors = new Matrix(size-1,size-1);
cofactors.vals = this.vals.slice(size,size*size).filter((_,index)=>index%size!=k);
result += sign * this.vals[k] * cofactors.determinant();
sign*=(-1);
}
return result;
}

You can see definition of the determinant for square matrix here https://en.wikipedia.org/wiki/Determinant#n_.C3.97_n_matrices.
Algorithm used in http://www.sanfoundry.com/java-program-compute-determinant-matrix/ use some properties of determinat to calculate it in recursive way as sum over all permutations. In this way you get N * N! operations! It is very big even for small N.
For solving this problem you can first transform matrix to triangular with the same determinant and after that calculate determinant as product of all diagonal elements.

Failed JS Mandelbrot Set generator outputs odd structure

I made this simple Mandelbrot Set generator in Javascript last night, but it outputs a really strange structure. I think it looks similar to the mandelbrot set, yet oddly deformed. I have no idea why it distorts like this, and I've been trying to find out all day. Does anyone know what causes this or how to fix this?
c = document.getElementById("canvas");
ctx = c.getContext("2d");
c.width = 4000;
c.height = 4000;
declareVariables();
calculateShape();
drawShape();
function declareVariables() {
Re = -2;
Im = -2;
input = [Re,Im];
precision = prompt("input precision (higher is better)");
precision = 1/(precision - precision%4);
segmentAmt = 4/precision;
segmentSize = c.width/segmentAmt;
iterate = prompt("input test amount (higher is better)");
set = [];
for (i=0; i<segmentAmt; i++) {
set[i] = [];
}
numberGrid = [];
for (i=0; i<segmentAmt; i++) {
numberGrid[i] = [];
for (j=0; j<segmentAmt; j++) {
}
}
}
function calculateShape() {
for (i=0; i<segmentAmt; i++) {
input[1] = -2;
input[0] += precision;
for (j=0; j<segmentAmt; j++) {
input[1] += precision;
set[i][j] = 0;
z = [0,0];
for (k=1; k<=iterate; k++) {
store = z;
z[0] = store[0]**2 - store[1]**2 + input[0];
z[1] = 2 * store[0] * store[1] + input[1];
if (z[0]**2 + z[1]**2 > 4) {
set[i][j] = k;
k = iterate+1;
}
}
}
}
}
function drawShape() {
ctx.fillStyle = "white";
ctx.fillRect(0,0,c.width,c.height);
for (i=0; i<segmentAmt; i++) {
for (j=0; j<segmentAmt; j++) {
if (set[i][j] == 0) {
ctx.fillStyle = "black";
} else if (set[i][j] >= 1) {
ctx.fillStyle = 'hsl(' + (25*(set[i][j]-1))**0.75 + ', 100%, 50%)';
}
convertCoords(i,j);
ctx.fillRect(xCoord,yCoord,segmentSize,segmentSize);
}
}
}
function convertCoords(var1,var2) {
xCoord = var1 * segmentSize;
yCoord = var2 * segmentSize;
}
Output image:

The error appears to be on this line in calculateShape():
store = z;
It seems you want store to be a copy of z, but this just ends up with store and z referring to the same array. The next line calculates z[0], but as store and z refer to the same array, store[0] has the new value of z[0] rather than the previous. Hence the calculation of z[1] in the line after that is incorrect.
Replace the above line with either
store = [z[0], z[1]];
or
store = z.slice();
Both of these lines ensure that store refers to a different array to z, so when you recalculate z[0], store[0] is unaffected.

Filling up a 2D array with random numbers in javascript

I'm really sorry if anything like this has been posted here before but I couldn't find anything, I'm kinda new to the site still!
So for a while now I've been learning a bit about game development through html5 and javascript and I stumbled upon making tileset maps, I now have a tileset and an 2D array that I want to put certain tiles in (the number varies between 6 and 10 in this case).
I figured it could be a cool function to make the map choose between a small set of similar tiles so I don't have to specifically number every tile in the array(just define the type)
The method I have currently is probably the best for being able to define types but I want something that looks a bit cleaner and/or information to why my "cleaner" version dosen't work.
var ground = [
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()],
[tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile(),tile()]];
function tile() {
var y = (Math.random() * 5 | 0) + 6;
return y;
}
This is the code I've been using so far, I have to edit every element of the code with the tile() function to get a random number in each one, what I wanted to have was something like this:
for (var i = 0 ; i < 15; i++) {
for (var j = 0; j < 9; j++) {
ground[[i],[j]] = (Math.random() * 5 | 0) + 6;
}
}
to fill the array without having to add the function to each spot.
I have a feeling that I'm missing a return function or something along those lines but honestly I have no idea.

You were thinking in the right direction but there are some errors in your code ;)
You have to initialize the array first before you can push elements into it.
And you were counting i++ twice
Javascript
var ground = []; // Initialize array
for (var i = 0 ; i < 15; i++) {
ground[i] = []; // Initialize inner array
for (var j = 0; j < 9; j++) { // i++ needs to be j++
ground[i][j] = (Math.random() * 5 | 0) + 6;
}
}
Maybe even better (reusable)
function createGround(width, height){
var result = [];
for (var i = 0 ; i < width; i++) {
result[i] = [];
for (var j = 0; j < height; j++) {
result[i][j] = (Math.random() * 5 | 0) + 6;
}
}
return result;
}
// Create a new ground with width = 15 & height = 9
var ground = createGround(15, 9);

Here's a quick example. I've created a function that will take in a width and height parameter and generate the size requested. Also I placed your tile function inside generate ground to keep it private, preventing other script from invoking it.
var ground = generateGround(10, 10); //Simple usage
function generateGround(height, width)
{
var ground = [];
for (var y = 0 ; y < height; y++)
{
ground[y] = [];
for (var x = 0; x < width; x++)
{
ground[y][x] = tile();
}
}
return ground;
function tile()
{
return (Math.random() * 5 | 0) + 6;
}
}
http://jsbin.com/sukoyute/1/edit

Try removing the comma from...
ground[[i],[j]] = (Math.random() * 5 | 0) + 6;
...in your 'clean' version. Also, your incrementing 'i' in both for loops:
for (var i = 0 ; i < 15; i++) {
for (var j = 0; j < 9; i++) {
Hopefully these changes make it work for you :)

How to make matrix like text change effect in javascript?

I was trying to make this text change matrix movie like effect in JavaScript.The basic concept was that there is a div present in html and JavaScript take that div's inner text and manipulate it to create the continuously changing random text effect like in matrix movie. I am quite new to JavaScript, I am having hard time figuring out the logic behind the animation like the each steps, one step after another like what will happen next in whole animation process.
Anyways, I tried to make it on my own but as you can suspect i failed.
Here is my code :
<html>
<head>
<script>
var text = document.getElementById("text").innerText;
var length_var = text.length;
var possible = [];
var possible_text ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var counter = 0;
var arr_text = [];
var new_func = function(){
arr_text[Math.floor(Math.random() * length_var)] = possible.charAt(Math.floor(Math.random() * possible.length));
alert(arr_text);
};
var call_func = function(){
for(var i=0; i<=possible_text.length; i++){
possible[i] = possible_text.charAt(i);
}
for(var i=0; i<= length_var ; i++){
arr_text[i] = text.charAt(i);
}
setInterval(new_func, 100);
};
</script>
</head>
<body onload="call_func()">
<div id="text">
Hello There!
</div>
</body>
</html>
What I was planning to do can be seen on this page, as I was highly motivated to do this effect on my own.
Link : http://events.ccc.de/congress/2012/wiki/Main_Page
The header text of the page contains such animation.
Please Help

This changes the string sequentially.
function main() {
"use strict";
var counter = 0, all = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
var $_inter = setInterval(function() {
var text = document.getElementById("text");
text.innerHTML = text.innerHTML.substring(0, counter) + all.charAt(Math.floor(Math.random()*all.length)) + text.innerHTML.substring(counter+1);
counter = (counter+1)%text.innerHTML.length;
}, 100);
}
window.onload = main;

Try this-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function randString(len) {
"use strict";
var i, out="", all ="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (i = 0; i < len; i++) {
out += all.charAt(Math.floor(Math.random()*all.length));
}
return out;
}
function main() {
"use strict";
var $_inter = setInterval(function() {
var text = document.getElementById("text");
text.innerHTML = randString(text.innerHTML.length);
}, 100);
}
window.onload = main;
</script>
</head>
<body>
<div id="text">Hello World!</div>
</body>
</html>

Here take a look at this JSFiddle, as put together from this resource. It is very fast and you can easily configure it.
Basically creates a blank canvas and renders the graphics. Here is the JS and HTML code that does that:
HTML:
<html style="background:black; width:100%; height:100%">
<body style="background:black; width:100%; height:100%">
<canvas id="c" style="display: block;"></canvas>
</body>
</html>
JS:
var c = document.getElementById("c");
var ctx = c.getContext("2d");
//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
//chinese characters - taken from the unicode charset
var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
//converting the string into an array of single characters
chinese = chinese.split("");
var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
drops[x] = 1;
//drawing the characters
function draw()
{
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px arial";
//looping over drops
for(var i = 0; i < drops.length; i++)
{
//a random chinese character to print
var text = chinese[Math.floor(Math.random()*chinese.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i*font_size, drops[i]*font_size);
//sending the drop back to the top randomly after it has crossed the screen
//adding a randomness to the reset to make the drops scattered on the Y axis
if(drops[i]*font_size > c.height && Math.random() > 0.975)
drops[i] = 0;
//incrementing Y coordinate
drops[i]++;
}
}
setInterval(draw, 33);

The crux of the program that's on the site (which is really, really ugly) involves creating an array of "haXX0r-like" characters, and then injecting them and removing them from the text.
They also speed up and slow down their process, and bounce between doing an addition pass and a removal pass, from what I saw on my quick read-through.
The downside of their code are that it's all a bunch of loops slopped together, with a bunch of "if"s to contain two or three loops, one after the other... ...and then they add "mode-switching" to that, where they say "if we're in mode-1 add stuff and do it quickly, and if we're in mode-2, remove stuff and lower the speed and if we're in this submode of either mode, set the speed accordingly, and if the speed is greater than this or less than that, and we're in this mode, then stop what we're doing, wait 5 seconds and call it again"...
...not pretty.
But they're starting with a quote, finding a random spot in the string, and then replacing the character at that spot with the character, plus the new "<", "?", "{", etc...
And speeding up and slowing down, as they add and remove the randomly-chosen character-type.

Elegant snippet
canvas = document.body.appendChild(document.createElement('canvas'))
screen = window.screen;
width = canvas.width = screen.width;
height = canvas.height = screen.height;
p = Array(255).join(1).split('');
context = canvas.getContext('2d');
setInterval(function(){
context.fillStyle = 'rgba(0,0,0,0.05)';
context.fillRect(0, 0, width, height);
context.fillStyle = 'rgba(0,255,0,1)';
p = p.map(function(v,i){
r = Math.random();
context.fillText(String.fromCharCode(Math.floor(2720 + r * 33)),i*10,v);
v += 10;
return v > 768 + r * 1e4 ? 0 : v
})
}, 33)

If you want something that will randomise a string and slowly replace each character with the original, here's something that may suit. The replacement order is random too, so the string is replaced out of order but ends up with the original string.
A fancier solution is to give each letter its own timer with a different lag so they run at different speeds, and for different lengths of time. But that might suck some serious system resources for a big string.
function Randomiser(el, count, delay) {
this.element = el;
this.originalText = el.textContent || el.innerText || '';
this.places = [];
this.currentText = [];
this.count = count || 3; // iterations before fixing a character
this.delay = delay || 100; // milliseconds between updates
this.iteration = 0;
this.startTime = new Date();
var i = this.originalText.length;
while (i--) {
this.places[i] = [i];
}
}
Randomiser.prototype.randomise = function() {
var charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var i = this.places.length;
while (i--) {
this.currentText[this.places[i]] = charSet.charAt((Math.random() * charSet.length) | 0);
}
this.iteration += 1;
}
Randomiser.prototype.setContent = function() {
var t = this.currentText.join('');
if (typeof this.element.textContent == 'string') {
this.element.textContent = t;
} else {
this.element.innerText = t;
}
}
Randomiser.prototype.run = function() {
var n;
var temp = [];
// If first run, randomise to initiate
if (!this.iteration) {
this.randomise();
}
// If there are places left
if (this.places.length) {
// If reached count, randomly remove one place and set its character
// to the original value
if (!(this.iteration % this.count)) {
n = this.places.splice((Math.random() * this.places.length|0), 1)[0];
this.currentText[n] = this.originalText.charAt(n);
}
// Randomise the string and call itself
this.randomise();
this.setContent();
var randomiser = this;
setTimeout(function(){randomiser.run();}, this.delay);
}
// If no places left, end
}
// Kick it off
var r = new Randomiser(document.getElementById('text'), 5, 200);
r.run();
The above uses classic prototype inheritance, it could use a closure for the same thing. Also all those prototype functions could be put in a single object that is assigned to Randomiser.prototype.