Add files via upload

HaLo2FrEeEk · Jan 6, 2023 · c77c980 · c77c980
1 parent 1660bfc
commit c77c980
Show file tree

Hide file tree

Showing 10 changed files with 373 additions and 0 deletions.
diff --git a/LivelyInfo.json b/LivelyInfo.json
@@ -0,0 +1,17 @@
+{
+  "AppVersion": "1.0.0.0",
+  "Title": "Starfield",
+  "Thumbnail": "zgnwendr.jpg",
+  "Preview": "vqxuyt4a.gif",
+  "Desc": "Particles (stars) flowing gently in a Perlin Noise field.",
+  "Author": "HaLo2FrEeEk",
+  "License": null,
+  "Contact": "",
+  "Type": 1,
+  "FileName": "index.html",
+  "Arguments": "",
+  "IsAbsolutePath": false,
+  "Id": null,
+  "Tags": null,
+  "Version": 0
+}
diff --git a/LivelyProperties.json b/LivelyProperties.json
@@ -0,0 +1,72 @@
+{
+	"count": {
+    "type": "slider",
+    "text": "Count",
+    "min": 1000,
+    "max": 14000,
+    "tick": 1000,
+    "step": 100,
+    "value": 6000
+  },
+	"size": {
+    "type": "slider",
+    "text": "Size",
+    "min": 0,
+    "max": 7,
+    "tick": 1,
+    "step": 0.1,
+    "value": 2
+  },
+	"speed": {
+    "type": "slider",
+    "text": "Speed",
+    "min": 1,
+    "max": 7,
+    "tick": 1,
+    "step": 0.1,
+    "value": 3
+  },
+	"maxAge": {
+    "type": "slider",
+    "text": "Max Age",
+    "min": 12,
+    "max": 3000,
+    "tick": 100,
+    "step": 12,
+    "value": 96
+  },
+	"res": {
+    "type": "slider",
+    "text": "Noise field resolution",
+    "min": 1,
+    "max": 16,
+    "tick": 1,
+    "step": 0.1,
+    "value": 4
+  },
+	"color": {
+    "type": "color",
+    "text": "Color",
+    "value": "#FF0F7F"
+  },
+	"rainbow": {
+    "type": "checkbox",
+    "value": false,
+    "text": "Rainbow Mode (ignores Color)"
+  },
+	"frozen": {
+    "type": "checkbox",
+    "value": false,
+    "text": "Freeze noise field"
+  },
+	"showfr": {
+    "type": "checkbox",
+    "value": false,
+    "text": "Show Framerate (max is 12)"
+  },
+	"refresh": {
+		"type": "button",
+		"text": "",
+		"value": "Refresh"
+	}
+}
diff --git a/Starfield.zip b/Starfield.zip
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Starfield</title>
+		<script src="p5.min.js"></script>
+		<script src="starfield.js"></script>
+		<link rel="stylesheet" type="text/css" href="style.css">
+		<meta charset="utf-8">
+	</head>
+	<body>
+		<script src="sketch.js"></script>
+	</body>
+</html>
diff --git a/p5.min.js b/p5.min.js
diff --git a/sketch.js b/sketch.js
@@ -0,0 +1,149 @@
+const queryString = window.location.search;
+const params = new URLSearchParams(queryString);
+
+let showfr = false;
+let fr = [];
+let mspf = [];
+let timer = new Timer();
+let starfield;
+let fade = .05;
+let firstload = true;
+let opts = {
+	"count": 5000,
+	"hsl": [332, 100, 52.94, 1],
+	"size": 1,
+	"speed": 3,
+	"dSpeed": 0.98,
+	"dZ": 0.01,
+	"trailLen": 20,
+	"maxAge": 96,
+	"res": 4,
+	"screenRatio": 0,
+	"rainbow": false,
+	"frozen": false
+};
+
+function livelyPropertyListener(name, val) {
+	switch(name) {
+		case "count":
+			var currentCount = starfield.opts.count;
+			starfield.opts.count = val;
+			if(val > currentCount) {
+				starfield.populate(currentCount);
+			} else if(val < currentCount) {
+				starfield.stars.slice(val, currentCount - val);
+			}
+		break;
+		case "speed":
+			starfield.opts.speed = val;
+		break;
+		case "size":
+			starfield.opts.size = val;
+		break;
+		case "maxAge":
+			starfield.opts.maxAge = val;
+		break;
+		case "res":
+			starfield.opts.res = val;
+		break;
+		case "color":
+			var c = color(val);
+			starfield.opts.hsl = [hue(c), saturation(c), lightness(c), 1];
+			background(starfield.opts.hsl);
+			for(var i = 0; i < 100; i++) {
+				background(0, fade);
+			}
+		break;
+		case "rainbow":
+			starfield.opts.rainbow = val;
+		break;
+		case "frozen":
+			starfield.opts.frozen = val;
+		break;
+		case "refresh":
+			location.reload();
+		break;
+		case "showfr":
+			showfr = val;
+			if(!val && !firstload) {
+				fill(opts.hsl);
+				rect(0, 0, 302, 52);
+				fill(0, fade);
+				for(var i = 0; i < 100; i++) {
+					rect(0, 0, 302, 52);
+				}
+
+			}
+		break;
+	};
+}
+
+function setup() {
+  let canv = createCanvas(window.innerWidth, window.innerHeight);
+	canv.elt.addEventListener("contextmenu", (e) => e.preventDefault());
+  frameRate(12);
+  noFill();
+  noStroke();
+  angleMode(DEGREES);
+	colorMode(HSL);
+	textSize(30);
+
+	opts.screenRatio = width / height;
+	starfield = new Starfield(opts);
+  starfield.populate();
+
+	background(starfield.opts.hsl);
+	for(var i = 0; i < 100; i++) {
+		background(0, fade);
+	}
+}
+
+function draw() {
+	background(0, fade);
+	timer.start();
+
+  starfield.update();
+
+	// Show Framerate
+	if(showfr && frameCount > 1) {
+		fr.push(frameRate());
+		if(fr.length > 100) fr.shift();
+		mspf.push(timer.end());
+		if(mspf.length > 100) mspf.shift();
+
+		strokeWeight(2);
+		fill(0);
+		rect(0, 0, 300, 50);
+
+		noStroke();
+		fill(starfield.opts.hsl);
+		var debug = (Math.round((fr.reduce((s, e) => s + e) / fr.length) * 100) / 100) + " fps / ";
+		debug		 += Math.round(mspf.reduce((s, e) => s + e) / mspf.length) + " mspf";
+		text(debug, 10, 35);
+		noFill();
+	}
+
+	if(firstload) firstload = false;
+}
+
+//
+// Timer
+//
+function Timer() {
+	this.s = 0;
+	this.e = 0;
+
+	this.start = function() {
+		this.s = Date.now();
+		return this.s;
+	}
+
+	this.end = function() {
+		this.e = Date.now();
+		return this.results();
+	}
+
+	this.results = function() {
+		return (this.e - this.s);
+	}
+}
diff --git a/starfield.js b/starfield.js
@@ -0,0 +1,112 @@
+/*
+To Do:
+
+Fade out on death, don't just disappear
+Cache noise values...somehow
+*/
+
+function  Starfield(opts) {
+  let _sf = this;
+	_sf.opts = opts;
+	_sf.zoff = random(100, 200);
+	_sf.stars = [];
+
+  _sf.populate = function(i = 0) {
+    for(i; i < _sf.opts.count; i++) {
+      _sf.stars[i] = new Star();
+    }
+  }
+
+  _sf.update = function() {
+		for(var i = 0; i < _sf.opts.count; i++) {
+			_sf.stars[i].step();
+		}
+
+    _sf.zoff += _sf.opts.frozen ? 0 : _sf.opts.dZ;
+  }
+}
+
+function Star() {
+	Star.prototype.spawn = function() {
+		this.pos = createVector(random(0, width), random(0, height));
+		this.dir = createVector(0, 0);
+		this.cd = starfield.opts.size;
+		this.oob = starfield.opts.trailLen;
+		this.age = random(0, starfield.opts.maxAge);
+		this.prevpos = 0;
+		this.noise = 0;
+	}
+
+	Star.prototype.step = function() {
+		this.noise = this.noiseAt();
+
+		if(this.cd > 0) {
+			this.cd -= this.noise;
+			if(this.cd < 0) this.cd = 0;
+		}
+
+		this.draw();
+		this.move();
+
+		this.age++;
+		if(this.age > starfield.opts.maxAge) this.spawn();
+	}
+
+	Star.prototype.move = function() {
+		this.dir.x += starfield.opts.speed * cos(this.noise * (360 + 180));
+		this.dir.y += starfield.opts.speed * sin(this.noise * (360 + 180));
+		this.dir.mult(starfield.opts.dSpeed * this.noise);
+
+		this.prevpos = {x: this.pos.x, y: this.pos.y};
+		this.pos.add(this.dir);
+
+		if(this.pos.x < -starfield.opts.size ||	this.pos.x > width + starfield.opts.size ||
+			this.pos.y < -starfield.opts.size || this.pos.y > height + starfield.opts.size)	{
+			// Out-of-bounds, countdown
+			this.oob--;
+		} else {
+			// Reset if in-bounds
+			this.oob = starfield.opts.trailLen;
+		}
+
+		if(this.oob == 0) {
+			this.spawn();
+		}
+	}
+
+	Star.prototype.draw = function() {
+		var sw = (starfield.opts.size - this.cd) * this.noise;
+		strokeWeight(sw);
+		stroke(this.colorAt());
+		beginShape();
+		vertex(this.pos.x, this.pos.y);
+		vertex(this.prevpos.x, this.prevpos.y);
+		endShape();
+	}
+
+	Star.prototype.noiseAt = function(a = 0, o = 0, x = this.pos.x, y = this.pos.y, zoff = starfield.zoff) {
+		return noise(
+			1 + (x / (width / starfield.opts.res / starfield.opts.screenRatio)) + (cos(a) * o),
+			1 + (y / (height / starfield.opts.res)) + (sin(a) * o),
+			zoff);
+	}
+
+	Star.prototype.colorAt = function(am = null) {
+		var hue = Array.from(starfield.opts.hsl);
+		if(starfield.opts.rainbow) {
+			hue[0] = ((hue[0] - 180) + (360 * this.noise)) % 360;
+		} else {
+			hue[0] = ((hue[0] + 60) - (120 * this.noise)) % 360;
+		}
+		hue[3] = (hue[3] / 2) + (hue[3] / 2) * this.noise;
+		hue[3] *= am || 1;
+		return hue;
+	}
+
+	this.spawn();
+	this.move();
+	}
+
+
+
+
diff --git a/style.css b/style.css
@@ -0,0 +1,8 @@
+html, body {
+	background: #000;
+  margin: 0;
+  padding: 0;
+}
+canvas {
+  display: block;
+}
diff --git a/vqxuyt4a.gif b/vqxuyt4a.gif
diff --git a/zgnwendr.jpg b/zgnwendr.jpg