jeudi 23 juin 2016
What is the best way to change p5.js canvas dinamycally in the same webpage?
Im tryng to develop a webpage that allows me to change the p5.js canvas and also the slider disposition with just selecting an option from an input.
In this sample page you will see what im tryng to do :
http://julianpuppo.com/
The idea is that whenever I change the selected animation, the web page displays another skecth that is defined in the html in this particular case :
sketch and sketch 4 are the ones that are working.
I also need to change the sliders disposition because
It depends on the sketch the different sliders that will be displayed.
Now . I think of two ways of doing this.
The first one is to change the
src atributte using another javascript file (sketchselector.js). This is not working. It changes the src but the page wont reload to load that other sketch.
The second one is to defined every sketch as an object using instance mode and I should only make that when ever it changes the option it changes the object. The problem with instance mode is that if i want to make a lot of animations im going to have to use it everytime and it makes my code hard to understand.
I guess that there may be A LOT of ways of doing it
therefore i want to know the best suggested way to it.
I look forward to hearing from you people.
Here is the code i´ve been tryng to make it work.
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>
SKETCH 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();
});
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();
}
ADDED :
Well I´ve tryed this one in INSTANCE MODE and is not working either.
I defined two sketches in a single javascript file. when I call them they work just fine. The problem is when I want to select one over the other. That´s not working.
Here the added code :
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);
}
}
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire