Spaces:

TheWheke
/

Sentinel

Running

App Files Files Community

Sentinel / index.html

TheWheke

Rename sent_disp_demo.html to index.html

b03e0a8 verified about 1 month ago

raw

history blame contribute delete

7.29 kB

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Sentinel Demo — Single Timeline Color Cycle</title>

	<style>
	html,body{
	margin:0;
	height:100%;
	background:#000;
	overflow:hidden;
	}
	canvas{
	width:100%;
	height:100%;
	display:block;
	}
	</style>
	</head>

	<body>
	<canvas id="gl"></canvas>

	<script>
	(() => {

	const canvas=document.getElementById("gl");
	const gl=canvas.getContext("webgl",{antialias:true});

	if(!gl){
	document.body.innerHTML="WebGL not supported";
	return;
	}

	function resize(){
	canvas.width=window.innerWidth;
	canvas.height=window.innerHeight;
	gl.viewport(0,0,canvas.width,canvas.height);
	}
	resize();
	window.addEventListener("resize",resize);

	function compile(type,src){
	const s=gl.createShader(type);
	gl.shaderSource(s,src);
	gl.compileShader(s);
	if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)){
	throw new Error(gl.getShaderInfoLog(s) \|\| "shader compile failed");
	}
	return s;
	}

	function program(v,f){
	const p=gl.createProgram();
	gl.attachShader(p,compile(gl.VERTEX_SHADER,v));
	gl.attachShader(p,compile(gl.FRAGMENT_SHADER,f));
	gl.linkProgram(p);
	if(!gl.getProgramParameter(p, gl.LINK_STATUS)){
	throw new Error(gl.getProgramInfoLog(p) \|\| "program link failed");
	}
	return p;
	}

	const quad=gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,quad);
	gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([
	-1,-1, 1,-1, -1, 1,
	-1, 1, 1,-1, 1, 1
	]),gl.STATIC_DRAW);

	const VS=`
	attribute vec2 a;
	varying vec2 v;
	void main(){
	v=a*0.5+0.5;
	gl_Position=vec4(a,0.0,1.0);
	}
	`;

	/* ================================
	APPROVED HALO SHADER (ADD-ONLY)
	- Added uniform vec3 uCol
	- Replaced hard-coded red with uCol
	================================= */
	const FS=`
	precision highp float;

	varying vec2 v;
	uniform vec2 r;
	uniform float t;

	/* ADD ONLY */
	uniform vec3 uCol;

	float ring(vec2 p,float rad){
	float d=length(p);
	return smoothstep(0.02,0.0,abs(d-rad));
	}

	void main(){

	vec2 uv=v*2.0-1.0;
	uv.x*=r.x/r.y;

	float time=t*0.8;

	float R=0.35+sin(time)*0.01;

	float phase=mod(floor(t/5.0),5.0);

	if(phase==1.0){
	R+=sin(atan(uv.y,uv.x)6.0+time)0.005;
	}

	if(phase==2.0){
	R+=sin(length(uv)40.0-time2.0)*0.002;
	}

	if(phase==3.0){
	R+=sin(time6.0)0.015;
	}

	if(phase==4.0){
	R+=sin(atan(uv.y,uv.x)80.0+time4.0)*0.008;
	}

	float base=ring(uv,R);
	float glow=exp(-8.0*abs(length(uv)-R));

	/* CHANGED: from vec3 red to uCol */
	vec3 color =
	uCol(base1.4) +
	uCol(glow0.8);

	gl_FragColor=vec4(color,1.0);

	}
	`;

	const prog=program(VS,FS);
	const uRes=gl.getUniformLocation(prog,"r");
	const uTime=gl.getUniformLocation(prog,"t");
	/* ADD ONLY */
	const uCol = gl.getUniformLocation(prog,"uCol");

	/* ========= ADD ONLY: overlay line program (color capable) ========= */

	const LINE_VS=`
	attribute vec2 a;
	void main(){
	gl_Position=vec4(a,0.0,1.0);
	}
	`;

	const LINE_FS=`
	precision highp float;
	uniform vec3 uColor;
	uniform float alpha;
	void main(){
	gl_FragColor=vec4(uColor,alpha);
	}
	`;

	const lineProg=program(LINE_VS,LINE_FS);
	const lineA=gl.getAttribLocation(lineProg,"a");
	const lineColor=gl.getUniformLocation(lineProg,"uColor");
	const lineAlpha=gl.getUniformLocation(lineProg,"alpha");
	const lineBuf=gl.createBuffer();

	/* ========= timeline color cycle (single color active per full demo) ========= */

	const TIMELINE_COLORS = [
	{ name:"red", rgb:[1.00,0.00,0.00] },
	{ name:"blue", rgb:[0.10,0.55,1.00] },
	{ name:"green",rgb:[0.00,1.00,0.35] },
	{ name:"gold", rgb:[1.00,0.78,0.12] }
	];

	const PHASE_SECONDS = 5;
	const PHASE_COUNT = 5;
	const DEMO_CYCLE_SECONDS = PHASE_SECONDS * PHASE_COUNT; // 25s

	function activeTimelineColor(time){
	const completedCycles = Math.floor(time / DEMO_CYCLE_SECONDS);
	const idx = completedCycles % TIMELINE_COLORS.length;
	return TIMELINE_COLORS[idx].rgb;
	}

	/* ========= helpers ========= */

	function pxToClip(x,y){
	return [
	(x/canvas.width)*2-1,
	1-(y/canvas.height)*2
	];
	}

	function useLine(color, alpha){
	gl.useProgram(lineProg);
	gl.bindBuffer(gl.ARRAY_BUFFER, lineBuf);
	gl.enableVertexAttribArray(lineA);
	gl.vertexAttribPointer(lineA,2,gl.FLOAT,false,0,0);
	gl.uniform3f(lineColor, color[0], color[1], color[2]);
	gl.uniform1f(lineAlpha, alpha);
	}

	function drawLine(x1,y1,x2,y2,color,alpha){
	const p1=pxToClip(x1,y1);
	const p2=pxToClip(x2,y2);
	useLine(color, alpha);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([p1[0],p1[1], p2[0],p2[1]]), gl.STATIC_DRAW);
	gl.drawArrays(gl.LINES, 0, 2);
	}

	/* ========= scan arm (single color; phase 4 only) ========= */

	function drawScanArm(time, color){

	const phase = Math.floor(time/PHASE_SECONDS) % PHASE_COUNT;
	if(phase !== 4) return;

	const angle=time*0.7;
	const cx=canvas.width/2;
	const cy=canvas.height/2;
	const len=Math.max(canvas.width,canvas.height)*1.6;

	gl.enable(gl.BLEND);
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

	const tailSteps=18;
	for(let i=0;i<tailSteps;i++){
	const k=i/(tailSteps-1);
	const a=1.0-k;
	const tailAngle=angle - k*0.35;

	const tx=cx+Math.cos(tailAngle)*len;
	const ty=cy+Math.sin(tailAngle)*len;

	drawLine(cx,cy,tx,ty,color, 0.02 + a*0.08);
	}

	const x=cx+Math.cos(angle)*len;
	const y=cy+Math.sin(angle)*len;

	drawLine(cx,cy,x,y,color,0.36);

	gl.disable(gl.BLEND);
	}

	/* ========= bottom timeline (single color) ========= */

	function drawTimeline(time, color){
	const padX = Math.max(24, canvas.width*0.08);
	const xL = padX;
	const xR = canvas.width - padX;
	const w = xR - xL;

	const y = canvas.height - Math.max(110, canvas.height*0.16);

	gl.enable(gl.BLEND);
	gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

	// base line
	drawLine(xL,y,xR,y,color,0.10);

	// ticks
	const ticks=18;
	for(let i=0;i<=ticks;i++){
	const x=xL+(i/ticks)*w;
	const h=(i%3===0)?8:4;
	drawLine(x,y-h,x,y+h,color,0.08);
	}

	// pulse progresses over the FULL demo cycle (0..1)
	const cycleT = (time % DEMO_CYCLE_SECONDS) / DEMO_CYCLE_SECONDS;
	const eased = 0.5 - 0.5Math.cos(cycleT Math.PI * 2.0);
	const px = xL + eased*w;

	drawLine(px-14,y,px+14,y,color,0.55);
	drawLine(px,y-10,px,y+10,color,0.35);

	// trail
	for(let i=1;i<=10;i++){
	const tx = px - i*10;
	if(tx < xL) break;
	drawLine(tx-4,y,tx+4,y,color,0.14*(1-i/11));
	}

	gl.disable(gl.BLEND);
	}

	/* ========= bind halo ========= */
	let aLoc=-1;
	function bindHalo(){
	gl.useProgram(prog);
	gl.bindBuffer(gl.ARRAY_BUFFER,quad);
	aLoc = gl.getAttribLocation(prog,"a");
	gl.enableVertexAttribArray(aLoc);
	gl.vertexAttribPointer(aLoc,2,gl.FLOAT,false,0,0);
	}

	const start=performance.now();

	function draw(){
	const time=(performance.now()-start)/1000;

	// active single color for entire display (halo + overlays)
	const color = activeTimelineColor(time);

	gl.clearColor(0,0,0,1);
	gl.clear(gl.COLOR_BUFFER_BIT);

	bindHalo();

	gl.uniform2f(uRes, canvas.width, canvas.height);
	gl.uniform1f(uTime, time);

	// halo color (ADD ONLY)
	gl.uniform3f(uCol, color[0], color[1], color[2]);

	gl.drawArrays(gl.TRIANGLES,0,6);

	// overlays (same single color)
	drawScanArm(time, color);
	drawTimeline(time, color);

	requestAnimationFrame(draw);
	}

	draw();

	})();
	</script>
	</body>
	</html>