Math : smooth graph ?

[Khaled Designer]

Hello

i searched how to create math graphs and i found some tutorials and aia files but  they all used points to draw graphs and for high Y values the graphs didn't look clear

i tried to create one using lines :(x1,y1) to (x2,y2) than (x2,y2) to (x3,y3) ....... when x1=x+1 ; x2=x+2 .... xn=x+n
y=sinx > y1=sinx1 .... yn=sin(x+n)

the problem for small x values the graph looks zigzag 
for values >5 looks good but not smooth 

is there anyway to draw smooth lines or can something like canvas dragged draw the lines automatically with timer ? because using Prevx/y ...Currentx/y is better
file attached

[Khaled Designer]

can we create graph without use timer ?
all the lines created at the same time AB than BC than CD ......

[Khaled Designer]

i find solution but the list of the numbers is the problem now
how i can make it choose numbers between 0 - 1000 for example without create long list of numbers ?

[Khaled Designer]

i don't understand why appinventor haven't any option to create automatic list between two numbers

and no tutorials about that an no one tried or used it !!

[Ghica]

Replace get item by get number in your example.
Cheers, Ghica.

[Abraham Getzler]

See the attached Iota.png for how to do this with a function procedure.

If you supplement this procedure with two other function procedures

• Product(list,constant) and
• Sum(list,constant)

you can generate lists with whatever start point, end point, and increment you want by composing the functions.

I got the Iota name from Iverson APL, which I had the  pleasure of using in the 1970s.

ABG

[Khaled Designer]

thanks Ghica that work fine but with problem in the graph ; i will see where is the problem exactly

[Khaled Designer]

thanks Abraham very nice idea i will try it 

i think it will help me alot with functions

[Khaled Designer]

the graph is fine now but i don't understand why itsn't always good with zigzag

[Khaled Designer]

i made some changes ; the graph created without need to calculate points or use timer 

i will try to make it draw graph of other fonctions and find solutions or someone want use it ; the file attached

[Khaled Designer]

i add more options to calculate graph of fonctions : aXª+bX+c
i will ask some questions 

[Khaled Designer]

is there any method to find the intersection between the graph and the two axis ?
if i have for example : f(x) =  x^21+4x-6

[Khaled Designer]

i think about solution

appinventor draw points for each number between -n , +n

so how i can do to find the x number wich make y = 0 ?

for each x between .... and ....

if y = 0 ....?

i tried but didn't work for me

[Khaled Designer]

it's work now but the precision must increased and the application take long time for calculation
also the results are not 100% because the intersection isn't precise

[Abraham Getzler]

is there any method to find the intersection between the graph and the two axis ?
if i have for example : f(x) =  x^21+4x-6

There are three different approaches to this problem (at least)

1. Symbolically (solve the equation for roots)
2. Analytically (differentiate the equation to find possible minima and maxima, and compare their y values against the limits of y(x) as x approaches +/- infinity)
3. Brute Force (walk the graph)

You can tell by the leading exponent (21) of x that since it is odd, y(x) will range from - infinity to + infinity so there must be at least 1 crossing of the x axis.  

Use Newton's Method or binary search from there.

ABG

P.S. Your graph app looks beautiful.

If you want to show the source, it would make a nice addition to the Graphs section of my FAQ

https://groups.google.com/forum/?utm_medium=email&utm_source=footer#!msg/mitappinventortest/2cd6Uz__xA0/cPQSiZpcDAAJ

 

[Khaled Designer]

thanks Abraham
yes i tried to create solutions for differents equation x^0 , x^1 , x^2 , x^3 , x^4 but for x^n i need other method 

i find a method but it take long time for calculation 

i used x value from -15 to +15 by 0.1 or 0.02 ..(precision) because i don't know where the lines intersect

i need method to allow the application to draw the graph between y= - 0.1 and y= +0.1 but i don't know how

-

of course i will share the source if anyone want develop it and make it faster or fix errors

[Khaled Designer]

i read now about Newton's method ; i think this is the solution but i need how to implant it in appinventor

[Abraham Getzler]

The bisection method is simple and fast.

Your code will be simpler if you code a value function for f(x)

