Annika

Loops and arrays in TweenMax?

Recommended Posts

Hey everyone,

I am working on a project for university and there is one thing in p5js where I don't know how to do it.

 

I want to move two rectangles from the same place to two different places. (Because I like to move later lots of rectangles I want to create a loop and put the x and y values in a array.

 

Thank you

Annika

 

This is my js-code in p5js:

 

var demos = {x:300, y:-30};
var placeX = [0,200];
var placeY = [10,300];
var i = 0;

function setup() {
  createCanvas(400, 400);
 for(i=0; i<2;i++){
  var tween = new TweenMax(demos, 1, {x:placeX, y:placeY, ease:Power1.easeOut});
 }
 
 
}

function draw() {
  background(220);
 fill(200,20,150);
 noStroke();
 
 for(i=0; i<2;i++){
 rect(demos.x, demos.y, 30, 30);
 }
}

Share this post


Link to post
Share on other sites

Can you post a simple demo? Your code is somewhat confusing and I haven't used p5js but with a demo showing basic setup, I can give it a try.

 

 

Share this post


Link to post
Share on other sites

Here is how I would do it.

 

 

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Hi @Annika

 

Providing a simple demo is always the best way to get help, even if it doesn't work.

 

You only have 1 object, demos, but you need 2 objects. The best way to go about what you're doing is to create an array of objects.

 

You can add more animations later by adding another loop, but this should help you get started.

 

 

 

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Yup looks like I am on right track ;)

 

var box = boxes[i];

 

Why are you creating variable to copy object?  For performance or simplicity?

Share this post


Link to post
Share on other sites
22 minutes ago, Sahil said:

Yup looks like I am on right track ;)

 


var box = boxes[i];

 

Why are you creating variable to copy object?  For performance or simplicity?

 

Yeah. It's faster, easier to read, and less error-prone. In the first loop it might seem pointless, until you want to add another tween and have to type boxes again. In the second loop, it's more apparent. 

 

// harder to read, and easier to make a mistake
for (var i = 0; i < boxes.length; i++) {    
  rect(boxes[i].x, boxes[i].y, boxes[i].width, boxes[i].height);
}

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Thank you both a lot! That was very helpful!

 

@Sahil is there a possibility that I don't have to write the startpoint (var demos = [{ x: 0, y: 0 }, { x: 0, y: 0 }];) in your code again? Because it is always the same.

Share this post


Link to post
Share on other sites

Ya you can push objects in array in first loop, I have updated my demo.

  • Like 1

Share this post


Link to post
Share on other sites

 

7 hours ago, Sahil said:

 


var box = boxes[i];

 

Why are you creating variable to copy object?  

 

 

BTW, there is only 1 box variable, and it's not copying the object.  You can copy the value of a primitive (string, number, boolean, null, undefined, symbol).

 

// Copies value
var foo = "eggs";
var bar = foo; 
foo = "ham";

console.log(foo); // "ham"
console.log(bar); // "eggs"

 

For everything else, it's not that straightforward. Try searching for pass by value and by reference as it can be hard to explain.

 

Variables do not store the value of an object, they just hold a reference to an object's location in memory, kind of like a home address. And just like your home address, it can be passed around and be used by more than 1 person.

 

Notice how alpha and bravo appear to have the same value, but they are not equal. On the other hand, alpha and charlie are equal even though I changed the value of the msg property. That's because they are pointing to the same object.

 

var alpha = { msg: "Hello World!" };
var bravo = { msg: "Hello World!" };

console.log(alpha === bravo); // false

// Copies reference
var charlie = alpha;
charlie.msg = 123;

console.log(alpha === charlie); // true

console.log(alpha.msg); // 123
console.log(charlie.msg); // 123

 

 

And about there only being 1 box variable, that's because of something called hoisting. There is no difference between these two loops. All var declarations are moved to the top of their scope by the JavaScript compiler, so the first loop will end up looking just like the second loop.

 

for (var i = 0; i < 2; i++) {
  var box = boxes[i];
}

 

var box;

for (var i = 0; i < 2; i++) {
  box = boxes[i];
}

 

That's why this crazy looking code is totally valid. The num variable gets moved to the top.

 

num = 8;
num += 4;
var num;
console.log(num); // => 12

 

  • Like 4

Share this post


Link to post
Share on other sites

Hey thank you for your help!

 

I was working on it and I got a new question. I want to animate text with little quares and therfore I think I need an array for every letter (little quares in it) and then another array with the letters. I've tried it  often but I don't know how to connect the arrays.

 

Or is there an easier way to animate them with functions or something else because I also want to move the letters later.

 

Annika

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.