DEV Community: nancy

Implementing an Auto-logout Feature for Android in Kotlin

nancy — Tue, 09 Apr 2024 09:13:43 +0000

Handling sensitive data in an app may require some checks to see if the user is still active and decide whether or not to keep him/her logged in. We will use a straightforward approach: gesture detectors and the Handler class to set timeout intervals.

Let us head on straight to the concept.

Prerequisites

To follow through, you'll need to have these:

A basic understanding of Kotlin and programming in general (OOP).
Android Studio or IntellijIDEA (configured for Android development) installed and working in your machine.
Knowledge of building Android applications.

What we will be doing

We will be creating an app that displays a dialog asking the user if he/she is still active or not. The method for displaying the dialog will be fired after 15 seconds of inactivity. We check for the user's activeness by checking if he is tapping on the screen.

We embed our gesture detector on the whole screen and not on individual subclassed views, enabling us to detect gestures that will be the final output.

The theory of auto-logging out in our app

For any gesture detected, the following actions are done:

We first count the number of clicks done at every gesture detected on the screen. For example, if a user scrolls, clicks increase by 1. If he scrolls again, the count is incremented again, making the number of clicks to 2. The same will be done for all other gestures.

Second, the user's active status will be set to true.

Then, we start tracking the user's active status. There is a catch here. To avoid the dialog being displayed many times, we will only call the handler to the dialog display method. We achieve that by calling this method when the number of clicks is 1.

We earlier stated that we would display the dialog after 15 seconds. We split this into 10 seconds and 5 seconds. Once we start detecting inactivity after a user interacts with the app, wait for 10 seconds. After that, deliberately set the active status to false, wait again for 5 seconds, and recheck the active status.

If the user has not interacted with the screen, definitely the status will still be false. Now that it is false, we display the dialog. Otherwise, when he/she interacts with the screen, the active status will be true, so do not display the dialog. It is as simple as that.

Before we start creating the app, we will briefly look at the two 'tools' we will use:

The GestureDetector class contains helper methods to detect gestures such as scrolling, flinging, swiping, etc.
The Handler class enables us to act for a specific duration.

The GestureDetector class

To detect all common gestures, we implement the GestureDetector.OnGestureListener interface. To detect a subset of gestures, we extend the GestureDetector.SimpleOnGestureListener. We will use the first option in our application.

Let's look at this code snippet:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.GestureDetector
import android.view.MotionEvent
import androidx.core.view.GestureDetectorCompat


class MainActivity :
    AppCompatActivity(),
    GestureDetector.OnGestureListener {

    private lateinit var ourDetector: GestureDetectorCompat

    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Instantiating the gesture detector
        /*We pass in the application context and an implementation of
         GestureDetector.OnGestureListener as the arguments*/
        ourDetector = GestureDetectorCompat(this, this)

    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        return if (ourDetector.onTouchEvent(event)) {
            true
        } else {
            super.onTouchEvent(event)
        }
    }

    override fun onDown(event: MotionEvent): Boolean {
        //do something
        return true
    }

    override fun onFling(
        event1: MotionEvent,
        event2: MotionEvent,
        velocityX: Float,
        velocityY: Float
    ): Boolean {
        //do something
        return true
    }

    override fun onLongPress(event: MotionEvent) {
        //do something
    }

    override fun onScroll(
        event1: MotionEvent,
        event2: MotionEvent,
        distanceX: Float,
        distanceY: Float
    ): Boolean {
        //do something
        return true
    }

    override fun onShowPress(event: MotionEvent) {
        //do something
    }

    override fun onSingleTapUp(event: MotionEvent): Boolean {
        //do something
        return true
    }

The first thing we note is that our Activity class extends the interface (GestureDetector.OnGestureListener). Since it is an interface, we have to use all its methods, as you can see. We override them to put in our custom code. In the onCreate() method, we instantiate the gesture detector and then pass it in the current application context and implementation of GestureDetector.OnGestureListener as the arguments.

