absolute begginer - animate multiple lines of text

vasques

Hi. I´m an absolute beginner in programming and p5.js. I got stuck in my project. Would you help me find out what´s wrong in this piece of code? I want the sentence to move from left to right, maintaining a constant y.

GoToLoop

https://Forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

In JS, all created variables & properties are, by default, initialized w/ undefined:
https://Developer.Mozilla.org/en-US/docs/Glossary/Undefined

@ line #17, you attempt to increase variable x by 2: x = x + 2;
However, undefined + 2 is equal to NaN: #-o
https://Developer.Mozilla.org/en-US/docs/Glossary/NaN

TfGuy44

It's sort of apparent that you want the x variable to control where the text is drawn.

But where is the text actually being drawn? Look very closely at the parameters to your text() function! You don't use x at all!

vasques

Thank you for your help. Unfortunately, i'm afraid i didn't understand everything you said. GoToLoop, i declared var x and vary in the beginning and then assigned values to them inside function drawSentence (). Is it incorrect?

TfGuy44

The image of code you have posted shows no such assignments.

You would still need to USE the value of x when you draw your text, since you want the position that the text is at to depend on the value stored in your x variable.

TfGuy44

var x;

function setup(){
  createCanvas(720,680);
  x = 20;
}

function draw(){
  background(80);
  fill(255);
  text("Some text.", x, 30); // HERE. The value of x is used as the position of where to draw the text.
  x = x + 2;
  if( x > 720 ){
    x = 0;
  }
}

GoToLoop

... and then assigned values to them inside function drawSentence(). Is it incorrect?

Nope! The statement x = x + 2; depends on the previous value of x.

Given you had never assigned any initial value to it anywhere, by JS' rules, its default initial value is undefined! :-@

undefined + 2 = NaN. Thus NaN is assigned to x. 8-X

vasques

But considering i want to display multiple lines of text i was thinking of creating various drawSentence () functions in order to have those lines displaying at different x values. If i assign a value to x in function setup (), all the lines will appear in the same place?

GoToLoop

Declare a parameter for your function drawSentence(): function drawSentence(x) {
https://Developer.Mozilla.org/en-US/docs/Glossary/parameter

However, you should consider creating a class to represent your animated texts, each 1 w/ its own individual properties & shareable methods: *-:)

1. https://Developer.Mozilla.org/en-US/docs/Glossary/class
2. https://Developer.Mozilla.org/en-US/docs/Glossary/property/JavaScript
3. https://Developer.Mozilla.org/en-US/docs/Glossary/method
4. https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class

vasques

Thanks guys. You're helping me a lot. I really have no background in programming and i get stuck in things that are so simple that i can´t figure it out with all the tutorials in the world.