TI NSpire CX II: Animation Demo

TI NSpire CX II:  Animation Demo

Introduction 

This blog entry demonstrates the use of drawing commands from the TI Nspire CX II (and TI Nspire CX II CAS) to animate objects.  The main loop used in these animations used has the structure:

...
Local variables needed including coordinates
For coordinate 1, begin, end, step   
For coordinate 2, begin, end, step (if necessary)
UseBuffer
...
SetColor red, green, blue
draw objects
....
PaintBuffer
Wait  seconds
EndFor
EndFor (if a second for loop is used)
...

Demo 1:  Animation of a Circle Across the Screen

Define ani1()=
Prgm
:© animate a circle across the screen part 1
:Local x
:SetWindow 0,10,0,10
:For x,1,9,2
:  UseBuffer 
:  Clear 
:© cherry red
:  SetColor 255,27,34
:  FillCircle x,9,2
:  PaintBuffer 
:  Wait 1
:
:EndFor
:EndPrgm

Demo 2:  Animation of a Circle Across and Down the Screen

Define ani2()=
Prgm
:© 2019-07-29 EWS
:©  animate a circle
:Local x,y
:For y,10,190,20
:  For x,10,270,20
:    UseBuffer 
:    Clear 
:    SetColor 255,27,34
:    FillCircle x,y,20
:    PaintBuffer 
:    Wait 0.25
:  EndFor
:EndFor
:
:SetColor 0,0,0
:DrawText 10,10,"Done!"
:EndPrgm

Demo 3:  Animation of a Circle with Alternating Colors

Define ani3()=
Prgm
:© 2019-07-29 EWS
:©  animate a circle
:Local x,y,flag
:flag:=0
:For y,10,190,20
:  For x,10,270,20
:    UseBuffer 
:    Clear 
:    If flag=0 Then
:      SetColor 255,27,34
:      flag:=1
:    Else
:      SetColor 0,228,221
:      flag:=0
:    EndIf
:    FillCircle x,y,20
:    PaintBuffer 
:    Wait 0.175
:  EndFor
:EndFor
:
:SetColor 0,0,0
:DrawText 10,10,"Done!"
:EndPrgm

Demo 4:  Barbell Animation

Define ani4()=
Prgm
:© barbell animation
:© 2019-07-30 EWS
:Local x,y,xc,yc,θ
:
:© radians mode
:setMode(2,1)
:
:For θ,0,8*π,((π)/(12))
:  UseBuffer 
:  Clear 
:© the bar
:  xc:=60*cos(θ)+159
:  yc:=60*sin(θ)+106
:  SetColor 48,48,48
:  DrawLine 159,106,xc,yc
:  SetColor 205,127,50
:  FillCircle xc,yc,15
:  SetColor 0,0,0
:  FillCircle 159,106,15
:  PaintBuffer 
:  Wait 0.15
:EndFor
:DrawText 0,25,"Done!"
:EndPrgm

Demo 5:  Bouncing Box Animation

Define ani5()=
Prgm
:© bouncing box
:Local r,g,b,x,y,t,θ
:© use pixels
:x:=106
:y:=159
:© degrees
:setMode(2,2)
:
:© set initial angle
:θ:=randInt(1,359)
:
:For t,1,1000
:UseBuffer 
:Clear 
:r:=randInt(0,255)
:g:=randInt(0,255)
:b:=randInt(0,255)
:SetColor r,g,b
:FillRect x,y,10,10
:
:x:=10*cos(θ)+x
:y:=10*sin(θ)+y
:
:If x≥310 or x≤10 or y≥200 or y≤10 Then
: θ:=mod(θ+90,360)
:EndIf
:SetColor 0,15,96
:DrawPoly {10,10,310,310,10},{10,200,200,10,10}
: PaintBuffer 
: Wait 0.05
:EndFor
:EndPrgm

A copy of the tns document can be downloaded here:  https://drive.google.com/open?id=1bkKEsLxaOd4svqw-S-ftZ3CkUe_NUDOm

Eddie

All original content copyright, © 2011-2019.  Edward Shore.   Unauthorized use and/or unauthorized distribution for commercial purposes without express and written permission from the author is strictly prohibited.  This blog entry may be distributed for noncommercial purposes, provided that full credit is given to the author.

TI Nspire CX II and TI Nspire CX II CAS: User Input in Graphics Mode with getKey

TI Nspire CX II  and TI Nspire CX II CAS:  User Input in Graphics Mode with getKey

Introduction

In graphics mode, the TI Nspire CX II cannot use the Text, Request, or RequestStr.  However, with the use of getKey command, we can have the user interact with the program. 

