Skip to content

A web application that uses the Canvas API to replicate a screensaver that bounces objects off the edge of the screen. - WARNING: FLICKERING COLORS! - Mobile-Friendly! - Live on Github Pages / Link in repo

Notifications You must be signed in to change notification settings

boobeh123/On-Demand-Background-Picker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 

Repository files navigation

On-Demand-Background-Picker

Description

A web application that draws 2D objects, updates the position of the object, and animates the frames to move the object. This project uses the built-in Canvas API to create 2D graphics.

Demo

demo

Features

  • Objects can collide against the edge of a screen
  • Objects can collide against other objects
  • Object size, color, and speed can change

Technologies

HTMLCSSJavaScriptGit

What did you learn?

  • HTML: The canvas tag
  • CSS: A better understanding of viewport and absolute positioning
  • JavaScript: Canvas API, circle collision algorithm, and practice with object-oriented programming
  • Git: Version control of a project start to finish

Optimizations

  • I want to be able to clear my canvas completely. This will allow me to switch between trail and ball animations without refreshing the page.
  • I don't know why spam clicking an animation eventlistener increases the velocity of the ball objects.

Do you want to build this project?

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice

About

A web application that uses the Canvas API to replicate a screensaver that bounces objects off the edge of the screen. - WARNING: FLICKERING COLORS! - Mobile-Friendly! - Live on Github Pages / Link in repo

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published