p5.js:line()

code:sketch1.js

function setup() {

$('<h2>').text('line() サンプル ').appendTo($('body'))

createCanvas(500, 500)

noLoop()

background(220)

}

雑に線を描く

code:sketch1.js

function draw() {

//line(30, 20, 85, 75);

for (let x=0 ; x <= width ; x+=10) {

//line(0,0,x,height)

//line(width,0,x,height)

//line(0,height,x,0)

line(x,height,x,0)

}

for (let y=0 ; y <= height ; y+=10) {

//line(0,0,width,y)

//line(width,0,0,y)

line(width,y,0,y)

}

}

code:sketch.js

const sketch = p => {

p.setup = () => {

//キャンバスを作成

const canvas = p.createCanvas(600,425);

canvas.id = '__P5sc__';

//背景色

p.background('#eee');

p.stroke('#aaa');

}

p.draw = () => {

if (p.mouseIsPressed) {

p.fill(0,0,0,10);

} else {

p.fill('#fff');

}

p.line(p.mouseX, p.mouseY, 150, 150);

}

}

new p5(sketch, 'editor');

https://img.shields.io/badge/p5.js-line()-ED225D.svg?logo=p5.js&style=for-the-badge