commit ca485c8aa95aef570e56c020610fe317814720e9
parent 7fded1ce1ec8a396f945c7b9504ca49d41962217
Author: tongong <tongong@gmx.net>
Date: Sat, 17 Aug 2019 08:48:43 +0200
control interface icons added
Diffstat:
7 files changed, 89 insertions(+), 19 deletions(-)
diff --git a/assets/refresh.svg b/assets/refresh.svg
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" /></svg>
-\ No newline at end of file
diff --git a/assets/settings.svg b/assets/settings.svg
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" /></svg>
-\ No newline at end of file
diff --git a/index.html b/index.html
@@ -10,9 +10,21 @@
<script src="scripts/render.js"></script>
<script src="scripts/terrain.js"></script>
<script src="scripts/main.js"></script>
+ <script src="scripts/interface.js"></script>
+ <link rel="stylesheet" href="styles.css" />
</head>
<body bgcolor="#000000" style="margin: 0; height: 100%; overflow: hidden">
+ <div id="overlay">
+ <svg width="40" height="40" viewBox="0 0 24 24" class="icon">
+ <rect width="24" height="24" fill="#000000"/>
+ <path fill="#FFFFFF" d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />
+ </svg>
+ <svg width="40" height="40" viewBox="0 0 24 24" class="icon">
+ <rect width="24" height="24" fill="#000000"/>
+ <path fill="#FFFFFF" d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z" />
+ </svg>
+ </div>
</body>
</html>
\ No newline at end of file
diff --git a/scripts/interface.js b/scripts/interface.js
@@ -0,0 +1,11 @@
+function initIconAnimation() {
+ var icons = document.getElementsByClassName("icon");
+ for (var i = 0; i < icons.length; i++) {
+ icons[i].addEventListener('mouseenter', function() {
+ this.classList.add("animated");
+ }, false);
+ icons[i].addEventListener('animationend', function() {
+ this.classList.remove("animated");
+ }, false);
+ }
+}
+\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
@@ -4,9 +4,11 @@ var CENTER_HORIZON;
var LEFT_HORIZON;
var CENTER;
var ANGLE;
-var RANDOM_FACTOR = 0.5;
var SIZE;
+
+var RANDOM_FACTOR = 0.5;
var MAX_STATE = 4;
+var ANGLE_FACTOR = 1.5;
var state = 0;
var statePercentage = 0;
@@ -19,23 +21,29 @@ var startMillis;
const time = () => (typeof(startMillis) == "undefined") ? 0 : millis() - startMillis;
function setup() {
+ initIconAnimation();
+ initVars();
+
+ var canvas = createCanvas(WIDTH, HEIGHT);
+ canvas.mousePressed(mousePress);
+ canvas.mouseReleased(mouseRelease);
+ stroke(255);
+ strokeJoin(ROUND);
+ fill(0);
+}
+
+function initVars() {
SIZE = min([HEIGHT / 3, WIDTH / 2 - 70, 500]);
- ANGLE = SIZE * 1.5;
+ ANGLE = SIZE * ANGLE_FACTOR;
CENTER = createVector(WIDTH / 2, HEIGHT / 2);
CENTER_HORIZON = createVector(0, 0);
LEFT_HORIZON = createVector(-2 * SIZE, 0);
- console.log(SIZE);
- createCanvas(WIDTH, HEIGHT);
- stroke(255);
- strokeJoin(ROUND);
- fill(0);
-
endField = new Terrain(2, true);
currentField = new Terrain(2, false);
- startMillis = 0;
+ startMillis = millis();
}
function draw() {
diff --git a/scripts/rotation.js b/scripts/rotation.js
@@ -5,22 +5,23 @@ const NORMAL_SPIN = 0.0001;
var spin = NORMAL_SPIN;
var lastMillis = 0;
var currentRotation = 0;
-var mouseState = false;
+var mousePressed = false;
+var pmousePressed = false;
function getRotation() {
let aktMillis = millis();
- if (mouseIsPressed) {
- if (!mouseState) {
+ if (mousePressed) {
+ if (!pmousePressed) {
startPress = mouseX + currentRotation * 1000;
startPressTime = millis();
startPressRotation = currentRotation;
- mouseState = true;
+ pmousePressed = true;
}
currentRotation = -(mouseX - startPress) / 1000;
} else {
- if (mouseState) {
+ if (pmousePressed) {
spin = (currentRotation - startPressRotation) / (millis() - startPressTime);
- mouseState = false;
+ pmousePressed = false;
}
if (spin > NORMAL_SPIN) {
spin = NORMAL_SPIN + (spin - NORMAL_SPIN) * 0.9;
@@ -32,4 +33,15 @@ function getRotation() {
}
lastMillis = aktMillis;
return currentRotation;
+}
+
+function mousePress() {
+ mousePressed = true;
+ console.log("bum");
+}
+
+function mouseRelease() {
+ mousePressed = false;
+ console.log("ba");
+
}
\ No newline at end of file
diff --git a/styles.css b/styles.css
@@ -0,0 +1,29 @@
+@keyframes rotate {
+ from {
+ transform: rotate(0)
+ }
+ to {
+ transform: rotate(360deg)
+ }
+}
+
+.icon.animated {
+ animation: rotate 0.8s;
+}
+
+#defaultCanvas0 {
+ z-index: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+#overlay {
+ z-index: 1;
+ position: absolute;
+ top: 0;
+ right: 0;
+ margin: 10px;
+}
+\ No newline at end of file
