Paint program abilities

First time posting here so bear with me if I'm asking the obvious. I searched the forums for how to solve this but I couldn't find what I was looking for exactly.

Okay, let's get the basics known so I get the right info:
Using: Visual Basic 6.0
OS: Win XP Pro
Experience with VB6: I'm new but I can do the basics like creating things and passing values of things back and forth.

Current project: A program similar to MS Paint. Simple, I know but I want to make one to gain experience. Gotta start somewhere, right?

I have several problems I'm not sure how to solve. First, is scrolling an image within a picture box with scroll bars. If I open a picture, I need to have it so that if it's bigger than the drawing area, I can scroll up/down/left/right smoothly to see the other parts of it. And, if I set the height and width in two text boxes, use those values to set the drawing area size but if they are bigger than the default drawing area, enable the scroll bars to see the rest of the drawing area.

Second problem is an undo function for drawing. Basically, my only question on that is "How?"

That's enough to ask for right now but I do have other questions and will ask them once I solve these two.

Creativ82

Forgive me for bumping this but does no one know the answer or where I could find it? I'm totally at a loss for solutions on this.

You could make two pictureboxes, one for the drawing and one as container, put the first picturebox (drawing) inside the second one (container) and just move the first picturebox around according to the values of your scrollbars.

-Shell-

the easiest way to do undo code is that you have 2 pictureboxes in the form, one to paint on, and one invisible.
when the user clicks the mouse on the visible picturebox, that image is stored to the invisible box. and when calling undo, restore it!
but that limits you to only 1 undo...
you can add some more invisible boxes and do the same thing with the others, but that is no good...
but its a good way for a biginner...

how far on the paint program have you come?
i've made tons of them, so i think i can help you! :)

MS Paint only supports one undo...
The undo state is saved whenever the user changes the drawing tool, you could do the same.

actually, ms paint supports 3 undos

Yeah, MS Paint does indeed support 3 undos. Not 1.

How far have I come? Well, keep in mind, I'm still really new at this so anying I do is probably ancient to everyone here.

Well, I've got basics like freehand drawing, spray brushing, changing the size of the pencil in both cases. Color choosing (for left/right buttons) by either clicking on a preset color, choosing from a pop up color box, or sliding gradient sliders (with colors in the gradients changin as you slide sliders), and I really want to try to make a color chooser like in Photoshop but I don't quite know how. I can get the four colors in each corner but it takes a while to draw a square that big. Anyone know how to speed it up so it's fast like Photoshop? I have figured out how to limit the movement of the mouse to within the color box but not completely. I can stop it at the top, left, and right sides of the picture box containing the colors but at the bottom, the mouse still can go out of it and it causes an error and it closes the program. But when I apply the same exact code to the drawing picture box, the limited mouse movement works fine on all sides. Can't for the life of me figure out what's going wrong.

I can also flip the image in the picture box horizontally and vertically. I can draw lines and rectangles but can't see the size of them until I release the mouse button. I'd like to be able to draw them like in MS Paint where you can see the size while dragging. I also have this funky invert brush that doesn't quite work right but it does vaguely interesting things.

I can open/save images I make/open as well.

That's about it so far. Not much, I know but it's a start.

Oh, I'm also having odd troubles with grayscale converting as well. For some reason it's not working quite properly.

Anyone have any solutions? I'd love to see the paint programs you've made, cyborg.

Ah, and yet again, C++ destroys VB =).

Most undo lists are created using Linked Lists. Each possible action is assigned a certain state, and the current image is created by applying those states in order. Undoing simpply moves the current state back one in the list, so the top item doesnt get applied. This behavior could be mimicked with arrays. The big problem you are going to have is creating the state system. You would need to figure out a way to generalize any action you might want to perform into a set of parameters.

Once that is in place, It is just a matter of determining when to add a state to the list. Paint does this when you Release the mouse button.

Z.

Then I'm confusing it with the old Win16 Paintbrush.

ok...i've made a copy of the Photoshop colors and i'll upload the code so you can use it!

first use autoredraw = true and scalemode = 3 on all pictures.

when making a rectangle clear the picture before every move and then refresh it after the rectangle code

in the mouseup sub, put picture1.picture = picture1.image
so the changes is stored and dont get cleard when clearing next time.

to lock mouse from moving outside of pictureboxes use

VB Code:

If x < 0 Then x = 0
If x > picture1.ScaleWidth Then x = picture1.ScaleWidth
'same thing with Y

Wow Cyborg, that's a lot of coding. To be honest, I don't understand half of it. Could you explain it to me? I mean I can understand it somewhat but a lot of it confuses me. Like how did you get the gradients to always redraw themselves so quickly and smoothly? How did they draw themselves to begin with?

Also, that color pallet is great but I was actually thinking of the color pallet in Photoshop 7 that you see when you click on your forecolor and the box pops up with the big color box and you choose from there.

I used the code for limiting the cursor to within the color box on my form in the MouseMove function but it doesn't work at all. It doesn't limit the cursor movement at all.

you must have codes both for X and Y...and change picture1 to whatever your picturebox is called..
for the Y coord, you dont use scalewidth, use scaleheight.
put all that in the mousedown sub for the picturebox

i'll comment the RGB palette and upload it again later....

ok...
changed some minor things...nothing special...
and most of the things is commented

btw...
one thing you could add is bezier lines (the curved lines in mspaint)...

i can give you some tips on how to do it...

i've also made a program to do those kind of lines animated...i can upload it if you wanna take a look...

btw again!
when using the code for locking the mouse....you dont accually lock the mouse, you just prevent the coordinates from being outside the picturebox.

Quote:

---

Originally posted by CornedBee
Then I'm confusing it with the old Win16 Paintbrush.

---

If you are good, you only need one undo ;).

Z.

Quote:

---

Originally posted by Zaei
If you are good, you only need one undo ;).

Z.

---

LOL right ;)

I got the code for limiting the mouse movement working. I didn't use your code but modified mine a bit. I just had the order of some code reversed.

I downloaded your new pallet now with comments and it's easier to understand now. Thank you.

I still don't understand though why you gradient bars redraw themselves so much faster than mine. Mine are rather slow.

I tried using the the code in the program you gave me to get the RGB and Hex values from the color square but for some reason it wasn't working. Guess I'l have to work more at it.

Also, Cyborg, have you figured out how to program the color picker in Photoshop? Not the one you gave me already but the other one that opens up a whole new window and lets you change the colors in a large square box?

i'll look at the color box in photoshp...

when drawing the bars.....dont calc things for the Y coords becase everything is the same for the Y coords...
and dont clear or refresh when drawing....only clear before drawing and refresh afterwards.
also use setpixelv instead of setpixel, because it does not return the previous pixel color, so its a bit faster...

if you show me the code, it will be easier to see what makes it slow...

ok....i've made that color palette now...
gonna speed it up a bit and comment it out...
i will post it here in half an hour, or so...

I'll post it in a couple hours since I'm at work replying and I don't have access to my code here.

You programmed the color box already!? Geez. I feel so ignorant now. I don't understand how to use SetPixel. Could you explain it for me since I'm a total n00b?

I had it done so that it drew the colors in the color box once but it took a while to do it once so I couldn't make a slider to do it many times or it would slow down a lot. And I don't know how to make the vertical slider either.

Oh, and I'd love for you to show me how to do bezier lines as well. No clue how to even begin there.

ok....heres the new palette...
its really slow because of that every pixel has its own color so theres alot of calculating to be done

ok....
setpixel sets one pixel in a picturebox (or it's DC (device context))

use it like this for example:

SetPixel Picture1.hDC, 20, 10, vbRed

this code sets the color of a pixel to picture1 at the pixel 20 from the left and 10 from the top to the color red!

the bezier line is controlled by 4 point; the start and end point, and 2 other that changes the curving of the line.

(X0,Y0) = start point
(X1,Y1) = first controlling point
(X2,Y2) = second controlling point
(X3,Y3) = end point

there are some other points that you must define too:

cx = 3 * (x1 - x0)
bx = 3 * (x2 - x1) - cx
ax = x3 - x0 - cx - bx

cy = 3 * (y1 - y0)
by = 3 * (y2 - y1) - cy
ay = y3 - y0 - cy - by

the formula for the X values of the whole line is:
x(t) = ax * t^3 + bx * t^2 + cx * t + x0
and for the Y values
y(t) = ay * t^3 + by * t^2 + cy * t + y0

this changed to VBcode looks loke this:

VB Code:

Dim X0 As Single
Dim Y0 As Single
Dim X1 As Single
Dim Y1 As Single
Dim X2 As Single
Dim Y2 As Single
Dim X3 As Single
Dim Y3 As Single
 
Dim AX As Single
Dim BX As Single
Dim CX As Single
Dim AY As Single
Dim BY As Single
Dim CY As Single
 
Dim NewX As Single
Dim NewY As Single
 
Dim t As Single
 
'Set all 4 point before this code using mousedown or mousemove
 
CX = 3 * (X1 - X0)
BX = 3 * (X2 - X1) - CX
AX = X3 - X0 - CX - BX
 
CY = 3 * (Y1 - Y0)
BY = 3 * (Y2 - Y1) - CY
AY = Y3 - Y0 - CY - BY
 
 
For t = 0 To 1 Step 1 / 100
    NewX = AX * t ^ 3 + BX * t ^ 2 + CX * t + X0
    NewY = AY * t ^ 3 + BY * t ^ 2 + CY * t + Y0
    SetPixel Picture1.hDC, NewX, NewY, vbBlack
Next t

here's a picture that shows how it could look:

http://www.vbforums.com/attachment.p...postid=1232316

This line it made with my 2D Animator, that you can download from the link below.

This is a GREAT! thread.

I've been struggling with these issues for weeks.

I'm starting simple, very very simple.

Maybe you could help.

I am trying to retrieve the color palette of a bitmap. I want to see the color palette of a bitmap (loaded into a DC) just like I see it in photoshop.

Or even simpler. If I could get message boxes that give me the color value of each palette entry that would be fine.

Thanks for any help at all.

- Jake

i'll look into that

where in photoshop can i find the palette?

Okay here's my entire program so far. It's basically a mish-mash of various things I just wanted to learn how to do. Sorry if it's completely confusing or very primative in the way the coding is done but I'm a beginner so this is all I know so far.

I honestly don't understand how that code is supposed to work quite right with the bezier lines so I didn't add it yet.

Let me know what you think I guess?

i can tell you more exactly how to do it...

and check out my program that uses them....from the link below

your program looks nice! :)

