DEV Community: nipundinuranga

Random Module In Python

nipundinuranga — Mon, 22 Dec 2025 15:37:05 +0000

What is the Random Module ?

The random module in Python is like a magic toolbox that helps you work with randomness! It allows you to create random numbers, pick random items from a list, or even shuffle things around.

Think of it like this: If you want to roll a virtual dice, pick a winner from a list of names, or create a surprise by mixing things up, the random module is there to help! You just tell it what kind of random thing you need, and it does the job for you.

This will print a random number between 1 and 10 every time you run the code!

Why Use the random Module?

The random module is super handy whenever you need a little unpredictability in your code. It's like having a surprise button! You can use it for:

✨ Games: Want to roll dice, shuffle cards, or make a character appear in a random spot? The random module makes it happen!

✨ Choosing Random Items : Need to pick a random winner for a giveaway or choose a random question from a quiz? This module has you covered.

✨ Simulations : Sometimes, we want to mimic real-world scenarios where things happen by chance, like flipping a coin or predicting weather patterns. The random module helps create that "real-life" randomness.

✨ Generating Random Data : Whether it's a random password, a number for testing, or even random colors for an art project, this module does it all.

Basic Functions of the random Module

1. random.randint(a,b)

This gives you a random number between a and b (including both). It's like rolling a dice where you can choose the range of numbers.

2. random.choice(list)

Want to randomly pick an item from a list? This function does exactly that! It's great for picking a random winner or choosing a random option.

3. random.random()

This gives you a random float (decimal number) between 0 and 1. It's like rolling a super tiny dice where you always get a number between 0.0 and 1.0.

4. random.shuffle(list)

Want to mix things up? This function shuffles the items in a list, changing the order around randomly. Perfect for shuffling a deck of cards or rearranging a list.

Tips & Tricks for the random Module

1.random.seed() for Repeatable Results

If you need the same "random" results every time (for testing), use random.seed().This makes the random output predictable.

2.random.uniform() for Decimals

Need a random decimal between two numbers? Use random.uniform()!

Tips & Tricks for the random Module

3.random.sample() to Pick Multiple items

Want to pick multiple random items without repeating?
Use random.sample().

The Ultimate Guide to High-Performance Web Animations

nipundinuranga — Mon, 17 Nov 2025 10:07:18 +0000

If you’re looking to bring your website to life with smooth, high-performance animations, look no further than the GreenSock Animation Platform (GSAP) is a powerful JavaScript library for creating high-performance animations. It allows you to animate CSS properties, SVG, canvas, and more with ease. Below is a step-by-step guide to using GSAP:

Introduction to GSAP

GSAP, or the GreenSock Animation Platform, is a powerful JavaScript library for creating high-performance animations. It is widely used by web developers and designers to animate HTML, CSS, SVG, and canvas elements. GSAP is known for its speed, flexibility, and ease of use, making it a popular choice for both simple and complex animations.

Why Use GSAP?

Performance: GSAP is optimized for performance, ensuring smooth animations even on low-powered devices.
Cross-Browser Compatibility: It works seamlessly across all major browsers, including mobile browsers.
Ease of Use: The API is intuitive and easy to learn, allowing developers to create animations quickly.
Rich Features: GSAP offers a wide range of features, including timelines, easing functions, and plugins for advanced animations.
Community and Support: With a large community and extensive documentation, finding help and resources is easy.

Getting Started with GSAP

Step 1: Setting Up Your Environment

To start using GSAP, you need to include the library in your project. You can do this by either downloading it or linking to a CDN.

Option 1: Using a CDN

Add the following script tag to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Option 2: Using npm

npm install gsap

Once installed, you can import it into your JavaScript files:

import { gsap } from "gsap";

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>GSAP Animation Example</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>

</head>

<body>

    <div class="box"></div>

    <script src="script.js"></script>

</body>

</html>

Option 2: Downloading GSAP
Go to the GreenSock website.
Download the latest version of GSAP.
Include the gsap.min.js file in your project.




## **Log GSAP version in the console**

console.log(gsap);               // to make sure it works
console.log(gsap.version);       // log version



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<script>
    console.log(gsap);               // now it works
    console.log(gsap.version);       // log version
</script>

</body>
</html>

Step 2: Creating Your First Animation

Now that you have GSAP set up, let’s create a simple animation. We will animate a box that moves across the screen.

HTML Structure

Add a simple box to your HTML:
<div class="box"></div>

CSS Styles

Add some basic styles for the box:

.box {

    width: 100px;

    height: 100px;

    background-color: red;

    position: absolute;

    top: 50px;

    left: 50px;

}

