Topic: Gradient Between 4 Vertices of a Square?

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?

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.

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

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.

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.

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)

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.

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

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

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

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)