Jumping Triangles
How do I make an jumping triangles?
What is a jumping triangles? How do you make a jumping triangles? This script and codes were developed by Anwesh Mishra on 08 January 2023, Sunday.
Jumping Triangles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jumping Triangles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="c1" width="1000px" height="600px">
</canvas> <script src="js/index.js"></script>
</body>
</html>
Jumping Triangles - Script Codes CSS Codes
#c1 { border:1px solid white;
}
Jumping Triangles - Script Codes JS Codes
var canvas = document.getElementById('c1')
var context = canvas.getContext('2d')
let setScreenSize = ()=>{ canvas.width = window.innerWidth/2 canvas.height = window.innerHeight context = canvas.getContext('2d')
}
setScreenSize()
window.onresize = () => { setScreenSize() initJumpingTriangles()
}
class JumpingTriangle { constructor(x,y,size,color) { this.x = x this.y = y this.deg = 0 this.color = color this.dir = 0 this.size = size } draw() { context.fillStyle=this.color context.save() context.translate(this.x,this.y) context.rotate(this.deg*Math.PI/180) context.beginPath() context.moveTo(-this.size/2,this.size/2) context.lineTo(this.size/2,this.size/2) context.lineTo(0,-this.size/2) context.fill() context.restore() } update() { this.y-=this.dir*(canvas.height/12) this.deg+=Math.abs(this.dir)*30 if(this.deg%180 == 0 && this.dir!=0) { this.dir *=-1; if(this.dir == 1) { this.dir = 0 } } } handleTap(x,y) { let condition = x>=this.x-this.size/2 && x<=this.x+this.size/2 && y>=this.y-this.size/2 && y<=this.y+this.size/2 if(condition) { this.dir = 1 } return condition }
}
var jumpingTriangles = []
var initJumpingTriangles = () => { jumpingTriangles = [] var colors = ["#FF6F00","#33691E","#FDD835","#880E4F","#B2FF59"] var gap = (2*canvas.width)/(3*colors.length+1),x = gap, y = canvas.height/2 colors.forEach((color)=>{ jumpingTriangles.push(new JumpingTriangle(x,y,gap,color)) x+=(gap*3)/2 })
}
initJumpingTriangles()
var time = 0
var bgColors = ["#009688","#03A9F4","#00BCD4","#E91E63"],index = 0
const draw = ()=>{ context.clearRect(0,0,canvas.width,canvas.height) context.fillStyle=bgColors[index] context.fillRect(0,0,canvas.width,canvas.height) if(time%20 == 0) { index++ index%=3 } jumpingTriangles.forEach((jumpingTriangle)=>{ jumpingTriangle.draw() jumpingTriangle.update() }) time++
}
canvas.onmousedown = (event)=>{ var x = event.pageX,y = event.pageY jumpingTriangles.forEach((jumpingTriangle)=>{ jumpingTriangle.handleTap(x,y) })
}
setInterval(draw,100)
Developer | Anwesh Mishra |
Username | Anwesh43 |
Uploaded | January 08, 2023 |
Rating | 3 |
Size | 2,350 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
MovingBall | 2,105 Kb |
EllipticalSwitch | 2,077 Kb |
TumblingPins | 2,187 Kb |
SettingButton | 2,255 Kb |
SeeSaw | 2,195 Kb |
Fractal Spirograph | 2,501 Kb |
Clapperboard | 2,540 Kb |
Html5CanvasPingPong | 2,033 Kb |
A Pen by Anwesh Mishra | 1,524 Kb |
Material Boxes Animation | 2,257 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by Jess | Jessamyne | 5,100 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!