https://github.com/boobeh123/on-demand-background-picker

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
https://github.com/boobeh123/on-demand-background-picker

canvas-api css3 html5 javascript

Last synced: 4 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/boobeh123/on-demand-background-picker
• Owner: boobeh123
• Created: 2022-05-21T20:39:53.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-09-21T18:58:39.000Z (over 2 years ago)
• Last Synced: 2025-01-06T06:44:09.873Z (5 months ago)
• Topics: canvas-api, css3, html5, javascript
• Language: JavaScript
• Homepage: https://boobeh123.github.io/On-Demand-Background-Picker/
• Size: 9.68 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readME.md

Awesome Lists containing this project

README

        
[On-Demand-Background-Picker](https://github.com/boobeh123/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](odbpdemo.gif)

## Features

* Objects can collide against the edge of a screen

* Objects can collide against other objects

* Object size, color, and speed can change

## Technologies

![HTML](https://img.shields.io/badge/-HTML-important?logo=html5)![CSS](https://img.shields.io/badge/-CSS-salmon?logo=css3)![JavaScript](https://img.shields.io/badge/-JAVASCRIPT-333?logo=javascript)![Git](https://img.shields.io/badge/-GIT-orange?logo=git)

### 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