digital literacy for everyone


basic math

[lit] although fig was designed to teach 7 programming concepts, these concepts are common or illustrative to some degree in many, if not all programming languages. learning these concepts will help you understand python, bash, javascript and many others. [[variables]] | [[input]] | [[output]] | /basic-math/ | [[loops]] | [[conditionals]] | [[functions]] although programming languages will abstract the numeric operations for you, everything is still numbers to the computer. if a dot on the screen is located higher up or more to the left, the number that represents the location will be smaller-- if the dot is lower or more to the right, the number for its location will be higher. colours are most often represented by three numbers, each ranging from 0 to 255. you will find this in web design also, where 255, 255, 255 is both white and also the brightest colour you can produce. by design, fig only gives you 16 colours to worry about, but fig has features that allow you to expand the language and let you produce truecolor (slightly over 16-million colour) graphics. "slightly over 16 million" is the number of combinations possible with three numbers ranging from 0 to 255. a lot of people will tell you that you need to be good at math to code. this is an exaggeration. the author of fig did not excel at math in school, and the concept outlined on this page is called "basic math" for a reason. you need to be good at math to be good at designing algorithms as a computer scientist-- as a coder, you can get most things done by accessing giant libraries of existing math functions. some coders will never be great at math. for the most part, when this page talks about "basic math" it is referring to simple arithmetic. you can make a graphic move right or down by adding 1 or more to the variables that track its horizontal or vertical location-- you can make it move left or up by subtracting 1 or more from those variables. arrays have a simple numeric location, so if you have a variable called groceries holding a three-item array containing "milk", "eggs" and "sugar", then item 1 will be "milk" and item 2 will be "eggs" and item 3 will be "sugar". to get the 2nd item from the array, use the arrget command: now = arrget groceries 2 fig has several ways to create an array, and most of the commands that are related start with "arr" so you know what theyre for. in fact you can convert any variable to an array using the arr command: ingredients = "milk" arr an interesting feature of fig is that except for arrays, you always know the value of the variable on the far left-- because (except for arrays) it is always zero. this_is_zero this_is_also_zero this_was_zero "but we just set it to this string" this_was_zero 20 #### but now it is 20 fig allows several characters for decorating your code, but only two have specific meaning to the language: "quotes for strings" and # hashes for comments. a comment is any text to the right of the # and this tells fig to ignore it completely, so that you can make notes for the coder (most often yourself) to read. using 4 hashes #### does exactly the same thing as using 1. # comments are also useful for explaining lines of code in tutorials. p 5 # p is 5 p # p is 0 p 0 # p is 0 but once p is an array, you can add things to it like this: ingredients = "milk" arr ingredients plus "eggs" ingredients plus "sugar" ingredients plus "flour" now arrget ingredients 4 ; print the plus command also works on numbers: height 5 width 12 perimeter = height ; plus height ; plus width ; plus width now = perimeter ; print technically we copied the value of height to the variable perimeter in the third line. then we added height again, then width, then width again. fig processes commands left to right, as if you are entering them into a calculator. multiplication is done with the times command: height 5 width 12 area = height times width now = area ; print the equals sign is still (as always) optional. if you prefer the way other languages handle math, fig allows you to expand its capabilities with inline python: height 5 width 12 perimeter python perimeter = (height * 2) + (width * 2) fig now = perimeter ; print the python command means "switch to inline python" and the fig command means "get back to fig coding." in fig code, indentation is optional but for python code (including inline python) it is required. [fig] now = 5 times 10 divby 2 minus 0.5 ; print # another math example one of the fun things fig is designed to do is create graphics. there are several examples on this page: [url]../fig/index.html[url] and fig will do graphics using text if the pygame graphics library is not installed. the two graphics commands in fig are pset and line. pset is used by providing a horizontal location, then a vertical, and a number for the colour just like colourtext uses. so to draw a pink dot at 5, 8 on the screen: pink = 13 now pset 5, 8, pink you could also say now pset 5 8 13 if you wanted. you could also use variables for the horizontal and vertical values. x 5 y 8 now pset x y 13 f = x plus 5 g = y plus 5 now line (x, y), (f, g), 13 now line x y f g 13 would also work. this concludes the fourth beginner section on fig coding-- the section on basic math. the sections on [[variables]], [[input]], [[output]] and basic math are the true basics of coding. you would do well to practice and be sure you understand them, if you want to get the most from the next 3 sections. [[loops]] and conditionals can also be simple, but they will not be any simpler than the section on basic math. well alright, the while wend commands might be. if feel you understand most of these concepts so far, then youre doing well and should be able to pick up the others later. otherwise, practice and look at simple examples of these commands in actual fig code. sometimes, building code up from individual commands is a great way to build a firm foundation on the specifics of the language. however, to get a good feel for how the commands are put together and utilised in real code, another good way to practice and learn is to take small, existing code examples and change one or two things to see what happens. this is something you cant practice nearly as well if you arent actually running the code on a computer. for mac os[lit]/[lit]x and gnu[lit]/[lit]linux users, fig only requires a single file [url]../fig/[url] to work. you save your code as something.fig and fig translates that to, which you run using python 2. on those operating systems, python 2 is usually already installed. windows users will have to install python 2, but they will also need to install colorama for python (or use a term window that supports escape sequences.)
back to fig concepts: [url][url] fig main page: [url][url] home: [lit][lit]