个人中心
gpt4 book ai didi

javascript - 在同一网页中动态更改 p5.js Canvas 的最佳方法是什么？

转载 作者：行者123 更新时间：2023-11-30 15:59:30 27 4
gpt4 key购买 nike

我正在尝试开发一个网页，让我只需从输入中选择一个选项即可更改 p5.js Canvas 和 slider 配置。

想法是每当我更改选定的动画时，网页都会显示在 html <head> 中定义的另一个 skecth。在这种特殊情况下:

sketch 和 sketch 4 是有效的。

我还需要更改 slider 配置，因为这取决于将显示的不同 slider 的草图。

现在。 我想到了两种方法。

第一个是改变src 属性使用另一个 javascript 文件 (sketchselector.js)。这是行不通的。它更改了 src 但页面不会重新加载以加载其他草图。

第二个是使用实例模式将每个草图定义为一个对象，我应该只在它更改选项时才这样做，它会更改对象。实例模式的问题在于，如果我想制作大量动画，我将不得不每次都使用它，这会使我的代码难以理解。

我想可能有很多方法可以做到这一点

因此我想知道最好的建议方法。

我期待收到你们的来信。

这是我一直试图让它工作的代码。

HTML

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Julito web page</title>
        
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        
        
        
        <!-- P5.js !!!! -->
        <script src="libraries/p5.js" type="text/javascript"></script>
        <script src="libraries/p5.dom.js" type="text/javascript"></script>
        <script src="libraries/p5.sound.js" type="text/javascript" ></script>
        
        
        <script src="sketch.js" type="text/javascript" id='skecthselect'></script> 
        <script src="sketch4.js" type="text/javascript"></script> 
        <!--<script src="sketch5.js" type="text/javascript"></script> -->

        
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
  
  
    <body>
        <div class="container-fluid"  >
            <div class="col-md-1 " style="background-color:blue"> </div>
            
            <div class="col-md-10 maincontent_jp" > 
                <div class="row header_jp" >
                
                    <div class="col-md-2"></div>
                    <div class="col-md-8 headertext_jp">
                        <h1 class="text-center"> Juli </h1>
                        <h3 class="text-center"> Multimedia explorer</h3>
                    </div>
                    <div class="col-md-2"></div>
                </div>
                
                <div class="row ">
                    <div class="col-md-1 "></div>
                    
                    <div class="col-md-10" id="sketchholder">
                    
                    
                        <div class="row" id="canvasholder" >
                        </div>

                        <div class="row" id="controladores" >
                            <div class="col-md-2"></div>
                            <div class="col-md-8">
                            
                                <div class="col-md-6" id="slid-controladores"></div>
                                <div class="col-md-6" id="slid-texto"></div>
                                
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                    
                    <div class="col-md-1" ></div>
                </div>
                
                <select id='selector' onchange="ChangeSketch()" name="skecthselector" >
                                  <option value="skecth1.js">Animacion 1</option>
                                  <option value="skecth2.js">Animacion 2</option>
                                  <option value="skecth3.js">Animacion 3</option>
                                  <option value="skecth4.js">Animacion 4</option>
                </select>
                <p id='koko'> </p>
            </div>
            
            <div class="col-md-1 " > </div>
        </div>
        
        
        <script src="sketchselector.js" type="text/javascript" ></script> 
    </body>
</html>

草图 1 

       //THIS IS A FUNCTION FOR DINAMYCALLY MAKE CANVAS FILL PAGE. 
        $( document ).ready(function() {
        
            var c=document.getElementById("cnv");
            var ctx=c.getContext("2d");
            ctx.beginPath();
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
        });
    
    var RectOrEllipse = false;
    var boton ; 
    var cont = 0; 
    var pepito ; 
    var RedP;
    var GreenP;
    var BlueP;
    var OpacityP;
    var SizeP;
    var maxwidth;
    var canvheight = 500;
    
      function setup () {
          
      //CREATING THE CANVAS 
    maxwidth = document.getElementById('canvasholder').offsetWidth;
    var canvasDiv = document.getElementById('canvasholder');
    var sketchCanvas = createCanvas(maxwidth/1.2,canvheight);
    console.log(sketchCanvas);
    sketchCanvas.parent("canvasholder");
    
    slidred = createSlider(1,255,150);
    slidgreen = createSlider(1,255,150);
    slidblue = createSlider(1,255,150);
    slidopacity = createSlider(0,100,50);
    slidsize = createSlider(1,300,150);
    
    slidred.parent('slid-controladores');
    slidgreen.parent('slid-controladores');
    slidblue.parent('slid-controladores');
    slidopacity.parent('slid-controladores');
    slidsize.parent('slid-controladores');
    
    RedP = createP('Rojo:'+slidred.value());
    GreenP = createP('Verde: '+slidgreen.value());
    BlueP = createP('Azul: '+slidblue.value());
    OpacityP = createP('Opacidad:'+slidopacity.value())
    SizeP = createP('Tamaño: '+slidsize.value());
    pepe = createP('X'+ mouseX + 'Y' + mouseY);
    
    RedP.parent('slid-texto');
    GreenP.parent('slid-texto'); 
    BlueP.parent('slid-texto');
    OpacityP.parent('slid-texto');
    SizeP.parent('slid-texto');
    
  }

  function draw() {
    maxwidth = document.getElementById('canvasholder').offsetWidth;
    
   noStroke();
   
    
    col = color(slidred.value(),slidgreen.value(),slidblue.value(),slidopacity.value());
    fill(slidred.value(),slidgreen.value(),slidblue.value(),slidopacity.value());
    //boton.style("background-color", col);
    
    if ((mouseIsPressed) && (mouseY < canvheight)){
        
        ellipse(mouseX, mouseY, slidsize.value(),slidsize.value());
    }
    
    slidred.input(Actualizar);
    slidgreen.input(Actualizar);
    slidblue.input(Actualizar);
    slidopacity.input(Actualizar);
    slidsize.input(Actualizar);
    pepe.html('X'+ mouseX + 'Y' + mouseY + 'MAX WIDTH' + maxwidth);
  }
  
  function Actualizar() {
  
    RedP.html('Rojo:'+slidred.value());
    GreenP.html('Verde: '+slidgreen.value());
    BlueP.html('Azul: '+slidblue.value());
    OpacityP.html('Opacidad:'+slidopacity.value());
    SizeP.html('Tamaño: '+slidsize.value());
    
  }
  
