Comunidade brasileira de Processing e programação criativa
import { p5iframe } from "@esperanc/global-mode-p5"
p5GlobalSketch = p5iframe(
`function setup() {
createCanvas(400, 400);
background('lightgray');
circle (200,200,100)
}`,
{ height: 400 }
)
import { p5 } from "@tmcw/p5"
p5InstanceSketch = p5(function(p) {
p.setup = function() {
p.createCanvas(400, 400);
p.background('lightgray');
p.circle(200, 200, 100);
};
})
myCanvas = html`<canvas width=400 height=400 style='border:1px solid lightgray'>`
myCtx = myCanvas.getContext("2d")
{
let button = html`<button>Clique aqui para desenhar um círculo</button>`;
button.onclick = () => {
myCtx.fillStyle = 'lightgray';
myCtx.fillRect(0, 0, 400, 400);
myCtx.strokeStyle = 'black';
myCtx.fillStyle = 'white';
myCtx.beginPath();
myCtx.arc(200, 200, 50, 0, Math.PI * 2);
myCtx.stroke();
myCtx.fill();
};
return button;
}
p5radius = html`<input type=range min=1 max=50 value=20>`
p5Dynamic = p5(function(p) {
function clear() {
p.background('lightgray');
}
p.setup = function() {
p.createCanvas(400, 400);
p.background('lightgray');
p5clear.onclick = clear;
};
p.mousePressed = p.mouseDragged = function() {
p.circle(p.mouseX, p.mouseY, p5radius.value * 2);
};
})
viewof dynCanvasRadius = html`<input type=range min=1 max=50 value=20>`
viewof dynCanvasClear = html`<button>Limpar</button>`
dynCanvas = html`<canvas width=400 height=400 style=background:lightgray >`
dynCanvasMouseInteraction = {
const ctx = dynCanvas.getContext("2d");
dynCanvas.onmousedown = dynCanvas.onmousemove = function(e) {
if (e.buttons) {
ctx.strokeStyle = 'black';
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(e.offsetX, e.offsetY, dynCanvasRadius, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
}
};
}
dynCanvasClearInteraction = {
dynCanvasClear;
const ctx = dynCanvas.getContext("2d");
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, dynCanvas.width, dynCanvas.height);
}
viewof dynSvgRadius = html`<input type=range min=1 max=50 value=20>`
viewof dynSvgClear = html`<button>Clear</button>`
dynSVG = html`<svg width=400 height=400 style="background:lightgray">`
dynSvgMouseInteraction = {
dynSVG.onmousedown = dynSVG.onmousemove = function(e) {
if (e.buttons) {
dynSVG.append(
svg`<circle cx=${e.offsetX} cy=${e.offsetY} r=${dynSvgRadius} fill=white stroke=black>`
);
}
};
}
dynSvgClearInteraction = {
dynSvgClear;
for (let circle of dynSVG.querySelectorAll("circle"))
dynSVG.removeChild(circle);
}
p5Animation = p5(function(p) {
let circles = [];
p.setup = function() {
p.createCanvas(400, 400);
};
p.mousePressed = p.mouseDragged = function() {
circles.push([p.mouseX, p.mouseY, 30]);
};
p.draw = function() {
p.background('lightgray');
let newCircles = [];
for (let [x, y, r] of circles) {
p.circle(x, y, r * 2);
r = r * 0.99;
if (r > 1) newCircles.push([x, y, r]);
}
circles = newCircles;
};
})
canvasAnimationTimed = {
let circles = [];
let canvas = html`<canvas width=400 height=400 >`;
let ctx = canvas.getContext("2d");
canvas.onmousedown = canvas.onmousemove = function(e) {
if (e.buttons) circles.push([e.offsetX, e.offsetY, 30]);
};
function draw() {
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
let newCircles = [];
for (let [x, y, r] of circles) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
r = r * 0.99;
if (r > 1) newCircles.push([x, y, r]);
}
circles = newCircles;
}
let id = setInterval(draw, 1000 / 60);
invalidation.then(() => clearInterval(id));
return canvas;
}
canvasAnimationGenerator = {
let circles = [];
let canvas = html`<canvas width=400 height=400 >`;
let ctx = canvas.getContext("2d");
canvas.onmousedown = canvas.onmousemove = function(e) {
if (e.buttons) circles.push([e.offsetX, e.offsetY, 30]);
};
while (true) {
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, 400, 400);
ctx.fillStyle = 'white';
ctx.strokeStyle = 'black';
let newCircles = [];
for (let [x, y, r] of circles) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
r = r * 0.99;
if (r > 1) newCircles.push([x, y, r]);
}
circles = newCircles;
yield canvas;
}
}
animSVG = html`<svg width=400 height=400 style="background:lightgray">`
animSvgMouseInteraction = {
animSVG.onmousedown = animSVG.onmousemove = function(e) {
if (e.buttons) {
animSVG.append(
svg`<circle cx=${e.offsetX} cy=${e.offsetY} r=30 fill=white stroke=black>`
);
}
};
}
animSvgCircleAnimation = {
while (true) {
for (let circle of animSVG.querySelectorAll("circle")) {
let r = circle.getAttribute("r") * 0.99;
circle.setAttribute("r", r);
if (r <= 1) animSVG.removeChild(circle);
}
yield;
}
}
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.
