commit e45fc2231d3b186d4ba4e6d17b4a5e1727f33f24
parent 22532c740abe0d6939a3458d06f5071515669165
Author: Ryan Jeffrey <ryan@ryanmj.xyz>
Date: Thu, 17 Feb 2022 23:57:24 -0800
Support for my backgrounds
Diffstat:
11 files changed, 218 insertions(+), 6 deletions(-)
diff --git a/.gitignore b/.gitignore
@@ -336,4 +336,30 @@ build-iPhoneSimulator/
# Used by RuboCop. Remote config files pulled in from inherit_from directive.
# .rubocop-https?--*
-# End of https://www.toptal.com/developers/gitignore/api/rails,ruby-
\ No newline at end of file
+# End of https://www.toptal.com/developers/gitignore/api/rails,ruby
+
+
+# Created by https://www.toptal.com/developers/gitignore/api/yarn
+# Edit at https://www.toptal.com/developers/gitignore?templates=yarn
+
+### yarn ###
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+!.yarn/cache
+
+# and uncomment the following lines
+# .pnp.*
+
+/app/javascript/generated/
+/app/assets/images
+/public/favicon32x32.ico
+# End of https://www.toptal.com/developers/gitignore/api/yarn
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -1,4 +1,3 @@
-
:root {
--dodger_blue4:#104e8b;
--dark_orchid2:#b23aee;
@@ -134,7 +133,7 @@ nav img {
.twin {
border: 1.5em solid transparent;
- border-image: url(../res/2008.png) 19 12 round;
+ border-image: url(../res/2008.webp) 19 12 round;
padding: 0;
/* positioning */
margin: 0 auto;
@@ -205,7 +204,6 @@ h2 {
body {
background-color: #2d6189;
- /*background-image: url('../res/back.jpg');*/
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
background-size: cover;
diff --git a/app/javascript/backs.ts b/app/javascript/backs.ts
@@ -0,0 +1,51 @@
+let canvas: HTMLCanvasElement;
+let context: CanvasRenderingContext2D;
+
+let bkgCallback: (canvasCtx: HTMLCanvasElement,
+ contex2d: CanvasRenderingContext2D) => void;
+
+export function initBackground() {
+ let newCanvas: HTMLCanvasElement = document.createElement('canvas');
+ newCanvas.setAttribute("id", 'bkg-canvas');
+ newCanvas.style['position'] = 'fixed';
+ newCanvas.style['left'] = '0';
+ newCanvas.style['right'] = '0';
+ newCanvas.style['top'] = '0';
+ newCanvas.style['z-index' as any] = '-1';
+ newCanvas.width = window.innerWidth;
+ newCanvas.height = window.innerHeight;
+ document.body.style.backgroundColor = "black";
+
+ let tmpCanvas = document.createElement('canvas');
+ let tmpContext = tmpCanvas.getContext('2d');
+ tmpCanvas.width = window.innerWidth;
+ tmpCanvas.height = window.innerHeight;
+ document.body.style.backgroundColor = "black";
+
+ document.body.appendChild(newCanvas);
+
+ canvas = <HTMLCanvasElement>document.getElementById('bkg-canvas');
+ context = canvas.getContext('2d');
+}
+
+function doBackground() {
+ context.clearRect(0, 0, canvas.width, canvas.height);
+
+ bkgCallback(canvas, context);
+
+ context.fill();
+ context.closePath();
+ context.drawImage(canvas, 0, 0, canvas.width, canvas.height);
+}
+
+export function setBkgFunc(callback: (canvasCtx: HTMLCanvasElement,
+ contex2d: CanvasRenderingContext2D) => void) {
+ bkgCallback = callback;
+ doBackground();
+}
+
+window.addEventListener('resize', _ => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ doBackground();
+});
diff --git a/app/javascript/movementInSquares.ts b/app/javascript/movementInSquares.ts
@@ -0,0 +1,70 @@
+import {initBackground, setBkgFunc} from './backs.js';
+
+// Init and globals.
+initBackground();
+// Util functions.
+
+// A drawable rectangle.
+class DrawCell {
+ // X-location.
+ x: number;
+ // Y-location.
+ y: number;
+ // Width of the cell.
+ width: number;
+ // Height of the cell.
+ height: number;
+ // Color of the cell.
+ color: string;
+
+ // Construct a draw cell.
+ constructor(x: number, y: number, width: number, height: number,
+ color: string = '#FFFFFF') {
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ this.color = color;
+ }
+
+ // Draw to the canvas.
+ draw = (context: CanvasRenderingContext2D) => {
+ context.fillStyle = this.color;
+ context.rect(this.x, this.y, this.width, this.height);
+ }
+}
+
+// Movement in Squares by Bridget Riley
+setBkgFunc((canvas: HTMLCanvasElement,
+ context: CanvasRenderingContext2D) => {
+ let wWidth = window.innerWidth;
+ let wHeight = window.innerHeight;
+ let drawCell = new DrawCell(0, 0, 32, 32, '#2eb583');
+ // Number of squares based off of width in pixels.
+ let numSquares = Math.ceil(wWidth / drawCell.width);
+ let horizon = wWidth * 0.65;
+
+ let drawSq = true;
+ for(let i = 0; i < wWidth; i += drawCell.width) {
+ // Needed to fix the problem of squares being drawn offscreen
+ // mess with the pattern.
+ let drewFirstSquare: boolean = drawSq;
+ // Calculate the width of the square, gets smaller the closer
+ // it is to 65% of the way through the screen.
+ drawCell.x = i;
+ drawCell.width = Math.max(2, drawCell.height *
+ Math.sqrt((drawCell.x < horizon) ?
+ ((horizon - drawCell.x) / horizon) :
+ ((drawCell.x - horizon) / horizon)));
+ for(let j = 0; j < wHeight; j += drawCell.height) {
+ if(drawSq) {
+ drawCell.y = j;
+ drawCell.draw(context);
+ }
+ drawSq = !drawSq;
+ }
+ // Make sure squares drawn offscreen do not mess up the pattern.
+ drawSq = (drawSq == drewFirstSquare) ? !drewFirstSquare : drawSq;
+ }
+ });
+
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml ver/sion="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
@@ -14,6 +14,7 @@
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<meta name="author" content="Ryan Jeffrey" />
<link rel="shortcut icon" type="image/x-icon" href="favicon32x32.ico">
+ <%= javascript_include_tag 'generated/movementInSquares', type: 'module', integrity: true %>
</head>
<body>
<nav>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -2,6 +2,8 @@
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = "1.0"
+Rails.application.config.assets.paths << Rails.root.join('node_modules')
+
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
diff --git a/lib/tasks/assets.rake b/lib/tasks/assets.rake
@@ -0,0 +1,8 @@
+namespace :assets do
+ desc 'Compile TypeScript Files'
+ task :tsc do
+ system('node_modules/.bin/tsc')
+ end
+end
+
+Rake::Task['assets:precompile'].enhance ['assets:tsc']
diff --git a/package-lock.json b/package-lock.json
@@ -0,0 +1,31 @@
+{
+ "name": "site",
+ "lockfileVersion": 2,
+ "requires": true,
+ "packages": {
+ "": {
+ "dependencies": {
+ "typescript": "^4.5.5"
+ }
+ },
+ "node_modules/typescript": {
+ "version": "4.5.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
+ "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+ "bin": {
+ "tsc": "bin/tsc",
+ "tsserver": "bin/tsserver"
+ },
+ "engines": {
+ "node": ">=4.2.0"
+ }
+ }
+ },
+ "dependencies": {
+ "typescript": {
+ "version": "4.5.5",
+ "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
+ "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA=="
+ }
+ }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+ "dependencies": {
+ "typescript": "^4.5.5"
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+ "compilerOptions": {
+ "outDir": "app/javascript/generated/",
+ "noImplicitAny": true,
+ "noEmitOnError": true,
+ "sourceMap": true,
+ "target": "es6",
+ "module": "es6"
+ },
+ "include": [
+ "app/javascript/*.ts"
+ ]
+}
diff --git a/yarn.lock b/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@^4.5.5:
+ version "4.5.5"
+ resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
+ integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