TI Nspire CX II Program keydemo2

This program is a game where the user stops a spinner in hopes to win money or a car.  Good luck!

Define keydemo2()=
Prgm
:Clear 
:Local l,str,k,n
:l:={"$200","$300","$500","$1000","CAR","Nope."}
:While getKey(0)≠"enter"
:  Clear 
:  UseBuffer 
:© get key continous execution
:  n:=randInt(1,6)
:  SetColor 0,0,0
:  DrawText 50,25,"PRESS enter TO STOP"
:  If n≤5 Then
:    SetColor 0,128,128
:  Else
:    SetColor 255,0,0
:  EndIf
:© use square brackets for elements 
:© we can clear only dynamic areas
:© but it does not look good
:  DrawText 50,50,l[n]
:  PaintBuffer 
:© usebuffer and paintbuffer allows all objects to be displayed at once, ensuring a smooth transition, can also use wait
:EndWhile
:EndPrgm

TI Nspire CX II Program enterdemo

With the use of getKey, the user enters a number in graphics mode.  This can be used as a template. 

Define enterdemo()=
Prgm
:© goal: develop input in graphics mode
:© use float mode
:setMode(1,1)
:Local str,num,k
:str:=""
:© use initial text
:Clear 
:  SetColor 0,0,0
:  DrawText 0,50,"Press [enter] to stop."
:
:
:© main loop: enter the numbers
:Loop
:  Clear 
:  UseBuffer 
:  SetColor 0,0,0
:  DrawText 0,50,"Press [enter] to stop."
:
:  k:=getKey(1)
:  If k="." and inString(str,".")=0 Then
:    str:=str&"."
:  ElseIf k="0" Then
:    str:=str&"0"
:  ElseIf k="1" Then
:    str:=str&"1"
:  ElseIf k="2" Then
:    str:=str&"2"
:  ElseIf k="3" Then
:    str:=str&"3"
:  ElseIf k="4" Then
:    str:=str&"4"
:  ElseIf k="5" Then
:    str:=str&"5"
:  ElseIf k="6" Then
:    str:=str&"6"
:  ElseIf k="7" Then
:    str:=str&"7"
:  ElseIf k="8" Then
:    str:=str&"8"
:  ElseIf k="9" Then
:    str:=str&"9"
:  ElseIf k="−" Then
:    str:=string(−1*expr(str))
:  ElseIf k="del" and dim(str)>0 Then
:    str:=left(str,dim(str)-1)
:
:  ElseIf k="enter" Then
:© "lock" the number and leave
:  SetColor 0,0,0
:  DrawText 0,100,str
:  PaintBuffer 
:    Exit
:  EndIf
:
:SetColor 0,0,255
:DrawText 0,100,str
:PaintBuffer 
:
:EndLoop
:© return number to home
:num:=expr(str)
:Disp num
:EndPrgm

There are two ways the getKey command can be used in graphics mode.

Eddie

All original content copyright, © 2011-2019.  Edward Shore.   Unauthorized use and/or unauthorized distribution for commercial purposes without express and written permission from the author is strictly prohibited.  This blog entry may be distributed for noncommercial purposes, provided that full credit is given to the author.

TI Nspire CX II and TI Nspire CX II CAS: Drawing Demo

TI Nspire CX II  and TI Nspire CX II CAS:  Drawing Demo

Introduction

The new TI Nspire CX II  and TI Nspire CX II CAS has an expanded library of programming commands.  We are now able to draw and place text anywhere on the screen. 

When a drawing command is used, the Nspire shifts into graphics mode.  The graphics screen is treated as a final output screen.  Graphics mode only executes in one of two places:

*  Running the program in a Calculator page in a document
*  Running the program in the Calculator part of the Sketchpad

When a graphics screen has an initial (and maximum) height of 212 pixels and an initial (and maximum) width of 318 pixels.  The default background is white. 

Shifting a Program to Graphics Mode

The Nspire shifts into graphics mode automatically any time a drawing command is executed.  Followed by their basic syntax, the commands are:

Clear (blank to clear the entire screen),  (x, y, width, height)

DrawArc  x, y, width, height, startAngle, sweepAngle

DrawCircle x, y, radius

DrawLine x1, y1, x2, y2

DrawPoly (see plotdemo2 for further details)

DrawRect upper_x_pixel, upper_y_pixel, width, height

DrawText x, y, string/text/expression

FillArc x, y, width, height, startAngle, sweepAngle

FillCircle x, y, radius

FillPoly (see plotdemo2 for further details)

FillRect upper_x_pixel, upper_y_pixel, width, height

