Как лучше всего изменить холст P5.JS динамически на одной веб -странице? ⇐ Html

[Anonymous]

Я пытаюсь разработать веб -страницу, которая позволяет мне изменить холст p5.js, а также распоряжение слайдером только с выбором опции с ввода. Работа.sketchselector.js). Это не работает. Он меняет SRC, но страница не будет перезагружаться, чтобы загрузить этот другой эскиз. Проблема с режимом экземпляра заключается в том, что если я хочу сделать много анимаций, мне придется использовать его каждый раз, и это затрудняет понимание моего кода. < /P>
Я думаю, что может быть много способов сделать это. Код, который я пытался сделать работу.
html




Julito web page




























Juli
Multimedia explorer



















Animacion 1
Animacion 2
Animacion 3
Animacion 4










sketch 1
//THIS IS A FUNCTION FOR DYNAMICALLY 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();

});

sketch 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();
}
< /code>
Добавлено: < /p>
Ну, я попробовал этот один в режиме экземпляра и также не работаю. Когда я называю их, они работают просто отлично. Проблема в том, когда я хочу выбрать один над другим. Это не работает. < /P>
Здесь добавлен код: < /p>
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);
}
}


Подробнее здесь: https://stackoverflow.com/questions/379 ... me-webpage