p5.js音量按钮演变高尔夫球量小游戏

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var colorBG = "#95d29d";
var colorFG = "#46824e"
var colorSlider = "rgba(70, 130, 78,0.3)";
var colorSliderFill = "#bae6c1";
var sliderY, sliderX1, sliderX2, sliderLength;
var knob, knobX, knobSize;
var volume;
var dragging, animating;
var iconFont, iconGlyph, iconSize;
var force, fX1, fX2, fY1, fY2;
var dest, step, stepFirst, distance, bounce;

function preload() {
  iconFont = loadFont('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/webfonts/fa-solid-900.ttf');
}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  fill(0);
  sliderY = height/2;
  sliderX1 = width/3;
  sliderX2 = width - width/3;
  sliderLength = sliderX2 - sliderX1;
  knobX = sliderX1;
  knobSize = 18;
  volume = 0;
  dragging = false;
  animating = false;
  iconGlyph = "\u{F028}";
  iconSize = 35;
  ease = 0.1;
  angleMode(DEGREES);
}

function draw() {
  background(colorBG);
  drawSlider();
  drawFlag(sliderX2, sliderY);
  drawIcon();
    
  
  drawKnob();
  
  if (dragging)
    drawForce();
  if (animating)
    moveKnob();
  
  writeVolume();
  
  // debug();
}

function mousePressed() {
  let knobTarget = dist(mouseX, mouseY, knobX, sliderY);
  let muteTarget = dist(mouseX, mouseY, sliderX1-iconSize-20, sliderY-3);
  if (animating == false) {
    if (knobTarget < knobSize/2)
      dragging = true;
    if (muteTarget < iconSize)
      setup();
  }
}

function mouseReleased() {
  if (dragging == true) {
    console.log("Release");
    animating = true;
  }
  dragging = false;
}

/* ANIMATION */

// How much force should we apply on release?
function drawForce() {
  f1 = createVector(knobX, sliderY);
  f2 = createVector(mouseX, mouseY);  
  let max = sliderLength/2;
  let min = dist(f1.x, f1.y, f2.x, f2.y) - knobSize/2;
  let factor = 5;
  let f = constrain(map(abs(f1.x - f2.x), 0, max, 0.5, factor), 0, factor);
  let weight = 3;  
  let s = constrain(map(min, 0, knobSize*2, 0, 1), 0, 1);
  
  // Set physics data
  force = constrain(f * round(knobX - mouseX), -max*f, max*f);
  dest = knobX + force;  
  stepFirst = force * ease;
  
  // Set color, based on force above
  let r, g, b;
  let c1 = {r: 78, g: 170, b: 255};
  let c2 = {r: 241, g: 45, b: 45};  
  r = mapColor(c1.r, c2.r, knobSize, max);
  g = mapColor(c1.g, c2.g, knobSize, max);
  b = mapColor(c1.b, c2.b, knobSize, max);
  let c = "rgb(" + r + "," + g + "," + b + ")";
  stroke(c);
  fill(c);
  
  // Draw arrow
  push();
  strokeJoin(ROUND);
  translate(f1.x, f1.y);  
  rotate(f2.sub(f1).heading() - 90);  
  translate(0, (knobSize/2 + weight));
  strokeWeight(weight*2*s);
  let l = abs(dist(mouseX, mouseY, knobX, sliderY)-knobSize/1.5);
  if (l>max)
    l=max;
  line(0,knobSize*s, 0, l);
  scale(s);
  strokeWeight(weight*s+weight*s);
  triangle(0, weight, knobSize/4 + weight, knobSize - weight,-knobSize/4 - weight, knobSize - weight);
  pop();
}

// Per frame, where are we going? 
function moveCheck() {
  distance = dest - knobX;
  step = distance * ease;

// Animate Knob Movement
function moveKnob() {
  if(force != 0){
    moveCheck();
    knobX += step;
    
    if (around(knobX, dest, ceil(abs(step)))) {
      knobX = dest;
      animating = false;
    }
  }
  
  getVolume();
}

// Draw debug lines
function debug() {
  // dest
  noFill();
  stroke(255,0,0);
  strokeWeight(1);
  circle(dest, sliderY, knobSize);
  
  // step
  line(knobX, sliderY+2, knobX+step, sliderY+2);
  
  // force
  stroke(0,0,255);
  line(knobX, sliderY, knobX+force, sliderY);
  
  // distance 
  stroke(255,0,255);
  line(knobX, sliderY-2, knobX+distance, sliderY-2);  
}

/* VISUALS */

// Knob Shape Data
function drawKnob() {
  
  let shadow = "rgba(0,0,0,0.2)"
  noStroke();
  fill(shadow);
  circle(knobX, sliderY+2, knobSize);
  
  fill(255);
  knob = circle(knobX, sliderY, knobSize);
}

// Slider Shape Data
function drawSlider() {  
  stroke(colorSlider);
  strokeCap(round);
  strokeWeight(6);
  line(sliderX1, sliderY, sliderX2, sliderY);
  
  stroke(colorSliderFill);  
  line(sliderX1, sliderY, knobX, sliderY);
};

// Volume Icon Shape Data
function drawIcon() {  
  fill(colorFG);
  textFont(iconFont, iconSize);
  textAlign(LEFT, CENTER);

if (volume == 0)
    iconGlyph = "\u{F6A9}";
  else if (volume < 50)
    iconGlyph = "\u{F027}";
  else if (volume >= 50)
    iconGlyph = "\u{F028}";

text(iconGlyph, sliderX1-iconSize-20, sliderY-3);
}

// Message Shape Data
function getVolume() {
  let val = round(knobX);
  let vol = map(round(val), sliderX1, sliderX2, 0, 100);
  volume = round(vol);
}
function writeVolume() {
  let color = colorFG;
  let val = 100 - volume;
  let unit = "yard";
  let message;
  fill(color);
  noStroke();
  textSize(18);
  textFont('Helvetica')
  textAlign(CENTER, CENTER);
  
  if (val != 1) {
    unit = join([unit, 's'], '');
  }
    message = join([val, unit, "from the hole"], " ");
  if (val == 0 && animating == false) {    
    textSize(22);
    message = "Max Golfume!";
  }
  
  text(message, width/2, sliderY - 50);
}

// Flag/Hole Shape Data
function drawFlag(x,y) {
  let height = 35;
  let top = y - height;
  let flagH = 15;
  let flagW = 15;
  
  // Flag
  noStroke();
  fill("#e83838");
  triangle(x, top, x + flagW, top + flagH/2, x, top + flagH);  
  
  // Pole
  stroke(0);
  strokeWeight(4);
  line(x,y, x, top);
  
  // Hole 
  noStroke();
  fill("rgba(0,0,0,0.6)");
  ellipse(x,y, 20, 10); 
}

/* HELPERS */

function around(value, base, buffer) {
  if (value > base - buffer && value < base + buffer)
    return true;
  else
    return false;  
}

function mapColor(c1, c2, m1, m2) {
  return constrain(round(map(abs(knobX - mouseX), m1, m2, c1, c2)), min(c1, c2), max(c1, c2));
}

function touchStarted() {
  mousePressed();
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg