Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Draggable bezier curve
ID	1034974270
Created	Unknown
Updated	1 years ago, 1693008340824
Code	/** * Draggable Bézier Curve */ var p = [ {x: 260, y: 325}, {x: 350, y: 150}, {x: 40, y: 50}, {x: 125, y: 180} ]; // selected will be a number from 1 to 4 depending on which point your mouse is selecting at this time (null when away from all points). var selected = null; var mouseMoved = function() { selected = null; for (var i = 0; i < 4; i += 1) { if (dist(mouseX, mouseY, p[i].x, p[i].y) < 5) { selected = i; } } }; var mouseDragged = function() { if (selected !== null) { p[selected].x = mouseX; p[selected].y = mouseY; } }; var getBeizerCodeToPrint = function(){ var array = [ p[0].x, p[0].y, p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y ]; return "bezier(" + array.join(", ") + ");"; }; // Clicking on the header will print the code in the console. // Credits to DY: khanacademy.org/cs/draggable-bezier-curve/1504919085 mouseClicked = function(){ if (mouseY < 40){ var code = getBeizerCodeToPrint(); println(code); debug(code); } }; // Label coordinates on each point // Credits to TC: khanacademy.org/cs/moveable-bezier-with-control-points/2704570406 var drawLabelInControlPoint = function(n) { fill(128, 128, 128); textSize(10); text(n + 1, p[n].x - 3, p[n].y + 3); var labelDiffX = p[n].x < width - 100 ? 10 : -100; var labelText = "{ x = "+p[n].x+", y = "+p[n].y+" }"; text(labelText, p[n].x + labelDiffX, p[n].y + 3); }; var drawControlPoint = function(n) { if (n === selected) { if (mouseIsPressed) { fill(218, 232, 25); } else { fill(212, 212, 212); } } else { fill(255, 255, 255); } ellipse(p[n].x, p[n].y, 10, 10); drawLabelInControlPoint(n); }; var draw = function() { background(255, 255, 255); fill(59, 59, 59); noStroke(); rect(0,0,width,28); // draw curve noFill(); stroke(0, 150, 40); strokeWeight(4); bezier(p[0].x, p[0].y, p[1].x, p[1].y, p[2].x, p[2].y, p[3].x, p[3].y); // draw control points and tangent lines stroke(163, 163, 163); strokeWeight(1); line(p[0].x, p[0].y, p[1].x, p[1].y); line(p[3].x, p[3].y, p[2].x, p[2].y); for (var i = 0; i < 4; i += 1) { drawControlPoint(i); } // text on top of the screen if (mouseY < 40){ fill(255, 0, 255); } else { fill(0, 255, 0); } textSize(18); text(getBeizerCodeToPrint(), 8, 20); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIUCxIKU2NyYXRjaHBhZBi-6MHtAww
Votes	811
Spin-Offs	91
Type
Width	400
Height	400
User Flagged	false
Origin Scratchpad	{"id":"956920482","title":"bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2) \| ProcessingJS","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Protron
Author Name	Protron
Author ID	kaid_1177171690638098594915377
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1707881038466
Updated	4 days ago, 1744820591393
Source Deleted	unknown