Skip to content

Instantly share code, notes, and snippets.

@YuzuruSano
Last active October 12, 2019 09:21
Show Gist options
  • Save YuzuruSano/08e69ab752bcb28f89e75f7031ea4410 to your computer and use it in GitHub Desktop.
Save YuzuruSano/08e69ab752bcb28f89e75f7031ea4410 to your computer and use it in GitHub Desktop.
p5js-円形にカラーを配置してキープレスで分割数を変更
import * as p5 from 'p5';
let s = (sk) => {
const radius = 300;//円の大きさ
let segmentCount = 45;//デフォルト分割数
sk.setup = () => {
sk.createCanvas(800, 800);
sk.noStroke();
}
sk.draw = () => {
const width = sk.width;
const height = sk.height;
sk.colorMode(sk.HSB, 360, width, height);
const angleStep = 360 / segmentCount;
sk.beginShape(sk.TRIANGLE_FAN);
sk.vertex(width / 2 , height / 2);
for (let angle = 0; angle <= 360; angle += angleStep) {
const vx = width / 2 + sk.cos(sk.radians(angle)) * radius;
const vy = height / 2 + sk.sin(sk.radians(angle)) * radius;
sk.vertex(vx, vy);
sk.fill(angle, sk.pmouseX, sk.pmouseY);
}
sk.endShape();
}
sk.keyPressed = (event) => {
switch (event.key) {
case '1':
segmentCount = 360;
break;
case '2':
segmentCount = 45;
break;
case '3':
segmentCount = 24;
break;
case '4':
segmentCount = 12;
break;
case '5':
segmentCount = 6;
break;
}
}
}
const P5 = new p5(s);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment