Paint program problems

[Chri]

Hi everyone, I made this small paint-like program but I have two issues...here's the code

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;

import javax.swing.JButton;
import javax.swing.JColorChooser;
import javax.swing.JFrame;
import javax.swing.JSlider;
import javax.swing.SwingConstants;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;


public class Painter extends JFrame  {

	int xvalue = -10;
	int yvalue = -10;
	int size=2;
	boolean rgbBool = false;
	private JSlider slider;
	private Color color;
	private JButton colorChooser;
	private JButton colorRGB;
	RGB rgb = new RGB();

	
	public Painter(){
		
		super("Drag to paint");
		
		colorChooser = new JButton("Palette");
		colorRGB = new JButton("Color RGB");
		colorChooser.addActionListener(
				new ActionListener(){
					public void actionPerformed(ActionEvent event){
						color =(color != null ? JColorChooser.showDialog(null, "Choose a color", color) : Color.BLACK);
						rgbBool=false;
					}
				}
				);
		
		colorRGB.addActionListener(
				new ActionListener(){
					public void actionPerformed(ActionEvent event){
						rgb.setSize(200,300);
						rgb.setDefaultCloseOperation(JFrame.HIDE_ON_CLOSE);
						rgb.setVisible(true);
						rgbBool=true;
					}
				}
				);
		
		add(colorChooser, BorderLayout.NORTH);
		add(colorRGB, BorderLayout.AFTER_LAST_LINE);
		
		slider = new JSlider(SwingConstants.VERTICAL, 2,60,2);
		 slider.addChangeListener(
				 new ChangeListener(){
					 public void stateChanged(ChangeEvent e){
						 setSize(slider.getValue());
					 }
				 }
				 );
		 add(slider, BorderLayout.WEST);
		
		 addMouseMotionListener

	      (

	         new MouseMotionAdapter()

	         {

	            public void mouseDragged( MouseEvent event )

	            {
	            	 
	               xvalue = event.getX();
	               
	               yvalue = event.getY();
	             
	               repaint();

	            }

	         }

	      );
		
		 
		 
	}
	
	public void paint(Graphics g){
		if(rgbBool){
			g.setColor(rgb.getColor());
		}else{
		g.setColor(color);
		}
		g.fillOval(xvalue, yvalue, size, size);
	}
	
	public void setSize(int newSize){
		
		size= (newSize>=0 ? newSize : 10);
	}

	

	
}

this chunk works if I draw slowly, if I draw faster it draws separate circles instead of a line...how can I make it faster?

then I made a way to select the color by RGB in a dedicated JFrame with three sliders,I wanted a rectangle that show the color that you currently have, so I called repaint() with ChangeListener, but the entire thing is so laggy, the color updates, but the cursor of the slider won't move smoothly

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JSlider;
import javax.swing.SwingConstants;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;


public class RGB extends JFrame {

	private JSlider reds, greens, blues;
	int red=0, green=0, blue=0;
	private JButton ok;
	Color color;
	Color colore;
	public RGB(){
		colore = new Color(red,green,blue);

		setLayout(new FlowLayout());
		reds = new JSlider(SwingConstants.VERTICAL, 1,255,1);
		greens = new JSlider(SwingConstants.VERTICAL, 1,255,1);
		blues = new JSlider(SwingConstants.VERTICAL, 1,255,1);
		ok = new JButton("Done");
		reds.addChangeListener(
				new ChangeListener(){
					public void stateChanged(ChangeEvent e){
						setRed(reds.getValue());
						colore = new Color(red,green,blue);

						repaint();

					}
				}
				);
		greens.addChangeListener(
				new ChangeListener(){
					public void stateChanged(ChangeEvent e){
						setGreen(greens.getValue());
						colore = new Color(red,green,blue);
						repaint();
					
					}
				}
				);
		blues.addChangeListener(
				new ChangeListener(){
					public void stateChanged(ChangeEvent e){
						setBlue(blues.getValue());
						colore = new Color(red,green,blue);

						repaint();

						
					}
				}
				);
		ok.addActionListener(
				new ActionListener(){
					public void actionPerformed(ActionEvent event){
						System.out.println(red +" "+ blue + " "+ green);
						colore = new Color(red,green,blue);
						setColor(colore);
						System.out.println(getColor());
						
						dispose();
					}
				}
				);
		

		add(reds, BorderLayout.WEST);
		add(greens, BorderLayout.CENTER);
		add(blues, BorderLayout.EAST);
		add(ok, BorderLayout.SOUTH);
	}
public void setRed(int newRed){
		
		red= newRed;
	}
public void setGreen(int newGreen){
	
	green= newGreen;
}
public void setBlue(int newBlue){
	blue= newBlue;
}
public void setColor(Color color){
	this.color = colore;
}
public Color getColor(){
	return colore;
}
	public void paint(Graphics g){
		g.setColor(getColor());
		g.fillRect(0, 270, 200, 30);
	}

	
	
}

is there any way to make it better?

(Sorry for the English errors...)

[AndrewM16921]

For drawing more linearly, there is an algorithm called "Bresenham's line algorithm" for drawing lines that you can use. Instead of drawing circles every time the mouse is moved, draw a line from the previous point to the current point. Also be sure to check for bounds conditions (i.e. if the mouse goes off the canvas and reappears elsewhere it would draw a line straight across the canvas). I hope this is what you were asking for the first part, and I hope this will be of some help.

