Exnrt Logo
  • Home
  • Technology
    • Artificial Intelligence
    • WordPress
  • Programming
    ProgrammingShow More
    Mistral AI Model
    Mistral-7B Instruct Fine-Tuning using Transformers LoRa
    19 1
    Hugging Face Website
    Hugging Face Transformers Pipeline, what can they do?
    15 1
    AI generated images using SDXL-Lightning huggingface
    SDXL-Lightning model using hugging face Transformers
    14 1
    Gemma AI Model
    Finetune Gemma Models with Transformers
    11 1
    HTML Quiz App
    Quiz App Using HTML, CSS, and JavaScript
    9 1
  • Business
    • Ads
    • SEO
  • AI Tools
    • AI Chatbot For Education
    • Ask a Question
    • News Title Generator
  • My Feed
    • My Interests
    • My Saves
    • History
Notification
Sign In
ExnrtExnrtExnrt
Font ResizerAa
  • Artificial Intelligence
  • Technology
  • Business
  • Ads
  • SEO
Search
  • Blog
  • Ads
  • Programming
  • Technology
  • Artificial Intelligence
  • WordPress
  • SEO
  • Business
  • Education

Top Stories

Explore the latest updated news!
Fine Tuning Siglip2 a ViT on Image Classification Task.

Fine Tuning Siglip2 on Image Classification Task

6
AI-Generated-Image-using-Flux-1

How to Fine-Tune Flux.1 Using AI Toolkit

8
microsoft/Phi-3-mini-128k-instruct

How to fine-tune Microsoft/Phi-3-mini-128k-instruct

12

Stay Connected

Find us on socials
248.1k Followers Like
61.1k Followers Follow
165k Subscribers Subscribe
ProgrammingBlog

Text Particles in Motion with Cursor Interaction Using JS

Ateeq Azam
Last updated: October 11, 2023 8:15 pm
By Ateeq Azam Add a Comment 3
Share
Text Particles Using JavaScript
Text Particles Using JavaScript
SHARE

This project about creating a visually engaging and interactive web-based animation or art installation. In this project, the particles are used to create text characters, and their movement and behavior are influenced by the position and movement of the cursor.

Table of Content
Key PointsHtml CodeJavaScript Code:Use and Potential

Key Points

Key elements and concepts in this project include:

  1. Particles: The individual elements of the animation are text characters, forming a dynamic and visually appealing representation.
  2. Cursor Responsiveness: The particles react to the cursor’s position and movement. This interaction creates an engaging and dynamic visual effect.
  3. Animation: The text particles are animated in response to the cursor, making the project visually interesting and interactive.
  4. Artistic Expression: The project may be an art form, a creative experiment, or a visual representation of a concept, and it could serve various artistic and aesthetic purposes.

Html Code

HTML
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>ParticleSlider</title>
  </head>
  <body id="particle-slider">
    <span>exnrt.com</span>
    <canvas id="scene"></canvas>
    <input id="copy" type="text" value="e x n r t . c o m" />
    <script src="script.js" ></script>
  </body>
</html>

JavaScript Code:

JavaScript
var canvas = document.querySelector("#scene"),
  ctx = canvas.getContext("2d"),
  particles = [],
  amount = 0,
  mouse = {x:0,y:0},
  radius = 0.5;

var colors = ["#ff0000","#000000", "#FFB03B","#B64926", "#8E2800"];

var copy = document.querySelector("#copy");

var ww = canvas.width = window.innerWidth;
var wh = canvas.height = window.innerHeight;

function Particle(x, y) {
    this.x = Math.random() * ww;
    this.y = Math.random() * wh;
    this.dest = {
      x: x,
      y: y
    };
    this.r = Math.random() * 3 + 1; // Adjust the size range here (min: 1, max: 4)
    this.vx = (Math.random() - 0.5) * 20;
    this.vy = (Math.random() - 0.5) * 20;
    this.accX = 0;
    this.accY = 0;
    this.friction = Math.random() * 0.05 + 0.94;
  
    this.color = colors[Math.floor(Math.random() * 6)];
  }

Particle.prototype.render = function() {


  this.accX = (this.dest.x - this.x)/1000;
  this.accY = (this.dest.y - this.y)/1000;
  this.vx += this.accX;
  this.vy += this.accY;
  this.vx *= this.friction;
  this.vy *= this.friction;

  this.x += this.vx;
  this.y +=  this.vy;

  ctx.fillStyle = this.color;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
  ctx.fill();

  var a = this.x - mouse.x;
  var b = this.y - mouse.y;

  var distance = Math.sqrt( a*a + b*b );
  if(distance<(radius*70)){
    this.accX = (this.x - mouse.x)/100;
    this.accY = (this.y - mouse.y)/100;
    this.vx += this.accX;
    this.vy += this.accY;
  }

}

