Viewing Program

Program Data

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

Title	Stickman Animation 2
ID	5156769115602944
Created	8 years ago, 1505417446898
Updated	7 years ago, 1520273230572
Code	/** * -------------INSTRUCTIONS------------------ IMPORTANT: THERE ARE NEW/CHANGED CONTROLS. READ THE INSTRUCTIONS TO SEE UPDATES Drag red the points to move the stickmen The red point just below the head will move the entire stickman When your stickmen are in their correct positions, press space to record a frame Press 'd' to switch to drawing mode. Dragging the mouse draws. You can't animate your figures in this mode, but pressing 'd' again switches back. If you mess up, don't worry. Press 'r' to delete the last frame. This will reset the animation to the previous frame. This will only work if you are not in drawing mode. Otherwise, 'r' will delete the last line you made. If you would like to view your animation, press 'a' to start or stop the animation. Left arrow key rewinds the animation, right key fast-forwards, and space slows it down if in animation mode. If you want a new background, you can make your own in the 'animBackground' function below. Once you are done with your animation, press 'p' to print the animation. Copy the code into the program where it says "Paste your animation code here", then create a spin-off. When you create a spin-off, you will have to set the width and height of the canvas. Simply click "settings" (below the canvas in the "About" tab) to change the size. The size I have it set to is width = 600 and height = 500 You can change the "creator" variable below to your username. DO NOT CHANGE THE LOGO. If you make a spin-off and would like to have the animation automatically play, set the 'animate' variable below to true. (Note: setting to true without an animation will result in the stickmen not being displayed) */ //Make your own background for the movie var animBackground = function(){ background(255, 255, 255); strokeWeight(1); stroke(0, 0, 255); for(var y = 116; y < height; y+=60){ line(0, y, width, y); } stroke(255, 0, 0); line(100, 0, 100, 500); noFill(); stroke(0); ellipse(23, 94, 25, 25); ellipse(23, 495, 25, 25); / fill(0); textSize(40); textAlign(LEFT, BOTTOM); text("Stickman Animation", 108, 112);/ }; //Set to true to view your animation (if you make a spin-off var animate = false; var creator = "You"; //change this to your username var animation1 = []; var animation2 = []; var lines = []; /Paste your animation code below/ /End Animation Code/ if(animation1.length<=0){ //println("Check out videos in the spin-offs!"); } var animFrame = 0; var animDir = 1; var speed = 0.04; var Stickman = function(x, y, clr, animation, name){ this.parts = { main: { x: x, y: y, }, body: { x: x, y: y+50, }, kneeL: { x: x-20, y: y+70, }, kneeR: { x: x+20, y: y+70, }, elbowL: { x: x-20, y: y, }, elbowR: { x: x+20, y: y, }, handL: { x: x-50, y: y, }, handR: { x: x+50, y: y, }, footL: { x: x-20, y: y+100, }, footR: { x: x+20, y: y+100, }, head: { x: x, y: y-30, }, }; this.connections = { main: [ {name: "head", dist: 25, draw: "ellipse"}, {name: "body", dist: 50}, {name: "elbowL", dist: 30}, {name: "elbowR", dist: 30}, ], body: [ {name: "kneeL", dist: 30}, {name: "kneeR", dist: 30}, ], kneeL: [ {name: "footL", dist: 30}, ], kneeR: [ {name: "footR", dist: 30}, ], elbowL: [ {name: "handL", dist: 30}, ], elbowR: [ {name: "handR", dist: 30}, ], handL: [], handR: [], footL: [], footR: [], head: [], }; this.animParts = {}; this.animation = animation; this.animFrame = 0; this.clr = clr; this.name = name; if(animation.length>0){ var pos = animation[animation.length-1]; for(var name in pos){ this.parts[name].x = pos[name].x; this.parts[name].y = pos[name].y; } } this.display = function(){ noFill(); var parts; if(animate){ parts = this.animParts; }else{ parts = this.parts; if(this.animation.length>0){ var parts2 = this.animation[this.animation.length-1]; for(var name in parts2){ var part = parts2[name]; var cons = this.connections[name]; for(var i = 0; i < cons.length; i++){ var con = cons[i]; var name2 = con.name; var part2 = parts2[name2]; var drawFunc = con.draw\|\|"line"; strokeWeight(5); stroke(red(this.clr), green(this.clr), blue(this.clr), 100); noFill(); if(drawFunc === "line"){ line(part.x, part.y, part2.x, part2.y); }else if(drawFunc==="ellipse"){ ellipse(part2.x, part2.y, con.dist2, con.dist2); } } } } } for(var name in parts){ var part = parts[name]; var cons = this.connections[name]; if(!animate){ stroke(255, 0, 0); strokeWeight(1); ellipse(part.x, part.y, 10, 10); } for(var i = 0; i < cons.length; i++){ var con = cons[i]; var name2 = con.name; var part2 = parts[name2]; var drawFunc = con.draw\|\|"line"; strokeWeight(5); stroke(this.clr); noFill(); if(drawFunc === "line"){ line(part.x, part.y, part2.x, part2.y); }else if(drawFunc==="ellipse"){ ellipse(part2.x, part2.y, con.dist2, con.dist2); } } } }; this.update = function(){ noFill(); var parts; if(animate){ parts = this.animParts; }else{ parts = this.parts; } for(var name in parts){ var part = parts[name]; var cons = this.connections[name]; for(var i = 0; i < cons.length; i++){ var con = cons[i]; var name2 = con.name; var part2 = parts[name2]; //var d = dist(part.x, part.y, part2.x, part2.y); var a = atan2(part2.y-part.y, part2.x-part.x); part2.x = part.x+cos(a)con.dist; part2.y = part.y+sin(a)con.dist; } } if(this.animation.length>0){ this.animFrame%=this.animation.length; if(this.animFrame<0){ this.animFrame=this.animation.length-1; } }else{ this.animFrame = 0; } }; this.mousePress = function(){ for(var name in this.parts){ var part = this.parts[name]; if(dist(mouseX, mouseY, part.x, part.y)<10){ return name; } } return false; }; this.dragPart = function(name, notStart){ var part = this.parts[name]; if(notStart){ part.x+=mouseX-pmouseX; part.y+=mouseY-pmouseY; }else{ part.x=mouseX; part.y=mouseY; } var cons = this.connections[name]; for(var i = 0; i < cons.length; i++){ var con = cons[i]; var part2 = con.name; this.dragPart(part2, true); } }; this.animate = function(){ this.animFrame=(animFrame%round(this.animation.length/speed))speed; if(this.animFrame>this.animation.length){ this.animFrame = 0; } if(this.animation.length>0){ var animIdx = floor(this.animFrame); var t = this.animFrame-animIdx; var curPos = this.animation[animIdx]; var nextPos = this.animation[(animIdx+1)%this.animation.length]; for(var name in this.parts){ var part = this.parts[name]; this.animParts[name] = { x: lerp(curPos[name].x, nextPos[name].x, t), y: lerp(curPos[name].y, nextPos[name].y, t), connections: part.connections, }; } } }; this.addCurrentPosition = function(){ var newParts = {}; for(var name in this.parts){ var p = this.parts[name]; newParts[name] = { x: p.x, y: p.y, connections: p.connections, }; } this.animation.push(newParts); }; this.deletePosition = function(idx){ if(this.animation.length>0){ //this.animation.splice(idx, 1); var animParts = this.animation[this.animation.length-1]; for(var name in this.parts){ this.parts[name].x = animParts[name].x; this.parts[name].y = animParts[name].y; } this.animation.pop(); } }; this.printAnimation = function(){ print("var "+this.name+" = ["); for(var i = 0; i < this.animation.length; i++){ var parts = this.animation[i]; print("{"); for(var name in parts){ var part = parts[name]; print(""+name+": {"); print("x: "+round(part.x10)/10+","); print("y: "+round(part.y10)/10+","); print("},"); } print("},"); } println("];\n\n//--------------------------\n\n"); }; }; var stickmen = [ new Stickman(150, 390, color(255, 0, 0), animation1, "animation1"), new Stickman(450, 390, color(0, 0, 0), animation2, "animation2"), ]; var dragPart; var stickman; var flash = 0; var drawing = false; var drawLines = function(lines, idx, t, done){ if(lines.length>0){ var l = lines[idx]; stroke(0); strokeWeight(2); for(var i = 0; i < l.length; i++){ if(l[i].length===0){ l.splice(i, 1); continue; } if(!done){ var t2 = tl[i].length; for(var j = 0; j < min(l[i].length-1, t2); j++){ var t3 = constrain((t-j/l[i].length)l[i].length, 0, 1); var x = lerp(l[i][j].x, l[i][j+1].x, t3); var y = lerp(l[i][j].y, l[i][j+1].y, t3); line(l[i][j].x, l[i][j].y, x, y); } }else{ var t2 = floor(tl[i].length); var j = 0; try{ for(j = max(1, t2-1); j < l[i].length; j++){ var t3 = constrain((t-j/l[i].length)l[i].length, 0, 1); var x = lerp(l[i][j-1].x, l[i][j].x, t3); var y = lerp(l[i][j-1].y, l[i][j].y, t3); line(l[i][j].x, l[i][j].y, x, y); } }catch(e){ } } } if(!done){ var idx2 = idx-1; if(idx2<0){ idx2=lines.length-1; } drawLines(lines, idx2, constrain(t, 0, 1), true); } } }; var Logo = function(){ this.time = 0; this.code = [ "var x = 10;", "draw = function(){\n\n};", "for(var i = 0; i < 100; i++){\n\n}", "var y = 0;", "x+=10;", "var x = 10;", "draw = function(){\n\n};", "for(var i = 0; i < 100; i++){\n\n}", "var y = 0;", "x+=10;", "var x = 10;", "draw = function(){\n\n};", "for(var i = 0; i < 100; i++){\n\n}", "var y = 0;", "x+=10;", "", ]; this.code2 = "var Logo = function(){\n this.time = 0;\n this.code = [\n ''var x = 0'',\n ];\n this.code2 = ''Mr. JPrograms'';\n this.text = '' '';\n this.x = [ ];\n this.y = [ ];\n this.sizes = [ ];\n this.display = function(){\n this.time++;\n };\n};\n\nvar logo = ne w Logo();\ndraw = function(){\n background(255);\n if(logo.time<520){\n logo.display();\n }\n};"; this.text = ""; this.x = []; this.y = []; this.sizes = []; for(var i = 0; i < this.code.length; i++){ this.x.push(random(0, 400)); this.y.push(random(0, 400)); this.sizes.push(random(10, 20)); } this.display = function(){ this.time++; if(this.time<520){ var code = this.code; var x = this.x; var y = this.y; var sizes = this.sizes; background(255); textAlign(LEFT, CENTER); for(var i = 0; i < code.length; i++){ fill(0); textSize(sizes[i]); text(code[i], x[i], y[i]); x[i]+=sizes[i]/5; if(x[i]>400){x[i]=0;y[i]=random(0, 400);sizes[i]=random(10, 20);} } textAlign(LEFT, TOP); textSize(15); if(this.text.length<this.code2.length){ this.text+=this.code2[this.text.length]; } fill(100); if(frameCount%20>10){ text(this.text+"\|", 10, 10); }else{ text(this.text, 10, 10);} if(this.time<255){ fill(255-this.time); }else{ fill(0, 0, 0, this.time-255); noStroke(); rect(0, 0, 400, 400); fill(0); } textAlign(CENTER, CENTER); textSize(50); text("Mr. JPrograms", 200, 200); textSize(10); text("Animation Program by", 89, 174); textSize(20); text("Animated Movie Created by "+creator, 200, 311); } }; }; var logo = new Logo(); var draw = function() { if(logo.time<520){ pushMatrix(); scale(width/400, height/400); logo.display(); popMatrix(); return; } animBackground(); textAlign(CENTER, CENTER); for(var i = 0; i < stickmen.length; i++){ stickmen[i].update(); stickmen[i].display(); } if(animate){ animFrame+=animDir; dragPart = false; for(var i = 0; i < stickmen.length; i++){ stickmen[i].animate(); } var idx = floor(animFramespeed)%lines.length; drawLines(lines, idx, ((animFramespeed)%lines.length)-idx); }else{ animFrame = 0; fill(0); textSize(20); text("Frames: "+stickmen[0].animation.length, 300, 20); text("Drawing: "+drawing, 300, 40); //stickman[i].animFrame = round(stickman.animFrame); if(dragPart){ stickman.dragPart(dragPart); } drawLines(lines, lines.length-1, 1); } flash = max(flash-10, 0); fill(255, 255, 255, flash); noStroke(); rect(0, 0, width, height); }; var keyPressed = function(){ var k = key.toString(); if(k==="a"){ animate = !animate; }else if(k==="r"){ if(!drawing){ for(var i = 0; i < stickmen.length; i++){ stickmen[i].deletePosition(); } if(lines.length>0){ lines.pop(); } }else{ var l = lines[lines.length-1]; if(l[l.length-1].length>0){ l[l.length-1].pop(); }else{ if(l.length>0){ l.pop(); } } } }else if(k===" "){ if(!animate){ drawing = false; flash=255; for(var i = 0; i < stickmen.length; i++){ stickmen[i].addCurrentPosition(); } lines.push([]); }else{ animDir = 0.25; } }else if(k==="p"){ for(var i = 0; i < stickmen.length; i++){ stickmen[i].printAnimation(); } print("var lines = ["); for(var i = 0; i < lines.length; i++){ print("["); for(var j = 0; j < lines[i].length; j++){ print("["); for(var k = 0; k < lines[i][j].length; k++){ var p = lines[i][j][k]; print("{x: "+p.x+", y: "+p.y+"},"); } print("],"); } print("],"); } print("];"); println("\n"); println("Copy all the above and paste it in the program below where it says 'Paste your animation code below'"); } if(!animate&&k==="d"){ drawing = !drawing; } else if(keyCode===LEFT){ animDir = -2; }else if(keyCode===RIGHT){ animDir = 4; } }; var keyReleased = function(){ if(keyCode===LEFT\|\|keyCode===RIGHT\|\|key.toString()===" "){ animDir = 1; } }; var mousePressed = function(){ logo.time=1000; if(!animate){ if(drawing){ if(lines.length>0){ var l = lines[lines.length-1]; l.push([{x: mouseX, y: mouseY}]); } }else{ dragPart = false; for(var i = 0; i < stickmen.length; i++){ dragPart = stickmen[i].mousePress(); if(dragPart){ stickman = stickmen[i]; break; } } } } }; var mouseDragged = function(){ if(!animate&&drawing){ if(lines.length>0&&dist(mouseX, mouseY, pmouseX, pmouseY)>1){ var l = lines[lines.length-1]; l[l.length-1].push({x: mouseX, y: mouseY}); } } }; var mouseReleased = function(){ dragPart = false; };
Folds	35,54,79,81,86,355,357,360,414,491,494,537,606,610,612,631,641,643
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMz63cGUCQw
Votes	342
Spin-Offs	377
Type	PJS
Width	600
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Mr. JPrograms
Author Name	jprograms
Author ID	kaid_868862302296985534725580
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739375981757
Updated	8 months ago, 1744828825192
Source Deleted	unknown