Skip to content

Instantly share code, notes, and snippets.

@YuzuruSano
Created October 12, 2019 14:05
Show Gist options
  • Save YuzuruSano/21f74b8649143f10997bcfe603346937 to your computer and use it in GitHub Desktop.
Save YuzuruSano/21f74b8649143f10997bcfe603346937 to your computer and use it in GitHub Desktop.
p5js-シェイプを弧状に書きつつ、線の角度色を変化させる
import * as gd from "generative-design-library.js";
import * as p5 from 'p5';
let s = (sk) => {
let img;
let colors = [];
let sortMode = null;
let strokeColor;
const sc = new SortColors(sk);
sk.setup = () => {
sk.createCanvas(800, 800);
sk.colorMode(sk.HSB, 360, 100, 100, 100);
sk.noFill();
sk.strokeCap(sk.SQUARE);
sk.strokeWeight(2);
sk.stroke(0, 25);
strokeColor = sk.color(0, 10);
}
sk.draw = () => {
const width = sk.width;
const height = sk.height;
const mouseX = sk.pmouseX;
const mouseY = sk.pmouseY;
sk.push();
sk.translate(width / 2, height / 2);
sk.stroke(strokeColor);
const circleResolution = sk.int(sk.map(mouseY, 0 , height, 2, 80));
const radius = mouseX - width / 2;
const angle = sk.TAU / circleResolution;
sk.beginShape();
for (let i = 0; i < circleResolution; i++) {
const x = sk.cos(angle * i) * radius;
const y = sk.sin(angle * i) * radius;
sk.line(0, 0, x, y);
sk.vertex(x, y);
}
sk.endShape(sk.CLOSE);
sk.pop();
}
sk.keyPressed = (event) => {
const key = event.key;
if (key == '1') strokeColor = sk.color(0, 10);
if (key == '2') strokeColor = sk.color(192, 100, 64, 10);
if (key == '3') strokeColor = sk.color(52, 100, 71, 10);
}
}
const P5 = new p5(s);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment