Image scaling blurred (& slow execution)

blackbananas

Hi guys, I've been playing around with p5.js, it's great! I've made a version of Langton's Ant which scales up the image. Although I've put in noSmooth() the result is still horribly blurred. Do you have any recommendations on how to fix this?

img.loadPixels();
for(var i = 0; i < img.width; i++) {
   for(var j = 0; j < img.height; j++) {
      if (c[i][j]>0)
      {
      //var h = (c[i][j]*92)%255;
      img.set(i, j, cul[c[i][j]-1]); 
      }
    }
  }
img.updatePixels();
image(img, 0,0,400,400);

blackbananas

This is the code in full. Also, while I'm asking, lines 56 to 61 (i've commented them) seem to be taking a long time to execute, do you have any idea on how to speed things up?

var canv;
var img; 
var d;
var x;
var y;
var c = [];
var turns =  [0,-1,1,1,-1,1,1,1,-1,-1,-1,-1];
var acc;
var cul=[];

function setup() {
  noSmooth();
  //img.noSmooth();
  canv=createCanvas(400, 400);
  img = createImage(100, 100);

  cul[0] = color(255,0,0);
  cul[1] = color(53,12,232);
  cul[2] = color(13,255,220);
  cul[3] = color(92,255,0);
  cul[4] = color(232,162,12);
  cul[5] = color(234,0,255);
  cul[6] = color(12,106,232);
  cul[7] = color(13,255,63);
  cul[8] = color(255,243,0);
  cul[9] = color(232,98,12);
  cul[10] = color(0,0,0);
  cul[11] = color(150,150,150);

  x = img.width/2;
  y = img.height/2;
  d = 0;
  acc = 0;

  for (var i = 0; i < img.width; i++)
  {
      c[i] = [];
      for (var j = 0; j < img.height; j++)
      {
        c[i][j] = 0;
      }
  }
}

function move()
{
if (d == 0)x++;
if (d == 1)y++;
if (d == 2)x--;
if (d == 3)y--;
}

function draw()
{
move();     //line 56
c[x][y]++;
if (c[x][y]>11)c[x][y]=1;
d+=turns[c[x][y]];
if (d < 0) d=3;
if (d>3) d=0; //line 61

if (acc>100)
{
img.loadPixels();
for(var i = 0; i < img.width; i++) {
   for(var j = 0; j < img.height; j++) {
      if (c[i][j]>0)
      {
      //var h = (c[i][j]*92)%255;
      img.set(i, j, cul[c[i][j]-1]); 
      }
    }
  }
img.updatePixels();
image(img, 0,0,400,400);
acc = 0;
}
else acc++;
}

blackbananas

You fool! Did you stop to think at all before posting??

    loadPixels();
    for(var i = 0; i < width; i++) {
       for(var j = 0; j < height; j++) {
          if (c[floor(i/4)][floor(j/4)]>0)
          {
          set(i, j, cul[c[floor(i/4)][floor(j/4)]-1]);
          }
        }
      }
    updatePixels();

I'd still like to know about speeding thing up a bit ;)

blackbananas

hmmmm, I had a look at the timeline in devmode and it looks like the the script is being executed with 99% idle time, which I take to mean the computer is doing nothing at this time! I tried setting the frame rate to 900 but it makes no difference...

blindfish

Slow execution is a common enough complaint (an example); particularly when iterating over every pixel of an (often large) image.

There may be gains to be made by using webGL - even in 2d operations (as an example see pixijs) though not sure how far p5js webGL development has got...