LoginLogin

Fun with Math: Locating a Point by Radius and Angle

Root / General / [.]

Giant_GamerCreated:
Giant_Gamer#1
PART 1 So I recently was messing around in SB on my new 3DS, attempting to make a cool looking single screen analog (Hexadecimal) clock. As you might already know the GCIRCLE command has two modes. Mode 1: Center point X, Center point Y, Radius, Color Code Mode 2: Center point X, Center point Y, Radius, Start Angle, End angle, Flag, Color Code So I drew a (mode 1) circle, and three (mode 2) circles with the flag set to 1 for drawing by Sector. 
...
GCIRCLE 200,120, 73,RGB(H*7,M*3,S*3) 'inner circle
GCIRCLE 200,120, 77,RGB(H*7,M*3,S*3) ' outer circle
GPAINT 275,120,RGB(H*3.5,M*1.5,S*1.5) 'fill color

S2=S-15 'these adjustments are required to point the
M2=M-15 'hands to the north when the base value is 0
H2=H-3 'since the default 0 angle is to the right.

GCIRCLE 200,120,60,(S2*6)-1,(S2*6)+1,1,#BLACK
GCIRCLE 200,120,55,(M2*6)-3,(M2*6)+3,1,#BLACK
GCIRCLE 200,120,35,(h2*30)-4,(H2*30)+4,1,#BLACK
NOTE: Yes, I later added the seconds to the minute hand's angle adjustment, for a more accurate moving clock hand. same with the Hour hand and the current minutes. So I had my basic clock face, but I wanted to add something to it. So looking at the information I knew about the Circles I was drawing on the graphics screen, I looked up if there was a way to determine if a point could be located by radius and angle, and of course that is a thing. 
X=RADIUS*COS(ANGLE)
Y=RADIUS*SIN(ANGLE)
Simply plug in values for RADIUS and ANGLE, and you got your output cord for X,Y. (Make sure to add 200 to X and 120 to Y to center on screen.) Well that is nice and boring, lets mix things up a bit. Lets make RADIUS into a timer and have the point move around. 
@LOOP
GCLS
ANGLE=RAD(T)
RADIUS=120

X=RADIUS*COS(ANGLE)
Y=RADIUS*SIN(ANGLE)

GCIRCLE 200+X,120+Y, 20, RGB(20,50,250)
GPAINT 200+X,120+Y,RGB(20,50,250)

T=T+0.6
IF T>=360 THEN T=T-360

VSYNC 1
GOTO @LOOP
Okay! there is now a blue ball orbiting around the screen. Let's have a little fun. add a big orange/yellow circle in the center, and using the formula add a little moon to the blue ball. In my base program the moon radius timer is set to +5.7 (Make certain to ADD the X and Y cords for the Planet to the X and Y cords of the moon!) Here is a version where I added a line from the point of the blue planet, to the point of a half circle around the sun, using GOFS X,Y of the planet to center the camera on the orbiting body. CUTE. Now lets jump into the deep end. unleash the program, by turning off GCLS, GPAINT and VSYNC, and mess with the numbers a bunch. I will share some of my crazy experiments in PART 2, like these monsters: I'll also post the source code for these and you can plug in the XFACTOR values to get the same results. And sadly I don't remember how I made these, but the base program was the same. EDIT: I think these two were made by messing with the angle between the points, and I drew the lines from the center point to the edge of the shape making a circle effect.
Giant_Gamer#2
PART 2: PLANET X So 
'Planet X
ACLS  	
X=200
Y=120 

XFACTOR1=RND(450)/100 
XFACTOR2=RND(200)/100

LOCATE 0,0
PRINT "XFACTOR1: ";XFACTOR1
LOCATE 0,1
PRINT "XFACTOR2: ";XFACTOR2

@LOOP 
ANGLE=RAD(T)
RADIUS=55+(BLUE/3)

XX=RADIUS*COS(ANGLE)
YY=RADIUS*SIN(ANGLE)

@MOON
ANGLE=RAD(TT)
RADIUS=35

RED=XX*3	
GREEN=GREEN-0.7
BLUE=(RED/2)+(GREEN/3)
IF GREEN<=0 THEN GREEN=GREEN+RND(30)+70

XX2=RADIUS*COS(ANGLE) 
YY2=RADIUS*SIN(ANGLE)

GCIRCLE X+XX+XX2,Y+YY+YY2,6,RGB(RED,GREEN,BLUE)

@TIMERS
T=T+3.7-(TT*XFACTOR1)
IF T>=360 THEN T=T-360
IF T<=-360 THEN T=T+360 

TT=TT+4.9-(T/XFACTOR2)
IF TT>=360 THEN TT=TT-360
IF TT<=-360 THEN TT=TT+360 
GOTO @LOOP
This is my Planet X source code. if you plug in the two factor numbers in the screen shot you will get those patterns. it's a really interesting look at what messing around with irregular orbits would look like. this one I disabled the +(BLUE/3) to get a less chaotic pattern. Plus the random nature of these patterns can be animated by adding a timer to change one or both of the XFactors every 12,000 steps. (Although I recommend adding a GCLS when it changes. So this is all well and good, but lets look at a different application of this knowledge. Drawing shapes that rotate on a point. Let's start simple with an equilateral Triangle. 
@LOOP
GCLS