to avoid duplication.

Also consider functions for  x_to_px and y_to_py

to separate out screen mapping considerations from

other calculations.

ABG

[Khaled Designer]

thanks i will try 

the graph v1 attached

calculate graph for : ax^n+bx+c

[Khaled Designer]

can you show a simple example with simple graph

i tried but i don't have experience with programmation 

it's simple and fast method if i use calculator or pen and paper but to make it with appinventor it's not easy

[Abraham Getzler]

I looked at your blocks.

I notice you don't use parameters in your procedures.

That makes it impossible to reuse them and to use them to feed other procedures.

You can't do functions without parameters.

See this chapter of the book in my FAQ's Books section

http://www.appinventor.org/bookChapters/chapter21.pdf

Also, I recommend using the input box contents to show the updated equation sooner,

than the graph, because they are unlabeled.  Maybe use their hints or add labels?

Another thing that can be done is to add an extra preview pass over the x range,

calculating minimum and maximum y values, then repeating the pass

using the y limits to scale the display.

It will be a day or so before I can supply code,

so feel free to start without me.

ABG

[Khaled Designer]

thanks 

i don't have experience with appinventor 

i always start with examples than i search and modify if i find better solution 

i want add the zoom but after finish what i need

i will try more

[Abraham Getzler]

Attached is a little study on how to input coefficients and display the polynomial for those coefficients.

It still needs a little tweaking for mathematical convention,

and I did not get a chance to see if  is

respected by label html.

I am out of time for tonight.

[Khaled Designer]

thank you very much

i will test it

[Khaled Designer]

i tried it 
we can't change the + if we need - and the first number always have +

[Khaled Designer]

i made a modifications ; i hope it's good :)

i remove all zeros and new list created but if we want use different power we use the first list with zeros ( as original )

[Abraham Getzler]

Putting a zero in the csv input is meant to allow you to skip a power of x in the polynomial.

For example, x^2 - 1  would be represented as  1,0,-1.

From your shots, it looks like you are ignoring the zeroes.

I am including an alternate version of my sup (raise up and make small like an exponent) function

for use in a label with html enabled.

This wouldn't help on a canvas text, though.

ABG

[Khaled Designer]

very nice 

yes i ignored the zeroes and i will made that as choice 

can you reduce the size of the power text ?

[Abraham Getzler]

can you reduce the size of the power text ?

I'm a bit weak on html, and the html tags supported in the label component aren't very well documented.

I had to google for "html exponent" and try whatever I found.

The Notifier component has a little html documentation for one of its blocks.

This is a case where you have to experiment.

ABG

 

[Abraham Getzler]

the graph looks zigzag 
for values >5 looks good but not smooth 

(from the original post).

This is because of pixellation, where you reach the limit of pixel size.

There are fancy ways of tricking the user's eyes into thinking they see smooth lines,

by shading the adjacent pixels in gray.

Microsoft's TrueType fonts did that trick.

ABG

 

[Khaled Designer]

i can't add new line in the label or center the text

[Khaled Designer]

if you see the aia file i added precision to reduce the zigzag ; it's not good as pc softwares or other applications in google play but give idea about the graph

thanks for the informations :)

[Abraham Getzler]

i can't add new line in the label or center the text

<br> is html for newline.

html center

ABG 

[Abraham Getzler]

Also look in Screen1 for Align Vertical attribute.

These alignment attributes are often inherited from parent (enclosing) components.

ABG

[Khaled Designer]

thanks alot

i find this one and the alignment at the center exactly : <div> and this : <p>
http://phrogz.net/css/vertical-align/

[Khaled Designer]

this for fonts size but i don't know how to apply it to power number
<font size="number">

[Abraham Getzler]

More possible tags here ...

http://ai2.appinventor.mit.edu/reference/components/userinterface.html#Notifier

ABG

[Khaled Designer]

some informations about math fonts ; maybe it need special fonts

[Abraham Getzler]

Time for you to start a new thread with a new subject line,

including "html label font exponent small" etc.

This thread is too long, and on lists.

That should get the attention of one of the html experts.

ABG

[Khaled Designer]

thanks 

i will open new thread ; i got it :)