World: r4wp

Good idea .. share the knowledge

I was asked for examples of the DRAW, I used to create the graphi

graphi

graphics in GCam.

The start of a button is:

img: make image! 88x88
img/alpha: 255

draw img [
	pen none
	fill-pen linear 0x0 0.0 88.0 90.0 1.0 1.0
		0.0.0 16.16.16 32.32.32
	box 0x0 88x88 14.0

	fill-pen linear 5x5 0.0 78.0 90.0 1.0 1.0
		102.102.102 10.10.10 10.10.10 10.10.10 0.0.0
	box 5x5 83x83 14.0
]

view layout [
	image img
]

The exposure symbol can be added with:

exposure: [
	translate -0.5 -0.5
	pen none
	fill-pen radial 44x44 0.0 44.0 0.0 1.0 1.0
		255.255.255
		249.249.249
		224.224.224 224.224.224
]
loop 8 [
	append exposure [
		shape [
			move 37x25
			curv 52x22 62x25
			curv 57x16 48x17
		]
		translate 44.5 44.5
		rotate 45.0
		translate -44.5 -44.5
	]
]
draw img exposure

It's the small detail, that makes it look prof. Next would be adding 
some blur maybe.

I'm not a graphical artist, and I have never used applications like 
Adobe Illustrator or similar. But I found, I can create ok graphics 
by programming it in e.g. DRAW and be very careful with the details. 
I do use GIMP for some tasks.

Cool, an eye opener that it can be so short

Nice stuff Geomol...Most people doesn't even know what could be done 
with DRAW. DRAW has most of the capabilities advanced  vector(SVG) 
editors have under the hood. For R3 DRAW we need to make sure converting 
any complex SVG art is possible to render.

There are still a few last bits in DRAW that are missing. I wonder 
if these are possible to add now? Something like making a gradient 
on a line would be very useful.

That's wonderful John.

That is great Geomol, thank you for sharing it.

Henrik, I don't know how hard is to add gradient on line but you 
can 'emulate' it using textures. See this R2 example:


g: draw 100x10 [pen none fill-pen linear 0x0 0 100 0 1 1 red green 
blue yellow box 0x0 100x10]

view layout [origin 0 box 300x300 black effect [draw [pen g spline 
0x0 100x100 200x30 300x300 16]]]

Cyphre, aha, thanks.

The g: draw line segfaults on 2.7.7

works fine on 2.7.8 ( IIRC that was fixed)

Hm, so does John's example

Hmm, I tried here on  REBOL/View 2.7.7.3.1 28-Feb-2010 and it works 
without any crash as well.

I'm using the Linux version, 4.2

Geomol, thanks for the tutorial.  That was great.

Here's a logo I produced entirely using Rebol draw:

http://respectech.com/respectech.jpg

That's pretty good, Bo.

Now that I think of it, I used VID with some parts done in Draw.

But it was all done in a 'layout block. :-)

Looks good! DRAW is a strong tool.

Kaj, I think I remember the draw crash being a linux bug (or at least 
a non-windows one).

No, it's false. DRAW works well, the only problem are fonts dispalyed 
on Linux, but there aret ricks to skip them.

Another example is the home button on iPhone 5:

sz: 200x400
img: make image! sz
img/alpha: 255

draw img compose [
	pen none
	fill-pen linear (as-pair 0 sz/y / 2) -50.5 70.5 90.0 1.0 1.0
			45.45.47 9.9.11 108.113.117
	circle (as-pair sz/x - 115 sz/y / 2) 70.5
	fill-pen 1.0.5
	circle (as-pair sz/x - 115 sz/y / 2) 68.5

	reset-matrix

 fill-pen linear (as-pair sz/x - 115 sz/y / 2) -60.5 30.5 45.0 1.0 
 1.0
			161.164.169 161.164.169 89.94.100

 box (as-pair sz/x - 115 - 26 sz/y / 2 - 26) (as-pair sz/x - 115 + 
 26 sz/y / 2 + 26) 10.0
	fill-pen 1.0.5

 box (as-pair sz/x - 115 - 22 sz/y / 2 - 22) (as-pair sz/x - 115 + 
 22 sz/y / 2 + 22) 6.0

	reset-matrix

 fill-pen linear (as-pair 0 sz/y / 2 - 26) -50.5 100.5 90.0 1.0 1.0
			1.0.5.255 200.214.226.224 200.214.226.128
	shape [
		move 154x200
		arc 16x200 68.0 68.0
		arc 154x200 -149.0 68.0
	]
]

view layout [
	backdrop 1.0.5
	image img
]

that's cool!

MaxV could post those examples on the blog :-)

I don't rememeber who did the neon effect, but here it is.

font-C: make face/font [style: [ bold ] size: 64]
neon: "REBOL BAR"
coord: 30x15
inc: 0.25.25
draw-block: compose [
	line-join round font font-c

 pen (inc * 1 + 255.0.0.230) line-width 11 text vectorial coord neon

 pen (inc * 2 + 255.0.0.205) line-width 9 text vectorial coord neon

 pen (inc * 3 + 255.0.0.180) line-width 8 text vectorial coord neon

 pen (inc * 4 + 255.0.0.155) line-width 7 text vectorial coord neon

 pen (inc * 5 + 255.0.0.130) line-width 6 text vectorial coord neon

 pen (inc * 6 + 255.0.0.105) line-width 5 text vectorial coord neon

 pen (inc * 7 + 255.0.0.80) line-width 4 text vectorial coord neon

 pen (inc * 8 + 255.0.0.55) line-width 3 text vectorial coord neon

 pen (inc * 9 + 255.0.0.30) line-width 2 text vectorial coord neon

 pen (inc * 10 + 255.0.0.5) line-width 1 text vectorial coord neon
]

view/title layout [ box black 450x200 effect [ draw draw-block ] 
] "NEON"

Thank's Geomol, Steeve, these are very good examples of DRAW.

Great examples!

Steeve, I copied and pasted this on the Mac, but I only see a black 
box in a grey window with title "NEON"

Vectorial texts only works on Windows IIRC

ok that explains!

MaxV, it works well in the current version.

Done with linux, see: http://rebol2.blogspot.it/2012/12/rebol-draw-on-linux.html

both examples!

Which REBOL version?

2.7.8 Works better for me, but Neon gives a black window

Did you use the code on the blog post? It's different form the one 
here, I added the font support for Linux: you have to ad the path 
where are the font. Read carefull the post.

Cool, that fixes it

By the way, your first example starts with garbled HTML

Yes, I noticed it. Just corrected.

Thanks

Isn't that interesting?
>> ? #a
#a is an issue

>> copy/part next #aaaa 2
== #aa ;<-- issue!

>> pick #aaa 2
== #"a"  ;<-- char!

Why the last one is not an issue?

in R2, issue! is string!, So PICK gets char!. COPY retain the datatype, 
which is issue here.