FOR I=0 to 3 'four steps total
TR=I*120
ANGLE=RAD(TR+T)
RADIUS=65

X1=X0
Y1=Y0

X0=(RADIUS*COS(ANGLE)+200)
Y0=(RADIUS*SIN(ANGLE)+120)

IF I!=0 THEN GLINE X0,Y0,X1,Y1,#WHITE
NEXT

GPAINT 200,120,RGB(150,120,30)

T=T+2.7
IF T>=360 THEN T=T-360

VSYNC 1
GOTO @LOOP
The triangle writes to the graphic screen one side at a time and then after all the ends match up, the GPAINT can fill the space with out any gaps. (The gap check is why you check for 4 points on a three point triangle. OPTIONAL THING 1: You can draw a spiral with almost the same setup. Change the number of steps in I by 20, 50 or even 100, start with a small radius, RADIUS=20+(I*2) and change the angle multiplier to be a little smaller. TR=I*7 OPTIONAL THING 2: Try changing the shape of the triangle by entering 3 IF statements to change the value of TR for I 0-3. (Just make certain to set value 0 and 3 the same. PART 3: Complicated shapes and shading tricks?!
Giant_Gamer#3
PART 3: More Complicated shapes and shading tricks. Lets make some interesting shapes. How about a five pointed star. 
@LOOP
GCLS

T=T+0.8
IF T>=720 THEN T=T-720

FOR I=0 TO 5
TR=I*72 '(1/5 of 360)
ANGLE=RAD(TR+T)
RADIUS=55

QX=MX
QY=MY

MX=(RADIUS*COS(ANGLE)+200)
MY=(RADIUS*SIN(ANGLE)+120)

ANGLE=RAD(TR+T-36)

'this is a 5 point star, so half of 5 is 2.5. 
LX=(RADIUS/2.5*COS(ANGLE)+200)
LY=(RADIUS/2.5*COS(ANGLE)+120)

IF I!=0 THEN 
     GLINE MX,MY,LX,LY,#YELLOW
     GLINE QX,QY,LX,LY,#YELLOW
  ENDIF
NEXT

VSYNC 1

GOTO @LOOP
Now this is drawing the start one half point at a time, starting with the starting point, to the inside point and back out to the next outside point, one V at a time. So what about the cool stuff like the promised shading technique? Well while looking at this code, I realized that it might have been slightly more impressive to have the light source move around the object, instead of the object spin around and appear to catch light from the source, so just bare with me. This program uses the Zelda-like Dungeon block as the shape example. it is a 4 sided pyramid shape with a flat top. 
'ZELDA
ACLS
J=17

@LOOP
GCLS

'LIGHT SOURCE ORIGIN REPRESENTATION
GCIRCLE 40,120,12,RGB(250,190,100)
GPAINT 40,120,RGB(250,190,100)

T=T+0.3
IF T>=360 THEN T=T-360

IF G==FALSE THEN J=J+0.07
IF G==TRUE THEN J=J-0.02
IF J>=100 THEN G=TRUE
IF J<=17 THEN G=FALSE

FOR I=0 TO 4
A=I*90
ANGLE=RAD(A+T)
RADIUS=J

RX=TX
RY=TY

TX=(RADIUS*COS(ANGLE)+200)
TY=(RADIUS*SIN(ANGLE)+120)

WX=SX
WY=SY

SX=((RADIUS/2)*COS(ANGLE)+200)
SY=((RADIUS/2)*SIN(ANGLE)+120)

IF I!=0 THEN 
   GLINE TX,TY,RX,RY,RGB(250,250,250)
   GLINE TX,TY,SX,SY,RGB(200,200,200)
   GLINE SX,SY,WX,WY,RGB(150,150,150)
  ENDIF
NEXT

'SHADER TRICK IS HERE
FOR IT=0 TO 3
AXE=45
A=IT*90
ANGLE=RAD(A+T+AXE)
RADIUS=J

IX=((RADIUS/2)*COS(ANGLE)+200)
IY=((RADIUS/2)*SIN(ANGLE)+120)

GPAINT IX,IY,RGB(190-(IX*3),80-(IX*2),10-IX)
NEXT

GPAINT 200,120,RGB(190,80,0)

VSYNC 1

GOTO @LOOP
Timer "J" increases and decreases the size of the object, simulating increase and decrease of light on the object. Timer "T" controls the rotation speed of the object. The object is drawn three lines at a time, and is not colored until all the lines have been drawn. since there are 5 sections to GPAINT in the object, I needed one more set of cords to rotate around the point. the shading trick comes from using the X cord of the shader to change the value of the color, by decreasing the value when the fill is happening on the right side of the object. to change the light angle to NW just reduce the value of IX by half and add in the IY value also reduced by half. to change the light source to the right east side of the object, start with the smaller number in the RGB and add the IX value instead. AND that concludes the various tricks I discovered when making a planetary clock for my HEXCLOCK application. I hope you enjoyed reading and trying some of this out for yourself. (pictures coming soon)