You are on page 1of 5

P5 + LATEX & P5 + GEOGEBRA & P5 +CAS

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"
/>

<!-- The loading of KaTeX is deferred to speed up page rendering -->


<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.15.3/dist/katex.min.js"
integrity="sha384-0fdwu/T/EQMsQlrHCCHoH10pkPLlKA1jL5dFyUOvB3lfeT2540/2g6YgSi2BL14p"
crossorigin="anonymous"
></script>

<!-- 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

let applet = new GGBApplet(ggbParameters, true);

//when used with Math Apps Bundle, uncomment this:


//applet.setHTML5Codebase('GeoGebra/HTML5/5.0/webSimple/');

window.onload = function () {

};

function evalInput(strInput) {
ggb.evalCommand(strInput);
return false;
}
_______________________________Skecth______________________________
function setup() {

applet.inject("ggb-element")

//Inserir os comandos GeogebraScript separados por vírgulas


ggbConstr=`
A=(-4,0);
B=(-4,1)
`
3. P5 +CAS

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>

<!-- este script faz carregar o geogebra !-->


<script
type="text/javascript"
src="https://cdn.geogebra.org/apps/deployggb.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>

<div style=" display: flex;">


<textarea id="in-cmd">Solve(x^3 = 4x+3);</textarea>
</div>
<input value="Calcular-(Shift+Enter)" onclick="CAS()" type="button" />

<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,
height: 500,
showToolBar: false,
borderColor: null,
showMenuBar: false,
showAlgebraInput: true,
showResetIcon: true,
enableLabelDrags: false,
enableShiftDragZoom: true,
enableRightClick: true,
capturingThreshold: null,
showToolBarHelp: false,
errorDialogsActive: true,
useBrowserForJS: false,
material_id: "mj5mha7a",
appletOnLoad: (api) =>
ggbCASinit
.replaceAll("\n", "")
.split(";")
.forEach((x) => api.evalCommandCAS(x)),
};

//Iniciar applicação GeoGebra


//https://wiki.geogebra.org/en/Reference:GeoGebra_Apps_Embedding
//só no setup() é que inicializa completamente

let applet = new GGBApplet(ggbParameters, true);

//when used with Math Apps Bundle, uncomment this:


//applet.setHTML5Codebase('GeoGebra/HTML5/5.0/webSimple/');

window.onload = function () {};

//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");
}

//Inserir os comandos GeogebraScript iniciais, separados por ;


ggbCASinit = `ok;
`;

function keyPressed() {
if (keyCode === ENTER) {
if (keyIsDown(SHIFT)) {
CAS();
}
}
}

You might also like