Skip to content

Commit 4202a36

Browse files
freddxyzfreddxyz
committed
Added text and testing new things
1 parent fef3c09 commit 4202a36

File tree

2 files changed

+67
-14
lines changed

2 files changed

+67
-14
lines changed

‎landing/landing.html

+3
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
<html>
33
<head>
44
<link rel="stylesheet" href="landing.css">
5+
<link rel="preconnect" href="https://fonts.googleapis.com">
6+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
58
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
69
</head>
710
<body>

‎landing/landing.js

+64-14
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,45 @@
11
class Rectangle {
22
constructor(w,h, color, context){
3-
this.w = w;
4-
this.h = h;
3+
this.size = new vec2(w, h);
54
this.color = color;
65
this.context = context;
6+
this.rotation = 0;
7+
this.position = new vec2(0,0);
8+
this.parent;
9+
}
10+
transform(){
11+
if(this.parent){
12+
this.context.translate(this.parent.position.x, this.parent.position.y);
13+
this.context.rotate(this.parent.rotation * (Math.PI/180));
14+
}
15+
this.context.translate(this.position.x, this.position.y)
16+
this.context.rotate(this.rotation * (Math.PI/180));
17+
718
}
819
draw(){
20+
this.transform();
921
this.context.fillStyle = this.color;
10-
this.context.fillRect(-this.w/2, -this.h/2, this.w, this.h);
22+
this.context.fillRect(-this.size.x/2, -this.size.y/2, this.size.x, this.size.y);
23+
this.context.resetTransform();
1124
}
1225
}
1326

27+
class vec2 {
28+
constructor(x, y){
29+
this.x = x;
30+
this.y = y;
31+
}
32+
add(v){
33+
return new vec2(this.x + v.x, this.y + v.y);
34+
}
35+
sub(v){
36+
return new vec2(this.x - v.x, this.y - v.y);
37+
}
38+
set(x,y){
39+
this.x = x;
40+
this.y = y;
41+
}
42+
}
1443

1544
window.onload = function(){
1645
var canvas = document.getElementById("landing_canvas");
@@ -27,35 +56,56 @@ window.onload = function(){
2756
var deltaTime = 0;
2857
var rot = 0
2958
var whiteSquare = new Rectangle(4000,4000, "white", context);
30-
var redStripe = new Rectangle(33, 100, "red", context);
31-
var squareX = window.innerWidth/2;
32-
var squareY = window.innerHeight/2;
59+
var redStripe = new Rectangle(0, 0, "red", context);
60+
redStripe.parent = whiteSquare;
61+
62+
var squareOffset = new vec2(0,0);
63+
var screenCenter = new vec2(window.innerWidth/2, window.innerHeight/2);
64+
65+
whiteSquare.position = screenCenter;
66+
3367
var draw = function(){
3468
requestAnimationFrame(draw);
3569
context.canvas.width = window.innerWidth;
3670
context.canvas.height = window.innerHeight;
71+
72+
screenCenter.set(window.innerWidth/2, window.innerHeight/2)
73+
3774
let currentTick = Date.now()
3875
deltaTime = (currentTick - prevTick) / 1000;
3976
prevTick = currentTick;
77+
let minimumDimension = Math.min(window.innerWidth, window.innerHeight);
78+
context.font = (window.innerWidth / 10) + 'px Roboto';
79+
console.log(context.font)
4080

4181
if(ticker < 1){
42-
squareX = window.innerWidth/2;
43-
squareY = window.innerHeight/2;
44-
whiteSquare.w -= deltaTime * 3900;
45-
whiteSquare.h -= deltaTime * 3900;
82+
whiteSquare.position = screenCenter;
83+
whiteSquare.size.x -= deltaTime * (4000 - minimumDimension/6);
84+
whiteSquare.size.y -= deltaTime * (4000 - minimumDimension/6);
4685
rot += 765 * deltaTime;
4786
}else if(ticker > 1 && ticker < 1.5) {
48-
rot -= 720 * (deltaTime * 1.5);
87+
let sqDiam = Math.sqrt(2 * (Math.pow(whiteSquare.size.x/2, 2)));
88+
squareOffset.x += (context.measureText("FradZGenius").width/2 + sqDiam + 25) * (deltaTime /.5);
89+
console.log(squareOffset.x)
90+
whiteSquare.position = screenCenter.sub(squareOffset);
91+
whiteSquare.size.x = minimumDimension/6;
92+
whiteSquare.size.y = minimumDimension/6;
93+
whiteSquare.rotation -= 855 * (deltaTime / .5);
4994
squareX = window.innerWidth/2 - (ticker - 1) * 500;
5095
//TODO:
5196
//scaling with window maybe
5297
//uhhh finish animation
98+
}else{
99+
context.fillStyle = 'rgba(255,255,255,' + 1 + ')';
100+
context.textAlign = "center"
101+
context.textBaseline = "middle"
102+
context.fillText("FradZGenius", window.innerWidth/2, window.innerHeight/2);
103+
redStripe.size.x = whiteSquare.size.x / 3
104+
redStripe.size.y = whiteSquare.size.y;
53105
}
54106

55-
context.translate(squareX, squareY)
56-
context.rotate(rot * (Math.PI/180))
57107
whiteSquare.draw();
58-
//redStripe.draw();
108+
redStripe.draw();
59109
ticker += deltaTime;
60110
}
61111

0 commit comments

Comments
 (0)