getPlatform() (returns dt for desktop, hh for handheld, ios for the iOS App)

PaintBuffer  (buffers the paint screen)

PlotXY x, y, shape  (13 shapes available: 1 for dot, 5 for cross, 6 for plus, 8, for medium dot)

SetColor  red, green, blue    (sets the Nspire's color pen)

SetPen thickness, style  (1 thin, 2 medium, 3 thick; 1 smooth, 2, dotted, 3 dashed)

SetWidnow xMin, xMax, yMin, yMax  (establishes drawing area - use this command to switch coordinates to Cartesian)

UseBuffer  (tells the Nspire to use an off screen to draw objects, then use
PaintBuffer to call them back up)

Once graphics mode is entered, the following commands cannot be used:

Request
RequestStr
Text

This means if you want the user to able to input during graphics mode, you will need to use Getkey.

When the Graphics Is Displayed

The graphics will be displayed until the user presses [ enter ]. 

Caution:   The drawing commands are only available for the CX II.  The original CX, nor any previous incarnations of the TI Nspire will not have these commands. 

TI NSpire CX II Program plotdemo1

This demo shows all the possible shapes that PlotXY has.  Colors are set randomly. 

Define plotdemo1()=
Prgm
:© graphics uses pixels: 318 * 212
:© Plotxy demo
:Local r,g,b,n,x,y
:For n,1,13
:© set colors
:r:=randInt(0,255)
:g:=randInt(0,255)
:b:=randInt(0,255)
:SetColor r,g,b
:© draw text and points
:DrawText 1+22*n,40,n
:PlotXY 5+22*n,50,n
:EndFor
:EndPrgm

TI NSpire CX II Program plotdemo2

This demo draws filled polygons.  There are two syntax sets for DrawPoly and FillPoly:

Draw/FillPoly  x1, y1, x2, y2, ... ,xn, yn

With this format the polygon stops at the coordinate (xn, yn).  The polygon is not automatically completed under this format.  To complete the polygon, make sure that the coordinate (x1, y1) is the last two coordinates listed.

Draw/FillPoly x_coordinate_list, y_coordinate_list

With this format, the polygon is automatically completed.

Define plotdemo2()=
Prgm
:© draw four triangles, filled
:Clear 
:© draw background box - gray
:© use fill, no draw
:SetColor 128,128,128
:FillRect 0,0,212,212
:© remember: x,y,width,height
:
:© now the triangles
:SetColor 128,0,0
:FillPoly 56,0,106,106,156,0
:FillPoly 56,212,106,106,156,212
:SetColor 127,255,255
:FillPoly 0,56,106,106,0,156
:FillPoly 212,56,106,106,212,156
:EndPrgm

TI Nspire CX II Program plotdemo3

This demo draws the function y = 1.5 cos (x^2).  The angle is set to radians mode.  The coordinates are converted to pixels prior to plotting them.

Define plotdemo3()=
Prgm
:© draw y=1.5cos(x^((2)))
:Clear 
:© radians
:setMode(2,1)
:© denim color
:SetColor 16,36,192
:© main
:Local x,xs,xp,y,ys,yp
:xs:=((4*π)/(319))
:ys:=((4)/(213))
:For x,−2*π,2*π,xs
:  y:=1.5*cos(x^(2))
:  xp:=((x+2*π)/(xs))
:  yp:=((−(y-2))/(ys))
:  DrawText 10,10,xp
:  PlotXY xp,yp,1
:EndFor
:EndPrgm

TI Nspire CX II Program plotdemo5

Like in plotdemo3, this program draws y = 1.5 cos (x^2).  Instead of converting coordinates to pixels, SetWindow is used and adjust the coordinates so that Cartesian coordinates can be used. 

Define plotdemo5()=
Prgm
:© draw y=1.5cos(x^((2)))
:Clear 
:© radians
:setMode(2,1)
:© denim color
:SetColor 16,36,192
:© main
:Local x,xs,y,ys
:© only x scaling is necesary
:xs:=((4*π)/(319))
:SetWindow −2*π,2*π,−2,2
:© changes pixels to Cartesian
:For x,−2*π,2*π,xs
:  y:=1.5*cos(x^(2))
:  PlotXY x,y,1
:EndFor
:
:EndPrgm

This is a basic demonstration of drawing with the TI Nspire CX II.  On the next post, I show how to use getKey in graphics mode.

Happy drawing,

Eddie


All original content copyright, © 2011-2019.  Edward Shore.   Unauthorized use and/or unauthorized distribution for commercial purposes without express and written permission from the author is strictly prohibited.  This blog entry may be distributed for noncommercial purposes, provided that full credit is given to the author.