Old 05-02-2016, 02:46 PM   #1
jasman
Human being with feelings
 
Join Date: Sep 2010
Posts: 72
Default JS: help drawing anti-aliased rotated solids

I'm struggling to find a way to draw rotated filled squares that are anti-aliased.

After calculating the vertices of the square I'm using
gfx_triangle(x1,y1,x2,y2,x3,y3[,x4,y4,...])
but it is not anti-aliased like the gfx_line and gfx_circle functions are.

The first image is what it looks like. Not too nice.

The second image is the same but with additional anti-aliased lines drawn between all vertices. Better, but still not lovely.

Any ideas anyone?
James
Attached Images
File Type: jpg JS rotated square example.jpg (4.0 KB, 292 views)
File Type: jpg JS rotated square example 2.jpg (4.0 KB, 203 views)
jasman is offline   Reply With Quote
Old 05-02-2016, 07:58 PM   #2
Justin
Administrator
 
Justin's Avatar
 
Join Date: Jan 2005
Location: NYC
Posts: 12,580
Default

This is a bit crap, but might be useful:

Code:
desc:convex antialiased poly rasterizer
@init

@gfx 400 400

// rasterize a convex poly from lines
function raster.init(maxh, buffer) global()
(
  this.maxh=maxh;
  this.buffer=buffer;
  loop(maxh, 
    buffer[0]=10000000;
    buffer[1]=-10000000;
    buffer+=2;
  );
);

function raster.line(x1, y1, x2, y2) global() local(i,p)
(
  y1>y2 ? ( i=y1; y1=y2; y2=i; i=x1; x1=x2; x2=i; );
  i = (x2-x1)/(y2-y1);
  y2 >= this.maxh-1 ? y2=this.maxh-1;
  y1 < 0 ? ( x1 -= i * y1; y1=0; );
  
  p = this.buffer + (y1|0)*2;
  while (y1<=y2)
  (
    p[0] = min(p[0],x1);
    p[1] = max(p[1],x1);
    x1+=i;
    y1+=1;
    p+=2;
  );
);

function raster.fill(xpos, ypos) global(gfx_a) local(p,x1, x2, xf1, xf2)
(
  p = this.buffer;
  loop(this.maxh,
    (x1=p[0]+xpos) <= (x2=p[1]+xpos) ? (
      (xf2=x2|0) > (xf1=x1|0)+1 ? (
        xf2-1>xf1+1 ? (gfx_a=1; gfx_rect(xf1+1,ypos,xf2-xf1-2,1) );
        gfx_a=1 - (x1-xf1); gfx_rect(xf1,ypos,1,1);
        gfx_a=x2-xf2; gfx_rect(xf2-1,ypos,1,1);
      ) : (
        gfx_a=min(1,x2-x1); gfx_rect(xf1,ypos,1,1);
      );    
    );
    ypos += 1;
    p+=2;
  );
);


raster.init(gfx_h,12345);

npts=5;
a=time_precise();
loop(npts,
  na = a + $pi*2/npts;
  raster.line(gfx_w*.5 + gfx_w*.25*cos(a),
              gfx_h*.5 + gfx_h*.25*sin(a),
              gfx_w*.5 + gfx_w*.25*cos(na),
              gfx_h*.5 + gfx_h*.25*sin(na));
              
  a=na;
);

gfx_set(1);
raster.fill(20,20);
Justin is online now   Reply With Quote
Old 05-03-2016, 08:05 PM   #3
jasman
Human being with feelings
 
Join Date: Sep 2010
Posts: 72
Default

Not perfect, but the results are clearly better using your "crap" method Justin. Passable enough for my purposes now.
Many thanks.
James
Attached Images
File Type: jpg JS rotated square example 3.jpg (4.5 KB, 166 views)

Last edited by jasman; 05-03-2016 at 08:12 PM.
jasman is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -7. The time now is 03:47 PM.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, vBulletin Solutions Inc.