Sim Innovations Forums

Posted: **Thu Apr 29, 2021 9:52 am**

Hi,

For those that want to play with canvas_draw() textures, I have done some simple code to achieve that. Lets see you creations.

Code: Select all

---texture_carbonfiber1
my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#2a2a2a")

  for i = 0,162 do  
   _move_to(0+(i*8),0)
   _line_to(0,0+(i*8))
   _stroke("#515151",1)
  end  
end)

Code: Select all

---texture_carbonfiber2

my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#2a2a2a")

  for i = -1,133 do 
    for i2 = -1,83 do 
      _rotate(45,3+(i*6),3+(i2*6))
      _rect(5+(i*6),0+(i2*6),6,6)  
      _stroke("#515151",0.5)   
     _rotate(-45,3+(i*6),3+(i2*6))
    end
  end   
end)

Code: Select all

---texture_carbonfiber3
my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#2a2a2a")

  for i = -1,100 do 
    for i2 = -1,62 do 
      _rotate(45,2+(i*8),4+(i2*8))
      _rect(5+(i*8),0+(i2*8),8,8)  
      _stroke("#515151",0.5)   
      _rotate(-45,2+(i*8),4+(i2*8))
    end
  end   
end)

Code: Select all

---texture_carbonfiber4
my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#2a2a2a")

  for i = 0,100 do 
    for i2 = 0,62 do 
     _rotate(45,2+(i*8),4+(i2*8))
     _rect(5+(i*8),0+(i2*8),6,6)  
     _stroke("#515151",0.5)   
     _rotate(-45,2+(i*8),4+(i2*8))
    end
  end   
end)

Code: Select all

---texture_carbonfiber5
my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#2a2a2a")

  for i = 0,80 do 
    for i2 = 0,50 do 
      _rotate(45,3+(i*10),3+(i2*10))
      _rect(5+(i*10),0+(i2*10),6,6)  
      _stroke("#515151",1)   
      _rotate(-45,3+(i*10),3+(i2*10))
    end
  end   
end)

Keith

Posted: **Thu Apr 29, 2021 10:54 am**

Hi,

Checker plate styles

Code: Select all

---texture_checker_plate1

my_canvas= canvas_add(0,0,800,500)
canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#515151")

  for i = 0,40 do
    for i2 = 0,16 do
      _rotate(45,0+(i*20),0+(i2*30))
      _arc(-10+(i*20),0+(i2*30),330,30,12)
      _arc(10+(i*20),0+(i2*30),150,210,12)  
      _rotate(-45,0+(i*20),0+(i2*30))
      _fill("#414141")
	  
      _rotate(-45,10+(i*20),15+(i2*30))
      _arc(0+(i*20),15+(i2*30),330,30,12)
      _arc(20+(i*20),15+(i2*30),150,210,12)  
      _rotate(45,10+(i*20),15+(i2*30))
      _fill("#414141")	  
    end	  
  end
end)

Code: Select all

---texture_checker_plate2
my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#515151")

  for i = 0,40 do
    for i2 = 0,16 do
		_rotate(45,7.5+(i*30),0+(i2*30))
              _arc(-10+(i*30),0+(i2*30),330,30,12)
              _arc(10+(i*30),0+(i2*30),150,210,12)  
            _fill("#414141")
              _arc(-5+(i*30),0+(i2*30),330,30,12)
              _arc(15+(i*30),0+(i2*30),150,210,12)  
             _fill("#414141")				 
              _arc(0+(i*30),0+(i2*30),330,30,12)
              _arc(20+(i*30),0+(i2*30),150,210,12)  
            _fill("#414141")
              _arc(5+(i*30),0+(i2*30),330,30,12)
              _arc(25+(i*30),0+(i2*30),150,210,12)  
            _fill("#414141")			
        _rotate(-45,7.5+(i*30),0+(i2*30))

		_rotate(-45,22.5+(i*30),15+(i2*30))
              _arc(5+(i*30),15+(i2*30),330,30,12)
              _arc(25+(i*30),15+(i2*30),150,210,12)  
            _fill("#414141")
              _arc(10+(i*30),15+(i2*30),330,30,12)
              _arc(30+(i*30),15+(i2*30),150,210,12)  
             _fill("#414141")				 
              _arc(15+(i*30),15+(i2*30),330,30,12)
              _arc(35+(i*30),15+(i2*30),150,210,12)  
            _fill("#414141")
              _arc(20+(i*30),15+(i2*30),330,30,12)
              _arc(40+(i*30),15+(i2*30),150,210,12)  
            _fill("#414141")			
        _rotate(45,22.5+(i*30),15+(i2*30))
    end	  
  end
end)

Code: Select all

---texture_checker_plate3
my_canvas= canvas_add(0,0,800,500)

canvas_draw(my_canvas,function()
  _rect(0,0,800,500)
  _fill("#515151")

  for i = 0,26 do
    for i2= 0, 17 do
	_rotate(45,10+(i*30),10+(i2*30))
       _move_to(10+(i*30),0+(i2*30))
       _line_to(13+(i*30),10+(i2*30))
       _line_to(10+(i*30),20+(i2*30))
       _line_to(7+(i*30),10+(i2*30))
       _line_to(10+(i*30),0+(i2*30))
       _fill("#414141")
       _move_to(5+(i*30),10+(i2*30))
       _line_to(15+(i*30),10+(i2*30))
       _move_to(10+(i*30),-3+(i2*30))
       _line_to(10+(i*30),23+(i2*30))    
       _stroke("#414141",0.5)
    _rotate(-45,10+(i*30),10+(i2*30))
   
 	_rotate(-45,25+(i*30),25+(i2*30))
       _move_to(25+(i*30),15+(i2*30))
       _line_to(28+(i*30),25+(i2*30))
       _line_to(25+(i*30),35+(i2*30))
       _line_to(22+(i*30),25+(i2*30))
       _line_to(25+(i*30),15+(i2*30))
       _fill("#414141")
       _move_to(20+(i*30),25+(i2*30))
       _line_to(30+(i*30),25+(i2*30))
       _move_to(25+(i*30),12+(i2*30))
       _line_to(25+(i*30),38+(i2*30))    
       _stroke("#414141",0.5)
    _rotate(45,25+(i*30),25+(i2*30))  
    end
  end
end)

Keith

Posted: **Thu Apr 29, 2021 11:49 am**

ahah, challenge accepted!
I needed to create an image for the rice grain shape in Skinman though.

Code: Select all

texture_size_X=800
texture_size_Y=500
size_X=11
size_Y=34
scale=1
img_add_fullscreen("background color 1x1.png")
for i=0,(texture_size_X/(30*scale)) do
    for j=0,(texture_size_Y/(35*scale))  do
        rotate(img_add("grain de riz.png",i*30*scale,j*35*scale,size_X*scale,size_Y*scale),45-(90)*(j%2))
    end
end

same with scale=0.2

Jacques

Posted: **Thu Apr 29, 2021 12:08 pm**

Nice one Jacques,

I am sure we will come up with a bunch of stuff for all.

Keith

Posted: **Thu Apr 29, 2021 1:02 pm**

Well, it's just for fun, not sure of the real advantage of creating textures "on the fly" by using png images, as it can't be used afterwards to populate complex shapes.
By using canvas_draw, one can augment the fun, though..

Code: Select all

canvas_id = canvas_add(0, 0, 800, 500, draw_callback)

k=10
step=10
dir="up"
-------------------
function animate()
canvas_draw(canvas_id, function()
	 -- Create a pulsating circle
	if (k>300 and dir=="up") then 
    		step=-10
    		dir="down"  	
	end
	if k<=10 and dir=="down" then
    		step=10 
    		dir="up"
	end
	k=k+step
	_circle(400,250,k)
	_stroke("red", 4)
	_circle(400,250,k)
	_fill_img("texture_grain de riz.png", 0, 00, 800, 500)
end)
end

Posted: **Thu Apr 29, 2021 1:19 pm**

Jacques

It would be nice to be able to fill a polygon with one of these textures.

This is the instrument panel in the TorqueSim SR20 G1000 The texture looks square checkered.

I will do that one next then see if I can reproduce a brush aluminum. I suspect that the CPU will take quite a hit with that one.

Keith

Posted: **Thu Apr 29, 2021 3:31 pm**

When looking at the real SR20 dashboard pictures, the texture looks more to a grained texture.
https://images.app.goo.gl/utrhvCKknPqQ7iBg9

Jacques

Posted: **Thu Apr 29, 2021 6:21 pm**

Keith Baxter wrote: ↑Thu Apr 29, 2021 1:19 pm Jacques

It would be nice to be able to fill a polygon with one of these textures.

This is the instrument panel in the TorqueSim SR20 G1000 The texture looks square checkered.

ice_screenshot_20210429-151247.png

I will do that one next then see if I can reproduce a brush aluminum. I suspect that the CPU will take quite a hit with that one.

Keith

IMHO, there is absolutely no point of trying to create a texture with canvas_draw() if it’s to be used for a static panel like for the SR20.

Skinman gives you definitely a more flexible approach in that case.
Done in 5 (five) minutes:

and once the texture pattern is done, you can adjust it

Granted, canvas_draw() is unbeatable when it's time for drawing map features (like you did) or ND dynamic display, but vector images rule when it's about textures.

Jacques

Posted: **Thu Apr 29, 2021 7:14 pm**

And to have a brushed metal aspect, just search for "seamless textures" on the Net, and add it to the textures folder of skinman.
Add a metal effect light in one click and voilà!

Posted: **Thu Apr 29, 2021 7:42 pm**

Haha,

The big texture vs canvas fight

In the end both have there own strengths and weaknesses, and luckily you can combine them quite easily.

Corjan

Sim Innovations Forums

Canvas Textures

Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures

Re: Canvas Textures