FYFIRMAN Long Living NotesAboutAboutContact ↗Contact ↗ (opens in a new tab)
GitHubGitHub (opens in a new tab) (opens in a new tab)
  • Introduction
  • 📝 Documentation Guidelines
      • Weird Function Class
      • Curated Eslint Problem
      • How to Write React Props
      • Non Reserved Enum Problem
      • TypeScript Assigning Key to Window
      • TypeScript Narrowing Problem
      • TypeScript Nightmare No Index Signature
      • TypeScript Red Problem
      • Jest Frontend
      • Zustand Test
    • Zod
    • Caching in Frontend with React Query
    • Design Mode
    • Frontend Utility Tools
    • Thundering Herd Problem
      • Animation Reference
      • Object Collision
      • Server Action
      • Curated Problem
      • Cleaner Output in Npm
      • How to Free up the Memory
      • Nestjs Snippets
      • Nestjs Testing
        • Class Validator Snippets
      • Curated Golang Library
      • Golang Beginner Snippets
      • Golang Learning Resource
      • Golang Snippets Print Any Json Request Response
      • Golang Unit Test
      • How to Structure Your Project in Golang
      • Venv
      • 1 on 1 Relationship Vs Single Table
      • Aurora Query Plan Management
      • Database Scaling Cheat Sheet
      • Find Optimal Indexing
      • Kill Existing Processes or Transactions
      • Optimizing Query Postgresql
      • Pages in Postgresql
      • Postgre SQL Constraint Checking Behavior Deferred or Immediate
      • Postgresql Dump Snippets
      • Postgresql Setup
      • Tuning Postgresql
      • Useful Information Schema Query
      • Why Indexing Can Make Db Faster
    • Authorization Models
    • Backend Roadmap
    • Dbeaver Show Password
    • How to Build Your Own Auth
    • Sqlite
    • Uuid Version
      • Mysql Dump Snippets
      • Install Composer
      • PHP Issue
      • PHP Snippet
      • Most Popular Libraries in Rust
      • System Design Resource
      • Twitter System Design
    • GitLab CI: Server Deployment Script
      • AWS RDS
      • GCP Service Account Key
      • Docker Snippets
      • Logql Snippet Collection
    • Netdata
    • Portainer
    • Watchtower
    • Tunneling
    • Termux
    • Setup Certbot in Docker
    • Observability White Paper
    • How to Monitor Memory Usage of EC2
    • How to Create HTTPS in Docker Environment
    • API Testing with Hey
    • Alternative Infrastructure Tools
    • Exclude File in Git without Gitignore
    • Git Snippet
    • Rewriting Git Author
    • Cto Vp Hoe Difference
    • Currated Scalability Blog
    • Engineering Career Levels
    • How to Get Promotions
    • Mac Configuration
    • Mac Shortcut
    • Most Useful Apps on macOS
    • Toggle Fn on Mac
    • Binary Search Approach
    • Books Wishlist
    • Chrome Shortcut
    • Code for Kids
    • Curated Open Source Tools
    • Exploring Screenshot to Code
    • Google Sheets API
    • I Dont Know yet List
    • Investigating Disk Full
    • Password Protection Website
    • Terminal Tooling to Improve Productivity
    • Vim Cheatsheet
    • Vscode Extention
    • Vscode Shortcut
      • Bitcoin Maximalist Perspective
      • Gender Perception Research
    • Autobahn Bookmark
    • Autobahn Frontend Snippets
    • Things I Should Do When Migrate Fy Infra
    • Langflow
    • Ads Software
    • Business Terms
    • Business Things That I Need to Know
    • Leadership Tools or Framework
      • Remote Team Ownership
      • Team Proposal Guidelines
    • Naming Variables
    • Refactoring Code
      • Readme Aesthetics
      • False Sharing in Multithreading
      • Railway Oriented Programming
      • Building Landing Pages with Ai
      • Dynamic Llms Txt Generator
      • Improving Cursor Workflow
      • Llamacoder Announcement
      • Wren Ai SQL Agent
      • Delegation Frameworks
      • Saas Acquisition Journey
      • Saas Payment Models
      • Figma to Shadcn Plugin Guide
      • Menu Visualizer App
      • Shadcn Form Builder
      • Startup Tech Stack
      • Vercel Nvidia Hackathon Projects
      • Manly Backpack Recommendations
      • Tax Planning Tanah Warisan
      • Learn to Prioritize
      • Pareto Principle Skills
      • Analyzing Malicious Code a Technical Deep Dive into Info Stealer Detection
      • Mobile Security Malware Warning
      • Clickhouse Data Warehouse
      • Kafka Use Cases
      • Postgres for Everything
      • Postgres Recommendation
      • Social Platform Infrastructure Costs
      • Vps Provider Comparison Indonesia

On This Page

  • Object Collision between Two Rectangle
  • Ref
Feedback? Reach out me in X (opens in a new tab)
🎨 Frontend
animation
Object Collision

Object Collision

Object Collision between Two Rectangle

if (
  rect1.x < rect2.x + rect2.width ||
  rect1.x + rect1.width < rect2.x ||
  rect1.y < rect2.y + rect2.heigth || 
  rect1.y + rect1.height < rect2.y
){
  // no collision
} else {
  // collision
}
 

Ref

  • https://gsap.com/community/forums/topic/35227-collision-detection/ (opens in a new tab)
  • https://www.youtube.com/watch?v=r0sy-Cr6WHY (opens in a new tab)
Animation ReferenceServer Action

Firmansyah Yanuar