JavaScript Animation
Now, let’s animate the box using GSAP. Create a script.js file and add the following code:

gsap.to(".box", {

    duration: 2,

    x: 300,

    rotation: 360,

    scale: 1.5,

    ease: "power1.inOut"

});

Explanation of the Code

gsap.to(): This method animates the properties of the selected element(s) to the specified values.

.box : The target element we want to animate.
duration: The duration of the animation in seconds.
x: The horizontal position to move the box to (300 pixels to the right).
rotation: The rotation of the box in degrees.
scale: The scale factor to enlarge the box.
ease: The easing function that controls the acceleration of the animation.

Core Methods

Here are the three primary methods you'll use to create animations:

gsap.to() : Animates an element to a specific state.

gsap.to("#element", { duration: 1, opacity: 0 });

This fades out the element by reducing its opacity to 0 over 1 second.

gsap.from() : Animates an element from a specific state to its current state.

gsap.from("#element", { duration: 1, scale: 0 });

This scales the element from 0 (invisible) to its normal size.

gsap.fromTo() : Animates an element from one state to another. javascript

gsap.fromTo("#element", { opacity: 0 }, { duration: 1, opacity: 1 });

This fades in the element by transitioning its opacity from 0 to 1.

Advanced Features of GSAP

Easing Functions

GSAP provides a variety of easing functions to control the speed of your animations. Some common easing functions include:
power1.in
power1.out
bounce
elastic

You can apply easing to your animations like this in your gsap.js directory:

gsap.to(".box", {

    duration: 2,

    x: 300,

    ease: "bounce.out"

});

ScrollTrigger Plugin

One of GSAP's most popular plugins is ScrollTrigger , which enables scroll-based animations. To use it, you need to register the plugin first.

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to("#box", {
  scrollTrigger: {
    trigger: "#box",
    start: "top center", // When the top of the element hits the center of the viewport
    end: "bottom center", // When the bottom of the element hits the center of the viewport
    scrub: true, // Smoothly animates as you scroll
  },
  x: 300,
  rotation: 360,
});

[Boost]

nipundinuranga — Sun, 06 Apr 2025 01:38:51 +0000

Mads Stoumann

Apr 5 '25

How To Create Gauges in CSS

#showdev #css #webdev #tutorial

Comments 12

6 min read

Sphere Packing Visualization with Three.js

nipundinuranga — Mon, 10 Mar 2025 19:31:09 +0000

Overview

This project is a visually stunning 3D visualization of sphere packing , built using Three.js , a powerful JavaScript library for WebGL-based 3D graphics. The scene features multiple spheres that dynamically interact with lighting and user input, creating an immersive experience.

The "Sphere Packing" visualization demonstrates how spheres can be arranged in a 3D space while showcasing interactive features like random color generation and animation control. It's perfect for learning the basics of Three.js or as a foundation for more advanced 3D projects.
Features

✨ *Interactive Spheres *
Hundreds of spheres are rendered in a 3D space, simulating a sphere-packing arrangement. Each sphere interacts with dynamic lighting for a realistic effect.

🎨 *Random Color Generation *
Click the "Random colors" button to generate vibrant, randomized colors for the spheres and their lighting. This creates a dynamic and visually appealing effect.

💡 *Dynamic Lighting *
A directional light source enhances the 3D appearance of the spheres, reacting to color changes and providing depth to the scene.

🔄 *Animation Control *
Click anywhere outside the button to pause or resume the animation, giving users control over the visual experience.

📱 *Responsive Design *
The canvas automatically adjusts to fit the browser window, ensuring a seamless experience across devices.
Technologies Used

🚀** Built With** : Three.js, HTML5 Canvas, CSS, JavaScript (ES6 Modules)

Three.js : For rendering 3D graphics and animations.
HTML5 Canvas : As the rendering surface for the WebGL context.
CSS : For styling the UI and layout.
JavaScript (ES6 Modules) : For implementing interactivity and animations.

🔗 Live Demo : Insert Live Demo Link Here

Let's Animate like a Magic

nipundinuranga — Tue, 06 Aug 2024 08:49:12 +0000

I Tried to Animate Netflix logo Without Motion Graphic software.

Source Code - github

Modern Clock Animation

nipundinuranga — Sun, 04 Aug 2024 10:06:35 +0000

I Tried to recreate Modern Clock Animation .

Source Code

CSS Button Animation

nipundinuranga — Tue, 30 Jul 2024 02:40:57 +0000

I Tried to recreate CSS Modern Button animation. click here to explore source code