KITASENJU DESIGN BLOG

memo, html, javascript, unity

1次ベジェ曲線

var p1; var p2; var control; var tt=0;

function setup() { createCanvas(400, 400);

p1 = createVector(10,height0.75); p2 = createVector(width-10,height0.75); control = createVector(mouseX,mouseY);

}

function draw() { background(200);

control.x=mouseX;//width0.5; control.y=mouseY;//height0.25;

line(p1.x,p1.y,control.x,control.y); line(p2.x,p2.y,control.x,control.y);

circle(p1.x,p1.y,10); circle(p2.x,p2.y,10); circle(control.x,control.y,10);

getPos(tt); tt+=0.01; if(tt>1)tt=0; }

function getPos(ratio){

var aa = p5.Vector.lerp(p1, control, ratio); var bb = p5.Vector.lerp(control, p2, ratio); var cc = p5.Vector.lerp(aa, bb, ratio);

circle(aa.x,aa.y,10); circle(bb.x,bb.y,10);

circle(cc.x,cc.y,20);

}

"FOOTER"