In all the overridden methods, you will notice two similarities - they take in a MotionEvent object and return true. The MotionEvent is used to report movement events happening in the Activity. We return true to show that the detection of this event. For the onFling() and the onScroll() methods, we pass in extra parameters used to detect the position where the two gestures were performed.

They may be necessary when creating products like games and others. We will not use them for our article. For more information on the GestureDetector class, follow this link pointing to the official documentation.

The Handler class

This class is used when we want to perform a particular action like calling a method, opening an activity, sending an SMS after a specific time has elapsed.

Take this snippet as an example:

Handler(Looper.getMainLooper()).postDelayed({
    //the method(callback method) to be called
    displayDialog()
}, 5000)

In the Handler class' constructor, we pass in a postDelayed() method from Looper's getMainLooper() method. A Looper is used to run a message loop for a thread. The getMainLooper(), as the name suggests, gets the looper running in an application's main thread.

The postDelayed() method enables a Runnable to run after a specified amount of time. The Runnable, in this case, may be a method. Check this code.

public final boolean postDelayed (Runnable outRunnable,  Object ourObject, long delayTime)

It has three parameters:

The Runnable interface, which cannot be null.
An Object instance is used to cancel the runnable. It can be null.
A long type that stores the time, in milliseconds, to wait before calling the runnable.

Creating the app

Now that we have looked at the theory and what we will be using in our article, we will go ahead to create our application. Choose the Empty Activity option, set your preferred name (I called mine AutoLogout), choose the language as Kotlin, and then Finish.

Modifying the MainActivity.kt file

Copy and paste the following code to your MainActivity.kt file after your package name declaration.

import android.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import android.view.GestureDetector
import android.view.MotionEvent
import androidx.core.view.GestureDetectorCompat


class MainActivity :
    AppCompatActivity(),
    GestureDetector.OnGestureListener {

    private lateinit var ourDetector: GestureDetectorCompat
    private var timeset: Long = 10000
    private var noOfClicks: Int = 0
    private var isActive: Boolean = false


    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Instantiating the gesture detector
        /*We pass in the application context and an implementation of
         GestureDetector.OnGestureListener as the arguments*/
        ourDetector = GestureDetectorCompat(this, this)

    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        return if (ourDetector.onTouchEvent(event)) {
            true
        } else {
            super.onTouchEvent(event)
        }
    }

    override fun onDown(event: MotionEvent): Boolean {
        startDetection()
        return true
    }

    override fun onFling(
        event1: MotionEvent,
        event2: MotionEvent,
        velocityX: Float,
        velocityY: Float
    ): Boolean {
        startDetection()
        return true
    }

    override fun onLongPress(event: MotionEvent) {
        startDetection()
    }

    override fun onScroll(
        event1: MotionEvent,
        event2: MotionEvent,
        distanceX: Float,
        distanceY: Float
    ): Boolean {
        startDetection()
        return true
    }

    override fun onShowPress(event: MotionEvent) {
        startDetection()
    }

    override fun onSingleTapUp(event: MotionEvent): Boolean {
        startDetection()
        return true
    }

    //a method to start detection
    fun startDetection() {
        //set the user's active status to true then increase the number of clicks by 1
        isActive = true
        noOfClicks++

        //dont listen more than once
        //simply do nothing :)
        if (noOfClicks > 1) {

        } else if (noOfClicks == 1) {
            startListener()
        }
    }

    fun startListener() {
        //check the user's activeness after a specified time in milliseconds
        Handler(Looper.getMainLooper()).postDelayed({
            //displayDialog()
            checkActiveness()
        }, timeset)
    }

    fun checkActiveness() {
        /*set the active status to false deliberately
        and wait for 5 seconds to see if it will change to true
        */
        isActive = false
        Handler(Looper.getMainLooper()).postDelayed({

            displayDialog()
        }, 5000)
    }

    fun displayDialog() {
        //if the user is still inactive, show the dialog
        /*reset the number of clicks to zero to start
        the detection  incase the dialog is dismissed*/
        if (isActive == false) {
            noOfClicks = 0
            val displayDialog = AlertDialog.Builder(this)
            displayDialog.apply {
                setTitle("Autologout")
                setMessage("It seems you have you have been away for a while. Would you like us to sign you out?")
                setPositiveButton("Yes, Sign out") { _, _ ->

                }
                setNegativeButton("Keep me in") { _, _ ->

                }
            }.create().show()
        } else {
            /*if active, set the clicks to zero also
            to allow the detection to start as the user clicks/taps the screen
             */
            noOfClicks = 0
        }
    }
}