function onMouseMove(e){
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

function onTouchMove(e){
  if(e.touches.length > 0 ){
    mouse.x = e.touches[0].clientX;
    mouse.y = e.touches[0].clientY;
  }
}

function onTouchEnd(e){
mouse.x = -9999;
mouse.y = -9999;
}

function initScene(){
  ww = canvas.width = window.innerWidth;
  wh = canvas.height = window.innerHeight;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.font = "bold "+(ww/10)+"px sans-serif";
  ctx.textAlign = "center";
  ctx.fillText(copy.value, ww / 2, wh / 2 * 0.6);

  var data  = ctx.getImageData(0, 0, ww, wh).data;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.globalCompositeOperation = "screen";

  particles = [];
  for(var i=0;i<ww;i+=Math.round(ww/150)){
    for(var j=0;j<wh;j+=Math.round(ww/150)){
      if(data[ ((i + j*ww)*4) + 3] > 150){
        particles.push(new Particle(i,j));
      }
    }
  }
  amount = particles.length;

}

function onMouseClick(){
  radius++;
  if(radius ===5){
    radius = 0;
  }
}

function render(a) {
  requestAnimationFrame(render);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < amount; i++) {
    particles[i].render();
  }
};

copy.addEventListener("keyup", initScene);
window.addEventListener("resize", initScene);
window.addEventListener("mousemove", onMouseMove);
window.addEventListener("touchmove", onTouchMove);
window.addEventListener("click", onMouseClick);
window.addEventListener("touchend", onTouchEnd);
initScene();
requestAnimationFrame(render);

Use and Potential

The code i provided is a JavaScript-based project that creates an interactive and visually engaging animation using text particles that respond to the cursor’s movement. This kind of project can have various use cases and potential users, including:

  1. Web Developers and Designers: Developers and designers might use this code as a source of inspiration or a starting point for creating interactive and artistic elements on websites or web applications. They can adapt and customize the code to add an interactive component to their web projects.
  2. Digital Artists: Digital artists can use this code to create unique and visually appealing digital artworks or installations. It allows them to experiment with text and interactivity, adding a dynamic element to their creations.
  3. Educators: Educators teaching web development, creative coding, or interactive design might use this project as an example to illustrate JavaScript, HTML, and canvas-based animations. It can serve as a teaching tool to help students understand the principles of interactive web development.
  4. Creative Coders: Those who enjoy creative coding as a hobby or creative outlet may use this code to experiment with interactive visual art. They can modify the code to create unique visual effects and animations.
  5. Art Galleries and Exhibitions: Art galleries or exhibitions interested in interactive digital installations can potentially use a customized version of this project to engage visitors and create immersive experiences.
  6. Interactive Storytellers: Storytellers and creators of digital narratives may incorporate this kind of interactive animation into their storytelling to engage their audience in a unique way.
  7. UI/UX Designers: User interface and user experience (UI/UX) designers could find inspiration in this project for creating engaging and interactive user interfaces or components within applications.

Ultimately, the project’s users can vary widely, from developers and designers looking to enhance web experiences to digital artists and educators seeking creative and educational applications for the code.

TAGGED:Programming
Share This Article
Facebook Twitter Copy Link Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Leave a comment
Subscribe
Login
Notify of
guest

guest

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

You Might Also Like

Fine Tuning Siglip2 a ViT on Image Classification Task.
Fine Tuning Siglip2 on Image Classification Task
AI-Generated-Image-using-Flux-1
How to Fine-Tune Flux.1 Using AI Toolkit
microsoft/Phi-3-mini-128k-instruct
How to fine-tune Microsoft/Phi-3-mini-128k-instruct
AI Generated: A professional real llama looking like a hacker in a dark lab with light yellow lights
How to Fine-tune Meta Llama-3 8B

Other Posts

Google Search Engine
Create a GDPR consent message by 16 January 2024
Ads Blog
Ways to make money from ChatGPT
How to Earn $100 Daily Using ChatGPT
Business Artificial Intelligence Blog Technology
Computer Vision Image Colors
30 Best Computer Vision Projects For Students & Beginners
Artificial Intelligence Blog
microsoft/Phi-3-mini-128k-instruct
How to fine-tune Microsoft/Phi-3-mini-128k-instruct
Artificial Intelligence Blog

Latest Posts

Uncover the Latest stories that related to your interest!
Fine Tuning Siglip2 a ViT on Image Classification Task.
Artificial IntelligenceBlog

Fine Tuning Siglip2 on Image Classification Task

April 14, 2025

At Exnrt.com, we believe in empowering computer science students with the knowledge and skills they need to succeed in their careers. Our goal is to provide accessible and engaging tutorials that help students and professionals develop their skills and advance their careers.

  • Categories:
  • Business
  • Technology
  • Ads
  • SEO

Quick Links

  • Blog
  • Technology
  • Artificial Intelligence
  • Business

About US

  • About Us
  • Contact Us
  • Privacy Policy

Copyright © 2024 All Rights Reserved – Exnrt by ateeq.pk

wpDiscuz
Welcome Back!

Sign in to your account

Register Lost your password?