記録

頑張って勉強したこと書くよ。やりたいことがいっぱいある。

p5.js

8回目のp5.js

function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); } function draw() { background(0,0,0); let n = noise(frameCount / 100); let d=map(n,0,1,100,200); let h=map(n,0,1,150,250); strokeWeight(3); stroke(random(360),100,…

arcが回る

function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); angleMode(DEGREES); background(0, 0, 0); frameRate(10); } function draw() { fill(0, 0, 0, 100); rect(0, 0, width, height); push(); translate(width / 2, height /…

回転

function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); } function draw() { background(220); push(); translate(width/2,height/2); fill((frameCount+180)%360,100,100,random(100)); rotate(radians(-(frameCount+random(50))%36…

6回目のp5.js

!!!ちょっとちかちかします!!! let r; function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100); } function draw() { background(0); fill(random(360),100,100,random(10));//これがないとdrawで戻ってきた「A」がfillになってしまう …

5回目のp5.js

let x; //宣言 let y; let r; let add; function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); x = 200; //代入 y = 0; r = 100; } function draw() { add = random(140, 150); background(0, 0, 100); noStroke(); fill(0, 100,…

4回目のp5.js

function setup() { createCanvas(400, 400); // colorMode(HSB,360,100,100,100); } function draw() { background(220,20); fill(0,0,mouseY%255,random(100)); stroke(255,0,255,random(100)); strokeWeight(random(50)); ellipse(200,200,mouseX+random(…

3回目のp5.js

a=2; function setup() { createCanvas(400, 400); colorMode(HSB,360,100,100,100) } function draw() { fill(0,0,100); rect(0,0,width,height); fill(mouseY%360,100,100,50); rect(0,0,width,height); fill(mouseX%360,100,100,50); quad(width/a,0,0,he…

ごり押しでProcessingでp5.jsと同じものを作る

yetirom.hatenablog.com これで作った一番上の青色のコードを色々いじってシルクスクリーンのデザインにしようとしました。 色々アドバイスを頂きながら修正して完成したのがこちらです。 function setup() { createCanvas(567, 822); colorMode(HSB,360,100…

2回目のp5.js

2回目のp5.jsの授業が終わったので、勉強内容を含めて遊んだ本日のコードです。 function setup() { createCanvas(300, 300); //width,height colorMode(HSB,360,100,100); } function draw() { noStroke(); fill(random(360),random(0,50),random(50,100));…

初めてのp5.js

初めてp5.jsに触りました。Processingとちょこちょこ違う点があり、驚くことだらけです。 一番最後に作ってお気に入りのコードから。 よく見ると線ではなく丸っぽいのが見えて好きです。 function setup() { createCanvas(400, 400);//canvas size colorMode…