After importing the required packages, we then declare the variable to hold our detector object, instantiate the values to hold the number of clicks, delay time, and the user's active status. The overridden methods are implemented as we discussed beforehand, only that we pass in a startDetection() method to each of them. Let us see what the startDetection() method does.

    //a method to start detection
    fun startDetection() {
        //set the user's active status to true then increase the number of clicks by 1
        isActive = true
        noOfClicks++

        //dont listen more than once
        //simply do nothing :)
        if (noOfClicks > 1) {

        } else if (noOfClicks == 1) {
            startListener()
        }
    }

Here is where the inactivity detection starts. We begin by setting the user's active status to true and increasing the number of clicks by 1. A conditional check allows listening for clicks only once after the first one is passed.

Moving to the startListener() method.

    fun startListener() {
        //check the user's activeness after a specified time in milliseconds
        Handler(Looper.getMainLooper()).postDelayed({
            checkActiveness()
        }, timeset)
    }

We call the method to check for the user's activeness after the time stored in the timeset variable(10 seconds) elapses. The method is called checkActiveness() discussed next.

    fun checkActiveness() {
        /*set the active status to false deliberately
        and wait for 5 seconds to see if it will change to true
        */
        isActive = false
        Handler(Looper.getMainLooper()).postDelayed({

            displayDialog()
        }, 5000)
    }

After the 10 seconds, set the active status to false deliberately and wait for 5 seconds to see if it will change to true. If it's still false, display the dialog as we will see in the final method, displayDialog().

fun displayDialog() {
        //if the user is still inactive, show the dialog
        /*reset the number of clicks to zero to start
        the detection  incase the dialog is dismissed*/
        if (isActive == false) {
            noOfClicks = 0
            val displayDialog = AlertDialog.Builder(this)
            displayDialog.apply {
                setTitle("Autologout")
                setMessage("It seems you have you have been away for a while. Would you like us to sign you out?")
                setPositiveButton("Yes, Sign out") { _, _ ->

                }
                setNegativeButton("Keep me in") { _, _ ->

                }
            }.create().show()
        } else {
            /*if active, set the clicks to zero also
            to allow the detection to start as the user clicks/taps the screen
             */
            noOfClicks = 0
        }
    }

If the user is still inactive, show the dialog and reset the number of clicks to 0 to start the detection. If the user and gestures dismiss, the dialog is detected. If active, set the clicks to 0 again to allow the detection to start as the user clicks/taps the screen.

Note that we have to do some touches on the screen for the methods to start firing.

If you do not want to wait until someone touches the screen, you can call the startDetection() method in the Activity's onCreate() method as well after instantiating the gesture detector.

Layout XML (activity_main.xml) file

This is the XML code. It contains a TextView displaying "Hello there. You will be logged out after 15 seconds".

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello there. You will be logged out after 15 seconds"
            android:id="@+id/sampleTxt"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" android:paddingLeft="15dp" android:paddingRight="15dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

You can find the sample APK to this project here.

Run the app, do some touches, scrolls, and wait 15 seconds to checkout the feature. Also, do the same before the seconds elapse and check. Change the numbers and check again.

Further practice

Now, this was for one screen. What if you wanted to implement it on many screens? Would you rewrite the code in each Activity? Definitely, not. So get some coffee and write an inheritable(extendable) class you can call on any screen.

You can also make the function open another activity instead of the dialog. You can implement a counter for the last 5 seconds and then later do a particular action like opening a Login screen.

