Canvas Textures

Help creating logic scripts for Air Manager Instruments

Moderators: russ, Ralph

Message
Author
User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Canvas Textures

#1 Post by Keith Baxter »

Hi,

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

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)
texture_carbon_mat2.png

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)
texture_carbon_cross3.png

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)
texture_carbon_mesh4.png

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)
texture_carbon_diamond5.png

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
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Canvas Textures

#2 Post by Keith Baxter »

Hi,

Checker plate styles


texture_checkerplate1.png

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)


texture_checkerplate2.png

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)
texture_checkerplate3.png

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
Last edited by Keith Baxter on Thu Apr 29, 2021 1:10 pm, edited 2 times in total.
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Canvas Textures

#3 Post by JackZ »

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

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
image.png
Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Canvas Textures

#4 Post by Keith Baxter »

Nice one Jacques,

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


Keith
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Canvas Textures

#5 Post by JackZ »

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
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Keith Baxter
Posts: 4674
Joined: Wed Dec 20, 2017 11:00 am
Location: Botswana

Re: Canvas Textures

#6 Post by Keith Baxter »

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
AMD RYZEN 9 5950X CPU, Corsair H80I cooler, ASUS TUF GAMING B550-PLUS AMD Ryzen Mother Board,  32Gb ram Corsair Vengeance 3000Mh, MSI GTX960 4G graphics card 

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Canvas Textures

#7 Post by JackZ »

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

Jacques
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Canvas Textures

#8 Post by JackZ »

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:
image.png
and once the texture pattern is done, you can adjust it
image.png
image.png
image.png
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
Last edited by JackZ on Thu Apr 29, 2021 7:16 pm, edited 1 time in total.
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

JackZ
Posts: 2262
Joined: Mon Feb 22, 2016 1:02 pm

Re: Canvas Textures

#9 Post by JackZ »

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à!
image.png
My YouTube Chanel on the A320 (Real SOPs by an Airline Pilot IRL):
https://www.youtube.com/playlist?list=P ... 0Q6SBASRqJ

User avatar
Corjan
Posts: 2936
Joined: Thu Nov 19, 2015 9:04 am

Re: Canvas Textures

#10 Post by Corjan »

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

Post Reply