初めに整列の箱を作った後、箱内をランダムに混ぜる。 そして、ぐちゃぐちゃに混ざった箱を0から順番に左上から右へ、下へ並べていく。 let img = []; //images box let num = 0; //image box number let offset; //空白 let sell; //一人分の大きさ let dat…

2019年の大学祭で展示した「2020年プログラミングカレンダー」のp5.jsのURLのまとめです。自分で見返すにもさかのぼるのがしんどいのと誰かの役に立てたらいいなと思っています。 当初の予定と違ったメモやコメントアウトが残ってたりしますが試行錯誤してい…

ボタンを生成し、クリックすることで四角を描画する。 let button; function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); background(random(360),100,100,10); button = createButton("ボタン"); button.position(20, 20); but…

3Dを扱うプログラミング function setup() { createCanvas(400, 400, WEBGL); colorMode(HSB, 360, 100, 100, 100); background(0, 0, 0); angleMode(DEGREES); } function draw() { background(0, 0, 20); push(); translate(0, sin(frameCount)*100, 0); r…

配列を使ったプログラミング 箱を作ってそれに数字や文字を入れ、それを呼び出す。 0番目の箱の文字を呼び出し、textとして表示する。 let arr = []; //箱作る function setup() { createCanvas(400, 400); colorMode(HSB, 360, 100, 100, 100); arr[0] = 10…

画像を使ったプログラミング https://editor.p5js.org/yetirom/sketches/rJmA67fyV let img; function preload() { img = loadImage("img_0003.jpg") } function setup() { createCanvas(640, 480); colorMode(HSB, 360, 100, 100, 100); } function draw() …

音とフォントを使ったプログラミング 音を使ったプログラミングで、sketch fileに音声を入れてます。 音が1度だけ流れるプログラム https://editor.p5js.org/yetirom/sketches/S1qRJxKAX let sound; function preload() { sound = loadSound("jingle.mp3"); …

長らくブログをさぼってました。 markdownのやり方もだいぶ忘れてます。 何とかして後期に受けたProgrammingBの授業だけでもなんとか全部上げます…他にもいろいろやったことはあるけどまずはそこから頑張る。 let angle = 0; let r; function setup() { crea…

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,…

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…

!!!ちょっとちかちかします!!! 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になってしまう …

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,…

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(…

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…

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

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