Topic: Gradient Between 4 Vertices of a Square? Pages that link to <a href="https://ozoneasylum.com/backlink?for=30940" title="Pages that link to Topic: Gradient Between 4 Vertices of a Square?" rel="nofollow" >Topic: Gradient Between 4 Vertices of a Square?\

 
Author Thread
iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 04-02-2009 18:16 Edit Quote

Using Canvas, I wanted to render a square, with a different color for each vertex of the square. Across the body of the square, the colors should be smoothly interpolated between each vertex.

I'm aware that Canvas can handle linear gradients, but it's not quite what I need...

Is there any way to do this directly in Canvas? If not, does anyone have any interesting ideas on how to cheat?

DavidJCobb
Nervous Wreck (II) Inmate

From:
Insane since: Mar 2009

IP logged posted posted 04-02-2009 20:58 Edit Quote

So the gradient would be kind of like this?


I suppose you could try three gradients and a normal rectangle, making use of alpha transparency...

You could start by filling the whole rectangle with the upper left vertex's color.
Then, use a diagonal gradient from the upper-right to the lower-left vertices, with the color starting as the upper-right color and ending as rgba(0,0,0,0). You could use a similar technique for the remaining two colors.

Not sure if the colors would blend perfectly like that, but they would blend.

----------------------

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-02-2009 23:04 Edit Quote

You could simply create a 2x2 Canvas with the colors you want in each corner and do a context.drawImage( thatNewCanvas, 0,0,2,2, x,y,w,h ); The user agent, if it doesn't suck, will do all the job for you.

Kyle the Feared
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2009

IP logged posted posted 04-03-2009 01:59 Edit Quote

Just tried that out.
Works best with context.drawImage(thatNewCanvas, 0, 0, 2, 2, -w/2, -h/2, w*2, h*2); due to the way it uses the midpoint.
Also, looks like crap in chrome.

iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 04-03-2009 14:48 Edit Quote

Thanks for the suggestions, guys. I especially love the concept of using a 2x2 canvas... unfortunately, web browsers tend to scale it up poorly, making it not come out looking decent at all.

I ended up just doing it manually.

The results of what I came up with are here: http://lonelypinkelephants.com/random/raytracer.html (Digging up and trying to improve some old code. I raycast only the corners of each 8x8 block, and if all four hit on the same object, I interpolate between the corners. If not, I recurse down to 4x4, 2x2, 1x1.)

(Edited by iron_wallaby on 04-03-2009 14:50)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-03-2009 16:32 Edit Quote
quote:
I raycast only the corners of each 8x8 block, and if all four hit on the same object, I interpolate between the corners. If not, I recurse down to 4x4, 2x2, 1x1

It's called adaptive sub-sampling

A while ago I tried to render a cube from Neja, originally in ~48x36, in 192x192 with adaptive sub-sampling and interpolation of the UV. I had basically the same framerate as the original one.

If you stick to b&w, a CSS/"canvas "sprite approach might also be possible.

DavidJCobb
Nervous Wreck (II) Inmate

From:
Insane since: Mar 2009

IP logged posted posted 04-03-2009 20:42 Edit Quote

Neat. I wonder what the framerate would be with a simple animation...

----------------------

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 04-05-2009 14:37 Edit Quote

note to self: I still have to port this tiny Cornell box rendered using Monte Carlo based global illumination thing to JavaScript.

iron_wallaby
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2007

IP logged posted posted 04-06-2009 19:38 Edit Quote
quote:

poi said:

quote:t's called adaptive sub-sampling



Hah! I can't even remember my own birthday, let alone the name of algorithms.

quote:

DavidJCobb said:

Neat. I wonder what the framerate would be with a simple animation...



Probably not hot. Reducing the resolution would help a lot with that. Also, my code here isn't very good (this was written five years ago)... it could be iterated on to be much stronger and more optimized.

quote:

poi said:

note to self: I still have to port this tiny Cornell box rendered using Monte Carlo based global illumination thing to JavaScript.



I'd love to see it when you do.

(Edited by iron_wallaby on 04-06-2009 19:39)

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 11:08 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu