[SOLVED]Picking colours and see what current colour you have

[nice]

Hello boys and girls!

I'm currently working on a MS paint clone that I call Helium and I'm at the part where I need some colours instead of the current grey colour I'm using.

The idea is this:
1. I have ten colours, which I can pick and choose from 0-9 on the numeric pad on the keyboard and I want to assign each colour a "numeric value" .
2. And to be able to see what kind of colour you're currently using I have a ui (the ui is a work in progress) and if you see the attached image file you can see a white blank square, in that square I want the colour you picked between 0-9 to show up inside (or be drawn behind the ui within said square).

I will also attach the code for you to view.
I thank you for your co-operation!

Code: Select all

 function love.load()

squares = {}
xPos = 0
yPos = 0


--Draws canvas
	canvas = love.graphics.newCanvas(800, 480)

end

function love.update( dt )
local x, y = love.mouse.getPosition()
local newPosition = {}

	if love.mouse.isDown( "l" ) then
		newPosition.x = x
		newPosition.y = y
		table.insert( squares, newPosition )
	end


	local newPosition = {}
	if love.mouse.isDown("l" ) then
		newPosition.x = x 
		newPosition.y = y 
	end
end


-- Draws All The Graphics --
function love.draw()

-- Prints X And Y Position On The Upper Left Screen
local x, y = love.mouse.getPosition()
	love.graphics.print("X:" ..x, 10, 10)
	love.graphics.print("Y:" ..y, 10, 40)

-- Set The Background To White
	love.graphics.setBackgroundColor(255, 255, 255)

-- UI: Banner Grey
	love.graphics.setColor(195 , 195, 195)
	love.graphics.rectangle("fill", 0, 480, 800, 120)

-- Draws A 16x16 Square That Follows The Mouse
	love.graphics.rectangle("line", x, y, 16, 16)

-- Draws A 16x16 Square "brush"

for key, square in ipairs( squares ) do
  	love.graphics.rectangle( "fill", square.x, square.y, 16, 16 ) 
end

end

[artofwork]

You need to create a mouse event to handle this where it retrieves the color, this could be image data or a pallet

Code: Select all

function love.update(dt)
     if love.mouse.isDown( "l" ) then
          newPosition.x = x
          newPosition.y = y
          table.insert( squares, newPosition )
          color = --  ? depends on how you want to assign the color, but basically this is where you could assign the color to the color box in draw
     end
end

Since you already have your colors predefined you should be able to write a function that updates the current color if you have not done so already.


Then you need to display that within the color box you can do something as simple as saying

Code: Select all

function love.draw()
     love.graphics.setColor(unpack(color)) -- color of the color box
     love.graphics.rectangle("fill", x, y, 80, 80) -- color box
end

[nice]

You need to create a mouse event to handle this where it retrieves the color, this could be image data or a pallet

Code: Select all

function love.update(dt)
     if love.mouse.isDown( "l" ) then
          newPosition.x = x
          newPosition.y = y
          table.insert( squares, newPosition )
          color = --  ? depends on how you want to assign the color, but basically this is where you could assign the color to the color box in draw
     end
end

Since you already have your colors predefined you should be able to write a function that updates the current color if you have not done so already.


Then you need to display that within the color box you can do something as simple as saying

Code: Select all

function love.draw()
     love.graphics.setColor(unpack(color)) -- color of the color box
     love.graphics.rectangle("fill", x, y, 80, 80) -- color box
end

Oh I think I made a mistake in the explanation here.
I don't yet have the colours just yet, I need some help to assign for ex. the colour red to the 4 key, so I'll need some help with that too.
I'm so sorry for the inconvenience.

[artofwork]

In love.load add

Code: Select all

color = {0,0,0,255} -- default color
colors = {{0,0,0,255},{255,255,255,255},{255,0,0,255},{0,255,0,255},{0,0,255,255},{255,255,0,255},{0,255,255,255},{255,0,255,255},{150,150,150,255}} -- 1- 9 colors

To choose between different colors you would add this and then click the numbers 1 - 9 to change the colors

Code: Select all

function love.keypressed(key)
	if tonumber(key) ~= nil then
		color = colors[tonumber(key)]
	end
end

If you were assign the colors to the boxes like this

Code: Select all

	for key, square in ipairs( squares ) do
		love.graphics.setColor(unpack(color)) 
		love.graphics.rectangle( "fill", square.x, square.y, 16, 16 ) 
	end

There is an issue with this, every time you change the color it effects everything already drawn on the screen, so you need to find a new way of drawing the rectangles =/ but at least it is a start

I don't mind writing some things but I don't want to write out everything because I don't know what direction your going with your code so with that said I'll refrain from writing the button code :p

Although I did write a button class to help get you started
http://love2d.org/forums/viewtopic.php? ... 29#p173829

[nice]

Code: Select all

 I don't mind writing some things but I don't want to write out everything because I don't know what direction your going with your code so with that said I'll refrain from writing the button code :p  

It's all right, my project (Which I call Helium) is part of three (I haven't really decided how to organize it yet) where I make projects to understand Löve better.
Helium is a project where I focus on the graphical parts of Löve, such as drawing object, colours, creating images and so on.
The second part is where I focus on the more technical parts of Löve, it can be moving objects with the arrows, playing around with physics or it can be object spawning.
I haven't really decided what it should be making in this part so I'm open for suggestions.
The last part of this BIG project is where I take the experience from the previous projects and make some kind of game, I have no idea what it should be yet as I'm not done with the other two.

As for choosing colours, I wanted to make Helium easy as possible to use, I don't want it to be complicated and I thought having the colours drawn in my UI but I thought that it would be too cluttered and I'm guessing that I need some of collision boxes that checks the mouse cursor, also I have other functions that I'm gonna add to Helium too but I want to add the more important functions first.

[artofwork]

Well good luck with your project!

[nice]

Well good luck with your project!

Thanks! I'll let you know if I have some troubles.

[nice]

Code: Select all

 color = {0,0,0,255} -- default color
colors = {{0,0,0,255},{255,255,255,255},{255,0,0,255},{0,255,0,255},{0,0,255,255},{255,255,0,255},{0,255,255,255},{255,0,255,255},{150,150,150,255}} -- 1- 9 colors 

I started thinking wouldn't it be easier if I gave my colours a local statement instead for example:

Code: Select all

 local Red = love.graphics.setColor(235, 0, 0) 

I don't really know how the other part of the code would look like but my theory would be that I would write the code needed and give it my local statement.
Is this more complicated or am I going the wrong way?

[artofwork]

I started thinking wouldn't it be easier if I gave my colours a local statement instead for example:

Code: Select all

 local Red = love.graphics.setColor(235, 0, 0) 

I don't really know how the other part of the code would look like but my theory would be that I would write the code needed and give it my local statement.
Is this more complicated or am I going the wrong way?

love.graphics.setColor() doesn't return a value so your local variable Red would be nil.

[Zilarrezko]

Code: Select all

Screenshot = love.graphics.newScreenshot(true) --Takes a screen shot, and returns an image data. The parameter is a boolean "Copy Alpha"

local r, g, b, a = Screenshot:getPixel(mouseX - 1, mouseY - 1) --image data is 0 based, so we minus 1 as Lua and love2d is 1 based.

--Use r, g, b, a however you want. (Not sure what it will do if you don't copy the alpha though. I didn't test it.)

--After storing the variable or something... Delete the image object, or just make it local so it will delete itself after a function ends.

If you wanted to pick a color with your mouse.