what happens with an strokeweight less than 1 pixel

Question

Im retyping a processing script into python so i can use it in a gimp-python script. Im having trouble with strokeWeight(0.3), which means a thickness of less than 1 pixel.

I have followed suggestions as to blend the rgb colors with alpha but that didnt work. It would seem that processing is doing something else. I have tried to look up the strokeWeight function in the processing sourcecode but i couldnt really make sense of it. I have also tried to compare color values with an strokeWeight of 1 against those with an strokeWeight of 0.3 but i also couldnt make sense of it.

Does anybody know what processing does when setting strokeWeight to 0.3, how would one simulate this?

The script i am using is:

String filename = "image2";
String fileext = ".jpg";
String foldername = "./";

// run, after 30 iterations result will be saved automatically
// or press SPACE

int max_display_size = 800; // viewing window size (regardless image size)

/////////////////////////////////////
int n=2000;
float [] cx=new float[n];
float [] cy=new float[n];

PImage img;
int len;

// working buffer
PGraphics buffer; 

String sessionid; 

void setup() {
  sessionid = hex((int)random(0xffff),4);
  img = loadImage(foldername+filename+fileext);

  buffer = createGraphics(img.width, img.height);
  buffer.beginDraw();
  //buffer.noFill();
  //buffer.smooth(8);
  //buffer.strokeWeight(1);
  buffer.strokeWeight(0.3);
  buffer.background(0);
  buffer.endDraw();

  size(300,300);

  len = (img.width<img.height?img.width:img.height)/6;

  background(0);
  for (int i=0; i<n; i++) {
    cx[i] = i; // changed to a none random number for testing 
    cy[i] = i; 
  //for (int i=0;i<n;i++) {
  //  cx[i]=random(img.width);
  //  cy[i]=random(img.height);
  }
}

int tick = 0;

void draw() {  
  buffer.beginDraw();
  for (int i=1;i<n;i++) {
    color c = img.get((int)cx[i], (int)cy[i]);
    buffer.stroke(c);
    buffer.point(cx[i], cy[i]);
    // you can choose channels: red(c), blue(c), green(c), hue(c), saturation(c) or brightness(c)
    cy[i]+=sin(map(hue(c),0,255,0,TWO_PI));
    cx[i]+=cos(map(hue(c),0,255,0,TWO_PI));
  }

  if (frameCount>len) {
    frameCount=0;
    println("iteration: " + tick++);
    //for (int i=0;i<n;i++) {
    //  cx[i]=random(img.width);
    //  cy[i]=random(img.height);
    for (int i=0; i<n; i++) {
      cx[i] = i; // changed to a none random number for testing 
      cy[i] = i;
    }

  }

  buffer.endDraw();
  if(tick == 30) keyPressed();

  image(buffer,0,0,width,height);
}

void keyPressed() {
  buffer.save(foldername + filename + "/res_" + sessionid + hex((int)random(0xffff),4)+"_"+filename+fileext);
  println("image saved");
}

Here are some test results, (scaled 200%): (it should be noted that this is a fairly straight line for comparison purpose. The actual code uses random coordinates.)

Answer 1

A stroke weight of 0.3 pixels means that on the whole 3/10 of a pixel would be colored(*), so, assuming that the path crosses the pixels in the middle, the pixels is painted with a 3/10 opacity (with possibly some adjustments for linear/perceptual).

(*) of course if the path is near the edge of the pixel, this could be a bit less, and the neighboring pixels would be slightly colored as well.

Answer 2

Based on the many comments it seems the aim is to produce a 9000x9000 image using a basic algorithm to sample pixels and synthesise a new image.

The algorithm seems to work as follows:

1. allocate random pixels locations based on input image dimensions
2. draw a small(sub-pixel) dot at pre-allocate the pixel locations
3. offset pixel locations on curves directed based on a colour channel(H/S/B/R/G/B) intensity to angle mapping for sin()/cos() functions

The existing processing script can easily be adapted to output a 9000x9000 image. In the case where the input image is smaller, coordinates can be re-mapped:

float remappedX = map(cx[i],0,input.width,0,output.width);
float remappedY = map(cy[i],0,input.height,0,output.height);

Here's a modified version of the Processing sketch posted at the top:

String filename = "image2";
String fileext = ".jpg";
String foldername = "./";

// run, after 30 iterations result will be saved automatically
// or press SPACE

/////////////////////////////////////
// number of pixels to sample
int n = 2000;
float[] cx;
float[] cy;

PImage img;
int len;

// working buffer
PGraphics buffer;
// buffer size
int bufferWidth  = 9000;
int bufferHeight = 9000;

String sessionid; 

int tick = 0;

boolean imageAutoSaved = false;

void setup() {
  size(300,300);
  background(0);

  // load image, setup session
  sessionid = hex((int)random(0xffff),4);
  img = loadImage(foldername+filename+fileext);
  len = (img.width<img.height?img.width:img.height)/6;
  // sample each pixel
  n = img.pixels.length;
  cx = new float[n];
  cy = new float[n];
  resetPixelSampling();
  // setup buffer
  buffer = createGraphics(bufferWidth,bufferHeight);
  buffer.beginDraw();
  //buffer.noFill();
  //buffer.smooth(8);
  //buffer.strokeWeight(1);
  buffer.strokeWeight(0.3);
  buffer.background(0);
  buffer.endDraw();
}

void resetPixelSampling(){
  for (int i=0; i < n; i++) {
    //cx[i] = i; // changed to a none random number for testing 
    //cy[i] = i; 
    cx[i] = random(img.width);
    cy[i] = random(img.height);
  }
}

void updatePixelSampling(){
  buffer.beginDraw();
  for (int i = 1; i < n; i++) {
    color c = img.get((int)cx[i], (int)cy[i]);
    buffer.stroke(c);
    // remap/re-scale coordinates from sampled image to target buffer size
    float bufferX = map(cx[i],0,img.width,0,bufferWidth);
    float bufferY = map(cy[i],0,img.height,0,bufferHeight);
    buffer.point(bufferX,bufferY);
    // you can choose channels: red(c), blue(c), green(c), hue(c), saturation(c) or brightness(c)
    float channel = hue(c);
    cy[i]+=sin(map(channel,0,255,0,TWO_PI));
    cx[i]+=cos(map(channel,0,255,0,TWO_PI));
  }

  buffer.endDraw();
}

void draw() {
  if (frameCount>len) {
    frameCount=0;
    println("iteration: " + tick++);
    resetPixelSampling();
  }

  updatePixelSampling();

  if(tick == 30) {
    if(!imageAutoSaved){
      imageAutoSaved = true;
      saveImage();
    }
  }

  image(buffer,0,0,width,height);
}

void keyPressed() {
  saveImage();
}

void saveImage(){
  buffer.save(foldername + filename + "/res_" + sessionid + hex((int)random(0xffff),4)+"_"+filename+fileext);
  println("image saved");
}

The script can be optimised further. For example, the sampling(analysis) and synthesis algorithm can be ported to a GLSL fragment shader. Note that 9000x9000 is a large image that can't be uploaded a texture on the GPU as is, however, a smaller buffer can be used as a tile that can render one section at a time into the large image.

Regarding porting the processing code into python so it can be used it in a gimp-python script:

• Gimp has an "Ink" paint tool which can have a size less than a pixel.
• The Gimp Python API allows this size to be set if it's selected: pdb.gimp_context_set_ink_size(0.3)
• The Gimp Python API also has paint functions