Viewing Program

Program Data

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

Title	Curves Editor (IN PROGRESS)
ID	5752929052000256
Created	11 years ago, 1395797071512
Updated	11 years ago, 1417896868965
Code	var offsetX = -200, offsetY = -200; //Press Space for more options. var showShortcuts = true; var Pair = function(x, y){ this.x1 = x; this.y1 = y; this.type = "pair"; this.copy = function(){ return new Pair(this.x1, this.y1); }; }, ThreePairs = function(x3, y3, x2, y2, x1, y1){ this.x3 = x3; this.y3 = y3; this.x2 = x2; this.y2 = y2; this.x1 = x1; this.y1 = y1; this.type = "threePairs"; this.copy = function(){ return new ThreePairs(this.x3, this.y3, this.x2, this.y2, this.x1, this.y1); }; }; var V = Pair, BV = ThreePairs; //Replace this to save var shapes = []; var selectedShape = 0; var selectedVertex = 0; var currentShape = function(){ return shapes[selectedShape]; }; var currentVertex = function(){ if(shapes.length){ return currentShape()[selectedVertex]; } }; var lastVertexInCurrentShape = function(){ if(shapes.length){ return currentShape()[currentShape().length - 1]; } }; var copyShapeArray = function(arr) { var arrinst = []; for(var aCount = 0; aCount < arr.length; aCount++) { arrinst[aCount] = []; for(var bCount = 0; bCount < arr[aCount].length; bCount++) { arrinst[aCount].push(arr[aCount][bCount].copy()); } } return arrinst; }; var history = []; var historicalEvent = function(shapes, selectedShape, selectedVertex){ this.shapes = copyShapeArray(shapes); this.selectedShape = selectedShape; this.selectedVertex = selectedVertex; }; var undoCount = 0; var recordEvent = function(){ while(undoCount > 0){ history.pop(); undoCount--; } history.push(new historicalEvent(shapes, selectedShape, selectedVertex)); }; recordEvent(); //Canvas size changes on iPad size(600, 400, 0); var selectedOption = "New Shape"; var draggingMainVertex = false; var draggingControlPoint1 = false; var draggingControlPoint2 = false; var cameFromUnfocused = false; var wasFocused = false; var uiX = 400; var uiOpen = false; var uiSpeed = 20; var drawUI = function(){ //UI if(uiOpen){ uiX = max(uiX - uiSpeed, 200); }else{ uiX = min(uiX + uiSpeed, 400); } translate(uiX, 0); fill(0, 0, 0, 75); noStroke(); rect(0, 0, 400, 350); rect(100, 350, 100, 50); fill(200, 200, 200, 75); rect(0, 350, 100, 50); fill(255, 255, 255, 100); switch(selectedOption){ case "New Shape": rect(0, 0, 200, 50, 5); break; case "Add Vertex": rect(0, 50, 200, 50, 5); break; case "Add Bezier Vertex": rect(0, 100, 200, 50, 5); break; } stroke(255, 255, 255, 100); strokeWeight(1); line(0, 150, 200, 150); line(0, 300, 200, 300); line(100, 300, 100, 400); line(150, 350, 150, 400); line(0, 350, 200, 350); fill(255); textSize(20); textAlign(CENTER, CENTER); text("New Shape", 100, 25); text("Add Vertex", 100, 75); text("Add Bezier Vertex", 100, 125); if(shapes.length){ fill(currentShape()[0].x1 !== lastVertexInCurrentShape().x1 && currentShape()[0].y1 !== lastVertexInCurrentShape().y1 ? 255 : 100); } text("Close Shape", 100, 175); fill(255); textSize(17); text("Output Shapes Code", 100, 225); text("Output Drawing Code", 100, 275); textSize(20); fill(history.length ? 255 : 100); text("Undo", 50, 325); fill(undoCount > 0 ? 255 : 100); text("Redo", 150, 325); fill(255); textSize(25); text("←", 125, 375); text("→", 175, 375); textSize(20); text("BACK", 50, 375); if(showShortcuts){ fill(255, 255, 255, 255 - (uiX - 200) / 200 * 255); textSize(12); textAlign(RIGHT, CENTER); text("n", -5, 25); text("v", -5, 75); text("b", -5, 125); text("c", -5, 175); text("s", -5, 225); text("ENTER", -5, 275); text("z; x", -5, 325); text("SPACE; LEFT; RIGHT", -5, 375); } translate(-uiX, 0); }; draw = function() { if(focused && !wasFocused){ cameFromUnfocused = true; } wasFocused = focused; textFont(loadFont("Avenir", 0), 0); background(92, 204, 189); fill(255); //ellipse(200, 200, 300, 300); for(var s = 0; s < shapes.length; s++){ var shape = shapes[s]; beginShape(); for(var v = 0; v < shape.length; v++){ var vrtx = shape[v]; if(vrtx.type === "pair"){ vertex(vrtx.x1, vrtx.y1); }else if(vrtx.type === "threePairs"){ bezierVertex(vrtx.x3, vrtx.y3, vrtx.x2, vrtx.y2, vrtx.x1, vrtx.y1); } } //Color the shape fill(255, 255, 255, 200); strokeWeight(0.5); stroke(0); endShape(); } for(var s = 0; s < shapes.length; s++){ var shape = shapes[s]; for(var v = 0; v < shape.length; v++){ var vrtx = shape[v]; stroke(230, 156, 9); strokeWeight(5); if(vrtx.type === "pair"){ point(vrtx.x1, vrtx.y1); }else if(vrtx.type === "threePairs"){ point(vrtx.x1, vrtx.y1); } } } var vrtx = currentVertex(); if(selectedVertex !== 0){ var pvrtx = currentShape()[selectedVertex - 1]; noFill(); stroke(230, 18, 120); strokeWeight(2); if(vrtx.type === "threePairs"){ bezier(pvrtx.x1, pvrtx.y1, vrtx.x3, vrtx.y3, vrtx.x2, vrtx.y2, vrtx.x1, vrtx.y1); stroke(21, 64, 235); strokeWeight(1); line(vrtx.x3, vrtx.y3, pvrtx.x1, pvrtx.y1); line(vrtx.x2, vrtx.y2, vrtx.x1, vrtx.y1); //Blue Current Bezier Vertex Control Points if(dist(mouseX, mouseY, currentVertex().x3, currentVertex().y3) <= 7.5 \|\| draggingControlPoint2){ fill(255); strokeWeight(2); stroke(21, 64, 235); }else{ fill(21, 64, 235); noStroke(); } ellipse(vrtx.x3, vrtx.y3, 7.5, 7.5); if(dist(mouseX, mouseY, currentVertex().x2, currentVertex().y2) <= 7.5 \|\| draggingControlPoint1){ fill(255); strokeWeight(2); stroke(21, 64, 235); }else{ fill(21, 64, 235); noStroke(); } ellipse(vrtx.x2, vrtx.y2, 7.5, 7.5); }else if(vrtx.type === "pair"){ line(pvrtx.x1, pvrtx.y1, vrtx.x1, vrtx.y1); } }/if(dist(mouseX, mouseY, currentVertex().x1, currentVertex().y1) <= 7.5){ draggingMainVertex = true; }else if(dist(mouseX, mouseY, currentVertex().x2, currentVertex().y2) <= 7.5){ draggingControlPoint1 = true; }else if(dist(mouseX, mouseY, currentVertex().x3, currentVertex().y3) <= 7.5){ draggingControlPoint2 = true; }/ if(shapes.length){ //Purple Current Vertex Point if(dist(mouseX, mouseY, currentVertex().x1, currentVertex().y1) <= 7.5){ fill(255); strokeWeight(2); stroke(230, 18, 120); }else{ fill(230, 18, 120); noStroke(); } ellipse(vrtx.x1, vrtx.y1, 10, 10); } //Mouse strokeWeight(0.5); stroke(255); line(mouseX, 0, mouseX, height); line(0, mouseY, width, mouseY); //Text fill(0); textSize(12); textAlign(LEFT, BOTTOM); text("Mouse: " + mouseX + ", " + mouseY, 5, 395); textAlign(RIGHT, BOTTOM); text(selectedOption, 395, 395); if(shapes.length > 0){ //Offset by 1 to avoid confusion (like 0/0 when there really is 1 vertex) textAlign(LEFT, TOP); text("Selected Shape: " + (selectedShape + 1) + "/" + shapes.length, 5, 5); textAlign(RIGHT, TOP); text("Selected Vertex: " + (selectedVertex + 1) + "/" + currentShape().length, 395, 5); if(currentVertex().type === "pair"){ text(currentVertex().x1 + ", " + currentVertex().y1, 395, 20); } }else{ textAlign(LEFT, TOP); text("Press SPACE for options", 5, 5); } drawUI(); if(draggingMainVertex){ vrtx.x1 = mouseX; vrtx.y1 = mouseY; }else if(draggingControlPoint1){ vrtx.x2 = mouseX; vrtx.y2 = mouseY; }else if(draggingControlPoint2){ vrtx.x3 = mouseX; vrtx.y3 = mouseY; } if(!focused){ fill(255, 255, 255, 150); rect(0, 0, 400, 400); fill(255, 60, 0); textAlign(CENTER, CENTER); textSize(50); text("Inactive", 200, 170); textSize(18); text("Click to enable keyboard and mouse input", 200, 210); } }; var newShape = function(){ selectedShape = shapes.length; selectedVertex = 0; shapes[shapes.length] = [new Pair(mouseX, mouseY)]; selectedOption = "Add Vertex"; recordEvent(); }; var addVertex = function(){ //currentShape().push(new Pair(mouseX, mouseY)); currentShape().push(new ThreePairs(lastVertexInCurrentShape().x1, lastVertexInCurrentShape().y1, mouseX, mouseY, mouseX, mouseY)); selectedVertex = currentShape().length - 1; recordEvent(); }; var addBezierVertex = function(){ currentShape().push( new ThreePairs(lastVertexInCurrentShape().x1 - 10, lastVertexInCurrentShape().y1 - 10, mouseX + 10, mouseY + 10, mouseX, mouseY)); selectedVertex = currentShape().length - 1; recordEvent(); }; var closeShape = function(){ if(currentShape()[0].x1 !== lastVertexInCurrentShape().x1 && currentShape()[0].y1 !== lastVertexInCurrentShape().y1){ currentShape().push(new Pair(currentShape()[0].x1, currentShape()[0].y1)); selectedVertex = currentShape().length - 1; recordEvent(); } }; var previous = function(){ if(selectedVertex === 0){ if(selectedShape !== 0){ selectedShape--; selectedVertex = currentShape().length - 1; } }else{ selectedVertex--; } }; var next = function(){ if(selectedVertex === currentShape().length - 1){ if(selectedShape !== shapes.length - 1){ selectedShape++; selectedVertex = 0; } }else{ selectedVertex++; } }; var revert = function(){ var event = history[history.length - 1 - undoCount]; shapes = copyShapeArray(event.shapes); selectedShape = event.selectedShape; selectedVertex = event.selectedVertex; }; var undo = function(){ if(undoCount < history.length){ undoCount++; revert(); } /* if(currentShape().length === 1){ shapes.pop(); }else{ currentShape().pop(); }*/ }; var redo = function(){ if(undoCount > 0){ undoCount--; revert(); } }; var outputShapesCode = function(){ var t = "Replace shapes[] in this program:\n\nvar shapes = ["; for(var s = 0; s < shapes.length; s++){ t += "\n ["; for(var v = 0; v < shapes[s].length; v++){ t += "\n new "; var vrtx = shapes[s][v]; if(vrtx.type === "pair"){ t += "V("; }else if(vrtx.type === "threePairs"){ var pvrtx = shapes[s][v - 1]; if(vrtx.x3 !== pvrtx.x1 && vrtx.y3 !== pvrtx.y1 && vrtx.x2 !== vrtx.x1 && vrtx.y2 !== vrtx.y1){ t += "BV("; t += vrtx.x3; t += ", "; t += vrtx.y3; t += ", "; t += vrtx.x2; t += ", "; t += vrtx.y2; t += ", "; }else{ t += "V("; } } t += vrtx.x1; t += ", "; t += vrtx.y1; t += ")"; if(v < shapes[s].length - 1){ t += ","; } } t += "\n ]"; if(s < shapes.length - 1){ t += ","; } } t += "\n];\n "; println(t); }; var outputDrawingCode = function(x, y){ var t = "Copy and paste this into your drawing code!\n"; for(var s = 0; s < shapes.length; s++){ t += "\nbeginShape();"; for(var v = 0; v < shapes[s].length; v++){ var vrtx = shapes[s][v]; if(vrtx.type === "pair"){ t += "\nvertex("; }else if(vrtx.type === "threePairs"){ var pvrtx = shapes[s][v - 1]; if(!(vrtx.x3 === pvrtx.x1 && vrtx.y3 === pvrtx.y1 && vrtx.x2 === vrtx.x1 && vrtx.y2 === vrtx.y1)){ t += "\nbezierVertex("; t += vrtx.x3 + offsetX; t += ", "; t += vrtx.y3 + offsetY; t += ", "; t += vrtx.x2 + offsetX; t += ", "; t += vrtx.y2 + offsetY; t += ", "; }else{ t += "\nvertex("; } } t += vrtx.x1 + offsetX; t += ", "; t += vrtx.y1 + offsetY; t += ");"; } t += "\nendShape();\n "; } println(t); }; keyPressed = function(){ switch(key.toString()){ case "n": selectedOption = "New Shape"; newShape(); break; case "v": selectedOption = "Add Vertex"; addVertex(); break; case "b": selectedOption = "Add Bezier Vertex"; addBezierVertex(); break; case "c": closeShape(); break; case "e": if(!draggingMainVertex && !draggingControlPoint1 && !draggingControlPoint2){ mousePressed(); }else{ mouseReleased(); } break; case "s": outputShapesCode(); break; case "z": undo(); break; case "x": case "y": redo(); break; case " ": uiOpen = !uiOpen; break; default: if(keyCode === ENTER){ outputDrawingCode(); }else if(keyCode === LEFT){ previous(); }else if(keyCode === RIGHT){ next(); } } }; mousePressed = function(){ if(!cameFromUnfocused && !draggingMainVertex && !draggingControlPoint1 && !draggingControlPoint2){ if(dist(mouseX, mouseY, currentVertex().x2, currentVertex().y2) <= 7.5){ draggingControlPoint1 = true; }else if(dist(mouseX, mouseY, currentVertex().x3, currentVertex().y3) <= 7.5){ draggingControlPoint2 = true; }else if(dist(mouseX, mouseY, currentVertex().x1, currentVertex().y1) <= 7.5){ draggingMainVertex = true; } } }; mouseReleased = function(){ if(cameFromUnfocused){ cameFromUnfocused = false; }else if(draggingMainVertex){ draggingMainVertex = false; recordEvent(); }else if(draggingControlPoint1){ draggingControlPoint1 = false; recordEvent(); }else if(draggingControlPoint2){ draggingControlPoint2 = false; recordEvent(); }else if(mouseX >= uiX){ if(mouseY < 50){ selectedOption = "New Shape"; }else if(mouseY < 100){ selectedOption = "Add Vertex"; }else if(mouseY < 150){ selectedOption = "Add Bezier Vertex"; }else if(mouseY < 200){ closeShape(); }else if(mouseY < 250){ outputShapesCode(); }else if(mouseY < 300){ outputDrawingCode(); }else if(mouseY < 350){ if(mouseX < uiX + 100){ undo(); }else{ redo(); } }else{ if(mouseX < uiX + 100){ uiOpen = !uiOpen; }else if(mouseX < uiX + 150){ previous(); }else{ next(); } } }else{ switch(selectedOption){ case "New Shape": newShape(); break; case "Add Vertex": addVertex(); break; case "Add Bezier Vertex": addBezierVertex(); break; } } };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMDkooicCgw
Votes	189
Spin-Offs	4
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	DY
Author Name	darrylyeo
Author ID	kaid_436187987535602224909820
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739448489138
Updated	10 months ago, 1739448495330
Source Deleted	unknown