使い方マニュアルUser manual

let diameter = 100;
function setup() {
  createCanvas(400, 280);
}
function draw() {
  background('#F1F1EA');
  noStroke();
  fill('#B85338');
  circle(200, 140, diameter);
}

function setup() { createCanvas(400, 280); }
function draw() {
  background('#F1F1EA');
  noStroke();
  fill('#B85338');
  let x = 200 + sin(frameCount * 0.03) * 100; //?
  circle(x, 140, 60);
}

let size = 100; // @slider(20, 200, 10) "Size"
let count = 3; // @int(1, 6) "Count"
let ink = '#B85338'; // @color "Ink"
let moving = false; // @toggle "Rotate"
let shape = 'circle'; // @choice(circle, square, triangle) "Shape"
function setup() { createCanvas(400, 280); }
function draw() {
  background('#F1F1EA');
  translate(200, 140);
  if (moving) rotate(frameCount * 0.015);
  noStroke();
  fill(ink);
  for (let i = 0; i < count; i++) {
    push();
    rotate(TWO_PI * i / count);
    translate(count === 1 ? 0 : 65, 0);
    if (shape === 'circle') circle(0, 0, size);
    else if (shape === 'square') { rectMode(CENTER); square(0, 0, size); }
    else triangle(0, -size / 2, size / 2, size / 2, -size / 2, size / 2);
    pop();
  }
}

// @rin number size "Size" 20 200 100 10
// @rin number count "Count" 1 6 3 1
// @rin color ink "Ink" #B85338
// @rin boolean moving "Rotate" false
// @rin choice shape "Shape" circle circle square triangle
function setup() { createCanvas(400, 280); }
function draw() {
  background('#F1F1EA');
  translate(200, 140);
  if (rinParams.moving) rotate(frameCount * 0.015);
  noStroke();
  fill(rinParams.ink);
  for (let i = 0; i < rinParams.count; i++) {
    push();
    rotate(TWO_PI * i / rinParams.count);
    translate(rinParams.count === 1 ? 0 : 65, 0);
    let s = rinParams.size;
    if (rinParams.shape === 'circle') circle(0, 0, s);
    else if (rinParams.shape === 'square') { rectMode(CENTER); square(0, 0, s); }
    else triangle(0, -s / 2, s / 2, s / 2, -s / 2, s / 2);
    pop();
  }
}

export const diameter = 120;

import { diameter } from './lib/math.mjs';

window.setup = function () { createCanvas(400, 280); };
window.draw = function () {
  background(242);
  circle(200, 140, diameter);
};

function setup() {
  createCanvas(400, 280);
}
function draw() {
  background('#F1F1EA');
  noStroke();
  fill('#B85338');
  let x = 200 + sin(frameCount * 0.025) * 100;
  circle(x, 140, 70);
}

function setup() { createCanvas(400, 280, WEBGL); }
function draw() {
  background('#F1F1EA');
  rotateX(frameCount * 0.008);
  rotateY(frameCount * 0.012);
  normalMaterial();
  box(110);
}

const vertexSource = `
precision highp float;
attribute vec3 aPosition;
varying vec2 uv;
void main() {
  uv = (aPosition.xy + 1.0) * 0.5;
  gl_Position = vec4(aPosition, 1.0);
}`;
const fragment = `
precision highp float;
varying vec2 uv;
void main() {
  gl_FragColor = vec4(uv.x, 0.3, uv.y, 1.0);
}`;
let gradient;
function setup() {
  createCanvas(400, 280, WEBGL);
  gradient = createShader(vertexSource, fragment);
  noStroke();
}
function draw() {
  shader(gradient);
  beginShape(TRIANGLE_STRIP);
  vertex(-1, -1, 0); vertex(1, -1, 0);
  vertex(-1, 1, 0); vertex(1, 1, 0);
  endShape();
}

let engine, ball;
function setup() {
  createCanvas(400, 280);
  engine = Matter.Engine.create();
  ball = Matter.Bodies.circle(200, 40, 24, { restitution: 0.75 });
  const floor = Matter.Bodies.rectangle(200, 270, 400, 20, { isStatic: true });
  Matter.Composite.add(engine.world, [ball, floor]);
}
function draw() {
  Matter.Engine.update(engine, 1000 / 60);
  background('#F1F1EA');
  noStroke();
  fill('#426B5D'); rect(0, 260, 400, 20);
  fill('#B85338'); circle(ball.position.x, ball.position.y, 48);
}

let ink = '#B85338';
function setup() { createCanvas(400, 280); }
function draw() {
  background('#F1F1EA');
  noStroke(); fill(ink);
  circle(mouseX, mouseY, 70);
}
function mousePressed() { ink = ink === '#B85338' ? '#426B5D' : '#B85338'; }
function touchStarted() { mousePressed(); return false; }

let camera;
function setup() {
  createCanvas(400, 300);
  camera = createCapture(VIDEO);
  camera.size(400, 300);
  camera.hide();
}
function draw() {
  background(242);
  image(camera, 0, 0, width, height);
}

// p5.js 2.x + p5.sound; add assets/music.mp3 first.
let sound;
async function setup() {
  createCanvas(400, 400);
  sound = await loadSound('assets/music.mp3');
}
function mousePressed() {
  if (sound && !sound.isPlaying()) sound.play();
}

// p5.js 1.11.5 + legacy p5.sound
let mic;
function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
}
function mousePressed() {
  userStartAudio();
  mic.start();
}
function draw() {
  background(242);
  circle(200, 200, 30 + (mic ? mic.getLevel() : 0) * 300);
}

let ink = '#D67856';
function setup() { createCanvas(400, 400); }
function draw() {
  background(242);
  let x = map(constrain(rotationY, -45, 45), -45, 45, 30, 370);
  let y = map(constrain(rotationX, -45, 45), -45, 45, 30, 370);
  fill(ink);
  circle(x, y, 40 + min(abs(accelerationX) * 3, 60));
}
function deviceShaken() {
  ink = ink === '#D67856' ? '#678C76' : '#D67856';
}

function setup() {
  createCanvas(400, 400);
  createFileInput(file => {
    console.log(file.name, file.type);
  }, true);
  createButton('Fullscreen').mousePressed(() => fullscreen(true));
}

function setup() { createCanvas(400, 400); }
function draw() { background(242); circle(200, 200, 120); }
function mousePressed() { saveCanvas('my-work', 'png'); }