1

I am fairly new to p5.js, however I am trying to read a .txt file which contains the below text, and draw a picture depending on the value within the .txt file.

00000

20022

00222

22020

11111

I am currently stumped as to how to draw an image depending on the number in the array, as an example '1' would be grass. I have loaded the file in as a string using the following code: track = loadStrings("track1.txt");

I am trying to load it as a 5x5 'tile' if you will. Any help would be appreciated :)

David1163
  • 11
  • 1

2 Answers2

2

I've used p5.Image to create a picture based on the pixels in the file.

This is a way of writing the code:

let track;
let colors;
let img;

function setup() {
  createCanvas(100, 100);
  track=loadStrings("track1.txt")
  colors = [color(255,0,0),color(0,255,0),color(0,0,255)]
}

function draw() {
  background(220);
  img = createImage(track.length, track[0].length)
  img.loadPixels();
  for (let i = 0 ; i < track.length ; i++){
    for (let j = 0 ; j < track.length ; j++){
      img.set(i, j, colors[int(track[i][j])]);
    }
  }
  img.updatePixels();
  image(img, 50, 50);
}
Eden Yosef
  • 39
  • 4
1

Well you could probs split it up into arrays and also if you'd have some sort of seperator for colors, like: track1.txt: 10, 30, 255\n ... r, g, b\n .... Right now you would have to use the rgb rrrgggbbb

let colors = track.split("\n") // makes every new line into an array
for(let x = 0; x <= width; x ++) // "\n" = new line
   for(let y = 0; y <= height; y ++){

      let currentCol = []
         for(let i = 0; i < 9; i += 3)
         currentCol.push(
            colors[x + y][0 + i] + // I'm really not sure about the: colors[x + y]...
            colors[x + y][1 + i] + 
            colors[x + y][2 + i]
         )
      set(x, y, color(currentCol[0], currentCol[1], currentCol[2]))

   }

I also made a function with a slightly different formula, which might work better, i am not sure though, but this is the actual formula to get from pixel array

function getColor(x, y, allColorsArr){
  let _col = [] // current color, underscore not to accidentally clear your variable 

  for(let i = 0; i < 3; i ++)
       _col.push(
          allColorsArr[x + y * width][0 + i * 3] + 
          allColorsArr[x + y * width][1 + i * 3] + 
          allColorsArr[x + y * width][2 + i * 3]
       )

  return {
    r: parseInt(_col[0], 10),
    g: parseInt(_col[1], 10),
    b: parseInt(_col[2], 10)
  } // returning an object here just for the `.r`; `.g`; `.b`
}   // you could do something like: let Colors = {red: 0, green: 1, blue: 2}
    // col[Colors.red], col[Colors.green], col[Colors.blue]   if you want

// example:    let col = getColor(1, 0, track.split("\n"))
// example:    stroke(col.r, col.g, col.b)

THERE IS MOST LIKELY IS A BETTER WAY TO DO THIS, but at least this works...

Ulti
  • 514
  • 3
  • 5
  • Thanks for the help! For my task I'm trying to complete, I dont think a pixel array would be correct, as I am not trying to draw an image on the canvas with the pixels, more so I have loaded some pictures in to my code, and I am trying to add that image to my canvas depending on the the value (0, 1 or 2) As an example, the bottom layer being "1 1 1 1 1" would have 5 pictures of grass on the bottom of my canvas. – David1163 Sep 29 '21 at 06:08
  • Oh, i see, so at that point you could do something like: ```js let _images = track.split(\n) for(let x in _images){ for(let y = -1; y++ <= _images[x].length;){ if(_images[x][y] == 0){ // do something } } } ``` also you can totally use something like enums here, they're great: ```js let state = { grass = 0, wood = 1, stone = 2 // ... } ``` Also I'm pretty sure the formatting doesn't work in comments... So ya can copy to p5 or something with code highlighting. edit: Nvm, it does, just without line breaks... – Ulti Oct 03 '21 at 14:45