Conclusion

We looked at the working theory, briefly touched on the GestureDetector and Handler classes, and finally created an auto-logout app using the two classes. Hope you had a great read.

Happy coding!

How to Create an Auto-typing Feature in JavaScript

nancy — Tue, 09 Apr 2024 08:59:49 +0000

In some cases, a developer may want to animate text content for users to see when they visit the web page. This can be achieved through auto-typing. This feature helps to enhance the look of a site and improves the overall user experience.

Auto typing can be used to make eye-catching adverts or auto-complete text when a user is typing. It can be regarded as animation and helps to retain attention, as well as simplify complex information. This is indeed a useful feature to implement in a frontend web project.

Prerequisites

To follow along with this tutorial, you need to have:

A basic understanding of JavaScript.
An understanding of HTML and Bootstrap.

Goal

In this article, we will implement the auto typing feature using JavaScript and jQuery, as shown in the video below.

Getting started

We will use jQuery and Immediately Invoked Function Expressions due to their simplicity.

The general syntax of an IIFE is shown below:

(function () {
  statements;

})();

In the above example, the grouping operator prevents variables within the IIFE from being accessed from the global scope.

You can learn more about IIFEs from the official documentation here.

Note that we will put all of our code in a single file.

Creating JavaScript functions

Create a new folder on your computer and give it any name. In this directory, generate a new file and name it as index.html.

We need to add the following JavaScript code in the index.html file. I have explained the code snippets using inline comments:

//The function for auto-typing
function autoType(elementClass, typingSpeed, timeout) {
//The target class where the auto-typing will be invoked
    var ourClass = $(auto-typing);
    //setting the CSS styling for the target class
    ourClass.css({
      "position": "relative",
      "display": "inline-block"
    });
    //looking for `text-js` containing the text that will be typed out
    ourClass = ourClass.find(".text-js");
    //remove any trailing spaces
    var text = ourClass.text().trim().split('');
    //storing the length of text
    var amntOfChars = text.length;
    //variable to store the text to display
    var newString = "";

    setTimeout(function () {
    //changing the text visibility to visible
      ourClass.css("opacity", 1);
      //clearing out the text temporarily
      ourClass.text("");
      //The IIFE where the characters are displayed after computing the typing speed in a for-loop
      for (var i = 0; i < amntOfChars; i++) {
        (function (i, char) {
          setTimeout(function () {
            newString += char;
            ourClass.text(newString);
          }, i * typingSpeed);
        })(i, text[i]);
      }
    }, timeout);
  }

function fire(){
//calling the functions with respective arguments (text field, typing speed, and timeout)
    autoType(".type-js", 85, 1000);
    autoType(".type-js-ii", 200, 2500);  
    autoType(".type-js-iii", 85, 5800);  
    autoType(".type-js-iv", 200, 9300);   
    autoType(".type-js-v", 85, 15000);    
}

Let's understand further what the above JavaScript code entails:

The autoType() function requires three parameters:

elementClass - The target class where the auto-typing will be invoked.
typingSpeed - This is the typing speed.
timeout - The waiting period before the autoTyping() function is fired.

ourClass variable stores the target class, as demonstrated below:

 ourClass = ourClass.find(".text-js");

We add styling to the elements using the following code:

  ourClass.css({
      "position": "relative",
      "display": "inline-block"
    });

Next, we look for text-js. This is a class found in our target class. It contains the text that will be typed out. Thereafter, we remove any trailing spaces. This is demonstrated below:

ourClass = ourClass.find(".text-js");
    //remove any trailing spaces
    var text = ourClass.text().trim().split('');

The amntOfChars variable will contain the length of our text. We will then store the text to display inside the newString variable.

var amntOfChars = text.length;
    //variable to store the text to display
    var newString = "";

In the setTimeout() function, we set the opacity of the target class's contents from 0 to 1 to make it visible. We also clear the text of the target class.

In the for loop, the IIFE takes the index and the text character at a particular index as parameters. It then calculates the timeout by multiplying the index number by the typing speed.

