Sign in to follow this  

look like drawn with a pen/pencil

This topic is 3742 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I was browsing through the "image of the day" list and found this realy creative game called crayon physics. Clicky SS I was wondering, how does he/she(kumikana) made the output from the pen/pencil, i tried experimenting by my own, but it didnt looked anywhere near that.I couldnt find any patterns so i think its how its done. My current code for this is:
[source langg = "cpp"]

void initpoints(BITMAP* bitmap)
{
  
  for(int i = 0; i <=5; i++)
   putpixel(bitmap,rand()%bitmap->w-1,bitmap->h-1,makecol(rand()%70+80,rand() % 150 +105,rand()%70+80));
}

void drawpoints(BITMAP* buffer,int x, int y, int d)
{
  if(inside(x,y,mapxoff,mapyoff,mapxoff+SCREEN_W,mapyoff+SCREEN_H))
 {
    x -= mapxoff;
  y -=mapyoff;
 
 draw_sprite(buffer,colorbitmaps[d],x,y);
 }
}


(using allegro)

Share this post


Link to post
Share on other sites
He/She describes it in the bottom of the thread....

The method involves several textures each with random alpha values, the textures get overlapped with psuedo-random texture coordinates and a diffuse color. The outcome looks amazing, doesn't it?

Anyway, read more of the post as it is described in slightly more detail than I did above.

Share this post


Link to post
Share on other sites
I actualy thought of something along that line myself, but i thought id have had to make a "brush" for each color. In the folder he describes (that comes with the game)only contains one image(with a black brush) and a few bitmaps(for drawings, i suppose), how does he get all these nuances of ex. blue out from the nuances of black?

Share this post


Link to post
Share on other sites
Quote:
Original post by MadsGustaf
I actualy thought of something along that line myself, but i thought id have had to make a "brush" for each color. In the folder he describes (that comes with the game)only contains one image(with a black brush) and a few bitmaps(for drawings, i suppose), how does he get all these nuances of ex. blue out from the nuances of black?


Black isn't a color, are you sure it isn't grey/white ?

Changing the nuance of a greyscale image is quite simple, your greyscale image generally only has one channel per pixel, lets call that one L, your target color is a normal RGB value,

Thus for each pixel you simply multiply L with R for the red channel, L*B for the blue, and L*G for the green.

Share this post


Link to post
Share on other sites
You could use vertex colours to tint the basic black/white mask easily, combined with blending so that overlapping colours merge correctly. You could even add some subtle random colour variation per brush to make things look less regular.

Share this post


Link to post
Share on other sites
Quote:
Original post by SimonForsman
Quote:
Original post by MadsGustaf
I actualy thought of something along that line myself, but i thought id have had to make a "brush" for each color. In the folder he describes (that comes with the game)only contains one image(with a black brush) and a few bitmaps(for drawings, i suppose), how does he get all these nuances of ex. blue out from the nuances of black?


Black isn't a color, are you sure it isn't grey/white ?

Changing the nuance of a greyscale image is quite simple, your greyscale image generally only has one channel per pixel, lets call that one L, your target color is a normal RGB value,

Thus for each pixel you simply multiply L with R for the red channel, L*B for the blue, and L*G for the green.

Let me get this straight, ex:
int R = 255
int G = 10
int B = 20

then i index through the standard bitmap brush's pixels and do something along this line
putpixel(randombitmapbrush[0],curpixel.x,curpixely,makecol(255*curpixel.color,10*curpixel.color,20*curpixel.color)
what if the color im looking at is white(255,255,255)? then im getting a color above 255.

Share this post


Link to post
Share on other sites
Simply multiply the values, check if they're within the 0-255 range - if they're below, set them to 0, if they're above, set them to 255 - and then draw that pixel.

That is, if that particular putpixel function doesn't do that underwater already (which I don't know, I've never used Allegro).

Share this post


Link to post
Share on other sites
Quote:
Original post by MadsGustaf
Let me get this straight, ex:
int R = 255
int G = 10
int B = 20

then i index through the standard bitmap brush's pixels and do something along this line
putpixel(randombitmapbrush[0],curpixel.x,curpixely,makecol(255*curpixel.color,10*curpixel.color,20*curpixel.color)

Your variable name indicates a misunderstanding.

The RGB value is the pixel color. What you are going to multiply/modulate it by is the desired intensity, which, for convenience sake, should be normalized to lie between 0.0 and 1.0. That way, the component value will never be over 255.

If the pixel is white (255,255,255) and the intensity is 50%, ie 0.5, then:
[code]resulting_color = (255 * 0.5, 255 * 0.5, 255 * 0.5) = (128, 128, 128)[code]when rounded up to nearest integer value. Which is a shade of gray.

Share this post


Link to post
Share on other sites
Quote:
Original post by MadsGustaf
Let me get this straight, ex:
int R = 255
int G = 10
int B = 20

then i index through the standard bitmap brush's pixels and do something along this line
putpixel(randombitmapbrush[0],curpixel.x,curpixely,makecol(255*curpixel.color,10*curpixel.color,20*curpixel.color)

Your variable name indicates a misunderstanding.

The RGB value is the pixel color. What you are going to multiply/modulate it by is the desired intensity, which, for convenience sake, should be normalized to lie between 0.0 and 1.0. That way, the component value will never be over 255.

If the pixel is white (255,255,255) and the intensity is 50%, ie 0.5, then:
[code]resulting_color = (255 * 0.5, 255 * 0.5, 255 * 0.5) = (128, 128, 128)[code]when rounded up to nearest integer value. Which is a shade of gray.
Sorry for probaly asking a dumb question,but im not very familiar with graphiclal programming.How can i get the intensity from the pixel(/or is it from the whole image) I know there probaly is a function for that in allegro, but i couldnt seem to find one. Do i get this information when i draw the image?

MADSravn>:uh-uh! nice name you got there, fellow dane! :D

Share this post


Link to post
Share on other sites
Quote:
Original post by MadsGustaf
Sorry for probaly asking a dumb question,but im not very familiar with graphiclal programming.How can i get the intensity from the pixel(/or is it from the whole image) I know there probaly is a function for that in allegro, but i couldnt seem to find one. Do i get this information when i draw the image?

If you've got a greyscale/black and white image the colour *is* the intensity. Since the red, green and blue channels will be the same you just have to pick one and ignore the others.

Share this post


Link to post
Share on other sites
Quote:
Original post by MadsGustaf
How can i get the intensity from the pixel(/or is it from the whole image)? I know there probably is a function for that in allegro, but i couldn't seem to find one. Do i get this information when i draw the image?

The technique being employed here is to take a small bitmap and use it as a "brush" by rendering it to the screen repeatedly. This brush is greyscale, with each pixel in it thus representing an intensity - all the channels (R, G, B) have the same value, and the "intensity" is what percentage of the channel max (255) that value is. So if you have a pixel with the value (64, 64, 64), that is an overall intensity of 64 / 255 * 100 → 25.09%

You then select a single color (RGB) to shade the entire brush, allowing you to generate lines that look like crayon. For each position of your virtual crayon, you draw the brush modulated by the color value. So if my color is peach (238, 203, 173), with an intensity level of 25.09%, the pixel at that corresponding point in the brush has a final RGB value of:
238 * 25.09% → 59.71 → 60
203 * 25.09% → 50.93 → 51
173 * 25.09% → 43.40 → 43


→ (60, 51, 43)

Share this post


Link to post
Share on other sites

This topic is 3742 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this