Viewing Program

Program Data

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

Title	live spider
ID	6003501317013504
Created	3 years ago, 1662069845949
Updated	3 years ago, 1662069845958
Code	/ Saw something like this and wanted to give it a try. Every 2 frames, the spider moves a leg to the closest point (to the body) that hasn't been stepped on for 40 frames. Having a timer on each point fixed a problem where the spider would move a leg in the wrong direction. / // grid or randomness? var rand = false; // points the spider can choose to step to var p = []; // fill points array if(rand) { // creates an array of random points for(var i = 0; i < 400; i ++) { p.push([random(0, 400), random(0, 400), 0]); } } else { // creates an even grid of points for(var x = 0; x <= 400; x += 20) { for(var y = 0; y <= 400; y += 20) { p.push([x, y, 0]); } } } // spider object var s = { x: 200, y: 200, // retaining velocity helps streamline movement vx: 0, vy: 0, // coords of each foot arms: [], // sets of coords in here move smoothly towards corresponding sets in 'arms' // this gives the spider smooth leg movements instead of sudden jerks drawn: [], // counter to move one leg at a time, in sequence c: 0, // weighted coords, used to direct steps px: 200, py: 200, }; // sorts 'p' array. // points closer to spider's weighted coords (s.px, s.py) get // sorted to the beginning of array function sortP(a, b) { return (dist(a[0], a[1], s.px, s.py) - dist(b[0], b[1], s.px, s.py)); } // draws a leg from 2 points function bez(ax, ay, bx, by) { bezier(ax, ay, lerp(ax, bx, 0.2), ay - 10, lerp(ax, bx, 0.8), by - 20, bx, by); } // sort 'p' and create legs p.sort(sortP); for(var i = 0; i < 8; i++) { s.arms.push([p[i][0], p[i][1], i]); s.drawn.push([p[i][0], p[i][1]]); } draw = function() { background(250); strokeWeight(1.2); // draw points in 'p'... stroke(184, 184, 184); for(var i = 0; i < p.length; i++) { // ...but only if it's available to step to. if(p[i][2] === 0) { point(p[i][0], p[i][1]); } // decrements the point's timer. // the timer tracks if the point has been stepped on recently p[i][2] = max(0, p[i][2] - 1); } // sets weighted coords to be closer to the mouse s.px = s.x + (mouseX - s.x)0.1; s.py = s.y + (mouseY - s.y)0.1; // dampen velocity s.vx = 0.9; s.vy = 0.9; // move body coords by velocity s.x += s.vx; s.y += s.vy; // at a set interval and if the spider isn't near the mouse, move a leg // legs are moved in sequence, this is controlled by 's.c' if(frameCount % 2 === 0 && dist(s.x, s.y, mouseX, mouseY) > 50) { // sort 'p' p.sort(sortP); // find the first point whose timer (p[i][2]) is at 0 // that means it's available for stepping to var j = 0; while(p[j][2] > 0 && j < p.length - 1) { j++; } // move a foot to that point s.arms[s.c] = [p[j][0], p[j][1], j]; // set point's timer. // remember: if this timer is above 0, the spider will not step to that point. p[j][2] = 30; // increments to move the next leg in sequence at the next interval s.c++; // wraps it to 0 if it's too high of a number s.c = s.c % s.arms.length; } // draws the legs! noFill(); stroke(61, 33, 14); for(var i = 0; i < s.arms.length; i++) { p[s.arms[i][2]][2]++; // smoothly move leg's drawn coords to match target coords s.drawn[i][0] += (s.arms[i][0] - s.drawn[i][0])0.5; s.drawn[i][1] += (s.arms[i][1] - s.drawn[i][1])0.5; // draw the leg bez(s.drawn[i][0], s.drawn[i][1], s.x, s.y); // calculate a spring force and add it to the velocity s.vx += (s.arms[i][0] - s.x)0.01; s.vy += (s.arms[i][1] - s.y)0.01; } };
Folds	22,26,27,34,38,61,66,68,71,73,77,80,89,97
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgKOb8YTVCgw
Votes	182
Spin-Offs	11
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Levi F.
Author Name	LeviCoder
Author ID	kaid_1152620490185361154142770
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739452299208
Updated	8 months ago, 1744819497054
Source Deleted	unknown