The newString is concatenated with the text character at the provided index until the for loop ends.

 setTimeout(function () {
    //changing the text visibility to visible
      ourClass.css("opacity", 1);
      //clearing out the text temporarily
      ourClass.text("");
      //The IIFE where the characters are displayed after computing the typing speed in a for-loop
      for (var i = 0; i < amntOfChars; i++) {
        (function (i, char) {
          setTimeout(function () {
            newString += char; //concatenation
            ourClass.text(newString);
          }, i * typingSpeed);
        })(i, text[i]);
      }
    }, timeout);

Finally, we call the auto-typing() function inside the fire method. This is shown below:

function fire(){
//calling the functions with respective arguments (text field, typing speed, and timeout)
    autoType(".type-js", 85, 1000);
    autoType(".type-js-ii", 200, 2500);  
    autoType(".type-js-iii", 85, 5800);  
    autoType(".type-js-iv", 200, 9300);   
    autoType(".type-js-v", 85, 15000);    
}

The HTML and CSS part

We will use the following HTML code:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Auto typing</title>
    <style type="text/css">
      .text-js {
        opacity: 0; 
        color: black;
        height: auto; 
        font-family: lucida sans;
      }
    </style>
  </head>
  <body onload="fire()" style="background-color: white">
<section style="margin-top: 10vh; padding-left: 15vw" class="pb-5">
    <div class="container pb-md-3">
        <div class="text-center">
            <div class="row">
              <div class="col-md-5" style="text-align: left">
                <h3 class="mb-4 title" style="color: red">Q & A&nbsp;</h3>
                <div class="type-js"><div class="text-js">
                  Is this Dev.to?
                </div>
                </div>
                <br>
                <div class="type-js-ii"><div class="text-js">
                  Yes, why?
                </div>
                </div><br>
                <div class="type-js-iii"><div class="text-js">Tell me more about the community.
                </div>
                </div><br>
                <div class="type-js-iv"><div class="text-js">It is, I mean, it is that--
                </div>
                </div><br>
                <div class="type-js-v"><div class="text-js">Could you please talk faster?
                </div>
                </div>
              </div>
        </div>
    </div>
</section>

</body>

In the <head> section, we set the text color to black, font to Lucida sans, and the text height to auto.

 <style type="text/css">
      .text-js {
        opacity: 0; 
        color: black;
        height: auto; 
        font-family: lucida sans;
      }
    </style>

In the <body> tag, we call the fire() function when it loads.

<body onload="fire()" style="background-color: white">

Bootstrap 5 is used for styling. The documentation can be found here.

In the code above, we have imported Bootstrap using the code below:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

Remember to import the jQuery or the auto-typing feature will not work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The full code

After completing the above steps, we can save our file and then view it in the browser. Your final code should look as shown below:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Auto typing</title>
    <style type="text/css">
      .text-js {
        opacity: 0; 
        color: black;
        height: auto; 
        font-family: lucida sans;
      }
    </style>
  </head>
  <body onload="fire()" style="background-color: white">
<section style="margin-top: 10vh; padding-left: 15vw" class="pb-5">
    <div class="container pb-md-3">
        <div class="text-center">
            <div class="row">
              <div class="col-md-5" style="text-align: left">
                <h3 class="mb-4 title" style="color: red">Q & A&nbsp;</h3>
                <div class="type-js"><div class="text-js">
                  Is this Dev.to?
                </div>
                </div>
                <br>
                <div class="type-js-ii"><div class="text-js">
                  Yes, why?
                </div>
                </div><br>
                <div class="type-js-iii"><div class="text-js">Tell me more about the community.
                </div>
                </div><br>
                <div class="type-js-iv"><div class="text-js">It is, I mean, it is that--
                </div>
                </div><br>
                <div class="type-js-v"><div class="text-js">Could you please talk faster?
                </div>
                </div>
              </div>
        </div>
    </div>
</section>

</body>

