Merged pull request #1 from tobi18991/develop

Merged 'develop' into 'master'
tobi18991 · Mar 3, 2017 · b3b4f24 · b3b4f24
2 parents 579d8e4 + 0aa029d
commit b3b4f24
Show file tree

Hide file tree

Showing 16 changed files with 186 additions and 101 deletions.
diff --git a/.htaccess b/.htaccess
@@ -1,3 +1,3 @@
 Allow from all
 
-DirectoryIndex julia.html
+DirectoryIndex index.html
diff --git a/README.md b/README.md
@@ -1,2 +1,33 @@
-# Fractex
-Ultimate Fractal explorer with the use of WebGL
+# Fractex - The ultimate fractal explorer
+
+Fractex is the best fractal explorer for exploring and studying fractals in your browser. The only thing you need is a
+browser with support for WebGL, which almost every current browser does. Afterwards you can start your journey in the
+broken dimensions!
+
+Because of WebGL, all explorers are very fast. One image will be rendered in less than a second, so you can easily move
+around in the fractal! Additionally, you can change some parameters of every fractal to see the differences between some
+options. The perfect way for studying fractals!
+
+## Current explorers
+
+These are all the explorers that are currently on Fractex:
+
+* Mandelbrot
+* Julia-Fractal
+
+*More explorers will come soon...*
+
+## Advantages
+
+1. **Lightweight design**: around 170KB at the first visit and around 400B for every site afterwards
+2. **Responsive design**: can be viewed on every smartphone and tablet out on the market, which supports WebGL
+3. **WebGL**: fast rendering in less than a second!
+
+## Download
+
+You can download Fractex if you want, but it isn't necessary. Use the download button provided by GitHub or clone this
+project into your computer with the following URL: <https://github.com/tobi18991/Fractex.git>
+
+## Site of Fractex
+
+To see Fractex in action, you can go to the [GitHub page](https://tobi18991.github.io/Fractex/) of this repository.
diff --git a/css/class.css b/css/class.css
@@ -70,6 +70,10 @@
 	height: 24px;
 }
 
+.box.title h2 {
+	color: #eee !important;
+}
+
 /*
  * Media Queries
  */

diff --git a/css/style.css b/css/style.css
@@ -3,7 +3,7 @@ body {
 	font-family: 'Josefin Sans', sans-serif;
 	letter-spacing: 0.05em;
 	background-color: #111;
-	color: #eee;
+	color: #aaa;
 }
 
 #header {
@@ -39,7 +39,7 @@ body {
 	font-size: 20px;
 	font-weight: bold;
 	text-decoration: none;
-	color: inherit;
+	color: #eee;
 }
 
 #header #header_nav ul li a:hover:first-letter {
@@ -67,6 +67,8 @@ body {
 #main #left #explorer #fractal {
 	width: 800px;
 	height: 600px;
+	overflow-x: auto;
+	overflow-y: hidden;
 }
 
 #main #left #explorer #overlay {
@@ -167,6 +169,10 @@ body {
 
 @media only all and (max-width: 650px)
 {
+	#header #header_title {
+		text-align: center;
+	}
+
 	#header #header_nav ul li {
 		display: list-item;
 	}

