Vector graphics and colors.

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
ub3rl1t
Prole
Posts: 15
Joined: Sun Jul 12, 2009 10:43 pm

Vector graphics and colors.

Post by ub3rl1t » Mon Jul 20, 2009 8:45 pm

so i draw a fish in vector graphics.

Code: Select all

	love.graphics.circle(1,xf,yf,R2);
	love.graphics.circle(1,xf - 20,yf - 10 , R2 / 2);
	love.graphics.line(xf - R2,yf + R2 / 2,xf - 2,yf + 2);
	love.graphics.triangle(1, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(1, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(1, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	if debuglove == true then
		love.graphics.draw("Fish Model 1" .. "\nSam" .. "\nX = " .. xf .. " Y = " .. yf , xf - R2,yf + R2 + 18);
	end
now i want to fill it in and use different colors, how can i do that?

User avatar
bartbes
Sex machine
Posts: 4946
Joined: Fri Aug 29, 2008 10:35 am
Location: The Netherlands
Contact:

Re: Vector graphics and colors.

Post by bartbes » Mon Jul 20, 2009 8:47 pm

Instead of 1 (which I guess is love.draw_line, please use those constants..) use love.draw_fill and set the color before doing so? You might want to keep this code for drawing an outline first though.

ub3rl1t
Prole
Posts: 15
Joined: Sun Jul 12, 2009 10:43 pm

Re: Vector graphics and colors.

Post by ub3rl1t » Mon Jul 20, 2009 8:53 pm

Another question sir. How difficult would it be to make my fish drawing into a class so i can draw multiple fish?

CharWirtanen
Prole
Posts: 7
Joined: Mon Jul 20, 2009 1:10 am

Re: Vector graphics and colors.

Post by CharWirtanen » Mon Jul 20, 2009 10:17 pm

Edit: -- See next reply with fix.
Last edited by CharWirtanen on Mon Jul 20, 2009 11:51 pm, edited 1 time in total.

ub3rl1t
Prole
Posts: 15
Joined: Sun Jul 12, 2009 10:43 pm

Re: Vector graphics and colors.

Post by ub3rl1t » Mon Jul 20, 2009 10:59 pm

thanks a lot!

ub3rl1t
Prole
Posts: 15
Joined: Sun Jul 12, 2009 10:43 pm

Re: Vector graphics and colors.

Post by ub3rl1t » Mon Jul 20, 2009 11:00 pm

can someone please tell me why this does not work properly, im trying to fill on part of the tail in with a color but it goes invisible.

Code: Select all

function draw()
	
	love.graphics.setLineStyle(love.line_smooth);
	
	--fish
	love.graphics.setColor(255,215,0);
	love.graphics.circle(love.draw_fill,xf,yf,R2);
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf,yf,R2);
	
	love.graphics.setColor(255,255,255);
	love.graphics.circle(love.draw_fill,xf - 20,yf - 10 , R2 / 2);
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf - 20,yf - 10 , R2 / 2);
	love.graphics.line(xf - R2,yf + R2 / 2,xf - 2,yf + 2);

	love.graphics.triangle(love.draw_fill, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	if debuglove == true then
		love.graphics.draw("Fish Model 1" .. "\n      Sam" .. "\n        X = " .. xf .. " Y = " .. yf , xf - 120,yf + R2 - 20);
	end
	love.graphics.setColor(255,255,255);
end

CharWirtanen
Prole
Posts: 7
Joined: Mon Jul 20, 2009 1:10 am

Re: Vector graphics and colors.

Post by CharWirtanen » Mon Jul 20, 2009 11:29 pm

Just realized my last example didnt work at all, so I went ahead and actually fired up love and made this example for you. Left-click anywhere on the screen to add a fish.

Code: Select all

-- Fish ---------------------------------
-----------------------------------------
Fish = Fish or {} -- Declare fish class
Fish_mt = {} -- Declare a metatable to handle it
Fish_mt.__index = Fish -- Tie our metatable to our class

-- Constructor for a specifically colored fish
function Fish.new(fill_mode, xf, yf, R2, r, g, b)
	-- Create a metatable for our object
	local metatable = {
		fill_mode = fill_mode, 
		xf = xf, 
		yf = yf, 
		R2 = R2,
		r = r,
		g = g,
		b = b
	}
	return setmetatable(metatable, Fish_mt)
end

-- Constructor for a random colored fish
function Fish.newRandom(fill_mode, xf, yf, R2)
	-- Assign random RGB values and then
	-- call specific color constructor
	local r = math.random(0, 255)
	local g = math.random(0, 255)
	local b = math.random(0, 255)
	local a = math.random(0, 255)
	return Fish.new(fill_mode, xf, yf, R2, r, g, b)
end

-- Draws the fish when called in draw()
function Fish:draw()
	local fill_mode = self.fill_mode
	local xf = self.xf
	local yf = self.yf
	local R2 = self.R2
	local fish_debug = self.debug
	local r = self.r
	local g = self.g
	local b = self.b
	
	-- Store our current color so we don't lose it.
	local color = love.graphics.getColor()
	
	-- Paint with the colors defined by our object
	love.graphics.setColor(r, g, b)
	
	-- Paint the fish.
	love.graphics.circle(fill_mode, xf, yf, R2);
	love.graphics.circle(fill_mode, xf - 20, yf - 10, R2 / 2);
	love.graphics.line(xf - R2, yf + R2 / 2, xf - 2, yf + 2);
	love.graphics.triangle(fill_mode, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(fill_mode, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(fill_mode, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12);
	
	-- Return our colors back to what they were before
	love.graphics.setColor(color)

	if lovedebug == true then
		love.graphics.draw("Fish Model 1\nSam\nX = " .. xf .. " Y = " .. yf, xf - R2, yf + R2 + 18);
	end
end

-- LÖVE ---------------------------------
-----------------------------------------
function load()
	-- Declare a table to hold our new fish collection.
	ABunchOfFish = {}
   
	-- Create a new fish to start with in the middle, and
	-- then add it to our fish table.
	local fish1 = Fish.newRandom(love.draw_fill, 400, 300, math.random(20,100))
	table.insert(ABunchOfFish, fish1)
end

-- Callback for mouseclick events
function mousepressed(x, y, button) 
	-- See if the user clicked the lrft 
	-- mouse button.
	if button == love.mouse_left then 
		-- If they did, create a new fish with a random
		-- size at the mouse-click location and add it
		-- to our collection to be displayed in the draw()
		-- callback
		local fish = Fish.newRandom(love.draw_fill, x, y, math.random(20,100))
		table.insert(ABunchOfFish, fish)
	end
end

function draw()
	-- Loop through our table of fish and
	-- draw all of them.
	for i, v in ipairs(ABunchOfFish) do
		v:draw()
	end
end

CharWirtanen
Prole
Posts: 7
Joined: Mon Jul 20, 2009 1:10 am

Re: Vector graphics and colors.

Post by CharWirtanen » Mon Jul 20, 2009 11:32 pm

ub3rl1t wrote:can someone please tell me why this does not work properly, im trying to fill on part of the tail in with a color but it goes invisible.

Code: Select all

function draw()
	
	love.graphics.setLineStyle(love.line_smooth);
	
	--fish
	love.graphics.setColor(255,215,0);
	love.graphics.circle(love.draw_fill,xf,yf,R2);
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_fill, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf,yf,R2);
	
	love.graphics.setColor(255,255,255);
	love.graphics.circle(love.draw_fill,xf - 20,yf - 10 , R2 / 2);
	
	love.graphics.setColor(0,0,0);
	love.graphics.circle(love.draw_line,xf - 20,yf - 10 , R2 / 2);
	love.graphics.line(xf - R2,yf + R2 / 2,xf - 2,yf + 2);

	love.graphics.triangle(love.draw_fill, xf - 5, yf - R2 + 2, xf + 10, yf - R2 + 2, xf + R2, yf - R2 - 22);
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf + R2 + 12);   
	love.graphics.triangle(love.draw_line, xf + R2, yf, xf + R2 + 40, yf, xf + R2 + 50, yf - R2 - 12); 
	
	if debuglove == true then
		love.graphics.draw("Fish Model 1" .. "\n      Sam" .. "\n        X = " .. xf .. " Y = " .. yf , xf - 120,yf + R2 - 20);
	end
	love.graphics.setColor(255,255,255);
end
I'm not sure what color the tail is because there are no comments, but shapes are drawn overlapping eachother in order from first drawn to last, so make sure that nothing is occluding the tail.

User avatar
Jasoco
Inner party member
Posts: 3651
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: Vector graphics and colors.

Post by Jasoco » Sun Jul 26, 2009 4:28 am

Draw the FILLED shape first. Then the OUTLINE second. If you do it the other way, the filled shape will draw over the outlined one.

User avatar
Pliskin09
Citizen
Posts: 89
Joined: Fri Jul 24, 2009 8:30 am

Re: Vector graphics and colors.

Post by Pliskin09 » Sun Jul 26, 2009 5:15 am

offtopic;

thanks for the example code CharWirtanen. its really helpful in understanding how to structure games. ^^

Post Reply

Who is online

Users browsing this forum: No registered users and 65 guests