測試2 - adjusted - OpenProcessing

mySketch
xxxxxxxxxx
 
// forked from https://openprocessing.org/sketch/2597260
// gif images should not be wrapped in another image
// adjust the switch in the draw loop
// schien@mail.ncku.edu.tw, Spring 2025
​
​
let tvImg;
let screen;
let currentChannel = 0;
let xstart, ystart;
let xnoise, ynoise;
let noiseTimer = 0; // 雜訊計時器
let isSwitching = false; // 是否正在轉台
let fadeAlpha = 0; // 淡入效果的透明度
let switchSound; // 轉台音效
let channel1Img; // 頻道 1 的圖片
​
function preload() {
  tvImg = loadImage("https://raw.githubusercontent.com/LeahJin-web/01/refs/heads/main/tv-7087860_1280%20(1).png");
  // 載入頻道 1 的圖片
  channel1Img = loadImage("https://deckard.openprocessing.org/user507897/visual2597260/h015ceff320c0e3181ae909881bafdf4d/channel1.gif");
  // 載入轉台音效
  //switchSound = loadSound('https://raw.githubusercontent.com/LeahJin-web/01/0d917f4079d1082cd8e62b87abeb1df85ccbe75d/tv-static-noise-291374.mp3');
}
​
function setup() {
  createCanvas(900, 600);
  screen = createGraphics(160, 125); // 頻道大小
  xstart = random(10);
  ystart = random(10);
​
  // 設置音效音量為最大聲
  if (switchSound) {
    switchSound.setVolume(1.0); // 音量設為最大（範圍 0-1）
  }
​
  updateScreen();
}
​
function draw() {
  background(0);
​
​
  // 繪製頻道內容
  if (isSwitching) {
    // 顯示雜訊效果
    drawNoise();
    if (millis() - noiseTimer > 300) { // 雜訊持續0.3秒
      isSwitching = false;
      fadeAlpha = 0; // 重置淡入透明度
      updateScreen();
    }
  } else {
    // 淡入效果
    if (fadeAlpha < 255) {
      fadeAlpha += 10; // 逐漸增加透明度
    }
    screen.tint(255, fadeAlpha); // 應用淡入效果
  }
​
  // 繪製頻道畫布（包含圖片和雜訊效果）
  if (currentChannel === 0) {
    image(channel1Img, 310, 275, 160, 125);
  } else {
    image(screen, 310, 275);
  }
  // 繪製電視圖片，確保它在最上層
  image(tvImg, 0, 0, width, height);
​
  // 顯示當前頻道
  fill(255);
  textSize(24);
  text(`Channel: ${currentChannel + 1}`, 20, 40);
}
​
function mousePressed() {
  currentChannel = (currentChannel + 1) % 3;
  isSwitching = true;
  noiseTimer = millis();
  if (switchSound) {
    switchSound.stop(); // 先停止之前的播放（避免重疊）
    switchSound.play(); // 播放音效
    setTimeout(() => {
      switchSound.stop();
    }, 300); // 0.3秒後停止播放
  }
}
​
function updateScreen() {
  screen.clear();
  if (currentChannel === 0) {
    drawChannel1();
  } else if (currentChannel === 1) {
    drawChannel2();
  } else {
    drawChannel3();
  }
}
​
function drawChannel1() { // 頻道 1：繪製圖片
  //screen.image(channel1Img, 0, 0, 160, 125); // 將圖片繪製到 screen 畫布
}
​
function drawChannel2() { // 頻道 2：顯示占位符
  screen.background(50);
  screen.fill(255);
  screen.textSize(24);
  screen.textAlign(CENTER, CENTER);
  screen.text("頻道 2", screen.width / 2, screen.height / 2);
}
​
function drawChannel3() { // 頻道 3：顯示占位符
  screen.background(50);
  screen.fill(255);
  screen.textSize(24);
  screen.textAlign(CENTER, CENTER);
  screen.text("頻道 3", screen.width / 2, screen.height / 2);
}
​
function drawNoise() {
  screen.clear();
  screen.background(0);
​
  // 隨機黑白條紋（模擬復古電視雪花屏）
  for (let y = 0; y < screen.height; y += 2) {
    if (random(1) > 0.5) {
      screen.stroke(random(150, 255));
      screen.line(0, y, screen.width, y);
    }
  }
​
  // 隨機閃爍點（使用你的 drawPoint 函數）
  xnoise = xstart;
  ynoise = ystart;
  for (let y = 0; y <= screen.height; y += 5) {
    ynoise += 0.1;
    xnoise = xstart;
    for (let x = 0; x <= screen.width; x += 5) {
      xnoise += 0.1;
      drawPoint(screen, x + random(-2, 2), y + random(-2, 2), noise(xnoise, ynoise)); // 加入輕微抖動
    }
  }
  xstart += 0.01;
  ystart += 0.01;
}
​
function drawPoint(pg, x, y, noiseFactor) {
  let len = noiseFactor * 10;
  pg.noFill();
  pg.stroke(64, 164, 164);
  pg.rect(x, y, len, len);
}