Worm like herds.

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|661\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
SoCoder -> Snippet Home -> AI and Movement

Pakz	Created : 15 February 2024 Edited : 15 February 2024 Language : Javascript Worm like herds. Gemini made a herd of wondering worm cattle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake Canvas</title> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> // Get the canvas element const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // Block size and movement range const blockSize = 10; const moveRange = 5; // Colors const snakeColor = "green"; const tailColor = "grey"; // Generate a random position within the canvas boundaries function getRandomPosition() { return { x: Math.floor(Math.random() * (canvas.width - blockSize)), y: Math.floor(Math.random() * (canvas.height - blockSize)) }; } // Check if a position collides with any existing snake tails function checkCollision(position) { for (const snake of snakes) { for (let i = 1; i < snake.length; i++) { if (snake[i].x === position.x && snake[i].y === position.y) { return true; } } } return false; } // Create a new snake object function createSnake() { const head = getRandomPosition(); return [{ x: head.x, y: head.y }]; } // Move the snake and add new position to tail function moveSnake(snake) { const direction = { x: Math.floor(Math.random() * 3) - 1, y: Math.floor(Math.random() * 3) - 1 }; const newHead = { x: Math.min(Math.max(snake[0].x + direction.x * moveRange, 0), canvas.width - blockSize), y: Math.min(Math.max(snake[0].y + direction.y * moveRange, 0), canvas.height - blockSize) }; if (!checkCollision(newHead)) { snake.unshift(newHead); if (snake.length > 8) { snake.pop(); } } } // Draw the snake on the canvas function drawSnake(snake) { ctx.fillStyle = snakeColor; ctx.fillRect(snake[0].x, snake[0].y, blockSize, blockSize); ctx.fillStyle = tailColor; for (let i = 1; i < snake.length; i++) { ctx.fillRect(snake[i].x, snake[i].y, blockSize, blockSize); } } // Initialize an array of snakes const snakes = []; // Add 50 snakes for (let i = 0; i < 50; i++) { let newSnake = createSnake(); while (checkCollision(newSnake[0])) { newSnake = createSnake(); } snakes.push(newSnake); } // Animation loop function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (const snake of snakes) { moveSnake(snake); drawSnake(snake); } requestAnimationFrame(animate); } animate(); </script> </body> </html> --v Version 2 : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake Canvas</title> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> // Get the canvas element const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); // Block size and movement range const blockSize = 12 const moveRange = 5; // Colors$ const snakeColor = "green"; const tailColor = "rgb(200,20,20)"; // Generate a random position within the canvas boundaries function getRandomPosition() { return { x: Math.floor(Math.random() * (canvas.width - blockSize)), y: Math.floor(Math.random() * (canvas.height - blockSize)) }; } // Check if a position collides with any existing snake tails function checkCollision(position) { for (const snake of snakes) { for (let i = 1; i < snake.length; i++) { if (snake[i].x === position.x && snake[i].y === position.y) { return true; } } } return false; } // Create a new snake object function createSnake() { const head = getRandomPosition(); return [{ x: head.x, y: head.y }]; } // Move the snake and add new position to tail function moveSnake(snake) { const direction = { x: Math.floor(Math.random() * 3) - 1, y: Math.floor(Math.random() * 3) - 1 }; const newHead = { x: Math.min(Math.max(snake[0].x + direction.x * moveRange, 0), canvas.width - blockSize), y: Math.min(Math.max(snake[0].y + direction.y * moveRange, 0), canvas.height - blockSize) }; if (!checkCollision(newHead)) { snake.unshift(newHead); if (snake.length > 8) { snake.pop(); } } } // Draw the snake on the canvas function drawSnake(snake) { //ctx.fillStyle = "black"; //ctx.fillRect(snake[0].x-1, snake[0].y-1, blockSize+2, blockSize+2); ctx.fillStyle = "black"; for (let i = 1; i < snake.length; i++) { ctx.globalAlpha = 0.5 //ctx.fillRect(snake[i].x+1, snake[i].y+1, blockSize+2, blockSize+2); drawFilledCircle(ctx,snake[i].x+1, snake[i].y+1, blockSize-2,"black") ctx.globalAlpha = 0.2 if(i>1 && i<snake.length-2){ //ctx.fillRect(snake[i].x+3, snake[i].y+3, blockSize-(i/2)+2, blockSize-(i/2)+2); drawFilledCircle(ctx,snake[i].x+3, snake[i].y+3, blockSize-(i/2)+2,"black") } if(i>2 && i<snake.length-2){ //ctx.fillRect(snake[i].x+5, snake[i].y+5, blockSize-(i/2)+4, blockSize-(i/2)+4); drawFilledCircle(ctx,snake[i].x+5, snake[i].y+5, blockSize-(i/2)+4,"black") } if(i==Math.floor(snake.length/2)){ //ctx.fillRect(snake[i].x+7, snake[i].y+7, blockSize-(i/2)+5, blockSize-(i/2)+5); drawFilledCircle(ctx,snake[i].x+5, snake[i].y+5, blockSize-(i/2)+5,"black") } } ctx.globalAlpha = 1 ctx.fillStyle = snakeColor; //ctx.fillRect(snake[0].x, snake[0].y, blockSize, blockSize); drawFilledCircle(ctx,snake[0].x, snake[0].y, blockSize,snakeColor) //ctx.fillStyle = tailColor; //for (let i = 1; i < snake.length; i++) { // ctx.fillRect(snake[i].x, snake[i].y, blockSize-(i/2), blockSize-(i/2)); //} //ctx.fillStyle = tailColor; for (let j = 1; j < 6; j+=1){ for (let i = 1; i < snake.length; i++) { ctx.fillStyle = 'rgb('+ j60 +', '+ j60+', '+ j60 +')'; //ctx.fillRect(snake[i].x+j, snake[i].y+j, (blockSize-(i/2))-j2, (blockSize-(i/2))-j2); drawFilledCircle(ctx,snake[i].x+j, snake[i].y+j, (blockSize-(i/2))-j2,'rgb('+ j60 +', '+ j60+', '+ j60 +')') }} for (let i = 1; i < snake.length; i++) { ctx.globalAlpha=0.5 //ctx.fillStyle = "green" //ctx.fillRect(snake[i].x, snake[i].y, (blockSize-(i/2)), (blockSize-(i/2))); drawFilledCircle(ctx,snake[i].x, snake[i].y, (blockSize-(i/2)),"green") } ctx.globalAlpha =1 } // Initialize an array of snakes const snakes = []; // Add 50 snakes for (let i = 0; i < 50; i++) { let newSnake = createSnake(); while (checkCollision(newSnake[0])) { newSnake = createSnake(); } snakes.push(newSnake); } var z = 0 // Animation loop function animate() { ctx.fillStyle = "darkgrey" ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "blue" ctx.globalAlpha = 0.2 ctx.fillRect(0,0,canvas.width,64) ctx.fillRect(0,canvas.height-64,canvas.width,64) ctx.globalAlpha = 0.5 ctx.fillStyle="white" ctx.fillRect(canvas.width/2,0,2,canvas.height) ctx.fillStyle="black" ctx.fillRect(canvas.width/2+2,0,2,canvas.height) ctx.fillStyle="white" ctx.fillRect(0,canvas.height/2,canvas.width,2) ctx.fillStyle="black" ctx.fillRect(0,canvas.height/2+2,canvas.width,2) if (z==0){ for (const snake of snakes) { moveSnake(snake); //drawSnake(snake); } z=2; } z-=1; for (const snake of snakes) { //moveSnake(snake); drawSnake(snake); } requestAnimationFrame(animate); } animate(); function drawFilledCircle(context, x, y, radius, color) { if(radius<0)radius=2 context.beginPath(); context.arc(x+radius/2, y+radius/2, radius, 0, 2 Math.PI); // Draws a complete circle context.fillStyle = color; // Sets the fill color context.fill(); // Fills the circle with the specified color context.closePath(); // Closes the path } </script> </body> </html> --v
Latest Update Make by Bard or Gemini now. Animated worm blobs that might be fun as targets in a shooter. The prompt : Could you create a single html and javascript file that has a canvas. On this canvas a block is randomly positioned and this moves between 3 and 8 steps leaving a tail. 50 of these block snakes are then randomly added on the canvas but only added on the canvas if they touch no other blocks.

