Tag: animation

Polar Coordinates Animation

A couple quick programs (polarGraphs.py) to create animations of the drawing of functions in polar coordinates (for my pre-Calculus class).

Graph of the function: r = 4 cos(θ)

It can export as a movie (mp4 as above). W can also transform functions (using: polarToCartesianGraph.py ) from rectangular to polar coordinates (and back: you can choose the settings).

Coordinate transforms Cartesian to Polar and back again for r = 4 cos(θ)

A Note on using ChatGPT

This python program uses the matplotlib library, and, for the first time for me, I used ChatGPT to figure out the syntax for things like drawing arcs and arrows, and exporting animation files, instead of googling my questions. ChatGPT worked great, and significantly speeded up the process. It does make me wonder, however, that since these models are based off of what they’ve scraped from the internet, are they going to run create problems for themselves if people stop asking questions on places like stackoverflow and rely on AI instead. Although, this might just mean that the AI will tend to be just be a little bit behind the cutting edge and there will continue to be a need for question and answer forums.

HTML Animations using SVG

A basic animation test using the HTML SVG element instead of the CANVAS. This one uses the svg.js library. This library has it’s own, built in animation function that is used to make the red rectangle move back and forth (1 second period).

The green circle is moved using the requestAnimationFrame function with some coding to make it bounce back and forth.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <script src='./svg.js/svg.min.js'></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="svgPlace"></div>
  </body>

  <script type="text/javascript">
    var draw = SVG().addTo('#svgPlace').size(300,400);
    var line = draw.line([[20,20],[200,20]]).stroke({width: 1, color:'#f00'});

    //Metronome red rectangle.
    rect = draw.rect(50,100).move(200,20).fill('#f00');
    rect.radius(10);
    dir = 'left';

    setInterval(animate, 1000);
    function animate(){
      if (dir === 'left'){
        px = 20;
        py = 20;
        dir = "right";
      }
      else {
        px = 200;
        py = 20;
        dir = "left";
      }
      rect.animate({
        duration: 1000,
        when: 'now'
      }).move(px,py);
    }

    //Green circle
    circ = draw.circle(20).fill('#0f0').move(250,10);
    window.requestAnimationFrame(animateCirc);
    cx = 250;
    cy = 20;
    dy = 1;

    function animateCirc(){
      cy+=dy;
      circ.move(cx,cy);
      window.requestAnimationFrame(animateCirc);
      if (cy > 100 ){
        cy = 100;
        dy = -dy;
      } else if (cy < 20) {
        cy = 20;
        dy = -dy;
      }
    }

  </script>
</html>

Making Animations with HTML Canvas

Based off of Mozilla’s nice introduction to basic animations on the web, I made as simple of an animation as I could using the Canvas element in HTML. It just contains a static, red rectangle, and a green sphere that slowly moves across the canvas. This should serve as a simple introduction for my students who want to make online games.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <div id="gameBoard"></div>

  </body>

  <script type="text/javascript">

    canvas_width = 400;
    canvas_height = 300;

    //create canvas
    cvs = document.createElement("CANVAS");
    cvs.height = canvas_height;
    cvs.width = canvas_width;
    document.getElementById("gameBoard").append(cvs);
    ctx = cvs.getContext("2d");
    cx = 10;
    cy = 20;

    window.requestAnimationFrame(animate);

    function animate(){
      //clear the canvas
      ctx.clearRect(0, 0, canvas_width, canvas_height); // clear canvas

      //set location of the circle
      cx += .2;
      cy += .1;
      
      //recreate the canvas (every time)
      ctx.fillStyle = '#ff0000';
      rect = ctx.fillRect(0, 0, 20, 100);

      ctx.beginPath();
      circ = ctx.arc(cx, cy, 10, 0, 2 * Math.PI);
      //ctx.stroke();
      ctx.fillStyle = '#00ff00';
      ctx.fill();

      window.requestAnimationFrame(animate);

    }

  </script>
</html>

This uses plain HTML and Javascript, with no additional libraries.

Morphing Art History

by Micaël Reynaud.

This amazing morphing of old masterpieces by Micaël Reynaud is worth enlarging. Warning: it’s about 10 Mb and you might just have to keep focused on the eyes to avoid motion sickness.

It’s similar to Philip Scott Johnson video below (you can find information about the artworks used here).

ᔥ Micaël Reynaud ↬ mlkshk.com ↬ The Dish.