Viewing Program

Program Data

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

Title	Joe. [Contest: Animation Entry]
ID	6479872808501248
Created	3 years ago, 1651071793178
Updated	3 years ago, 1651164915440
Code	/** Contest: Animation I have completed 100% of Khan Academy's 'Intro to JS' and have been programming for ~30 months. I would prefer to be placed in the [Advanced] bracket @CREDITS: • OOPS Studio for the loading funtion (lines 410-427) • 'Joe the Ant' idea from Vintage Sisters Oregon Backpacking Hiking Joe Ants T-Shirt. / // jjjjooooooooeeeeeeeeee //better run, he's coming for u /* @SETUP / //Protects program from crashing. Made by Daniel (@dkareh) (function() {return this;})().LoopProtector.prototype.leave = function() {}; //settings frameRate(60); smooth(); rectMode(CENTER); imageMode(CENTER); textAlign(CENTER, CENTER); randomSeed(117); noiseSeed(77); //variables and constants var scene = "load"; var STRIDE_LENGTH = 10; var SPEED = 25; var TIME = 0; var clicked = false; var down = false; var signNum = 0; var settingsY = 0; var messageNum = 0; //fonts var f = createFont("Trebuchet MS Bold"); var f2 = createFont("Trebuchet MS Bold Italic"); //redefining because it takes too long to type 'matrix' var push = pushMatrix, pop = popMatrix; //arrays var n = [ {pos: 8, funct: sin}, //ankle x {pos: 0, funct: cos}, //ankle y ]; //leg nodes var signText = [ ["Deschutes Trail", "1.2 MI"], ["Mexico", "1,418 MI"], ["DO NOT", "Feed the Bears"], ["Hardcore Loop", "18.6 MI"], ["PLEASE", "Don't Litter"], ["Rest Stop", "Just kidding"], ["BEWARE OF...", "well, just beware"], ["Parking Lot", "12 MI"], ]; //text on signs var messageText = [ "The power of an ant – hard work, balance, and knowing your limitations is essential in life.", "Sometimes the best thing you can do is continue to put one foot in front of the other.", "If you have a 'mountain' in front of you, try approaching it 'one step at a time' - just like Joe.", "...on a different note, don't forget an extra water bottle when hiking, and always bring your coolest pair of sunglasses.", "Dedicated to my Grandpa - this is based off a shirt of his featuring 'Joe the Ant'. One of the hardest workers I know.", "Fun fact: if an ant were the size of a human, it would be twice as fast as a Lamborghini. Change the speed in the settings or on line 43 in the code. ", "No, this program has nothing to do with the song 'Ants go Marching.' ", "If you're still here then you must really have a lot of time on your hands..." ]; //text in messages / @IMAGES */ //eyes image function eyes(x, y, size){ push(); //positioning translate(x, y); scale(size0.01); noStroke(); fill(75, 128, 57); arc(15, -5, 28, 17, 0, 180); arc(48, -4, 28, 17, 0, 180); fill(202, 224, 137); arc(15, -5, 28, 17, 180, 360); arc(48, -4, 28, 17, 180, 360); fill(228, 245, 179); arc(15, -5, 13, 8, 180, 360); arc(48, -4, 13, 8, 180, 360); fill(255, 30); arc(15, -5, 13, 8, 0, 180); arc(48, -4, 13, 8, 0, 180); fill(32, 82, 14); rect(15, -5, 28, 1); rect(48, -4, 28, 1); pop(); } background(0, 0); eyes(300, 300, 100); filter(BLUR, 1.2); var eyesImg = get(); //functions for images function headShape(x, y, size){ push(); translate(x, y); scale(size0.015); translate(-265, -311); beginShape(); vertex(262, 321); bezierVertex(248, 317, 253, 270, 279, 279); bezierVertex(300, 288, 276, 326, 262, 321); endShape(); pop(); } function forHeadImg(x, y, size){ push(); //adjustment translate(-30, 0); //antennae push(); translate(x, y); scale(size0.01); noFill(); for(var i = 0; i < 100; i++){ strokeWeight(11-(i1.098)); stroke(i12); push(); translate(0, i-0.1); arc(66, -31, 56, 50, -193, -42); arc(65, -23, 25, 34, -190, -115); arc(67, -1, 44, 80, -119, -63); line(76.5, -37, 87, -27); arc(71, 41, 39, 123, -113, -72); line(78, -17, 84, -8); pop(); } for(var i = 0; i < 10; i++){ noStroke(); fill(0, 90-(i21)); ellipse(39-(i0.1), -22-(i), 10, 10); fill(0, 90-(i21)); ellipse(51.7+(i0.3), -20-(i), 10, 10); fill(0, 140-(i21)); ellipse(57.8+(i1.1), -11-(i), 10, 10); } pop(); //head push(); translate(x, y); rotate(30); scale(size0.01); translate(-275, -290); for(var i = 0; i < 100; i++){ fill(150, 150, 150); stroke(i1.5+15); strokeWeight(8); headShape(300, 300, 100-i); } pop(); //glasses push(); translate(x, y); scale(size0.01); noStroke(); fill(0, 30); ellipse(20, 2, 20, 10); ellipse(53, 2, 20, 10); image(eyesImg, 1, 1, 605, 605); stroke(214, 145, 26); strokeWeight(2); noFill(); ellipse(15, -5, 28, 17); ellipse(48, -4, 28, 17); line(29, -7.5, 34, -7.1); line(63, -5, 67, -6.3); strokeWeight(1); line(29, -4.5, 34, -3.9); pop(); pop(); } function gradient(col1, col2, y, h){ for(var i = 0; i < h; i++){ strokeWeight(2); stroke(lerpColor(col1, col2, i/h)); line(0, i+y, width, i+y); } } function mountainsOutline(y){ push(); //positioning translate(0, 600-y); //vertices stroke(0); fill(255, 255, 255); beginShape(); vertex(0, 0); vertex(18, -13); vertex(41, -16); vertex(52, -21); vertex(79, -27); vertex(86, -32); vertex(97, -42); vertex(106, -43); vertex(115, -55); vertex(122, -66); vertex(129, -70); vertex(138, -66); vertex(152, -56); vertex(154, -50); vertex(161, -50); vertex(183, -42); vertex(199, -27); vertex(228, -6); vertex(245, 20); vertex(250, 18); vertex(276, 3); vertex(298, 1); vertex(317, -13); vertex(352, -34); vertex(360, -35); vertex(355, -37); vertex(370, -52); vertex(385, -61); vertex(399, -75); vertex(409, -104); vertex(413, -103); vertex(417, -96); vertex(421, -98); vertex(425, -105); vertex(437, -116); vertex(457, -131); vertex(465, -149); vertex(475, -162); vertex(490, -174); vertex(498, -171); vertex(502, -166); vertex(504, -151); vertex(509, -139); vertex(522, -137); vertex(533, -117); vertex(535, -103); vertex(555, -84); vertex(563, -84); vertex(567, -57); vertex(573, -54); vertex(579, -42); vertex(583, -25); vertex(594, -14); vertex(600, 0); vertex(600, 200); vertex(0, 200); endShape(); pop(); } //images and loading (NOTE: load function made by OOPS Stuidos) var imgs = { "headImg": function() { background(0, 0); forHeadImg(300, 300, 100); return get(); }, "trailBG": function() { background(0, 0); fill(149, 139, 119); rect(200, 200, 200, 200); for(var i = 0; i < 200; i++){ var col = lerpColor(color(145, 133, 109), color(196, 192, 174), random(0, 1)); noStroke(); fill(col, random(50, 200)); ellipse(random(75, 325), random(75, 325), random(20, 60), random(20, 60)); noStroke(); fill(56, 53, 47, random(50, 150)); push(); rotate(random(-10, 10)); translate(random(75, 325), random(75, 325)); rect(0, 0, random(5, 100), random(2, 10)); pop(); } filter(BLUR, 7); return get(90, 90, 200, 200); }, "skyImg1": function() { background(0, 0); gradient(color(190, 231, 237), color(211, 237, 237), 0, 100); gradient(color(211, 237, 237), color(233, 245, 245), 100, 100); gradient(color(233, 245, 245), color(235, 225, 176), 200, 225); for(var i = 0; i < 70; i++){ var col = lerpColor(color(190, 231, 237), color(255, 255, 255), random(0, 1)); stroke(255, 255, 255); fill(col, random(50, 200)); ellipse(random(0, 600), random(0, 350), random(50, 200), random(10, 30)); } filter(BLUR, 12); filter(POSTERIZE, 60); filter(BLUR, 2); return get(); }, "skyImg2": function() { background(0, 0); gradient(color(159, 135, 223), color(253, 141, 158), 0, 100); gradient(color(253, 141, 158), color(255, 210, 107), 100, 100); gradient(color(255, 210, 107), color(251, 254, 101), 200, 225); for(var i = 0; i < 70; i++){ var col = lerpColor(color(190, 231, 237), color(255, 255, 255), random(0, 1)); stroke(255, 255, 255); fill(col, random(50, 200)); ellipse(random(0, 600), random(0, 350), random(50, 200), random(10, 30)); } filter(BLUR, 12); filter(POSTERIZE, 60); filter(BLUR, 2); return get(); }, "skyImg3": function() { background(0, 0); gradient(color(12, 1, 41), color(8, 12, 61), 0, 100); gradient(color(8, 12, 61), color(36, 20, 94), 100, 100); gradient(color(36, 20, 94), color(150, 21, 189), 200, 225); for(var i = 0; i < 70; i++){ var col = lerpColor(color(190, 231, 237), color(255, 255, 255), random(0, 1)); stroke(255, 255, 255); fill(col, random(50, 200)); ellipse(random(0, 600), random(0, 350), random(50, 200), random(10, 30)); } filter(BLUR, 12); filter(POSTERIZE, 60); filter(BLUR, 2); return get(); }, "woodImg": function() { background(0, 0); push(); scale(3, 3.4); for(var i = 0; i < 200; i++){ var col1 = color(194, 127, 91); var col2 = color(82, 40, 21); for(var j = 0; j < 200; j++){ var nS = sin(j)/100; var nV = noise((150+i)nS, 110nS); stroke(lerpColor(col1, col2, nV1.5)); strokeWeight(2); point(i, j); } } pop(); return get(); }, }; var curLoad = 0; var loaded = false; var load = function() { var obj = Object.keys(imgs); background(0, 0, 0, 0); imgs[obj[curLoad]] = imgs[obj[curLoad]](); curLoad++; background(255, 255, 255); textSize(40); fill(50); text("Loading " + (((curLoad / Object.keys(imgs).length)) 100).toFixed(0) + "%", 300, 300); if(!loaded && curLoad >= Object.keys(imgs).length) { scene = 'animation'; loaded = true; } }; //mountains image because masking doesn't work in the function above // [ background(0, 0); mountainsOutline(300); var outlineImg = get(); background(0, 0); fill(221, 226, 230); rect(300, 300, 600, 600); for(var i = 0; i < 600; i++){ var col = lerpColor(color(209, 222, 230), color(116, 132, 143), random(0, 1)); stroke(161, 182, 189); fill(col, random(50, 200)); ellipse(random(0, 600), random(0, 600), random(50, 100), random(50, 100)); } gradient(color(255, 220), color(255, 0), 130, 350); filter(BLUR, 12); filter(POSTERIZE, 60); filter(BLUR, 2); fill(0, 17); rect(300, 300, 600, 600); var mountainsImg = get(); if(mountainsImg){ mountainsImg.mask(outlineImg); } //] / @BUTTONS / //main button function var Button = (function(){ Button = function(type, funct){ //type, function, and speed this.type = type; this.funct = funct; this.speed = 5; //internal variables for the animation this.shiftSpeed = 1; this.shiftSpeed2 = 1; this.Shift = 0; this.ShiftW = 0; this.ShiftH = 0; }; Button.prototype.display = function(){ noStroke(); push(); translate(this.x, this.y); scale(this.Shift); //display switch(this.type){ case "settings": //[ //border rect strokeWeight(2); fill(111, 61, 37); stroke(50); rect(0, 0, this.w, this.h, 10); //image image(imgs.woodImg, 0, 0, this.w/1.15, this.h/1.15); //lines strokeCap(SQUARE); strokeWeight(4); stroke(10); line(-this.w/4, -this.h/6, this.w/4, -this.h/6); line(-this.w/4, 0, this.w/4, 0); line(-this.w/4, this.h/6, this.w/4, this.h/6); noStroke(); strokeCap(ROUND); //light rect for animation noStroke(); fill(255, 20); rect(0, 0, this.ShiftW, this.ShiftH, 10); break; //] case "close": //[ //display strokeWeight(3); fill(145, 94, 72); stroke(74, 50, 40); ellipse(0, 0, this.w, this.h); strokeWeight(6); line(0-this.w/5, 0-this.h/5, this.w/5, this.h/5); line(0-this.w/5, this.h/5, this.w/5, 0-this.h/5); noStroke(); //light circle for animation fill(0, 30); ellipse(0, 0, this.ShiftW, this.ShiftH); break; //] } pop(); }; Button.prototype.update = function(){ //checks if mouse is inside if(mouseX > this.x-(this.w/2) && mouseY > this.y-(this.h/2) && mouseX < this.x+(this.w/2) && mouseY < this.y+(this.h/2)){ //if clicked, runs funtion if(clicked){ this.funct(); } //cursor and animation variables cursor("pointer"); this.shiftSpeed = 0.02; this.shiftSpeed2 = this.speed; } else { this.shiftSpeed = -0.02; this.shiftSpeed2 = -this.speed; } //runs animation this.Shift = constrain(this.Shift, 1, 1.1); this.Shift += this.shiftSpeed; this.ShiftW = constrain(this.ShiftW, this.speed, this.w-this.speed); this.ShiftW += this.shiftSpeed2; this.ShiftH = constrain(this.ShiftH, this.speed, this.h-this.speed); this.ShiftH += this.shiftSpeed2; }; Button.prototype.construct = function(x, y, w, h){ this.x = x; this.y = y; this.w = w; this.h = h; this.display(); this.update(); }; return Button; })(); var settingsButton = new Button("settings", function(){ down = true; }); var closeButton = new Button("close", function(){ down = false; }); //separate from main button function because it us called inside a for loop function shopButton(x, y, w, h, type, val){ rectMode(CENTER); // noStroke(); // fill(20); // ellipse(x, y, w1.3, h1.3); noStroke(); fill(145, 94, 72); ellipse(x, y, w, h); // noStroke(); // fill(20, 150); // ellipse(x, y, w/1.5, h/1.5); //checks if mouse is inside if(mouseX > x-(w/2) && mouseY > y-(h/2) && mouseX < x+(w/2) && mouseY < y+(h/2)){ noStroke(); fill(255, 50); ellipse(x, y, w, h); //changes color when hovered if(clicked){ if(type === 'speed'){ SPEED = val; } if(type === 'time'){ TIME = val; } } } //shows which one is selected if(type === 'speed'){ if(SPEED === val){ noStroke(); fill(20, 150); ellipse(x, y, w/1.5, h/1.5); } } if(type === 'time'){ if(TIME === val){ noStroke(); fill(20, 150); ellipse(x, y, w/1.5, h/1.5); } } } / @OBJECTS (and a few display functions) / //foot/hand rotation variables var dir = "back"; var rotFront = -10; var rotBack = 0; function calcRotation(){ //sets direction (off of front foot) if(70+n[0].pos5 > 70+49){ dir = "forwards"; } if(70+n[0].pos5 < 70-49){ dir = "back"; } //rotates when direction is forward if(dir === "forwards"){ if(70+n[0].pos5 < 70-48){ rotFront -= SPEED/(40/6); // seting down back foot } else { rotFront += SPEED/(400/6); // rotating back foot } rotBack -= SPEED/100; //front foot } //sets rotation to 0 when apex of stride is reached if(70+n[0].pos5 === 70-50){ rotFront = 0; // front foot } if(70+n[0].pos5 === 70+50){ rotBack = 0; // back foot } //rotates when direction is backward if(dir === "back"){ rotFront -= SPEED/100; // front foot if(70+n[0].pos5 > 70+48){ rotBack -= SPEED/(40/6); // seting down back foot } else { rotBack += SPEED/(400/6); // rotating back foot } } } //ant object var Ant = function(x, y){ //positions this.x = x; this.y = y; //display functions this.head = function(x, y, size, rot){ push(); translate(x, y); scale(size0.01); rotate(rot); image(imgs.headImg, 0, 0); pop(); }; this.hanky = function(x, y){ push(); translate(x-width, y-height); fill(163, 47, 51); beginShape(); vertex(347, 308); vertex(347, 314); vertex(345, 321); vertex(340, 329); vertex(336, 330); vertex(333, 335); vertex(334, 347); vertex(332, 349); vertex(333, 354); vertex(336, 357); vertex(338, 365); vertex(342, 366); vertex(340, 357); vertex(338, 354); vertex(347, 363); vertex(347, 357); vertex(342, 352); vertex(338, 348); vertex(344, 338); vertex(346, 334); vertex(351, 333); vertex(365, 321); vertex(356, 312); vertex(349, 308); endShape(); noFill(); strokeWeight(1); stroke(128, 45, 50); beginShape(); vertex(334, 332); vertex(333, 335); vertex(334, 347); vertex(332, 349); vertex(333, 354); vertex(336, 357); vertex(338, 365); vertex(342, 366); vertex(340, 357); vertex(338, 354); vertex(347, 363); vertex(347, 357); vertex(342, 352); vertex(338, 348); vertex(344, 338); vertex(346, 334); vertex(351, 333); vertex(365, 321); vertex(356, 312); vertex(349, 308); vertex(346, 309); endShape(); noFill(); stroke(199, 77, 83, 100); strokeWeight(2); bezier(350, 313, 351, 319, 348, 327, 344, 329); bezier(355, 316, 354, 319, 352, 327, 348, 330); bezier(359, 320, 361, 320, 354, 327, 354, 327); bezier(344, 333, 339, 340, 337, 343, 336, 350); bezier(339, 333, 333, 340, 336, 337, 334, 343); pop(); }; this.body = function(x, y, size, rot){ push(); translate(x, y); //scale(size0.01); //underside of hanky fill(112, 27, 27); stroke(56, 5, 9); push(); translate(n[0].pos/4, 0); beginShape(); vertex(50, 9); vertex(31, 7); vertex(30, 32); vertex(34, 50); endShape(); pop(); //amount that body moves while walking var a = n[0].pos/2; //outline on left side of body stroke(35); noFill(); strokeWeight(14); bezier(24+(a/2), 12, 81+a, 61, 76+a, 108-a, 52, 145); //body for(var i = 0; i < 5; i++){ noFill(); stroke(20+(i7)); strokeWeight(14); bezier(24+(a/2), 7+(i1), 86+(i-1)+a, 31+(i6), 106+(i-6)+a, 108-a, 82+(i-6), 150+(i-1)); } //highlight on body for(var j = 0; j < 5; j++){ stroke(255, 10+(j1)); strokeWeight(10-(j2)); bezier(24+(a/2), 11, 82+a, 55, 82+a, 108-a, 58, 146); } //hanky noStroke(); this.hanky(300+n[0].pos/4, 300); pop(); }; this.legs = function(x, y, size, rot, open){ //internal functions function shoe(x, y, size, rot){ push(); translate(x, y); rotate(rot); scale(size0.01); //back of shoe noStroke(); fill(0, 0, 0); triangle(29, -17, 14, -15, 29, -3); //outline stroke(50); strokeWeight(2); fill(106, 70, 62); beginShape(); vertex(8, -14); vertex(11, -16); vertex(17, -16); vertex(23, -14); vertex(26, -13); vertex(27, -13); vertex(29, -16); vertex(32, -15); vertex(32, -8); vertex(34, -5); vertex(34, 2); vertex(32, 9); vertex(32, 13); vertex(33, 16); vertex(32, 20); vertex(17, 20); vertex(14, 18); vertex(1, 18); vertex(-3, 20); vertex(-18, 20); vertex(-29, 15); vertex(-31, 12); vertex(-29, 5); vertex(-24, 2); vertex(-15, 2); vertex(-7, -2); vertex(1, -8); vertex(4, -9); vertex(8, -14); endShape(); //sole fill(35); noStroke(); beginShape(); vertex(-31, 12); vertex(-25, 13); vertex(-17, 16); vertex(-7, 18); vertex(2, 15); vertex(20, 15); vertex(32, 13); vertex(33, 16); vertex(32, 20); vertex(17, 20); vertex(14, 18); vertex(1, 18); vertex(-3, 20); vertex(-18, 20); vertex(-29, 15); vertex(-31, 12); endShape(); //sole outline noFill(); stroke(79, 51, 46); beginShape(); vertex(-31, 12); vertex(-25, 13); vertex(-17, 16); vertex(-7, 18); vertex(2, 15); vertex(20, 15); vertex(32, 13); endShape(); //highlight for(var j = 0; j < 5; j++){ fill(76, 76, 87, 40); stroke(255, 10+(j1)); strokeWeight(10-(j2)); bezier(-26, 6, 2, 13, 2, 3, 23, 5); } //blue spot fill(87, 85, 115, 200); stroke(107, 107, 107, 100); beginShape(); vertex(34, 2); vertex(26, 1); vertex(15, 2); vertex(20, 8); vertex(32, 9); vertex(34, 2); endShape(); //laces noFill(); stroke(25); line(-4, -3, -2, -2); line(-1, -5, 1, -4); line(2, -7, 5, -6); strokeWeight(1); stroke(35); beginShape(); vertex(8, -13); vertex(19, -8); vertex(21, -6); vertex(20, 3); vertex(14, 1); vertex(9, -7); vertex(6, -11); endShape(); //top of shoe noStroke(); fill(255, 20); beginShape(); vertex(8, -14); vertex(11, -16); vertex(17, -16); vertex(23, -14); vertex(26, -13); vertex(27, -13); vertex(29, -16); vertex(32, -15); vertex(32, -8); vertex(34, -5); vertex(32, -4); vertex(28, -8); vertex(28, -10); vertex(20, -12); vertex(14, -13); vertex(8, -14); endShape(); pop(); } function leg_01() { //sets angle mode to radians angleMode = "radians"; //rotation variables: var a = open; // angle of rotation var px = 66; // x center of rotation var py = 153; // y center of rotation var ax = px + -25; // x offset var ay = py + 9; // y offset var b = a+1.9; // second angle of rotation //calculates rotation in terms of x and y function rotX(angle){ return (cos(angle) * (ax - px)) + (sin(angle) * (ay - py)) + px; } function rotY(angle){ return (cos(angle) * (ay - py)) - (sin(angle) * (ax - px)) + py; } //top of shorts noStroke(); fill(194, 190, 169); quad(52, 142, 90, 150, rotX(b), rotY(b)+1, rotX(a), rotY(a)+1); stroke(163, 157, 124); strokeWeight(2); line(52, 142, rotX(a), rotY(a)); line(90, 150, rotX(b), rotY(b)); //pocket ellipse(rotX(b), rotY(b), 5, 5); stroke(112, 106, 77); strokeWeight(3); noFill(); fill(153, 148, 128); bezier(rotX(b), rotY(b), 70, 161, 80, 141, 80, 145); strokeWeight(1); stroke(153, 148, 128); triangle(rotX(b), rotY(b), 80, 145, 89, 152); //set angle mode back to degrees angleMode = "degrees"; //draw shorts push(); translate(px, py); rotate(a-57); translate(-px, -py); //display vertices stroke(163, 157, 124); strokeWeight(2); fill(194, 190, 169); beginShape(); vertex(41, 162); vertex(42, 204); vertex(46, 209); vertex(79, 207); vertex(82, 194); vertex(78, 193); vertex(82, 191); vertex(83, 174); endShape(); //shadow 1 noStroke(); fill(0, 40); beginShape(); vertex(80, 196); vertex(64, 199); vertex(51, 199); vertex(54, 202); vertex(73, 201); vertex(80, 199); vertex(77, 202); vertex(62, 205); vertex(53, 208); vertex(79, 207); vertex(80, 196); endShape(); fill(0, 50); beginShape(); vertex(79, 204); vertex(62, 205); vertex(53, 208); vertex(79, 207); endShape(); //shadow 2 fill(0, 25); beginShape(); vertex(42, 183); vertex(50, 188); vertex(55, 189); vertex(63, 188); vertex(59, 191); vertex(51, 193); vertex(42, 190); vertex(42, 183); endShape(); //highlight stroke(255, 30); strokeWeight(15); line(64, 150, 55, 174); stroke(255, 25); strokeWeight(9); line(64, 150, 55, 174); stroke(255, 15); strokeWeight(3); line(64, 150, 55, 174); pop(); } //top shorts leg function leg_02() { //sets angle mode to radians angleMode = "radians"; //rotation variables: var a = -open; // angle of rotation var px = 56; // x center of rotation var py = 144; // y center of rotation var ax = px + -20; // x offset var ay = py + 27; // y offset var b = a+1.4; // second angle of rotation //calculates rotation in terms of x and y function rotX(angle){ return (cos(angle) (ax - px)) + (sin(angle) * (ay - py)) + px; } function rotY(angle){ return (cos(angle) * (ay - py)) - (sin(angle) * (ax - px)) + py; } //top of shorts noStroke(); fill(194, 190, 169); quad(46, 135, 90, 150, rotX(b), rotY(b)+1, rotX(a), rotY(a)+1); stroke(163, 157, 124); strokeWeight(2); line(46, 135, rotX(a), rotY(a)); line(89, 149, rotX(b), rotY(b)); //set angle mode back to degrees angleMode = "degrees"; //draw shorts push(); translate(px, py); rotate(a-57); //outline fill(194, 190, 169); stroke(163, 157, 124); beginShape(); vertex(-20, 27); vertex(-20, 51); vertex(-21, 58); vertex(-18, 62); vertex(8, 64); vertex(18, 62); vertex(21, 57); vertex(23, 25); endShape(); //first shadow noStroke(); fill(0, 40); beginShape(); vertex(9, 8); vertex(17, 31); vertex(19, 46); vertex(21, 57); vertex(23, 26); vertex(24, 26); vertex(24, 4); vertex(9, 8); endShape(); //second shadow noStroke(); fill(0, 30); beginShape(); vertex(21, 56); vertex(16, 45); vertex(10, 41); vertex(7, 36); vertex(15, 39); vertex(12, 35); vertex(11, 23); vertex(3, 5); vertex(23, 16); endShape(); //third shadow noStroke(); fill(0, 29); beginShape(); vertex(21, 57); vertex(14, 57); vertex(-7, 56); vertex(-16, 50); vertex(-1, 51); vertex(13, 50); vertex(21, 47); endShape(); //third shadow again, but darker noStroke(); fill(0, 50); beginShape(); vertex(22, 54); vertex(14, 56); vertex(-7, 55); vertex(-14, 50); vertex(-1, 53); vertex(13, 53); vertex(21, 51); vertex(21, 14); vertex(25, 14); vertex(22, 54); endShape(); //highlight stroke(255, 30); strokeWeight(15); line(-5, 1, -7, 39); stroke(255, 25); strokeWeight(9); line(-5, 1, -7, 39); stroke(255, 15); strokeWeight(3); line(-5, 1, -7, 39); pop(); } //back shorts leg function fly() { //sets angle mode to radians angleMode = "radians"; //rotation variables: var a = open-0.6; // angle of rotation var px = 52; // x center of rotation var py = 144; // y center of rotation var ax = px + 0; // x offset var ay = py + 11; // y offset //calculates rotation in terms of x and y function rotX(angle){ return (cos(angle) (ax - px)) + (sin(angle) * (ay - py)) + px; } function rotY(angle){ return (cos(angle) * (ay - py)) - (sin(angle) * (ax - px)) + py; } //display strokeWeight(4); stroke(156, 150, 123); line(52, 142, rotX(a), rotY(a)); strokeWeight(1); stroke(125, 125, 125); line(52, 142, rotX(a), rotY(a)); //set angle mode back to degrees angleMode = "degrees"; } push(); translate(x, y); //scale(size0.01); //top part of shorts under belt stroke(163, 157, 124); strokeWeight(2); fill(194, 190, 169); beginShape(); vertex(45, 152); vertex(84, 159); vertex(91, 153); vertex(95, 138); vertex(80, 139); vertex(64, 135); vertex(51, 125); vertex(47, 136); vertex(43, 144); vertex(45, 152); endShape(); //fly fly(); //back lower leg noFill(); stroke(20); strokeWeight(15); bezier( 65, 150, 54-n[0].pos5, 205, 50-n[0].pos3, 209, 70-n[0].pos5, 260-(n[1].pos > 0 ? n[1].pos2 : 0) ); //highlight on back lower leg for(var j = 0; j < 5; j++){ stroke(255, 10+(j1)); strokeWeight(10-(j2)); bezier( 65, 150, 54-n[0].pos5, 205, 50-n[0].pos3, 209, 70-n[0].pos5, 260-(n[1].pos > 0 ? n[1].pos2 : 0) ); } //back shoe shoe( 47-n[0].pos5, 276-(n[1].pos > 0 ? n[1].pos2 : 0), 110, rotBack ); //back shorts leg leg_02(); //front lower leg noFill(); strokeWeight(15); stroke(35); bezier( 65, 150, 61+n[0].pos3, 205, 54+n[0].pos3, 210, 70+n[0].pos5, 260+(n[1].pos > 0 ? 0 : n[1].pos2) ); //highlight on front lower leg for(var j = 0; j < 5; j++){ stroke(255, 10+(j1)); strokeWeight(10-(j2)); bezier( 65, 150, 61+n[0].pos3, 205, 54+n[0].pos3, 210, 70+n[0].pos5, 260+(n[1].pos > 0 ? 0 : n[1].pos2) ); } //front shoe shoe( 47+n[0].pos5, 276+(n[1].pos > 0 ? 0 : n[1].pos2), 110, rotFront ); //front shorts leg leg_01(); //belt noFill(); stroke(64, 47, 70); strokeWeight(12); strokeCap(SQUARE); push(); translate(78, 116); rotate(18); arc(0, 0, 83, 58, 57, 121); noStroke(); fill(64, 47, 70); rotate(16); rect(-15, 30, 10, 12, 6); rotate(-38); rect(11, 31, 10, 12, 6); pop(); strokeCap(ROUND); //highlights on belt push(); translate(78, 116); rotate(18); noFill(); stroke(255, 15); strokeWeight(5); arc(0, 0, 83, 58, 57, 125); stroke(255, 15); strokeWeight(3); arc(0, -2, 83, 58, 57, 125); stroke(255, 20); strokeWeight(1); arc(0, -3, 83, 58, 57, 125); pop(); //calculates shoe rotation calcRotation(); pop(); }; this.frontArm = function(x, y, size, rot, open){ push(); translate(x, y); //scale(size0.01); //sets angle mode to radians angleMode = "radians"; //rotation variables: var a = 2.2+open; // angle of rotation var px = 64; // x center of rotation var py = 32; // y center of rotation var ax = px + -60; // x offset var ay = py + 0; // y offset var b = (a-2.7)0.4+2.2; //angle of forearm //calculates rotation in terms of x and y function rotX(angle, cx, cy, offX, offY){ return (cos(angle) (offX - cx)) + (sin(angle) * (offY - cy)) + cx; } function rotY(angle, cx, cy, offX, offY){ return (cos(angle) * (offY - cy)) - (sin(angle) * (offX - cx)) + cy; } //condenses rotation functions into one variable for easy use var armRotX = rotX(a, px, py, px-50, py+0), armRotY = rotY(a, px, py, px-50, py+0), wristX = rotX(b, armRotX, armRotY, px, py), wristY = rotY(b, armRotX, armRotY, px, py); //arm noFill(); strokeWeight(13); stroke(35); line(px, py, rotX(a, px, py, px-50, py+0), rotY(a, px, py, px-50, py+0)); line(armRotX, armRotY, rotX(b, armRotX, armRotY, px, py), rotY(b, armRotX, armRotY, px, py)); //highlights for(var j = 0; j < 5; j++){ stroke(lerpColor(35, 255, (j0.05))); strokeWeight(10-(j2)); line(px, py, rotX(a, px, py, px-50, py+0), rotY(a, px, py, px-50, py+0)); line(armRotX, armRotY, wristX, wristY); } //hand push(); translate(wristX, wristY); rotate(90+cos(b)4); //fingers stroke(35); strokeWeight(7); line(-9, 20, -9, 16); line(-3, 20, -3, 16); line(3, 20, 3, 16); line(9, 20, 9, 16); line(-6, 5, -15, 12); //handish part noStroke(); fill(35); beginShape(); vertex(6, -1); bezierVertex(9, 7, 12, 6, 12.5, 15); vertex(-12.7, 15); bezierVertex(-12, 6, -9, 7, -6, -1); endShape(); //highlights for(var i = 0; i < 4; i++){ strokeWeight(2); stroke(lerpColor(35, 255, i0.06)); fill(lerpColor(35, 255, i0.08)); quad(4-i, -1, -4+i, -1, -9+i2, 12, 9-i2, 12); strokeWeight(3); stroke(lerpColor(35, 255, i0.04)); line(-7, 20-i2, 7, 20-i2); } pop(); //joins hand and arm together so it looks smoother for(var j = 4; j < 5; j++){ stroke(lerpColor(35, 255, (j0.05))); strokeWeight(10-(j2)); line(px, py, rotX(a, px, py, px-50, py+0), rotY(a, px, py, px-50, py+0)); line(armRotX, armRotY, wristX, wristY); } //set angle mode back to degrees angleMode = "degrees"; pop(); }; this.backArm = function(x, y, size, rot, open){ push(); translate(x, y); //scale(size0.01); //arm outline noFill(); strokeWeight(13); stroke(20); bezier( 64, 32, 49+n[0].pos2, 97, 42+n[0].pos2, 102, -15+n[0].pos2, 109+(n[1].pos > 0 ? 0 : n[1].pos2) ); //highlights for(var j = 0; j < 5; j++){ stroke(255, 10+(j1)); strokeWeight(10-(j2)); bezier( 64, 32, 49+n[0].pos2, 97, 42+n[0].pos2, 102, -15+n[0].pos2, 109+(n[1].pos > 0 ? 0 : n[1].pos2) ); } //walking stick noFill(); strokeWeight(8); stroke(117, 95, 67); line( -15+n[0].pos1.4, 1090.7+(n[1].pos > 0 ? 0 : n[1].pos2), -11+n[0].pos5, 295+(n[1].pos > 0 ? 0 : n[1].pos2) ); //highlights on walking stick for(var j = 0; j < 5; j++){ stroke(255, 15+(j1)); strokeWeight(10-(j2)); line( -15+n[0].pos1.4-j/2, 1090.7+(n[1].pos > 0 ? 0 : n[1].pos2), -11+n[0].pos5, 295+(n[1].pos > 0 ? 0 : n[1].pos2)-j/2 ); } //hand push(); translate(-15+n[0].pos2, 109+(n[1].pos > 0 ? 0 : n[1].pos2)); rotate(10-n[0].pos); //fingers strokeWeight(11); stroke(35); line(4, -6, -1, -2); strokeWeight(7); stroke(255, 50); line(4, -6, -1, -2); strokeWeight(10); stroke(40); line(-6, -3, -2, 9); for(var i = 0; i < 4; i++){ stroke(35); strokeWeight(8-(i/3)); line(3, -3+(i5), -i, -4+(i5)); line(5, -3+(i5), 8, -5+(i5)); //highlights for(var j = 0; j < 3; j++){ stroke(lerpColor(35, 255, 0.05+(j0.04))); strokeWeight(4-(j2)); line(3, -3+(i5), -8+i1.5, -4+(i5)); line(5, -3+(i5), 8, -5+(i5)); } } pop(); pop(); }; this.waterPouch = function(x, y, size, rot){ push(); translate(x, y); translate(110, 155); scale(size0.01); rotate(rot); translate(-110, -155); //resets center because I centered the vertices wrong //purple bottle strokeWeight(1); stroke(28, 14, 28); fill(132, 64, 110); quad(126, 145, 128, 137.3, 122, 135, 114.5, 149); quad(115, 144, 128.5, 148.4, 125, 159, 111.5, 149); arc(121, 148, 15, 15, 198, 374); noStroke(); quad(124, 145, 128, 137.3, 123, 135, 117.8, 149); //cap on purple bottle stroke(40); strokeWeight(3); line(121.5, 135.5, 128, 137.5); line(124.9, 135.5, 126, 133.6); //highlight on purple bottle for(var j = 0; j < 5; j++){ stroke(255, 15+(j1)); strokeWeight(10-(j2)); line(121, 146, 115, 157); } //blue pouch stroke(21); fill(71, 76, 111); strokeWeight(2); beginShape(); vertex(111, 152); vertex(107, 167); vertex(110, 170); vertex(118, 172); vertex(121, 171); vertex(122, 170); vertex(126, 156); vertex(125, 154); vertex(114, 151); vertex(111, 152); vertex(109, 160); vertex(117, 162); vertex(121, 162); vertex(116, 163); vertex(111, 162); endShape(); //yellow bottle noStroke(); fill(232, 230, 86); arc(105, 148, 15, 15, 198, 374); quad(97, 145, 95, 158, 111, 159, 113.3, 150); stroke(232, 230, 86); strokeWeight(2); fill(50); bezier(104, 141, 103, 134, 114, 137, 110, 143); //green pouch stroke(38, 87, 82); fill(56, 112, 107); strokeWeight(2); beginShape(); vertex(94, 151); vertex(93, 164); vertex(94, 168); vertex(96, 170); vertex(100, 171); vertex(106, 170); vertex(108, 168); vertex(112, 153); vertex(104, 152); vertex(101, 162); vertex(99, 162); vertex(104, 152); vertex(97, 150); vertex(94, 151); endShape(); //highlight on pouches noStroke(); fill(255, 25); push(); translate(101, 161); rotate(13); rect(0, 0, 10, 13, 10); rect(15, -3, 10, 13, 10); pop(); pop(); }; }; Ant.prototype.display = function(){ this.backArm(this.x, this.y, 100, 0, n[0].pos/12); this.body(this.x, this.y, 100); this.head(this.x+n[0].pos/4, this.y, 100, -5-n[0].pos/2); this.legs(this.x, this.y, 100, 0, n[0].pos/20); this.waterPouch(this.x, this.y-5-abs(n[0].pos/2), 110, -n[0].pos/2); this.frontArm(this.x, this.y, 100, 0, -n[0].pos/12); }; Ant.prototype.update = function(){ for(var i = 0; i < n.length; i++){ n[i].pos = n[i].funct(frameCount(SPEED/10))STRIDE_LENGTH; } }; Ant.prototype.run = function(){ this.display(); this.update(); }; var Joe = new Ant(260, 275); //path object var Path = function(y){ //positions this.x = 0; this.y = y; //image positions this.imgX = 0; this.imgX2 = 0; //speed this.speed = 1; //segments this.segments = []; for(var i = 0; i <= 10; i++){ this.segments[i] = {x: -200+(i100), y: this.y + random(-10, 10)}; } //rocks this.rocks = []; for(var i = 0; i <= 10; i++){ this.rocks[i] = {x: random(-300, 600), y: this.y + random(-40, -20), seed: random(-1, 1)}; } this.rock = function(x, y, seed){ //start and end points var startX = (seed5), startY = (seed5)-25, endY = (seed5)+20; //colors and stroke var col1 = color(93, 103, 115), col2 = color(77, 77, 77); fill(lerpColor(col1, col2, (seed0.5)+0.5)); strokeWeight(2); stroke(lerpColor(col1, col2, (seed0.25)+0.5)); //vertices push(); translate(x, y); scale((seed0.15)+0.3); beginShape(); curveVertex(83, -15); curveVertex(startX, startY); curveVertex((seed10)-30, -9); curveVertex((seed5)-25, endY); curveVertex((seed7)+30, endY); curveVertex(startX, startY); curveVertex((seed30)-210, (seed15)+55); endShape(); //highlight for(var j = 0; j < 5; j++){ stroke(255, 10+(j1)); strokeWeight(18-(j4)); line(2, -2, 15, -2); } pop(); }; }; Path.prototype.run = function(y){ //trail images image(imgs.trailBG, this.imgX+300, this.y+25, 600, 100); push(); translate(this.imgX2-300, this.y+25); scale(-1, 1); image(imgs.trailBG, 0, 0, 600, 100); pop(); //updates trail image positions this.imgX += this.speed; this.imgX2 += this.speed; //resets trail image positions if(this.imgX >= 600){ this.imgX = -600; } if(this.imgX2 >= 1200){ this.imgX2 = 0; } //colors/thickness for middle mountains fill(56, 54, 54); stroke(82, 82, 82); strokeWeight(2); // //display middle mountains // beginShape(); // //start point // vertex(463, 549); // vertex(600, 500); // //vertices, calculated using noise() // for(var x = -0.1; x < (width/400)+0.1; x += 0.01) { // //calculates noise value // var n = noise((x+this.x/4)2.5, 0.03); // //displays vertex // curveVertex(600-(x400), (this.y-550)+n800); // } // //end point // vertex(0, 500); // vertex(600, 500); // endShape(); //colors/thickness strokeWeight(2); stroke(27); fill(110, 102, 82); //display (covers everything except the images) beginShape(); //start point vertex(63, 393); //bottom vertices, calculated using random() for(var i = 1; i < this.segments.length; i++){ curveVertex(this.segments[i].x, this.segments[i].y); //moves segments this.segments[i].x += this.speed; //splices and replaces segmentes if(this.segments[i].x > 800){ this.segments.pop(); this.segments.unshift({x: -200, y: this.y + random(-10, 10)}); } } //holding vertices in between vertex(650, 400); vertex(650, 325); //top vertices, calculated using noise() for(var x = -0.1; x < (width/300)+0.1; x += 0.01) { //calculates noise value var n = noise((x+this.x)0.91, 0.01); //displays vertex vertex(600-(x300), (this.y-140)+n180); } //final two vertices vertex(-100, 450); vertex(63, 450); endShape(); //rocks for(var i = 0; i < this.rocks.length; i++){ this.rock(this.rocks[i].x, this.rocks[i].y, this.rocks[i].seed); //updates position this.rocks[i].x += this.speed/2.25; //resets when off screen if(this.rocks[i].x > 650){ this.rocks[i].x = random(-300, -50); this.rocks[i].y = this.y + random(-40, -20); this.rocks[i].seed = random(-1, 1); } } //sorts rocks so that 'closer' ones are called first this.rocks.sort(function(a, b) { return a.y - b.y; }); //updates x position this.x += this.speed0.0015; }; var path = new Path(525); //sign object var Sign = function(x, y, num){ //positions this.x = x; this.y = y; //message num this.num = num; //speed this.speed = 1; }; Sign.prototype.display = function(){ //border rects fill(140, 86, 60); stroke(111, 61, 37); strokeWeight(3); rect(this.x, this.y+20, 30, 75); rect(this.x, this.y-20, 140, 70, 7); //images image(imgs.woodImg, this.x+1, this.y+20, 25, 70); image(imgs.woodImg, this.x+1, this.y-20, 130, 60); //text fill(158, 120, 89); textFont(f, 22-signText[this.num][0].length/2); text(signText[this.num][0], this.x, this.y-28); textFont(f, 13); text(signText[this.num][1], this.x, this.y-7); //dirt mound stroke(94, 87, 73); strokeWeight(3); fill(110, 102, 82); push(); translate(this.x, this.y); beginShape(); vertex(-20, 60); vertex(-18, 57); vertex(-8, 55); vertex(1, 56); vertex(15, 54); vertex(17, 54); vertex(21, 60); endShape(); pop(); }; Sign.prototype.update = function(){ this.x += this.speed/2.25; }; Sign.prototype.run = function(){ this.display(); this.update(); }; var signs = []; //message object var Message = function(x, y, num){ //positions this.x = x; this.y = y; //message num this.num = num; this.time = 0; //speed this.speed = 1; }; Message.prototype.display = function(){ //text fill(0, 77); textFont(f2, 17); text(messageText[this.num], this.x, this.y, 300, 200); }; Message.prototype.update = function(){ //changes y position this.y = lerp(this.y, 0, 0.075); //updates timer this.time ++; //changes x position if(this.time > 500){ this.x = lerp(this.x, 800, 0.07); } }; Message.prototype.run = function(){ this.display(); this.update(); }; var messages = []; //display functions function mountains(y){ push(); //positioning translate(0, 600-y); //color var fillCol = lerpColor(color(196, 222, 242), color(235, 225, 176), 0.5); //mountains in distance (yellow) noStroke(); fill(fillCol, 75); beginShape(); vertex(1, -24); vertex(58, -41); vertex(73, -37); vertex(161, -54); vertex(195, -57); vertex(233, -71); vertex(246, -79); vertex(258, -77); vertex(284, -61); vertex(303, -48); vertex(319, -46); vertex(326, -41); vertex(338, -45); vertex(353, -52); vertex(370, -67); vertex(397, -58); vertex(458, -53); vertex(526, -54); vertex(557, -67); vertex(578, -91); vertex(590, -102); vertex(600, -94); vertex(600, 200); vertex(0, 200); endShape(); //mountains in foreground (gray) image(mountainsImg, 300, 0); //shadow between mountains fill(127, 147, 161, 30); beginShape(); vertex(244, 21); vertex(233, 30); vertex(204, 43); vertex(188, 57); vertex(174, 60); vertex(185, 37); vertex(211, 24); vertex(224, 10); vertex(234, 4); endShape(); pop(); } function sky(){ //switches image depending on TIME variable switch(TIME){ case 0: image(imgs.skyImg1, 300, 300); break; case 1: image(imgs.skyImg2, 300, 300); break; case 2: image(imgs.skyImg3, 300, 300); break; } } function settings(y){ push(); translate(0, y-300); //fill rect stroke(102, 53, 30); strokeWeight(5); fill(111, 61, 37); rect(300, 0, 500, 550, 40); //wood image image(imgs.woodImg, 300, 0, 475, 525); //border rect noFill(); stroke(145, 94, 72); strokeWeight(5); rect(300, 0, 475, 525, 30); //button lines strokeWeight(4); line(225, -125, 475, -125); line(225, -50, 475, -50); //button titles fill(179, 138, 120); textFont(f, 20); text("Speed", 125, -125); text("Time", 125, -50); //text textFont(f, 17); text("Made by Red Arrow for Contest: Animations. Released 4/27/21. 'Joe the Ant' idea from Vintage Sisters Oregon Backpacking Hiking Joe Ants T-Shirt.", 100, 0, 400, 200); pop(); //settings buttons for(var i = 0; i < 3; i++){ shopButton(225+(i125), (y-600)+175, 25, 25, 'speed', (i+1)25); } for(var i = 0; i < 3; i++){ shopButton(225+(i125), (y-600)+250, 25, 25, 'time', i); } //exit button closeButton.construct(300, y-100, 45, 45, color(0, 0, 0), 255); } function animation(){ //background background(199, 194, 181); sky(); mountains(275); //path path.run(); //signs for(var i = 0; i < signs.length; i++){ signs[i].run(); //splices signs if(signs[i].x > 760){ signs.splice(i, 1); } } //makes new signs if(frameCount % 2000 === 0 && signNum < signText.length){ signs.push(new Sign(-100, 450, signNum)); signNum ++; } //messages for(var i = 0; i < messages.length; i++){ messages[i].run(); //splices messages if(messages[i].x > 750){ messages.splice(i, 1); } } //makes new messages if(frameCount === 100 \|\| frameCount % 850 === 0 && messageNum < messageText.length){ messages.push(new Message(250, -200, messageNum)); messageNum ++; } //Joe. Joe.run(); //settings button settingsButton.construct(35, 35, 45, 45, color(0, 0, 0), 255); //settings settings(settingsY); //settings mechanics if(down) { settingsY = lerp(settingsY, 600, 0.07); } if(!down) { settingsY = lerp(settingsY, 0, 0.07); } } /* @DRAW_FUNCTION / draw = function(){ cursor("default"); this[scene](); clicked = false; fill(50); textFont("", 12); text(round(this.__frameRate), 585, 590); }; / @INTERACTIONS **/ function mouseClicked(){ clicked = true; }
Folds	1,17,59,62,63,72,73,82,89,118,125,137,138,220,221,227,228,297,300,416,419,434,437,468,476,489,490,543,544,571,572,581,584,586,587,589,592,640,650,691,694,1700,1701,1710,1711,1715,1716,1719,1723,1783,1784,1899,1903,1914,1915,1951,1952,1954,1955,1958,1962,1974,1975,1982,1983,1995,1996,1999,2003,2060,2061,2075,2076,2123,2124,2182,2187,2194,2199,2201
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMOnj63BCww
Votes	176
Spin-Offs	7
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6201759782453248","title":"Contest: Animation","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Red Arrow ✝
Author Name	Arrowhawk
Author ID	kaid_125546068146291180258877
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739458441830
Updated	10 months ago, 1739458441830
Source Deleted	unknown