【发布时间】：2021-06-24 04:18:09
【问题描述】：
我在为移动设备和大屏幕调整 p5.js 草图的元素大小时遇到了麻烦。
特别是我需要对声音做出反应的白色圆圈和 obj 在移动设备上缩小并在大屏幕上缩放。此外，我需要将鼠标悬停在播放按钮上时出现的信息稍微向右移动 - 以便在移动设备上时它们不会被按钮副本覆盖。
我尝试使用带有 JavaScript 的媒体查询，但它似乎不起作用。
这是草图的编辑器： https://editor.p5js.org/c.b/sketches/yeGBMr1PD
有什么想法吗？谢谢！
var song;
var button;
var amp;
var canvas;
var showInfo = false;
let angle;
let extraCanvas;
let kitten;
let train;
function preload() {
kitten = loadImage('kitten2.jpg');
train = loadModel('train-corrected.obj');
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function setup() {
canvas = createCanvas (windowWidth, windowHeight);
canvas.position (0, 0);
canvas.style('z-index', '-3');
song = loadSound('yume.mp3', loaded);
amp = new p5.Amplitude();
background('#F4EDED');
extraCanvas = createGraphics(windowWidth, windowHeight, WEBGL);
extraCanvas.clear();
}
function loaded() {
button = createButton('Play');
button.mousePressed(togglePlaying);
button.mouseOver(onMouseOver);
button.mouseOut(onMouseOut);
button.position(15,15);
button.style('background-color', '#F4EDED');
button.style('color:#E21118');
button.style('font-size', '1.9em');
button.style('border', '0');
button.style('background', 'none');
button.style('outline', 'none');
}
function draw() {
//sound reaction
background('#F4EDED');
var vol = amp.getLevel();
var diam = map(vol, 0, 0.3, 360, 500);
fill('#FFFFFF');
noStroke();
ellipse(width / 2, height / 2, diam, diam);
if(showInfo) {
let s = 'Yume Miru Kokoro by Riki Miyagawa, \nJapan 1934. \nThis could loop all morning.';
fill(50);
text(s, 105, 20, 250, 80); // Text wraps within text box
}
// obj
extraCanvas.ambientLight(30);
extraCanvas.directionalLight(255, 255, 255, 0, 80, 15);
extraCanvas.directionalLight(255, 255, 255, 0, -180, 5);
extraCanvas.directionalLight(86, 54, 2, 0, 0, 1);
extraCanvas.noStroke();
extraCanvas.push();
extraCanvas.rotateZ(frameCount * 0.003);
extraCanvas.rotateX(frameCount * 0.005);
extraCanvas.rotateY(frameCount * 0.003);
// Rotate in direction of mouse
let posX = width/6;
let posY = height/6;
let angle = Math.atan2(mouseY-posY, mouseX-posX);
// Rotate on MouseDrag
/*let angle = 0;
if (mouseIsPressed) {
angle = atan2(mouseY - height / 2, mouseX - width / 2);
}*/
extraCanvas.rotateX(angle);
extraCanvas.rotateY(angle);
extraCanvas.rotateZ(angle);
//extraCanvas.translate(-100, 0, 0);
extraCanvas.clear();
extraCanvas.texture(kitten);
extraCanvas.model(train);
imageMode(CENTER)
image(extraCanvas, width / 2, height / 2);
//image(extraCanvas, 0, 0);
//extraCanvas.imageMode(CENTER);
extraCanvas.pop();
}
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "black";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 550px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
function togglePlaying() {
if (!song.isPlaying()) {
song.play();
song.setVolume(0.3);
button.html('Pause');
} else {
song.stop();
button.html('Play');
}
}
function onMouseOver() {
showInfo = true;
}
function onMouseOut(){
showInfo = false;
}html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>【问题讨论】：
-
嘿，对不起，如果我没有这样做。只是不知道如何在sn-p中上传3D模型。这就是我包含 p5.js 编辑器的原因
标签： mobile media-queries responsive p5.js