Can anybody help me finish this program?

[JasKinasis]

Dude yer awseome, but how long did it take that program to run?

Also so can you rotate the triangle?

I knocked the first one up between builds whilst I was at work this afternoon. So not very long.
Then for the second post, I just modified what I already had.

Re: rotating the triangle:
Now that we’re using a class to represent a triangle, we can do pretty much whatever we want with it.

 

[redcrazykid]

so is it x - y * z?

 

[JasKinasis]

so is it x - y * z?

No. Typically, rotation involves rotating around a particular point.
So, off the top of my head it will be something like:
x = pointOfRotation.x + Math.sin(angleOfRotation) * radius;
y = pointOfRotation.y + Math.cos(angleOfRotation) * radius;
Where radius is the distance from the object to the centre of rotation.
This assumes that you're rotating the entire object around a distant point.

If we want to rotate the object around its centre - it's something like:
newX = cos(angle) * x - sin(angle) * y;
newY = cos(angle) * y + sin(angle) * x;

And when performing rotations, your angles need to be in Radians. So if you're using degrees, then before using sin/cos, you need to convert your angle to Radians using:
radians = degrees * Math.PI / 180;

After looking at how the rotation of of objects drawn procedurally in javascript works - it's a little more awkward that I thought it was going to be. So I have to rethink my approach to the way I'm creating/drawing the Triangles. I'll have a go at getting something working when/if I get time.

 

[JasKinasis]

In the meantime:
I have a book which I used as a reference during my days as a Flash developer, called "Foundation Actionscript 3.0 Animation, Making Things Move!" by Keith Peters. It's a great book, full of awesome formulas and techniques for creating scripted animations.

