add gradient

sketch_250819b_CMYKGame.js

@@ -3,6 +3,64 @@
 // VÄRIMYRSKY CMYK – p5.js
 // Kosketusystävällinen refleksipeli messukioskille
 // ==========================
+
+// ==================
+// Taustan liukuväri
+// ==================
+let gradShader;
+let pg;  // off-screen buffer
+
+const COLOR_A = '#475fea';
+const COLOR_B = '#ffc1e5';
+
+let vertSrc = `
+precision highp float;
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+
+attribute vec3 aPosition;
+attribute vec2 aTexCoord;
+varying vec2 vTexCoord;
+
+void main() {
+  vTexCoord = aTexCoord;
+  vec4 positionVec4 = vec4(aPosition, 1.0);
+  gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
+}
+`;
+const fragSrc = `
+precision mediump float;
+uniform vec2 u_resolution;
+uniform vec3 u_colorA;
+uniform vec3 u_colorB;
+void main() {
+  vec2 st = gl_FragCoord.xy / u_resolution;
+  st.y = 1.0 - st.y;
+  float t = (st.x + st.y) * 0.5;
+  vec3 col = mix(u_colorA, u_colorB, t);
+  gl_FragColor = vec4(col, 1.0);
+}`;
+
+function prerenderGradient() {
+
+  pg = createGraphics(width, height, WEBGL); // shader buffer
+  gradShader = pg.createShader(vertSrc, fragSrc);
+  pg.shader(gradShader);
+
+  const ca = color(COLOR_A);
+  const cb = color(COLOR_B);
+  gradShader.setUniform('u_colorA', [red(ca)/255, green(ca)/255, blue(ca)/255]);
+  gradShader.setUniform('u_colorB', [red(cb)/255, green(cb)/255, blue(cb)/255]);
+  gradShader.setUniform('u_resolution', [width, height]);
+
+  pg.noStroke();
+//  pg.rectMode(CORNERS);
+  pg.plane(width, height);
+}
+
+// =======================
+// Peli
+// =======================
 let state = 'menu'; // menu | playing | gameover
 let duration = 60;  // kierros sekunteina
 let startMillis = 0;
@@ -28,6 +86,7 @@ function preload(){
 
 function setup(){
   createCanvas(windowWidth, windowHeight);
+  prerenderGradient();
   textFont(font);
   textAlign(CENTER, CENTER);
   noStroke();
@@ -41,25 +100,8 @@ function setup(){
   print("setup");
 }
 
-function windowResized(){
-  resizeCanvas(windowWidth, windowHeight);
-}
-
-function startGame(){
-  score = 0; roundN = 0; state='playing'; startMillis = millis();
-  nextRound();
-}
-
-function endGame(){
-  state='gameover';
-  // Nimi- / nimikirjainkysely. Kioskilla voi ohittaa.
-  const name = prompt('Syötä nimikirjaimet leaderboardille (valinnainen):', '') || '—';
-  pushScore(name.slice(0,10), score);
-  refreshLeaderboard();
-}
-
 function draw(){
-  background('#0b0b0d');
+  image(pg, 0, 0, width, height);
 
   if(state==='menu'){
     drawTitle();
@@ -76,6 +118,24 @@ function draw(){
   }
 }
 
+function windowResized(){
+  resizeCanvas(windowWidth, windowHeight);
+  prerenderGradient();
+}
+
+function startGame(){
+  score = 0; roundN = 0; state='playing'; startMillis = millis();
+  nextRound();
+}
+
+function endGame(){
+  state='gameover';
+  // Nimi- / nimikirjainkysely. Kioskilla voi ohittaa.
+  const name = prompt('Syötä nimikirjaimet leaderboardille (valinnainen):', '') || '—';
+  pushScore(name.slice(0,10), score);
+  refreshLeaderboard();
+}
+
 function drawTitle(){
   fill(255);
   const t1 = 'VÄRIMYRSKY CMYK';
@@ -91,7 +151,7 @@ function drawTitle(){
 
 function drawHUD(){
   // Yläpalkki: aika ja pisteet
-  const pad = 20;
+  const pad = 74;
   const barH = 36;
   const timeFrac = timeLeft / duration;