Professional Documents
Culture Documents
1. P5 + LATEX
Index____________________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.css"
integrity="sha384-KiWOvVjnN8qwAZbuQyWDIbfCLFhLXNETzBQjA/92pIowpC0d2O3nppDGQVgwd2nB"
crossorigin="anonymous"
/>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/contrib/auto-render.min.js"
integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR"
crossorigin="anonymous"
onload="renderMathInElement(document.body);"
></script>
<script
defer="defer"
src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
crossorigin="anonymous"
onload='renderMathInElement(document.body,
{delimiters:[ {left: "$$", right: "$$" , display: true},
{left: "$" , right: "$" , display: false},
{left: "\\(" , right: "\\)" , display: false},
{left: "\\[" , right: "\\]" , display: true}
]
});'
></script>
<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
</head>
<body lang="pt">
Escreva aqui as suas fórmulas em $\LaTeX$ $$e^{\pi i} + 1 \ = \ 0$$
$\sqrt{2}$
</body>
</html>
2. P5+ GEOGEBRA
Index__________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Single applet + API</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script
type="text/javascript"
src="https://cdn.geogebra.org/apps/deployggb.js"
></script>
<link rel="stylesheet" href="https://www.geogebra.org/m/ezvfnpbv">
</head>
<body>
<div
id="ggb-element"
style="resize:both"
></div>
<script src="GeoGebra-init.js"></script>
<script src="sketch.js"></script>
</body>
</html>
JS__________________________________________________________________
//parametros para iniciar GeoGebra
//https://wiki.geogebra.org/en/Reference:GeoGebra_App_Parameters
let ggbParameters = {
id:"ggb",
prerelease: false,
width: 800, //largura da janela do Geogebra: obrigatório
height: 600, //altura da janela do Geogebra: obrigatório
showToolBar: true, //indica se a barra de ferramentas do Geogebra em cima deve ser mostrada ou não
borderColor: null,
showMenuBar: false, //indica se a barra do menu do Geogebra deve ser mostrada ou não
showAlgebraInput: true, //indica se a barra de entrada do Geogebra deve ser mostrada ou não
showResetIcon: false, //indica se as setas em formato de elipse devem ser mostradas ou nao; as construções em
geogebra feitas em p5 são apagadas e volta ao ficheiro inicial
enableLabelDrags: false,
enableShiftDragZoom: true, //indica se os gráficos podem ser movidos ou aumentados
enableRightClick: true,
captureThreshold: null,
showToolBarHelp: false,
errorDialogsActive: true,
useBrowserForJS: false,
material_id: "mj5mha7a",
appletOnLoad:(api)=>ggbConstr.replaceAll("\n","").split(";").forEach((x)=>api.evalCommand(x))
}; //appletOnLoad:o que está em JS é executado quando o programa é iniciado
//Iniciar applicação GeoGebra
//https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding
//só no setup() é que inicializa completamente
window.onload = function () {
};
function evalInput(strInput) {
ggb.evalCommand(strInput);
return false;
}
_______________________________Skecth______________________________
function setup() {
applet.inject("ggb-element")
Index ________________________
<!DOCTYPE html>
<html>
<head>
<title>Single applet + API</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"
/>
</head>
<body>
<div id="ggb-element" style="display:none"></div>
<div id="out-cmd" style="resize:both"></div>
<script src="GeoGebra-init.js"></script>
<script src="sketch.js"></script>
</body>
</html>
JS________________________
//executa GeoGebrascript
function evalInput(strInput) {
ggb.evalCommand(strInput);
return false;
}
//executa CAS
function evalICAS(strInput) {
ggb.evalCommandCAS(strInput);
return false;
}
//função envia o c9mando em in-cmd envia para o CAS e escreve a resposta em out-cmd
function CAS() {
let cmd = document.getElementById("in-cmd").value;
document.getElementById("out-cmd").innerHTML +=
"In: " + cmd + "</br>" + "Out: " + ggb.evalCommandCAS(cmd) + "</br>";
}
___________________________SJETCH__________________________
function setup() {
applet.inject("ggb-element");
}
function keyPressed() {
if (keyCode === ENTER) {
if (keyIsDown(SHIFT)) {
CAS();
}
}
}