The other day, I discovered a github repository for somebody who had made an attempt to port the Flash/Actionscript examples from the book to Javascript.
They only got up to Chapter 6 before giving up (There's something like 19 or 20 chapters in the book).

The original github is here:

GitHub - adiospace/making-things-move: JavaScript port of Foundation Actionscript 3.0 Animation: Making Things Move! book by Keith Peters.

JavaScript port of Foundation Actionscript 3.0 Animation: Making Things Move! book by Keith Peters. - adiospace/making-things-move

github.com

I've cloned the entire git repository on my laptop and have created some HTML pages for each of the scripts - allowing each script to be tested. I've zipped up and attached a couple of examples that use rotation that you might be interested in.

One from Chapter 3, which rotates a graphic of an arrow to point to the mouse cursor (using a .png for the arrow, rather than a procedurally generated graphic). It also makes the arrow rotate to point towards the cursor.
And there are a couple of examples from Chapter 5 which make the arrow move towards the mouse cursor position. One does it in a vanilla way. The other adds a bit of physics to the equation.
The main directory contains the directories for chapter 3 and chapter 5 (which contain the javascript and the html pages for the examples I selected). And there's a common directory which contains some common assets used by the scripts, like the class for the arrow and the mtm class used for dealing with the Canvas.

All you need to do is open the html pages in your browser and the example will just run.

Whilst I'm getting to grips with Javascript again, I've decided to try to port some examples from later chapters of the book. So I've uploaded my clone of the above git repository to a new git repository at https://notabug.org/JasKinasis/making-things-move, which I'll update with any changes that I make.

Obviously I'll link back to the original developers github repository and give them proper credit.
The original repository hasn't been touched in 14/15 years, so it's safe to say that the original developer who ported these examples has abandoned the project. And there are no other active forks either.

Once I've got to grips with that, I'll start looking at porting some of my old Flash games to javascript - If I can find my backups with the original AS3 source code, that is!

 

[redcrazykid]

Wow that was so cool! I was like dude! a little fish is following me around! I didn't have time to read all the code you wrote, but I have another riddle for you.

<html>
 <head>
  <title>NTD</title>
  <style>
BODY { font-family: Verdana; font-size: 11px; color: #000; }
  </style>
 </head>
 <body>

<div id="div1"></div>
<div id="nb2"></div>
<div id="nb3"></div>
<div id="nb4"></div>

<script>
try {
 v1 = 0;
 w = 0;
 nb2n = 0;
 nb3n = 0;
 nb4n = 0;
 timeouttv = 10;
 function movenewdivelement(dname, slope3, slope4) {
  for(i = 0;i < v1;i++) {
   if(Math.floor(document.getElementById('f' + i).style.left.replace('px', '')) > 600 || Math.floor(document.getElementById('f' + i).style.top.replace('px', '')) > 600) {
   for(m = 0;m < v1;m++) {
     document.body.removeChild(document.getElementById('f' + m));
     v1 = 1;
     setTimeout('makenewdivelement(Math.floor(Math.random() * 500), Math.floor(Math.random() * 500), Math.floor(Math.random() * 6), Math.floor(Math.random() * 6));', 100);
    }
   }
   else {
   if(Math.floor(document.getElementById(dname).style.left.replace('px', '')) > Math.floor(document.getElementById('f' + i).style.left.replace('px', ''))) {
   if(Math.floor(document.getElementById(dname).style.top.replace('px', '')) > Math.floor(document.getElementById('f' + i).style.top.replace('px', ''))) {
   if(Math.floor(document.getElementById(dname).style.left.replace('px', '')) < Math.floor(document.getElementById('f' + i).style.left.replace('px', '') + 10)) {
   if(Math.floor(document.getElementById(dname).style.top.replace('px', '')) < Math.floor(document.getElementById('f' + i).style.top.replace('px', '') + 10)) {
   }}}}
   else {
    document.getElementById(dname).style.left = (Math.floor(document.getElementById(dname).style.left.replace('px', '')) + slope3) + 'px';
    document.getElementById(dname).style.top = (Math.floor(document.getElementById(dname).style.top.replace('px', '')) + slope4) + 'px';
    document.getElementById(dname).style.background = '#ff0000';
   }
   }
  }
  setTimeout('movenewdivelement("' + dname + '", ' + slope3 + ', ' + slope4 + ');', timeouttv);
 }
 function makenewdivelement(mnl, mnt, slope1, slope2) {
  document.getElementById('nb2').innerHTML = nb2n++;
  document.getElementById('nb3').innerHTML = nb3n++;
  a = document.createElement('div');
  a.style = 'position:absolute;left:' + mnl  + 'px;top:' + mnt + 'px;width:10px;height:10px;background:#' + Math.floor(Math.random() * 500) + ';';
  a.id = 'f' + (v1++);
  a.innerHTML = '&nbsp;';
  document.body.appendChild(a);
  setTimeout('movenewdivelement("' + a.id + '", ' + slope1 + ', ' + slope2 + ');', timeouttv);
 }
 for(j = 0;j < 16;j++) {
  setTimeout('makenewdivelement(Math.floor(Math.random() * 500), Math.floor(Math.random() * 500), Math.floor(Math.random() * 6), Math.floor(Math.random() * 6));', timeouttv);
 }
 document.getElementById('nb4').innerHTML = nb4n++;
 setTimeout('window.location = window.location;', timeouttv);
}
catch(errmsg) {
 alert(errmsg);
}
</script>

 </body>
</html>

I'll post a screenshot of me using the program in a minute.

 

[JasKinasis]

Nice! The latest version of your animation seems to be working OK.
The CPU usage goes through the roof whilst running your animation though.
It's also very jerky.

Again - if you use the Canvas element and it's javascript API - it's more optimised for drawing and animation. Animations will run more smoothly and use less CPU than the method you're using at the moment.

There are probably ways to modify your existing script, to make it run more smoothly and not use so much CPU. Increasing the timeout value might help. But I'd still advise you to learn to use the Canvas element.

Another good thing about the canvas element is that you can overlay several canvas elements on a single html page.
So for example, if you're creating a side-scrolling space shooter game - you can have a canvas element in the foreground with the players ship, enemies, plus laser blasts/missiles and any obstacles. This animates all of the game logic.
Then you can have a canvas behind that with planets and scenery that will scroll past in the background.
And then a canvas at the bottom with a star-field animation. That way you can create a layered, parallax effect. With the fastest moving stuff happening at the top layer. The starfield moving slowly in the background and the scenery in the middle scrolling at a speed between the foreground and background speed.

 

[redcrazykid]

<html>
<head>
</head>
<body>

<script>
document.appendChild(
</script>

</body>
</html>