- Priority
- Low
- Status
- On hold
A fiddle with canvas to try to render various things as fast as possible.
Here’s a live demo.
Tasks
| Task | Done |
|---|---|
| Make a ray tracer. | Not done |
| Blit on the buffer | Not done |
| Mandelbrot and other similar sets | Not done |
| I have a basic orbital mechanics simulation. If I bake the orbit based on part of the orbit, will it be accurate? And can I use distance as a trigger to override the simulation and then can I use the previous chunked method to reset the orbit? | Not done |
| Bake Trigonometry and test how much faster I calculates and draws | Done |
| Draw gradient lines using pixels | Done |
| Draw to the buffer to make it faster | Done |
| Modify the 3D effect to the pillars are cubes and casting shadows using opacity and gradient. | Done |
Bugs
| Bug | Fixed |
|---|---|
| No bugs reported. | |
Notes
- I cannot draw a fading line so I will need to draw a line of pixels and have it fade with the inverse square law.
- After fiddling for awhile I was able to get the result I wanted. The BAKED trigonometry is several orders faster that calculating it per loop.
- The starburst is drawn only once now to the buffer then copied over so it can be moved around with the mouse.
- For the ray-caster I plan to leave the light and shadow up to the receiver of the light. There will be a common algorithm that will calculate the light and shadows in relation to the light position and intensity. This way I can still make use of the the buffer. In fact I make create several buffers.
- This is an experiment. This is the opposite. I am getting the angles I need for the shadow. Anywhere the mouse is moved the light casts on the square. Really it’s just 4 polygons that originate from the mouse to each point of the square. It’s a lightweight solution that will make it easy to fake a shadow. The shadows will basically be an infinite shadow like you might see on the Moon. But again I should be able to simulate a fall off. And maybe even be able to simulate spheres and other normals.
- I reversed the math to get the “shadow”. I actually didn’t intend on 3D. But fiddling with it I noticed that it was. …Okay. The shadow is more like a monolith. I added 3 to the stage. Now I need to figure out how to make a proper shader so I can actually make them into cubes in space that cast shadows that look like they are floating in a cloud of space dust.
- Better simulation of 3D by swapping the depths to allow the starburst to lens flare over the pillars and added some color.
- I think I’ve taken this part about as far as I want, for now. I still might add lens-flare and maybe do a few other things but, I am satisfied with it.
TODO
TODO
Just decided to fiddle with visualizing Sin and Cos. It doesn’t really fall under the umbrella of this task trying to render code as fast as possible. But, I like the canvas class I built here. It’s easy to use and so, why not fiddle a little.
namespace VSinCos
{
export class Base
{
private canvas:CanvasExperiment.Canvas;
private a_canvas:CanvasExperiment.Canvas;
private xy = [];
/**
*
* @param c_size
* @param method
*/
constructor(c_size:number, method:string = null)
{
this.canvas = new CanvasExperiment.Canvas("container",c_size,c_size);
this.a_canvas = new CanvasExperiment.Canvas("container",c_size,c_size);
switch(method)
{
case "curve":
this.curve(300,0.1);
let i = 0;
setInterval(() => {
this.loop(i)
i++;
if(i>=this.xy.length)i=0;
}, 100);
break;
case "sin":
this.sin();
break;
case "cos":
this.cos();
break;
default:
this.sin();
this.cos();
}
}
sin()
{
let x = 0;
for(let i=0;i<Math.PI*2;i+=0.01)
{
x+=1.4;
let y = WH2 + Math.sin(i) * 300;
this.canvas.circle(x,y,2,"#ffffff");
this.canvas.line(x,WH2,x,y,"#7b6cffff");
}
}
cos()
{
let x = 0;
for(let i=0;i<Math.PI*2;i+=0.01)
{
x+=1.4;
let y = WH2 + Math.cos(i) * 300;
this.canvas.circle(x,y,2,"#d0ff00ff");
this.canvas.line(x,WH2,x,y,"#eeab1bff");
}
}
curve(
size:number,
step:number,
draw:boolean=true,
draw_origin:boolean=true
)
{
let j = 0;
let line_color="#009fa5ff";
let x = WH2;
for(let i=0;i<size;i+=step)
{
let y = x + Math.sin(i) * size;
if(draw_origin)
this.canvas.circle(x,y,2,"#ffffff");
this.xy.push([x,x,x,y,0,0,0,0])
}
let y = WH2;
for(let i=0;i<size;i+=step)
{
let x = y + Math.cos(i) * size;
if(draw_origin)
this.canvas.circle(x,y,3,"#fffb00ff");
this.xy[j][4] = y;
this.xy[j][5] = y;
this.xy[j][6] = x;
this.xy[j][7] = y;
j++;
}
if(draw)
for(let i=0;i<this.xy.length;i++)
{
this.canvas.line(
this.xy[i][0],
this.xy[i][1],
this.xy[i][2],
this.xy[i][3],
line_color);
this.canvas.line(
this.xy[i][0],
this.xy[i][1],
this.xy[i][6],
this.xy[i][7],
line_color);
this.canvas.line(
this.xy[i][2],
this.xy[i][3],
this.xy[i][6],
this.xy[i][7],
line_color);
}
}
loop(i)
{
this.a_canvas.clear(false);
let color = "#ffffffff";
this.a_canvas.line(
this.xy[i][0],
this.xy[i][1],
this.xy[i][2],
this.xy[i][3],
color);
this.a_canvas.line(
this.xy[i][0],
this.xy[i][1],
this.xy[i][6],
this.xy[i][7],
color);
this.a_canvas.line(
this.xy[i][2],
this.xy[i][3],
this.xy[i][6],
this.xy[i][7],
color);
}
}
}
Photos