heres a simple program with bezier curves

Thanks for the program. I'll take a look at it and hopefully can make some sense out of it with my limited VB knowledge.

And I know you're just being kind when you say you like the program, but thanks. :) I'm sure you've made tons better.

well....i've almost only made graphic programs, so that's what im best on...
but for a beginner (?) your program was great!

Back to undo/redo...

Use MDI and put about 5 picboxs in an alligned (docked) picbox as an array. On mouseup save your main form's pic to one. On the next mouseup save to the next one. On redo go to previous and load it to the main form, on redo go to next and load it. Never allow redo to go further than most current. Never allow undo to go further than most oldest. Do a search in maths page for "escalator" and that should get you on your way to looping through your designated array. Making the array grow dynamic on initialization may make it easier to know if the pics exist yet or you can code a whole lot to determine if there's anything to undo. Also keep in mind you can't have a "redo" if you haven't done an undo. Have fun!

Um...joey o.? I'm really new to all of this so what you told me to do doesn't make much sense to me. I haven't a clue how to do half of that stuff.

Joey, bad idea. That uses 6 times the amount of memory for each picture you edit, and still only gives you 5 redos.

Z.

Zaei, memory is cheep now and even if you got a little vb's ok with it. In vb you might as well save the pics to a memdc wether in a control or device independent 'cause your gonna loose on processing trying to calculate various regions anyway. I tryed that and found no gain. Also once a pic is drawn over if you depend on arrays to undraw what you have you will again be clobbered by memory issues if someone draws for a full minute without lifting the mouse. Using hidden pics and their dc's uses abrox 2% of my active memory (56k, win98 on a 333)to record a full screen pic. I have no reason to open 35 full screen bmp's but I can if I want to. This shouldn't be a concern. XP shows no difference at all for me but I've got 256 on that one.

A in-memory 32bit image (uncompressed) of 640x480 dimensions needs 1.2 MB. Memory is cheap, but not so cheap that you can use 7.2 MB when you could achieve the same effect with just 1.5 MB and a little more tricky code, and that would even be more flexible (like removing a single step from the undo stack that's not on the top).

And I sometimes load 20 640x480 or larger images at once.

Quote:

---

Originally posted by joey o.
Zaei, memory is cheep now and even if you got a little vb's ok with it. In vb you might as well save the pics to a memdc wether in a control or device independent 'cause your gonna loose on processing trying to calculate various regions anyway. I tryed that and found no gain. Also once a pic is drawn over if you depend on arrays to undraw what you have you will again be clobbered by memory issues if someone draws for a full minute without lifting the mouse. Using hidden pics and their dc's uses abrox 2% of my active memory (56k, win98 on a 333)to record a full screen pic. I have no reason to open 35 full screen bmp's but I can if I want to. This shouldn't be a concern. XP shows no difference at all for me but I've got 256 on that one.

---

And what If I wanted a 50 level undo? Going by CBs numbers, that would require 61.2 megabytes of memory, just for the picture. This doesnt include the overhead required for windows to store everything in its own DC, nor does it include VBs own overhead.

Using arrays, you add a single state to your undo stack/linked list when the mouse is released. As I stated above, The only real challenge is figuring out how to store the states in a generalized manner.

Z.

Please bear with me as I want to learn: I keep hearing about "states". What exactly what are these these states? Is it a memory location (memory dc), an array of past actions, or what? If it is an array of past actions then as far as I know you need to store the locations and pixels you may be covering which means you have to record them AS you draw. I want to know a better way but an example might help.

I know if you simply write the region of leftmost-topmost x,y - bottommost-rightmost of the area drawn in a single mousedown/move/up action you might save some memory but I still fail to see how a few lines coverred with big lines can magically reappear without writing and calling their pixels and locations from memory weather from a control's device context or directly from a created memory object.

Also I tryed two other methods.
1. I wrote every pixel drawn in a mousemove to a two dimentional array (one for each action the other for the pixels positions using point api and color as long) and thoroughly stopped dead after 2 minutes of drawing without lifting the mousebutton. I also tryed streeming them into a file after a certain size was reached-stil slow, I then tryed a timer to reduce the pixels recorded. That worked but I lost quality in my drawing. I'd rather know my number of pictures available for display than to chance crashing because someone wants to draw a big long never ending scribble.

2. The other method was to draw using a backbuffer. A lot of the on line code I've seen uses this method but drawing to to dc's at the same time was delayed quite a bit on my machine.

Please don't get me wrong. I want a better way. Please help to provide us with that way by way of example.