Interaction Designer, Creative Technologist, Professor and Researcher
Published
Edited
Jul 4, 2021
Importers
processing(processing_sketch)
processing = function(sketch, estilo = "width: 100%; height: 410px;") {
let iframe = html`<iframe frameborder="0" style="${estilo}"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms allow-modals allow-downloads"></iframe>`;
iframe.srcdoc = `<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="UTF-8" />
<script src="https://www.ranoya.com/public/dev/processing.min.js"></script>
<style>
canvas, body, html {
padding:0;
margin:0;
}
</style>
</head>
<body>
<canvas id='meuProcessingJS'></canvas>
<script type="text/processing" data-processing-target='meuProcessingJS'>
${sketch}</script></body></html>`;
return iframe;
}
p5(p5_sketch)
p5 = function (
sketch,
estilo = "width: 100%; height: 400px;",
consolestyle = "display: none; overflow: hidden; width: calc(100% - 40px); padding: 20px; height: 0; background-color: black; color: white; font-family: Courier, monospace; font-size: 12px; line-height: 14px; position: fixed; top: 0; left: 0; z-index: 100;"
) {
var rex = /createCanvas\((.*),(.*)\)/i;
var tamanhos = rex.exec(sketch);
var ifw = tamanhos[1];
var ifh = tamanhos[2];
var revw = estilo.replace(/(width:.{2,10};)/i, "width: " + ifw + "px;");
var revh = revw.replace(
/(height:.{2,10};)/i,
"height: " + (parseInt(ifh) + 4) + "px;"
);
let iframe = html`<iframe frameborder="0" style="${revh}"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms allow-modals allow-downloads"></iframe>`;
iframe.srcdoc = `<!DOCTYPE HTML>
<html lang="en"><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js" crossorigin=""></script>
<meta charset="utf-8">
<style>
canvas, body, html {
padding:0;
margin:0;
}
</style>
</head>
<body style="margin:0;padding:0;"><script>${sketch}</script>
<div id="p5consoleoutput" style='${consolestyle}'></div>
<script>
console.defaultLog = console.log.bind(console);
console.logs = [];
p5.prototype.print = function(c) {
var c2 = c.replace("\\n","<br>");
document.getElementById('p5consoleoutput').style.display = 'block';
document.getElementById('p5consoleoutput').style.height = 'auto';
var a = document.getElementById('p5consoleoutput').innerHTML;
document.getElementById('p5consoleoutput').innerHTML = a + c2;
}
console.log = function () {
console.defaultLog.apply(console, arguments);
console.logs.push(Array.from(arguments));
if (arguments[0].match(/p5.js says/)) {
document.getElementById('p5consoleoutput').style.display = 'block';
document.getElementById('p5consoleoutput').style.height = 'auto';
var q = document.getElementById('p5consoleoutput').innerHTML;
if (q != "") {
document.getElementById('p5consoleoutput').innerHTML = q + "<br>" + arguments[0];
} else {
document.getElementById('p5consoleoutput').innerHTML = arguments[0];
}
}
}
</script>
</body></html>`;
return iframe;
}
pythonProcessing(codePython)
pythonProcessing = function(codigo, estilo = "width: 100%; height: 410px;") {
let iframe = html`<iframe frameborder="0" style="${estilo}"
sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms allow-modals allow-downloads"></iframe>`;
iframe.srcdoc = `
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pyp5js with Pyodide Demo</title>
<style> body, html, div, canvas {padding: 0; margin: 0; } </style>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<script src="https://pyodide-cdn2.iodide.io/v0.15.0/full/pyodide.js"></script>
<script>
let initialSketch = \`${codigo}\`;
</script>
</head>
<body>
<div class="demoContainer" style="width: 100%; height: 100%;">
</div>
<script src="https://www.ranoya.com/Assets/JSLibs/ObservablePythonProcessing/iframecode.js"></script></body>
</html>
`;
return iframe;
}
aceinstance = function(
c = "",
o = {
theme: "ace/theme/xcode",
selectionStyle: "text",
highlightActiveLine: false,
mode: "ace/mode/javascript",
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
enableSnippets: true,
showPrintMargin: false,
showGutter: false
},
e = 'fontSize: "0.8em", height: "260px"'
) {
let codigoinicial = ``;
// Instanciando o editor
const { editor, view } = ace(c, e, o);
// Captura o valor inicial
view.value = editor.getValue();
// Reage a qualquer mudança feita no editor
editor.on('change', () => {
view.value = editor.getValue();
});
return view;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