$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

草图 2 

var ball = {
    x: 150,
    y: 150,
    xspeed:0.5,
    yspeed:-0.2,
    
    display: function(tamaño) {
        stroke(1);
        strokeWeight(1);
        noFill();
        ellipse(this.x,this.y,tamaño,tamaño);
    },
    
    bounce: function() {
        if (this.x > width || this.x < 0){
            this.xspeed = this.xspeed * -1;
        }
        if (this.y > height || this.y < 0){
            this.yspeed = this.yspeed * -1;
        }
    },
    
    move: function () {
    
    /*ball.xspeed = velocidad;
    ball.yspeed = velocidad;*/
    
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
    },
    
    createBall : function (){
        this.display();
        this.move();
       this.bounce();
    }
}
var i;  
function setup() {
    var sketchCanvas = createCanvas(300,300);
    sketchCanvas.parent("canvasholder");
}

function draw() {
    background('#F0F');
    
    //ball.createBall();
        ball.display(50);
        ball.move();
        ball.bounce();
}

添加:

好吧，我在实例模式下试过这个，但也不行。

我在一个 javascript 文件中定义了两个草图。当我调用他们时，他们工作得很好。问题是当我想选择一个而不是另一个时。那是行不通的。

这里添加的代码:

function ChangeSketch() {
lala = document.getElementById('selector').value;
document.getElementById('koko').innerHTML = lala;  




/*new p5(sketch1, 'canv2');
    new p5(sketch1, 'canv1');*/
    
    function setup(){
    createP('TENGO MIEDO');
    new p5(sketch2);
    new p5(sketch1);
    }
     }

最佳答案

假设您有两个 JavaScript 文件:

one.js

function printOne(){
    console.log("one");
    setTimeout(printOne, 1000);
}

printOne();

two.js

function printTwo(){
    console.log("two");
    setTimeout(printTwo, 1000);
}

printTwo();

然后在 index.html 中加载第一个:

<!DOCTYPE html>
<html>
    <head>
        <script id="MyJavaScript" src="one.js"></script>
    </head>

    <body>
    </body>
</html>

如果您保存这些文件，然后在 Web 浏览器中打开 index.html，您将看到 one 一遍又一遍地打印到控制台。

现在我们希望能够将 JavaScript 从 one.js 更改为 two.js。因此，让我们在 html 的 body 中添加一个 button:

<button onclick="changeMyJavaScript()">Click</button>

我们可能会尝试通过简单地更改 script 标记的 src 属性来更改它:

function changeMyJavaScript(){
   var script = document.getElementById("MyJavaScript");
   console.log("old: " + script.src);
   script.src = "two.js";       
   console.log("new: " + script.src);
}

我们可能认为这行得通，但是 one 只是一直打印到控制台!如果我们尝试手动调用 printTwo()，我们会收到一条错误消息，指出它未定义。

简单地更改 script 标记的 src 属性不会运行新的 src。

但是，我们可以创建一个新的 script 标签并将其添加到 DOM 中:

function changeMyJavaScript(){
    var newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = "two.js"; 
    document.getElementsByTagName('head')[0].appendChild(newScript);
}

现在我们将看到 two 开始打印到控制台。但是，我们仍然有一个问题:one 也继续打印到控制台。这是有道理的。我们实际上并没有告诉我们的代码停止打印one。请注意，从 DOM 中删除 script 标记不会执行任何操作。另请注意，如果我们多次单击我们的按钮，我们将越来越频繁地看到 two 打印到控制台。

您如何处理这实际上取决于您的代码和 p5.js。我不确定 p5.js 是否提供“停止运行我的代码”功能，但我对此表示怀疑。您可能必须创建自己的停止函数，然后在激活新脚本之前调用它们。

如果我是你，我会把我所有的代码都放在一个草图中，然后在处理代码中在它们之间切换。您还可以将 Processing 草图拆分为多个 JavaScript 文件并在开始时加载它们，但仍然在 Processing 中进行所有切换。

关于javascript - 在同一网页中动态更改 p5.js Canvas 的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37979817/

27 4 0
文章推荐： c# - 在 ASP.NET MVC 和 WPF MVVM 中重用相同的模型
文章推荐： C Unix套接字编程，确保读/写字节数？
文章推荐： c# - 无法在 asp.net View 中显示来自数据库的图像
文章推荐： c - cvSeqPush 是如何工作的？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com