<script>
//The function for auto-typing
function autoType(elementClass, typingSpeed, timeout) {
//The target class where the auto-typing will be invoked
    var ourClass = $(elementClass);
    //setting the CSS styling for the target class
    ourClass.css({
      "position": "relative",
      "display": "inline-block"
    });
    //looking for `text-js` containing the text that will be typed out
    ourClass = ourClass.find(".text-js");
    //remove any trailing spaces
    var text = ourClass.text().trim().split('');
    //storing the length of text
    var amntOfChars = text.length;
    //variable to store the text to display
    var newString = "";

    setTimeout(function () {
    //changing the text visibilty to visible
      ourClass.css("opacity", 1);
      //clearing out the text temporarily
      ourClass.text("");
      //The IIFE where the characters are displayed after computing the typing speed
      for (var i = 0; i < amntOfChars; i++) {
        (function (i, char) {
          setTimeout(function () {
            newString += char;
            ourClass.text(newString);
          }, i * typingSpeed);
        })(i, text[i]);
      }
    }, timeout);
  }

function fire(){
//calling the functions with respective arguments
    autoType(".type-js", 85, 1000);
    autoType(".type-js-ii", 200, 2500);  
    autoType(".type-js-iii", 85, 5800);  
    autoType(".type-js-iv", 200, 9300);   
    autoType(".type-js-v", 85, 15000);    
}
</script>
</html>

Conclusion

This tutorial has shown you how to create an auto typing feature using JavaScript and jQuery. We have analyzed the JavaScript code and determined how it works. I hope you gained some insights that you'll apply in your next project.

Happy coding!

Using JavaScript's Mathematical Functions to Create Animations

nancy — Tue, 09 Apr 2024 08:35:17 +0000

Animations are a great way to catch a user's attention and enhance the look of your website. In this article, we will look at how Javascript's built-in functions such as Math.cos() and Math.sin() can be applied to create the animations.

We will be creating an animation to show a simple rotating system so that we can see how the functions are applied.

The final output will resemble this:

Where the line shows the path the image follows.

Prerequisites

An understanding of JavaScript.
An understanding of HTML and CSS.

A brief look at the sin and cos functions in creating a circle

These two functions play a great role in defining the x and y coordinates of a circle. Let's have a look at this figure.

Using the basic trigonometric formulas, we see that sin θ = (y/r) and cos θ = (x/r).

Based on these, it's clear that given a circle of radius r at an angle of θ, the coordinates of the point (x, y) are found using:

x = r cos(θ)
y = r sin(θ)

We will use these two functions to rotate an image in our animation. You can find more about these trigonometric functions here.

The JavaScript code

This is the JavaScript code.

// The image variable
let image = document.querySelector("img");
// 90 degrees
let angle = Math.PI / 2;
//variable to store the previous time the animate funuction last fired
let prevTimeArg;
function animate(currentTimeParam){

    if (prevTimeArg != null) {
        angle += (currentTimeParam - prevTimeArg) * 0.004;
    }
    // Setting the previous time to the time the function currently fires
    prevTimeArg = currentTimeParam ;
    image.style.top = (Math.sin(angle) * 150) + "px";
    image.style.left = (Math.cos(angle) * 150) + "px";
    requestAnimationFrame(currentTime => animate(currentTime));
}
requestAnimationFrame(animate);

Explanation

The image is placed at a 90^∘ angle(π/2). We continuously update its top and left styles to move it along the circle's circumference. The speed at which the angle changes is dependent on the difference between the current timestamp and the last timestamp the function fired.

This ensures that the motion of the image is stable because if we increased the angle of rotation by a fixed amount, the motion would not be smooth in case a heavy task is running in the machine. We store a counter for the current angle of the animation and increment it every time the animate() function is called.

This angle is used to compute the current position of our image. The vertical radius of our circle is computed using Math.sin() and multiplied by 150. We then assign the value to the top style.

Setting the top with this value makes sure the image is maintained within its radius. The same is done for the horizontal radius by setting the left style value. We use Math.cos() multiplied by 150 to achieve the same radius.

