Canvas Swarming Bugs

Developer
Jack Rugile
Size
4,599 Kb
Views
22,264
  1. Canvas Swarming Bugs Previews
  2. Canvas Swarming Bugs HTML Codes
  3. Canvas Swarming Bugs CSS Codes
  4. Canvas Swarming Bugs JS Codes

How do I make an canvas swarming bugs?

The swarming bugs will latch on to and eat any food that gets within range. Click the screen to create more food. Using the lovely Sketch.js once again!. What is a canvas swarming bugs? How do you make a canvas swarming bugs? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.

Canvas Swarming Bugs Previews
IQ Test

Canvas Swarming Bugs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Swarming Bugs</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #111;
}
canvas { display: block;
}
p { background: rgba(0, 0, 0, .5); border-top: none; border-left: none; border-radius: 0 0 6px 0; color: #ccc; font: 11px/1.5 sans-serif; padding: 10px 15px; position: absolute;
}
p strong { font-size: 12px; font-weight: bold;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p> <strong>Swarming Bugs</strong><br /> Click to Create More Food
</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgithub.com/soulwire/sketch.js/master/js/sketch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Canvas Swarming Bugs - Script Codes CSS Codes

body { background: #111;
}
canvas { display: block;
}
p { background: rgba(0, 0, 0, .5); border-top: none; border-left: none; border-radius: 0 0 6px 0; color: #ccc; font: 11px/1.5 sans-serif; padding: 10px 15px; position: absolute;
}
p strong { font-size: 12px; font-weight: bold;
}

Canvas Swarming Bugs - Script Codes JS Codes

(function() { var Bug, Food; Bug = (function() { function Bug(x, y) { this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.radius = 1; this.spurt = 0.5; this.color = '#fff'; this.hasTarget = false; this; } Bug.prototype.update = function(ctx, index, ndt) { var closestTarget, dist, dx, dy, food, i, lowestDist, target; this.hasTarget = false; if (ctx.food.length) { lowestDist = 999999; closestTarget = null; i = ctx.food.length; while (i--) { food = ctx.food[i]; dx = this.x - food.x; dy = this.y - food.y; dist = sqrt(dx * dx + dy * dy); if (dist < lowestDist) { lowestDist = dist; closestTarget = i; } } target = ctx.food[closestTarget]; dx = this.x - target.x; dy = this.y - target.y; dist = sqrt(dx * dx + dy * dy); if (dist < target.threshold + target.radius && target.active) { this.hasTarget = true; if (dist < target.radius * (target.life / target.radius) + 5) { target.life -= 0.004; } } } if (this.hasTarget) { this.vx += (random(-0.2, 0.2)) * this.spurt; this.vy += (random(-0.2, 0.2)) * this.spurt; this.vx -= dx / 500; this.vy -= dy / 500; } else { this.vx += (random(-0.2, 1)) * this.spurt; this.vy += (random(-0.2, 0.2)) * this.spurt; } this.x += this.vx * ndt; this.y += this.vy * ndt; this.vx *= 0.95; this.vy *= 0.95; if (this.spurt > 0.5) { this.spurt -= 0.1; } if (this.spurt <= 0.5 && !floor(random(1000))) { return this.spurt = random(1, 4); } }; Bug.prototype.wrap = function(ctx) { if (!this.hasTarget) { if (this.x > ctx.width + this.radius) { this.x = -this.radius; } else if (this.x < -this.radius) { this.x = ctx.width + this.radius; } if (this.y > ctx.height + this.radius) { return this.y = -this.radius; } else if (this.y < -this.radius) { return this.y = ctx.height + this.radius; } } }; return Bug; })(); Food = (function() { function Food(x, y) { this.x = x; this.y = y; this.growthRadius = 0.0001; this.radius = random(20, 50); this.life = this.radius; this.threshold = 50; this.active = false; this; } Food.prototype.update = function(ctx, index, ndt) { if (!this.active) { this.growthRadius += 1; if (this.growthRadius >= this.radius) { this.active = true; } } if (this.life <= 0) { return ctx.food.splice(index, 1); } }; return Food; })(); Sketch.create({ setup: function() { var i; this.tick = 0; this.mouse.x = this.width / 2; this.mouse.y = this.height / 2; this.food = (function() { var j, results; results = []; for (i = j = 0; j <= 0; i = ++j) { results.push(new Food(random(this.width), random(this.height))); } return results; }).call(this); return this.bugs = (function() { var j, results; results = []; for (i = j = 0; j <= 2000; i = ++j) { results.push(new Bug(0, random(this.height))); } return results; }).call(this); }, mousedown: function() { return this.food.push(new Food(this.mouse.x, this.mouse.y)); }, update: function() { var i, results; this.ndt = max(0.001, this.dt / (1000 / 60)); this.tick++; if (this.tick % 50 === 0) { this.food.push(new Food(random(this.width), random(this.height))); } i = this.food.length; while (i--) { this.food[i].update(this, i, this.ndt); } i = this.bugs.length; results = []; while (i--) { this.bugs[i].wrap(this); results.push(this.bugs[i].update(this, i, this.ndt)); } return results; }, draw: function() { var bug, food, i; this.fillStyle = '#d33'; i = this.food.length; while (i--) { this.beginPath(); food = this.food[i]; if (food.active) { this.arc(food.x, food.y, max(0.0001, food.radius * (food.life / food.radius)), 0, TWO_PI); } else { this.arc(food.x, food.y, food.growthRadius, 0, TWO_PI); } this.fill(); } this.beginPath(); this.fillStyle = '#fff'; i = this.bugs.length; while (i--) { bug = this.bugs[i]; this.rect(~~bug.x, ~~bug.y, 1, 1); } this.fill(); this.beginPath(); this.arc(this.mouse.x, this.mouse.y, 10 - cos(this.millis / 100) * 2, 0, TWO_PI); this.strokeStyle = '#d33'; return this.stroke(); } });
}).call(this);
Canvas Swarming Bugs - Script Codes
Canvas Swarming Bugs - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded August 11, 2022
Rating 4.5
Size 4,599 Kb
Views 22,264
Do you need developer help for Canvas Swarming Bugs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jack Rugile (jackrugile) Script Codes
Name
Canvas Parallax Skyline
CSS3 Pseudo Sound Bars
Glowing Pulse Form
Rainbow Loader
Snake Game - CSS Renderer
Bubble Sketch.js Test
Rainbow Firestorm
CSS Vinyl Record
Glitchy Loading Indicator
Canvas Color Smoke
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!