Light

robertcoopercode / animated-grid-lines Goto Github PK

View Code? Open in Web Editor NEW

86.0 86.0 16.0 5.72 MB

A react component that renders an interactive grid with lines that shoot out from a user's cursor on hover.

Home Page: https://robertcoopercode.github.io/animated-grid-lines

License: MIT License

JavaScript 16.75% HTML 1.82% TypeScript 81.43%

animation canvas react typescript

animated-grid-lines's Introduction

Hello, welcome to my GitHub profile

Here are a few things that describe me:

💼 I'm currently working full-time at Basedash as a full-stack developer
📝 I maintain a web development blog at robertcooper.me
📱 I like to build apps of my own. Two examples include Tech Job Hunt and Meat Journal.
⌨️ I spend most of my time writing TypeScript on both the front-end and back-end
💬 The two social platforms I'm active on are Twitter and LinkedIn, where I mostly post about web development. Feel free to connect and reach out to me there.

animated-grid-lines's People

Contributors

Stargazers

Watchers

Forkers

kartik-nighania davidobodo cmedinadeveloper katmaldon ashwanth1109 jpelpuo hungdoansy yuchiu jancarlohendriks pavanteja90 volhodav liqudefi singularts teacherstrange nestordgs funfox2906

animated-grid-lines's Issues

Console.log in throttle

Hi Robert,

I appreciate your component. However, I noticed there are console.logs present in throttle.ts. I am uncertain if they were left there on purpose, but I thought it was important to bring to your attention.

Thank you!

Lines disappear before they fully leave the grid

I noticed that lines get destroyed when their "head" touches the edge of the grid. It might look better if they instead are allowed to fully leave the canvas before being destroyed.

A simple fix for this would be to virtually extend the grid beyond the edge of the canvas, by the length of the lines. In other words, don't destroy the line until the head is 5 units outside the canvas. Should be a 4-line change here:

animated-grid-lines/src/GridRenderer.ts

Lines 201 to 214 in 0307554

 // Check if end of canvas has been reached 

 const lastCoord = lineCoords[lineCoords.length - 1]; 

 const xPos = lastCoord[0]; 

 const yPos = lastCoord[1]; 

 if ( 

 xPos >= this.canvas.width || 

 xPos <= 0 || 

 yPos >= this.canvas.height || 

 yPos <= 0 

 ) { 

 this.lines.splice(index, 1); 

 } 

 } 

 }

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

	// Check if end of canvas has been reached
	const lastCoord = lineCoords[lineCoords.length - 1];
	const xPos = lastCoord[0];
	const yPos = lastCoord[1];
	if (
	xPos >= this.canvas.width \|\|
	xPos <= 0 \|\|
	yPos >= this.canvas.height \|\|
	yPos <= 0
	) {
	this.lines.splice(index, 1);
	}
	}
	}