diff --git a/css/style.min.css b/css/style.min.css
diff --git a/css/tags.css b/css/tags.css
@@ -4,7 +4,7 @@
 h1 {
 	font-size: 40px;
 	font-weight: bold;
-	color: inherit;
+	color: #eee;
 }
 
 h1:first-letter {
@@ -14,29 +14,31 @@ h1:first-letter {
 h2 {
 	font-size: 30px;
 	font-weight: bold;
-	color: inherit;
+	color: #ddd;
 }
 
 h3 {
 	margin-bottom: 20px;
 	padding-bottom: 10px;
 	font-size: 28px;
 	font-weight: bold;
-	color: inherit;
+	color: #ddd;
 }
 
 h4 {
 	margin: 25px 0 20px 0;
 	font-size: 25px;
 	font-weight: bold;
 	line-height: 1.3;
+	color: inherit;
 }
 
 h5 {
 	margin: 25px 0 20px 0;
 	font-size: 1em;
 	font-weight: bold;
 	text-decoration: underline;
+	color: inherit;
 }
 
 h1:first-child,
@@ -111,7 +113,7 @@ textarea {
 	font-family: inherit;
 	font-size: 0.9em;
 	border: 1px solid #ccc;
-	background-color: #fff;
+	background-color: #eee;
 }
 
 input[type=number]:hover,
@@ -130,7 +132,7 @@ input[type=submit] {
 	padding: 12px 10px;
 	border: 1px solid #ccc;
 	border-radius: 5px;
-	background-color: #fff;
+	background-color: #eee;
 	font-family: inherit;
 	font-size: 0.9em;
 	color: #333;

diff --git a/img/julia.png b/img/julia.png
diff --git a/img/mandelbrot.png b/img/mandelbrot.png
diff --git a/index.html b/index.html
@@ -2,21 +2,13 @@
 
 <html lang="en">
 <head>
-	<title>Welcome to Fractex: The ultimate fractal exploere based on WebGL</title>
+	<title>Welcome to Fractex: The ultimate fractal explorer based on WebGL</title>
 
 	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700" />
-	<link rel="stylesheet" type="text/css" href="css/reset.css" />
-	<link rel="stylesheet" type="text/css" href="css/tags.css" />
-	<link rel="stylesheet" type="text/css" href="css/class.css" />
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
+	<link rel="stylesheet" type="text/css" href="css/style.min.css" />
 
 	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
 	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
-
-	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
-	<script src="js/core.js"></script>
-	<script src="js/mandel.js"></script>
 </head>
 
 <body>
@@ -28,8 +20,8 @@
 		<nav id="header_nav">
 			<ul>
 				<li><a href="index.html">Home</a></li>
-				<li><a href="julia.html">Julia-Fractal</a></li>
 				<li><a href="mandel.html">Mandelbrot</a></li>
+				<li><a href="julia.html">Julia-Fractal</a></li>
 			</ul>
 		</nav>
 	</header>
@@ -39,13 +31,16 @@
 			<section class="section">
 				<h2>Welcome to Fractex</h2>
 				<p>
-					This is the ultimate fractal explorer based on WebGL! You can create fractals in your own browser
-					and explorer them, live. All fractals have the ability to be changed by parameters, so you can see,
-					how they may look differently with other options.
+					This is the ultimate fractal-explorer based on WebGL. You can create fractals in your own browser
+					and explore them live on this site. All explorers have the ability to change parameters of a
+					fractal, so you can see how different they will look for other options. Also with WebGL all
+					explorers are very fast (less than a second rendering time!).
 				</p>
 				<p>
-					In the moment this project is under development, but you can explore some fractals yet. Please see
-					the list below to test one of my fractal explorers.
+					Fractex has a nice and simple responsive design so it's possible to use these explorers also on a
+					smartphone or tablet. You don't need any extra app for Fractex, because all you need is your
+					browser! That's why I tried to make this site as lightweight as possible to give you also the best
+					experiences on the go.
 				</p>
 			</section>
 
@@ -76,7 +71,15 @@ <h2>Fractex</h2>
 			<section class="box">
 				<h3>About</h3>
 				<p>
-					Something...
+					Fractex was created after a prototype for exploring the Mandelbrot set. Because of a very slow
+					rendering time about five to ten seconds with JavaScript, I tried to speed up the rendering process
+					for an image. With WebGL and shaders it is now possible to render an image within less a second.
+				</p>
+				<p>
+					But I had a specific reason to make this explorer: In my school, I have a seminar about scientific
+					work, where we study a specific subject. Mine is about complex numbers. These numbers are  building
+					the base for the Mandelbrot set and so I decided to build an explorer myself to make "my own"
+					Mandelbrot fractal. This explorer is now called Fractex.
 				</p>
 			</section>
 		</aside>
@@ -85,7 +88,8 @@ <h3>About</h3>
 	<footer id="footer">
 		<p>
 			&copy; 2017, Fractex created by Tobias W.<br />
-			See GitHub Page for further information.
+			See <a href="https://github.com/tobi18991/Fractex" target="_blank">GitHub Repository</a> for further
+			information.
 		</p>
 	</footer>
 </body>

diff --git a/js/core.js b/js/core.js
diff --git a/js/julia.js b/js/julia.js
@@ -1,3 +1,11 @@
+var canvas;
+var scene;
+var rectangle;
+
+var $fractal;
+
+var uniform = {};
+
 $(function () {
 	if (PIXI.utils.isWebGLSupported())
 	{
@@ -60,6 +68,41 @@ $(function () {
 	}
 });
 
+function startWebGL()
+{
+	$fractal = $('#fractal');
+
+	canvas = PIXI.autoDetectRenderer(
+		$fractal.width(),
+		$fractal.height(),
+		{
+			antialias: false, transparent: false, resolution: 1
+		}
+	);
+
+	scene = new PIXI.Container();
+
+	rectangle = new PIXI.Graphics();
+	rectangle.beginFill(0x0C0C0C);
+	rectangle.drawRect(0, 0, canvas.view.width, canvas.view.height);
+	rectangle.endFill();
+
+	scene.addChild(rectangle);
+
+	canvas.render(scene);
+
+	$fractal.append(canvas.view);
+}
+
+function animate()
+{
+	setTimeout(function () {
+		canvas.render(scene);
+
+		window.requestAnimationFrame(animate);
+	}, 1000/5);
+}
+
 function renderFractal()
 {
 	var cX = $('#julia_rel').val();

diff --git a/js/julia.min.js b/js/julia.min.js
diff --git a/js/mandel.js b/js/mandel.js
@@ -1,3 +1,11 @@
+var canvas;
+var scene;
+var rectangle;
+
+var $fractal;
+
+var uniform = {};
+
 $(function () {
 	if (PIXI.utils.isWebGLSupported())
 	{
@@ -52,6 +60,41 @@ $(function () {
 	}
 });
 
+function startWebGL()
+{
+	$fractal = $('#fractal');
+
+	canvas = PIXI.autoDetectRenderer(
+		$fractal.width(),
+		$fractal.height(),
+		{
+			antialias: false, transparent: false, resolution: 1
+		}
+	);
+
+	scene = new PIXI.Container();
+
+	rectangle = new PIXI.Graphics();
+	rectangle.beginFill(0x0C0C0C);
+	rectangle.drawRect(0, 0, canvas.view.width, canvas.view.height);
+	rectangle.endFill();
+
+	scene.addChild(rectangle);
+
+	canvas.render(scene);
+
+	$fractal.append(canvas.view);
+}
+
+function animate()
+{
+	setTimeout(function () {
+		canvas.render(scene);
+
+		window.requestAnimationFrame(animate);
+	}, 1000/5);
+}
+
 function renderFractal()
 {
 	var theme = $('#mandel_theme').val();

diff --git a/js/mandel.min.js b/js/mandel.min.js