UTFT graph code did not show correctly

I have a UTFT 3,2" ILI9481, info here
here is my screen generated:

and here is the code:

/*This code make interesting pattern*/
#include <UTFT.h>
extern uint8_t SmallFont[];
UTFT myGLCD(CTE32HR,38,39,40,41);
float f;
int x;
int y;
int sx;
int sy;

void setup(){
  myGLCD.InitLCD();
  myGLCD.setFont(SmallFont);

  myGLCD.setColor(VGA_BLACK); //background color
  myGLCD.fillRect(19, 13, 479, 319);

  myGLCD.setColor(VGA_WHITE); //Cross color
  myGLCD.drawLine(19, 166, 479, 166);
  myGLCD.drawLine(249, 13, 249, 319);
  
  myGLCD.setColor(VGA_BLUE);
  
  //f=a
  float a=(0.1) ;
  
  /*
  myGLCD.drawPixel(0+249, 0+166);//debug code
  */
  //Begin main
  for (y=-153; y<154; y++){
    for (x=-230; x<231; x++){
      
      
      f = sin(x*y) ; //main
      
      
      sx = x+249;
      sy = 166-y;
      if ( ((f<=a) && (f>=-a)) ){
        myGLCD.drawPixel(sx, sy);
      }
    }
  }
  //End main
  myGLCD.setColor(255,255,255);
  myGLCD.print("Done",0,0);
}

void loop(){
  
}

I don't know why it just shows the wrong way, I have tried very much but still not working.
By the way, if you can please help me shorten the code. Thank you.

Your topic was MOVED to its current forum category as it is more suitable than the original as it is not a bootloader or avrdude problem

1 Like

You could use a line drawing command instead of a point drawing command...

1 Like

thank you for the suggestions. my first idea is to use the line drawing command but I don't know how to write the code

There are examples with the UTFT library

Where do you think point X=0, Y=0 is on the screen? Perhaps you think it is the bottom left corner, but maybe it is the top left corner?

Tried what, exactly?

You forgot to post the link, please try again.

Thanks for replying.
my x=0 and y=0 are in the center of the white cross

In here:

    for (y=-153; y<154; y++){
    for (x=-230; x<231; x++){

I change the code to something like this:

    for (y=+153; y>154; y--){
    for (x=+230; x>231; x--){

or change one line and keep the other one to make it draw differently. but it still does not work

I did not mean where you want (0,0) to be, I mean where is it actually on the screen? If you put this line

myGLCD.drawPixel(0, 0);

Where would the pixel appear?

This is what the screen looks like

the reset button on the left.
so 0, 0 will be on the top left corner.

Those loops will not run. 153 is not greater than 154, so the loop will stop before even one time.

I think you meant

for (y=+153; y>-154; y--){
1 Like

yes!

I think you are probably correct, but did you test that to be sure? Maybe the library you are using moves (0,0) to the bottom left, for example.

If we assume you are correct and (0,0) is the top left corner on the screen, then the screen is not like the graph application from your pc. In that graph application, low Y values are at the bottom of the screen and high Y values are at the top. But on your TFT screen, low values are at the top and high values are at the bottom.

So that means my graph is drawn from the screen upside down.
And is there a way to make it work?

To change the plot origin from the top left to the bottom left corner, and have y increase vertically, instead of:
drawPixel(x,y)
use
drawPixel(x,(YMAX-1)-y)
where YMAX is the screen height in pixels.

1 Like

The code is work perfectly.
but mine can only draw " 'expression' = 0 ". it could be more varied. and I still can't code

Summary

This text will be hidden.
I need to learn how to program something without depending too much on someone.

Another way to "turn the screen upside down" would be to change this:

to this:

sy = 166 - y;

Nobody is born with the skill and knowledge to code, it takes practice. Some people have naturally more aptitude than others, which helps, but even more important is whether you enjoy it and are interested in it. That's true for almost anything in life, I think!

1 Like

Thank you for helping me. I love coding and discovering new ways to make code more efficient. by the way thank you for helping me.

1. Main

The code is now working perfectly. I have updated the post.

1. 1. Code Changed

From this:

sy = y + 166;

to this:

sy = 166 - y;

just that :slight_smile:

1. 2. Its Limit

The graph code just works correctly with " 'expression' = a "
"a" is a number that can be changed to make the graph show more detail,
too much will fill the screen but too little will show nothing.
That means you should change the number depending on the 'expression' to make it work.

1. 3. Something more

I started to shorten the code to the assembly form(if I can because I am learning).
My goal is to make the code effective as possible(in storage space and fast).

1. 4. Why I make this?

actually, I love typing expressions into desmos to see the lines and beautiful images pop up. the other day I watched this guy make a youtube video about Graphic Calculators with Minecraft Redstone and explain how it works. and that's the idea of ​​drawing graphics on Arduino.

2. Thank you

I can't link, sorry
Thanks to:

2. 1. UKHeliBob

Move my topic to a suitable category. Make my code possible.
Thank you!

2. 2. aarg

Suggest me to use the line drawing command instead of pixel drawing. It is good to use a line but it needs 2 points to draw and I still haven't figured out the code. btw
Thank you!

2. 3. PaulRB

Solution of my code to make it work. Just a single line of code makes it not work, now it works.
Thank you!

2. 4. jremington

Still a solution.
Thank you!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.