Diferencia entre revisiones de «Widget:P5»
De Casiopea
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
<noinclude> | <noinclude> | ||
<div style='background-color: #f7cfcf; | |||
color: #C00; | |||
border: 1px solid rgba(0,0,0,.05); | |||
padding: .3em 1em 0.5em 1em; | |||
margin-bottom: 2em !important; | |||
border-radius: 4px; | |||
line-height: 150%; | |||
font-weight: normal;'>En esta página es para '''usuarios avanzados''' que conocen conceptos de programación en javascript. El mal uso de este Widget puede provocar comportamientos inesperados. | |||
</div> | |||
Este Widget permite ingresar código de [http://p5js.org P5js] directamente en la página, sin la necesidad de insertar un iframe como lo hace [[Widget:P5js|este otro widget de P5js]]. | |||
Se utiliza del siguiente modo: | |||
<pre><nowiki> | <pre><nowiki> | ||
{{#widget:P5 | {{#widget:P5 | ||
|id = opcional | |||
|code = pegar acá el código | |code = pegar acá el código | ||
}}</nowiki></pre> | }}</nowiki></pre> | ||
El sketch de p5 se incorpora dentro de un '''div''' con el '''id''' indicado. Si no se define el campo '''id''' su valor predeterminado es 'p5'. El sentido de utilizar este widget es para poder embeber objetos canvas que sean responsivos al tamaño. Para lograr esto es necesario definir algo del tipo: | |||
<pre><nowiki> | |||
function setup() { | |||
sketch = createCanvas(document.getElementById("p5").offsetWidth, 350); | |||
sketch.parent('p5'); | |||
} | |||
</nowiki></pre>. | |||
{{#widget:P5 | {{#widget:P5 | ||
| Línea 95: | Línea 117: | ||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script> | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script> | ||
<script type="text/javascript"><!--{$code|default:' '}--></script> | <script type="text/javascript"><!--{$code|default:' '}--></script> | ||
<div id="p5"></div> | <div id="<!--{$id|escape:'html'|default:'p5'}-->"></div> | ||
</includeonly> | </includeonly> | ||
Revisión del 19:48 23 mar 2020
En esta página es para usuarios avanzados que conocen conceptos de programación en javascript. El mal uso de este Widget puede provocar comportamientos inesperados.
Este Widget permite ingresar código de P5js directamente en la página, sin la necesidad de insertar un iframe como lo hace este otro widget de P5js.
Se utiliza del siguiente modo:
{{#widget:P5
|id = opcional
|code = pegar acá el código
}}
El sketch de p5 se incorpora dentro de un div con el id indicado. Si no se define el campo id su valor predeterminado es 'p5'. El sentido de utilizar este widget es para poder embeber objetos canvas que sean responsivos al tamaño. Para lograr esto es necesario definir algo del tipo:
function setup() {
sketch = createCanvas(document.getElementById("p5").offsetWidth, 350);
sketch.parent('p5');
}
.
