Help Starting Bitmap Trace

General Discussion Other

gigghashr..

in General Discussion • Other • 1 year ago

Dear All:

I am new to Processing and the programming environment. I have been reading a LOT (bought two books on this), and I have been devouring all of the tutorials I can find.

I am in the processing of becoming more adept at the language, as I would like to teach it to my students. So far, the going is slow but steady. I have written two semi-simple sketches, and I am hungry for much more!

One of the things I am trying to find, to no avail, is how to start out an image tracing sketch. Meaning, I would like to load a bitmap pic (which I have found out how to do), but then I would like to define a few functions that would use the data in the bitmap and "sketch" it - if that makes sense.

I am going to hazard a guess and say there is a library that I must use, I just don't know which.

I am sure I will have many more questions in the future. Thank you all for such a great community!

- John

Replies(11)

xenophage

Re: Help Starting Bitmap Trace

1 year ago

Hi John,

I have found the 'Learning' section to most helpful, you might have seen this one but I think what your looking for is related to this:

http://processing.org/learning/pixels/

Down at the bottom end they describe how to use pixels and change them with different functions.

What do you mean by "sketch" it?

gigghashr..

Re: Help Starting Bitmap Trace

1 year ago

Xenophage:

Thank you so much for the help and guidance!

I was thinking something along the lines of: http://www.shiffman.net/2008/01/31/savannah-2008/

I do realize that is far beyond my skills, at this point; however, something simple to start out would suffice.

I believe another poster dubbed it "PhotoRasters?"

I am working on the examples and reading the section that you provide a link to!

Regards,
- John

"Make it so." - Captain Picard

PhiLho

Re: Help Starting Bitmap Trace

1 year ago

I keep a tab opened on a Wikipedia article, trying to find time to play with this algorithm:
http://en.wikipedia.org/wiki/Marching_squares

amnon.owed

Re: Help Starting Bitmap Trace

1 year ago

It's not really clear what kind of effect you are after. The link you point to is just a voronoi-ization of an image, where the position of the segments are then randomly changed a bit. However your initial description sounded more like the type of work sergio albiac does.

gigghashr..

Re: Help Starting Bitmap Trace

1 year ago

Wow, Sergio Albiac's generative stuff is amazing. Yes, more or less that is where I want to get to. I am going through the tutorial of that Xeno sent to me.

I am just lost a bit in the woods when trying to figure out how to get to that point.

Thank you both: PhiLho & Amnon.owed.

"Make it so." - Captain Picard

amnon.owed

Re: Help Starting Bitmap Trace

1 year ago

Here is a very basic example as a starting point. There are many things that can drive this (for example color, hue, saturation, brightness, contours, etc.) and different shapes (lines, points, rects, circles, brushes, etc.) and effects (rotate, translate, random, noise, sin, cos, etc.) you can use. Aesthetically I think it's also important to prevent 100% coverage for example by stopping the program earlier or using noise once more to 'indicate' the drawing areas. Anyway, as a starting point check this example I quickly threw together...

Code Example

PImage img = loadImage("http://languageisavirus.com/startrek/layouts/startrek/picard-1.jpg");
int numDrawers = 50;
void setup() {
size(img.width, img.height);
background(0);
}
void draw() {
for (int i=0; i<numDrawers; i++) {
float x = noise(0.01*frameCount+i)*width*2-width/2;
float y = noise(0.01*frameCount+30*i)*height*2-height/2;
int index = constrain(int(x) + int(y) * img.width, 0, img.pixels.length-1);
color c = img.pixels[index];
float theta = map(brightness(c), 0,255, 0, TWO_PI);
pushMatrix();
translate(x, y);
rotate(theta);
if (random(1)<0.2) {
noStroke();
fill(c,75);
float r = random(10, 20);
ellipse(0, 0, r, r);
} else {
stroke(c);
line(0, 0, 0, random(5, 15));
}
popMatrix();
}
}

gigghashr..

Re: Help Starting Bitmap Trace

1 year ago

WOW, Amnon.owed - thank you SO much. I am going to play around with this and see if I can derive variations from it.

You are truly helpful. I will post the results that I achieve from this.

Again, thank you so very much!

- John

"Make it so." - Captain Picard

gigghashr..

Re: Help Starting Bitmap Trace

1 year ago

amonon.owed:

I just wanted to say, "Your art is simply amazing!" My background is also in graphic design - I went to graduate school for computer arts, but back then we didn't have anything like Processing. Oh, if we did!

I have bookmarked your website and have checked out some of your tutorials. My main barrier is math and basic algebra. As a traditional left brain, some algebraic logic escapes me. I have to experiment and work really hard at understanding each little piece of the logic puzzle. Simple functions come to me rather easily because of my web development experience. However, other things I have to dig to understand completely.

I think I need to invest in some graph paper and work out X, Y as problems. I really think that will help me visual what I need to code too.

As I said earlier, I am in the learning stage. I have bought 2 of the processing books, have watched numerous tutorials, and I read everything I can find online!

I just want to sincerely thank you for replying to my thread. Without your response, I may have never found you!

Kindest Regards,
- John Rodriguez

P.S. I LOVE the Captain Picard sketch. ;)

"Make it so." - Captain Picard

amnon.owed

Re: Help Starting Bitmap Trace

1 year ago

Thanks for your comments. And good to see you've been able to play with the code.

In my opinion knowing math can be very handy, but is not really a requirement for creative coding. Because in a programming environment like Processing you can just tweak code and see what happens.

gigghashr..

Re: Help Starting Bitmap Trace

1 year ago

You are most welcome. I have been doing a lot of different things with your example. My end goal is to learn enough from it and other sources so that I can write my own.

This is true, about tweaking code. I am just one of those people that MUST know how things are done, so that I can produce my own original. It's both a blessing and a curse.

I have spent many nights without sleep just so that I could figure out how to code something on a website, or do something in an application. P5 is my new obsession. ;)

Thanks again, for everything!
- John

"Make it so." - Captain Picard

gigghashr..

Re: Help Starting Bitmap Trace

1 year ago

amonon:

If you are still keeping up to date, please see what I did below. I have made it to where the input image is now a camera - high framerate and painting of colored blocks.

I AM SO excited! This stuff is super addicting. Just make sure you have a USB camera hooked up to your PC.

import processing.video.*;

Capture video;
int paintSpeed = 800;

    void setup() {
      size(650, 650);
      background(0);
      video = new Capture(this,width,height,60);

    }

    void draw() {

      if (video.available()) {
        video.read();
        frameRate(24);

      for (int i=0; i<paintSpeed; i++) {
        float x = noise(0.01*frameCount+i)*width*2-width/2;
        float y = noise(0.01*frameCount+10*i)*height*2-height/2;
        int index = constrain(int(x) + int(y) * video.width, 0, video.pixels.length-1);
        color c = video.pixels[index];
        float blox = map(noise(c), 255, 5, 0, random(8, 0));
        float inc = TWO_PI/25.0;
        pushMatrix();
        translate(x, y);
        rotate(blox);
        if (random(1)<0.2) {
          noStroke();
          fill(c, 75);
          float r = random(5, 15);
          rect(0, 0, r, r);
        }
      else {
        stroke(blox);
        line (0, 0, 0, random(5, 10));
      }
        popMatrix();
      }
        }
    }

"Make it so." - Captain Picard