Comments
Thursday, 15 February 2024, 08:53
Jayenkai	Cool! .. Now make a game out of it
Thursday, 15 February 2024, 09:07
Pakz	I was looking and thinking how to modify the drawsnake function to make it get to look like anything interesting. I added shadow for now. See the 2nd screen I just added.
Thursday, 15 February 2024, 09:23
Jayenkai	Stick some faces on them! Obligatory JSE edition
Thursday, 15 February 2024, 12:54
Pakz	I made a green blob version when at my Mum tonight. Updated the post.
Friday, 16 February 2024, 00:03
Pakz	I made a quick video of the progress this morning. View on YouTube
Friday, 16 February 2024, 00:27
AndyH	Alien Syndrome! Looks great so far.
Friday, 16 February 2024, 01:31
Jayenkai	\o/yeay\o/
Saturday, 17 February 2024, 01:39
Pakz	I kind of kept working on the code. I added variable blob size. Base color mixing with individual colors. I might stil try and give each blob their own tail length. The gfx is looking better than what I had initially imagined. Stil not 2D AAA Here the current code (No assets needed) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake Canvas</title> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> // Get the canvas element const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); canvas.width=window.innerWidth canvas.height=window.innerHeight // Block size and movement range const moveSpeed = 2 //const snakeTailLength = 9 const numSnakes = 30 var blockSize = 20 var monsterVarSize = blockSize/3 var snakeTailLength = blockSize/2 const moveRange = 4;//speed //mycols = [ "red","green","blue","purple", // "yellow","navy","orange","brown", // "Black","white"] // Define the base color (you can adjust these values) // Define the base color (you can adjust these values) //const baseColor = { r: 100, g: 60, b: 40 }; const baseColor = { r: 200, g: 110, b: 40 }; // Define the mixing ratio (values between 0 and 1) const mixRatio = .76; // This mixes colors halfway between original and base // Create the mycols array with 10 colors and mix with base color const mycolz = [ { r: 255, g: 0, b: 0 }, // red { r: 0, g: 255, b: 0 }, // green { r: 0, g: 0, b: 255 }, // blue { r: 128, g: 0, b: 128 }, // purple { r: 255, g: 255, b: 0 }, // yellow { r: 0, g: 0, b: 128 }, // navy { r: 255, g: 165, b: 0 }, // orange { r: 139, g: 69, b: 19 }, // brown { r: 0, g: 0, b: 0 }, // black { r: 255, g: 255, b: 255 }, // white ].map((color) => { return { r: Math.round(color.r * (1 - mixRatio) + baseColor.r * mixRatio), g: Math.round(color.g * (1 - mixRatio) + baseColor.g * mixRatio), b: Math.round(color.b * (1 - mixRatio) + baseColor.b * mixRatio), }; }); var mycols =[] mycolz.forEach((color, index) => { mycols.push( `rgb(${color.r}, ${color.g}, ${color.b})`) }); //var oldx,oldy=0 // Colors$ const snakeColor = "green"; const tailColor = "rgb(200,20,20)"; // Generate a random position within the canvas boundaries function getRandomPosition() { return { x: Math.floor(Math.random() * (canvas.width - blockSize)), y: Math.floor(Math.random() * (canvas.height - blockSize)) }; } // Check if a position collides with any existing snake tails function checkCollision(position) { for (const snake of snakes) { for (let i = 1; i < snake.length; i++) { if (snake[i].x === position.x && snake[i].y === position.y) { return true; } } } return false; } // Create a new snake object function createSnake(colz=0,siz=blockSize) { const head = getRandomPosition(); return [{ x: head.x, y: head.y, col:colz,size:siz}]; } // Move the snake and add new position to tail function moveSnake(snake) { //oldx= snake[0].x //oldy= snake[0].y const direction = { x: Math.floor(Math.random() * 3) - 1, y: Math.floor(Math.random() * 3) - 1 }; const newHead = { x: Math.min(Math.max(snake[0].x + direction.x * moveRange, 0), canvas.width - blockSize), y: Math.min(Math.max(snake[0].y + direction.y * moveRange, 0), canvas.height - blockSize), //col:"red", col:snake[0].col, size:snake[0].size }; // sometimes the blob gets stuck therefore a math.random is // used to unstuck it. fix here if (!checkCollision(newHead) \|\| Math.random()<.08) { snake.unshift(newHead); //12 if (snake.length > snakeTailLength) { snake.pop(); } }else{ } } // Draw the snake on the canvas function drawSnake(snake,num=0) { //ctx.fillStyle = "black"; //ctx.fillRect(snake[0].x-1, snake[0].y-1, blockSize+2, blockSize+2); var oldBlocksize = blockSize blockSize = snake[0].size ctx.fillStyle = "black"; for (let i = 1; i < snake.length; i++) { ctx.globalAlpha = 1 //ctx.fillRect(snake[i].x+1, snake[i].y+1, blockSize+2, blockSize+2); drawFilledCircle(ctx,snake[i].x+1, snake[i].y+1, blockSize-(i/2)-1,"black") ctx.globalAlpha = .5 if(i>1 && i<snake.length-2){ //ctx.fillRect(snake[i].x+3, snake[i].y+3, blockSize-(i/2)+2, blockSize-(i/2)+2); drawFilledCircle(ctx,snake[i].x+3, snake[i].y+3, blockSize-(i/2)+1,"black") } if(i>2 && i<snake.length-2){ //ctx.fillRect(snake[i].x+5, snake[i].y+5, blockSize-(i/2)+4, blockSize-(i/2)+4); drawFilledCircle(ctx,snake[i].x+5, snake[i].y+5, blockSize-(i/2)+2,"black") } if(i==Math.floor(snake.length/2)){ //ctx.fillRect(snake[i].x+7, snake[i].y+7, blockSize-(i/2)+5, blockSize-(i/2)+5); drawFilledCircle(ctx,snake[i].x+5, snake[i].y+5, blockSize-(i/2)+3,"black") } } // ring of holy ctx.fillStyle = snakeColor; //ctx.fillRect(snake[0].x, snake[0].y, blockSize, blockSize); if(num%2===0){ ctx.globalAlpha=0.1 drawFilledCircle(ctx,snake[0].x, snake[0].y, blockSize,"white") }else{ ctx.globalAlpha=0.1 drawFilledCircle(ctx,snake[0].x, snake[0].y, blockSize,"white") } //ctx.fillStyle = tailColor; //for (let i = 1; i < snake.length; i++) { // ctx.fillRect(snake[i].x, snake[i].y, blockSize-(i/2), blockSize-(i/2)); //} //ctx.fillStyle = tailColor; ctx.globalAlpha = 1 for (let j = 1; j < 6; j+=1){ for (let i = 1; i < snake.length; i++) { ctx.fillStyle = 'rgb('+ j60 +', '+ j60+', '+ j60 +')'; //ctx.fillRect(snake[i].x+j, snake[i].y+j, (blockSize-(i/2))-j2, (blockSize-(i/2))-j2); drawFilledCircle(ctx,snake[i].x+j, snake[i].y+j, (blockSize-(i/2))-j2,'rgb('+ j60 +', '+ j60+', '+ j60 +')') }} for (let i = 1; i < snake.length; i++) { ctx.globalAlpha=.2 //ctx.fillStyle = "green" //ctx.fillRect(snake[i].x, snake[i].y, (blockSize-(i/2)), (blockSize-(i/2))); //if(num%2===0){ // drawFilledCircle(ctx,snake[i].x, snake[i].y, (blockSize-(i/2)),"green") //}else{ // drawFilledCircle(ctx,snake[i].x, snake[i].y, (blockSize-(i/2)),"purple") //} drawFilledCircle(ctx,snake[i].x, snake[i].y, (blockSize-(i/2)),mycols[snake[i].col]) //ctx.globalAlpha = 0.08 //drawFilledCircle(ctx,snake[i].x, snake[i].y, (blockSize-(i/2)),"grey") //ctx.fillRect(snake[i].x, snake[i].y, (blockSize-(i/2)), (blockSize-(i/2))); ctx.globalAlpha=.1 drawFilledCircle(ctx,snake[i].x+blockSize/3, snake[i].y+blockSize/3, (blockSize/2-(i/2)),"black") ctx.globalAlpha=.16 if(i==Math.floor(snake.length/2-4)){ drawFilledCircle(ctx,snake[i].x+2, snake[i].y+2, (blockSize-(i/2)-4),"white") } } ctx.globalAlpha =1 blockSize=oldBlocksize } // Initialize an array of snakes const snakes = []; // Add 50 snakes for (let i = 0; i < numSnakes; i++) { let newSnake = createSnake(Math.floor(Math.random()10),blockSize+(Math.floor(Math.random()monsterVarSize))-monsterVarSize); while (checkCollision(newSnake[0])) { newSnake = createSnake(Math.floor(Math.random()10),blockSize+(Math.floor(Math.random()monsterVarSize))-monsterVasrSize); } snakes.push(newSnake); } var z = 0 // Animation loop function animate() { canvas.width=window.innerWidth canvas.height=window.innerHeight ctx.fillStyle = "darkgrey" ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "navy" ctx.globalAlpha = 0.5 ctx.fillRect(0,0,canvas.width,64) ctx.globalAlpha=0.2 ctx.fillRect(0,canvas.height-64,canvas.width,64) ctx.globalAlpha = 0.5 ctx.fillStyle="white" ctx.fillRect(canvas.width/2,0,2,canvas.height) ctx.fillStyle="black" ctx.fillRect(canvas.width/2+2,0,2,canvas.height) ctx.fillStyle="white" ctx.fillRect(0,canvas.height/2,canvas.width,2) ctx.fillStyle="black" ctx.fillRect(0,canvas.height/2+2,canvas.width,2) //sides ctx.fillStyle="black" ctx.globalAlpha=0.2 ctx.fillRect(0,0,canvas.width/10,canvas.height) ctx.fillStyle="white" ctx.fillRect(canvas.width-canvas.width/10,0,canvas.width/10,canvas.height) if (z==0){ for (const snake of snakes) { for(var zz=0;zz<moveSpeed;zz+=1){ moveSnake(snake); } //drawSnake(snake); } z=2; } z-=1; var q=0 for (const snake of snakes) { //moveSnake(snake); drawSnake(snake,q); q+=1 } requestAnimationFrame(animate); } animate(); function drawFilledCircle(context, x, y, radius, color) { if(radius<1)return if(radius<0)radius=2 context.beginPath(); context.arc(x+radius/2, y+radius/2, radius, 0, 2 Math.PI); // Draws a complete circle context.fillStyle = color; // Sets the fill color context.fill(); // Fills the circle with the specified color context.closePath(); // Closes the path ctx.fillStyle="white" ctx.globalAlpha = 0.1 ctx.fillRect(x,y,radius/4,radius/4,radius/4) ctx.fillRect(x+radius/3,y,radius/4,radius/4) ctx.globalAlpha = 0.05 ctx.fillRect(x+radius/2,y,radius/4,radius/4) ctx.fillRect(x+radius/3,y+radius/3,radius/4,radius/4) ctx.fillRect(x+radius/2,y+radius/3,radius/4,radius/4) //ctx.fillRect(x,y,radius/4,radius/4,radius/4) //ctx.fillRect(x+radius/2,y,radius/4,radius/4) //ctx.fillRect(x+radius/4,y+radius/2,radius/4,radius/4,radius/4) ctx.fillStyle="black" ctx.globalAlpha = 0.15 //ctx.fillRect(x+radius/2+radius/4,y+radius/2,radius/4,radius/4) ctx.fillRect(x+radius/2+radius/4,y+radius/2,radius/6,radius/6) ctx.globalAlpha = 0.2 ctx.fillRect(x+radius/3+radius/4,y+radius/2,radius/4,radius/4) } </script> </body> </html> --v
Saturday, 17 February 2024, 02:07
AndyH	Honestly Pakz that is amazing. They do look like genuine little organisms. I would love to see this as some sort of game. Are you going to make into a game? The other thing it reminds me of is Conway's game of life. Or maybe Populus.
Saturday, 17 February 2024, 02:17
Pakz	My back is stil painful. I can sit and work, or stand and do dishes for minutes before numbing pain locks in. My first goal now is to try and do the exercises until I can get through the day without problems. Sitting down for weeks or months just won't work now. The code here I am making for later use. Learning how to build these type of npc's. I did have a idea this morning to add a controlable player blob with a kind of a canon on his back. But I would want explosions and other liquid splat effects and such
Saturday, 17 February 2024, 02:35
Jayenkai	Yeah, a nice twin-stick blaster would be nice with these. I look forward to seeing the results
Saturday, 17 February 2024, 02:47
AndyH	Ah sorry about your back, I know how horrible that can be. Get well soon. Great to hear you will be doing something with this when you're able to.
Sunday, 18 February 2024, 00:53
Pakz	GPT4 really is something. I asked for some more more simulation. Then I copied the previous drawing routine into this example. Fish like tweak settings! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Worms with Random Walk Movement</title> <style> body, html { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="wormCanvas"></canvas> <script> const canvas = document.getElementById('wormCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const numWorms = 50; const maxTailSize = 40; const minTailSize = 25; const maxTailWidth = 20; // Max tail circle radius const minTailWidth = 9; // Min tail circle radius const maxSpeed = 5; // Max speed for random walk const minSpeed = 1; // Min speed for random walk // Define the base color (you can adjust these values) //const baseColor = { r: 100, g: 60, b: 40 }; //const baseColor = { r: 200, g: 110, b: 40 }; const baseColor = { r: 30, g: 144, b: 255 }; // Define the mixing ratio (values between 0 and 1) const mixRatio = .93; // This mixes colors halfway between original and base // Create the mycols array with 10 colors and mix with base color const mycolz = [ { r: 255, g: 0, b: 0 }, // red { r: 0, g: 255, b: 0 }, // green { r: 0, g: 0, b: 255 }, // blue { r: 128, g: 0, b: 128 }, // purple { r: 255, g: 255, b: 0 }, // yellow { r: 0, g: 0, b: 128 }, // navy { r: 255, g: 165, b: 0 }, // orange { r: 139, g: 69, b: 19 }, // brown { r: 0, g: 0, b: 0 }, // black { r: 255, g: 255, b: 255 }, // white ].map((color) => { return { r: Math.round(color.r * (1 - mixRatio) + baseColor.r * mixRatio), g: Math.round(color.g * (1 - mixRatio) + baseColor.g * mixRatio), b: Math.round(color.b * (1 - mixRatio) + baseColor.b * mixRatio), }; }); var mycols =[] mycolz.forEach((color, index) => { mycols.push( `rgb(${color.r}, ${color.g}, ${color.b})`) }); class Worm { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.tail = []; this.size = minTailWidth + Math.random() * (maxTailWidth - minTailWidth); this.tailSize = minTailSize + Math.random() * (maxTailSize - minTailSize); this.angle = Math.random() * Math.PI * 2; this.speed = minSpeed + Math.random() * (maxSpeed - minSpeed); this.turnSpeed = Math.random() * 0.1 - 0.05; this.maxTail = Math.floor(Math.random()10)+8 this.col = Math.floor(Math.random()10) //this.col = 2 this.tailSize=200 //if(Math.random()<.5)this.tailSize=1.2 this.stepsAhead = []; this.populateStepsAhead(); } populateStepsAhead() { while (this.stepsAhead.length < 50) { // this.turnSpeed += Math.random() 0.2 - 0.1; // Adjust turn speed // Randomly change turn speed this.turnSpeed += (Math.random() * 0.2 - 0.1); this.turnSpeed += (Math.random() * 0.1 - 0.05); this.turnSpeed += (Math.random() * 0.1 - 0.05); this.turnSpeed += (Math.random() * 0.1 - 0.05); if(Math.abs(this.turnSpeed)>.15 ){ this.turnSpeed/=2 } this.angle += this.turnSpeed; const step = { x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed }; this.stepsAhead.push(step); } for(var q=0;q<this.stepsAhead.length;q+=7){ this.stepsAhead[q].x+=Math.random()-.5 this.stepsAhead[q].y+=Math.random()-.5 } } move() { if (this.stepsAhead.length > 0) { const step = this.stepsAhead.shift(); // Take the next step from the array // Keep worms within canvas bounds const nextX = this.x + step.x; const nextY = this.y + step.y; if (nextX < 0 \|\| nextX > canvas.width \|\| nextY < 0 \|\| nextY > canvas.height) { this.angle += Math.PI; } else { this.x = nextX; this.y = nextY; } this.tail.unshift({x: this.x, y: this.y}); if (this.tail.length > this.tailSize) { this.tail.pop(); } } this.populateStepsAhead(); // Refresh the steps array } move2() { // Randomly change turn speed this.turnSpeed += (Math.random() * 0.2 - 0.1); this.turnSpeed += (Math.random() * 0.1 - 0.05); this.turnSpeed += (Math.random() * 0.1 - 0.05); this.turnSpeed += (Math.random() * 0.1 - 0.05); if(Math.abs(this.turnSpeed)>.2 ){ this.turnSpeed/=2 } // Randomly change speed within the min and max range this.speed = minSpeed + Math.random() * (maxSpeed - minSpeed); this.angle += this.turnSpeed; // Keep worms within canvas bounds const nextX = this.x + Math.cos(this.angle) * this.speed; const nextY = this.y + Math.sin(this.angle) * this.speed; if (nextX < 0 \|\| nextX > canvas.width \|\| nextY < 0 \|\| nextY > canvas.height) { this.angle += Math.PI; } else { this.x = nextX; this.y = nextY; } this.tail.unshift({x: this.x, y: this.y})//col:Math.floor(Math.random()10)}); if (this.tail.length > this.tailSize) { this.tail.pop(); } } draw() { var tailWidth = this.size //for (let i = 0; i < this.tail.length-16; i++) { // const opacity = 1 - i / this.tail.length; //var tailWidth = maxTailWidth - (maxTailWidth - minTailWidth) (i / this.tail.length); //var tailWidth = this.maxTail - (this.maxTail - minTailWidth) * (i / this.tail.length); //tailWidth-=i/3; //if(tailWidth<1)tailWidth=1 //ctx.fillStyle = `rgba(0, 0, 0, ${opacity})`; //ctx.beginPath(); //ctx.arc(this.tail[i].x, this.tail[i].y, tailWidth, 0, Math.PI * 2); //ctx.fill(); //} //for (let i = 0; i < this.tail.length-16; i+=1) { //ctx.fillStyle = "black"; //ctx.fillRect(this.tail[0].x-1, this.tail[0].y-1, tailWidth+2, tailWidth+2); var oldTailWidth = tailWidth //tailWidth = this.tail[0].size ctx.fillStyle = "black"; for (let i = 1; i < this.tail.length; i+=1) { ctx.globalAlpha = .5 tailWidth-=1 if(tailWidth<1)tailWidth=1 //ctx.fillRect(this.tail[i].x+1, this.tail[i].y+1, tailWidth+2, tailWidth+2); drawFilledCircleBlack(ctx,this.tail[i].x+1, this.tail[i].y+1, tailWidth-(i/2)-1) ctx.globalAlpha = .05 if(i>1 && i<this.tail.length-2){ //ctx.fillRect(this.tail[i].x+3, this.tail[i].y+3, tailWidth-(i/2)+2, tailWidth-(i/2)+2); drawFilledCircleBlack(ctx,this.tail[i].x+3, this.tail[i].y+3, tailWidth-(i/2)+1) } if(i>2 && i<this.tail.length/2){ //ctx.fillRect(this.tail[i].x+5, this.tail[i].y+5, tailWidth-(i/2)+4, tailWidth-(i/2)+4); drawFilledCircleBlack(ctx,this.tail[i].x+5, this.tail[i].y+5, tailWidth-(i/2)+2) } if(i==Math.floor(this.tail.length/10)){ //ctx.fillRect(this.tail[i].x+7, this.tail[i].y+7, tailWidth-(i/2)+5, tailWidth-(i/2)+5); drawFilledCircleBlack(ctx,this.tail[i].x+5, this.tail[i].y+5, tailWidth-(i/2)+3) } } // ring of holy ctx.fillStyle = this.tailColor; //ctx.fillRect(this.tail[0].x, this.tail[0].y, tailWidth, tailWidth); //if(num%2===0){ //ctx.globalAlpha=0.1 //drawFilledCircle(ctx,this.tail[0].x, this.tail[0].y, tailWidth,"white") //}else{ ctx.globalAlpha=0.1 drawFilledCircle(ctx,this.tail[0].x, this.tail[0].y, tailWidth,"white") //} //ctx.fillStyle = this.tailColor; //for (let i = 1; i < this.tail.length; i++) { // ctx.fillRect(this.tail[i].x, this.tail[i].y, tailWidth-(i/2), tailWidth-(i/2)); //} //ctx.fillStyle = this.tailColor; ctx.globalAlpha = 1 tailWidth=oldTailWidth for (let j = 1; j < 6; j+=1){ for (let i = 1; i < this.tail.length; i+=1) { tailWidth-=1 if(tailWidth<1)tailWidth=1 ctx.fillStyle = 'rgb('+ j60 +', '+ j60+', '+ j60 +')'; //ctx.fillRect(this.tail[i].x+j, this.tail[i].y+j, (tailWidth-(i/2))-j2, (tailWidth-(i/2))-j2); drawFilledCircle(ctx,this.tail[i].x+j, this.tail[i].y+j, (tailWidth-(i/2))-j2,'rgb('+ j60 +', '+ j60+', '+ j60 +')') }} tailWidth=oldTailWidth for (let i = 1; i < this.tail.length; i+=1) { ctx.globalAlpha=.2 tailWidth-=1 if(tailWidth<1)tailWidth=1 //ctx.fillStyle = "green" //ctx.fillRect(this.tail[i].x, this.tail[i].y, (tailWidth-(i/2)), (tailWidth-(i/2))); //if(num%2===0){ // drawFilledCircle(ctx,this.tail[i].x, this.tail[i].y, (tailWidth-(i/2)),"green") //}else{ // drawFilledCircle(ctx,this.tail[i].x, this.tail[i].y, (tailWidth-(i/2)),"purple") //} drawFilledCircle(ctx,this.tail[i].x, this.tail[i].y, (tailWidth-(i/2)),mycols[this.col]) //ctx.globalAlpha = 0.08 //drawFilledCircle(ctx,this.tail[i].x, this.tail[i].y, (tailWidth-(i/2)),"grey") //ctx.fillRect(this.tail[i].x, this.tail[i].y, (tailWidth-(i/2)), (tailWidth-(i/2))); ctx.globalAlpha=.1 drawFilledCircle(ctx,this.tail[i].x+tailWidth/3, this.tail[i].y+tailWidth/3, (tailWidth/2-(i/2)),"black") ctx.globalAlpha=.16 if(i==Math.floor(this.tail.length/2-4)){ // drawFilledCircle(ctx,this.tail[i].x+2, this.tail[i].y+2, (tailWidth-(i/2)-4),"white") } } ctx.globalAlpha =1 tailWidth=oldTailWidth } //} } const worms = []; for (let i = 0; i < numWorms; i++) { worms.push(new Worm()); } function loop() { ctx.fillStyle="dodgerblue" ctx.fillRect(0, 0, canvas.width, canvas.height); worms.forEach(worm => { worm.move(); worm.draw(); }); requestAnimationFrame(loop); } loop(); function drawFilledCircle(context, x, y, radius, color) { if(radius<4)return if(radius<0)radius=2 context.beginPath(); context.arc(x+radius/2, y+radius/2, radius, 0, 2 Math.PI); // Draws a complete circle context.fillStyle = color; // Sets the fill color context.fill(); // Fills the circle with the specified color context.closePath(); // Closes the path //if(color==="black")return ctx.fillStyle="white" ctx.globalAlpha = 0.1 ctx.fillRect(x,y,radius/4,radius/4,radius/4) ctx.fillRect(x+radius/3,y,radius/4,radius/4) ctx.globalAlpha = 0.05 ctx.fillRect(x+radius/2,y,radius/4,radius/4) ctx.fillRect(x+radius/3,y+radius/3,radius/4,radius/4) ctx.fillRect(x+radius/2,y+radius/3,radius/4,radius/4) //ctx.fillRect(x,y,radius/4,radius/4,radius/4) //ctx.fillRect(x+radius/2,y,radius/4,radius/4) //ctx.fillRect(x+radius/4,y+radius/2,radius/4,radius/4,radius/4) ctx.fillStyle="black" ctx.globalAlpha = 0.15 //ctx.fillRect(x+radius/2+radius/4,y+radius/2,radius/4,radius/4) ctx.fillRect(x+radius/2+radius/4,y+radius/2,radius/6,radius/6) ctx.globalAlpha = 0.2 ctx.fillRect(x+radius/3+radius/4,y+radius/2,radius/4,radius/4) } function drawFilledCircleBlack(context, x, y, radius) { if(radius<4)return if(radius<0)radius=2 context.beginPath(); context.arc(x+radius/2, y+radius/2, radius, 0, 2 * Math.PI); // Draws a complete circle context.fillStyle = "black"; // Sets the fill color context.fill(); // Fills the circle with the specified color context.closePath(); // Closes the path } </script> </body> </html> --v

Worm like herds.

Latest Update

Comments