Example from a program I wrote some time ago.

public void drawLine(int x1, int y1, int x2, int y2, boolean render)
{
	int dx = Math.abs(x2 - x1);
	int dy = Math.abs(y2 - y1);
	int sx = x1 < x2 ? 1 : -1;
	int sy = y1 < y2 ? 1 : -1;
	// Verticle Line
	if(dx == 0)
	{
		while(true)
		{
			fillCircle(x1, y1, render);
			if(y1 == y2)
				break;
			y1 += sy;
		}
	}
	// Horizontal Line
	else if(dy == 0)
	{
		while(true)
		{
			fillCircle(x1, y1, render);
			if(x1 == x2)
				break;
			x1 += sx;
		}
	}
	// Other Line
	else
	{
		int err = dx - dy;
		while(true)
		{
			fillCircle(x1, y1, render);
			if(x1 == x2 || y1 == y2)
				break;
			int e2 = 2 * err;
			if(e2 > -dy)
			{
				err -= dy;
				x1 += sx;
			}
			if(e2 < dx)
			{
				err += dx;
				y1 += sy;
			}
		}
	}
}

public void fillCircle(int centerX, int centerY, boolean render)
{
	int minX = centerX - size;
	int maxX = centerX + size;
	int minY = centerY - size;
	int maxY = centerY + size;
	int r2 = size * size;
	for(int x = minX; x <= maxX; x++)
	{
		for(int y = minY; y <= maxY; y++)
		{
			int dx = centerX - x;
			int dy = centerY - y;
			if(dx * dx + dy * dy <= r2)
			{
				setPixel(x, y, false);
			}
		}
	}
	if(render)
		image.renderImage(new Rectangle(minX, minY, size * 2, size * 2));
}

public void setPixel(int x, int y, boolean render)
{
	if(x < 0 || x >= image.width)
		return;
	if(y < 0 || y >= image.height)
		return;
	Color c = color;
	switch(writeType)
	{
		case ADDITIVE:
		{
			c = ColorUtils.add(getPixel(x, y), color);
			break;
		}
		case AVERAGE:
		{
			c = ColorUtils.average(getPixel(x, y), color);
			break;
		}
		case REPLACE:
		{
			
			break;
		}
		case SUBTRACTIVE:
		{
			c = ColorUtils.subtract(getPixel(x, y), color);
			break;
		}
	}
	image.data[x][y] = c;
	if(render)
		image.renderImage(x, y);
}

[Chri]

OMG I don't understand much of that code, could you please be clearer? by drawing a line from a point to another, wouldn't you obtain just a straight line?

[doWhile]

Why reconstruct the Bresenham line algiorithm? The Graphics class already has a method for it. If you wish to draw a line, list for the mousePressed event and store the point, when the mouse is dragged draw the line from the mouse down point to the current point, the line is then complete when the mouse is released.

I'm not completely sure I understand the problem, but a) you might want to consider using a lightweight component (for instance JPanel) to do the drawing, and override the paintComponent method b) When calling paint or paintComponent, always be sure to invoke the parent method (eg call super.paint(g)) unless you intend on not clearing the component.

[Chri]

this is the problem

when I drag the mouse slowly I obtain a line, but if I drag it faster I obtain just separate circles

[doWhile]

this is the problem
...
when I drag the mouse slowly I obtain a line, but if I drag it faster I obtain just separate circles

If you add some println's to your mouseDragged method, you will see that the mouseDragged is not fired for every pixel move - move the mouse faster and the event will fire with a point some distance from the previous point. If you wish to 'connect the dots' so to speak, then you can draw a line between the two points. And I do recommend reading the advice in post #4 again

[AndrewM16921]

Why reconstruct the Bresenham line algiorithm? The Graphics class already has a method for it. If you wish to draw a line, list for the mousePressed event and store the point, when the mouse is dragged draw the line from the mouse down point to the current point, the line is then complete when the mouse is released.

I'm not completely sure I understand the problem, but a) you might want to consider using a lightweight component (for instance JPanel) to do the drawing, and override the paintComponent method b) When calling paint or paintComponent, always be sure to invoke the parent method (eg call super.paint(g)) unless you intend on not clearing the component.

I don't think Graphics (not sure about Graphics2D though, I haven't used that much) can draw a straight line of varying widths? Which seems to be what he would need to do. I may be mistaken, though. Also, when I wrote that I was implementing my own Graphics class for a project of mine.

OMG I don't understand much of that code, could you please be clearer? by drawing a line from a point to another, wouldn't you obtain just a straight line?

If you decide that you do want to use this method, you can read up on it on Wikipedia:
Bresenham's line algorithm - Wikipedia, the free encyclopedia

[doWhile]

I don't think Graphics (not sure about Graphics2D though, I haven't used that much) can draw a straight line of varying widths?

The Graphics object passed to paint and paintComponent is an instance of Graphics2D (thus the object can be cast to a Graphics2D), which has a method setStroke that can be used to set the stroke of a line. For instance one can set the width of a drawn line by setting the Stroke to a BasicStroke instance with a specified width.
Graphics2D
Stroke (Java Platform SE 7 )
BasicStroke (Java Platform SE 7 )

[AndrewM16921]

:o

I definitely need to look into that.