Note that you can make the image move in an anticlockwise function by making the top style negative. You can also change the speed of rotation by changing the number which you multiply the difference between the current time and the previous time the function executed.

For example, (currentTimeParam - prevTimeArg) * 0.004. If you increase the number, the speed will increase. If you make it smaller, it will slow the speed down.

The requestAnimationFrame() function schedules the animate() function to run whenever the browser is ready to paint the window/screen with new content. The animate() function also calls the requestAnimationFrame() function to schedule the next screen update.

You can also set the path to an ellipse. You can do that by changing the two radii: horizontal radius and vertical radius.

The HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Test</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          .circle {
            display: block;
            background: black;
            border-radius: 100%;
            height: 100px;
            width: 100px;

            background: radial-gradient(circle at center,#31f541, #000);
          }
          .container {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .circle-image{
              z-index: 2; 
              position: absolute; 
              margin-left: 50%; 
              margin-top: 50vh; 
              border-radius: 50%;
          }
      </style>
  </head>
  <body>
      <div class="container">
          <img class="circle-image" src="blue.png"> 
          <figure class="circle"></figure>
      </div>
  </body>
</html>

You can find the blue circle image here

It's a very small amount of code. We set the styles of the figure element and the image. For the circle class, we give it a block display, a black background, and a round border.

The height and width are set equal for it to have the same diameter throughout. This way, we can make it appear like a circle. The radial-gradient function sets the color at the center to start with light green then end with black in a gradient fashion.

Read more about radial-gradient here at the MDN documentation. This gradient effect gives it a spherical look. We give the container class a 100% width, a height of 100 view height, and a flex display. We also justify the content and align everything to the center. This centers our content in the container div horizontally and vertically.

The circleimage is given a z-index of 2 to overlay it over everything just in case the sphere overlaps with the image due to responsiveness. The margins are set to make it fit at almost the center. Again, the border-radius is set to 50% to give it a circular look of a rotating object.

Our 'sphere' is not perfectly at the center of the rotation if you are keen. You can fine-tune it using your styling.

The full code

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Test</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
          .circle {
              display: block;
              background: black;
              border-radius: 100%;
              height: 100px;
              width: 100px;

              background: radial-gradient(circle at center,#31f541, #000);
          }
          .container {
              width: 100%;
              height: 100vh;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .circle-image{
              z-index: 2;
              position: absolute;
              margin-left: 50%;
              margin-top: 50vh;
              border-radius: 50%;
          }
      </style>
  </head>
  <body>
    <div class="container">
        <img class="circle-image" src="blue.png">
        <figure class="circle"></figure>
    </div>
    <script>
      // The image variable
      let image = document.querySelector("img");
      // 90 degrees
      let angle = Math.PI / 2;
      //variable to store the previous time the animate funuction last fired
      let prevTimeArg;
      function animate(currentTimeParam){

          if (prevTimeArg != null) {
              angle += (currentTimeParam - prevTimeArg) * 0.004;
          }
          // Setting the previous time to the time the function currently fires
          prevTimeArg = currentTimeParam ;
          image.style.top = (Math.sin(angle) * 150) + "px";
          image.style.left = (Math.cos(angle) * 150) + "px";
          requestAnimationFrame(currentTime => animate(currentTime));
      }
      requestAnimationFrame(animate);
    </script>
  </body>
</html>

Applications for this

The most suitable areas for using these, that is after modifying it, include a circular progress indicator, a rotor in an aircraft/drone in a game, etc. These ideas are just some of many things you can do if you are creative and manipulate this idea well enough.

A nice way to practice is with a solar system animation such as the one found here. Note that that guide uses this concept on a canvas unlike what we did. It should however serve as a great example even if you don't want to use canvases.

Conclusion

In this guide, we first looked at how the sin and cos functions are used in circles. Next, we created a simple script in JavaScript to show the creation of an animation.

Finally, we looked at embedding the script in an HTML file. I hope you get the chance to creatively build onto this simple program in a fun way.

Have a great coding adventure!