Bubble Sketch.js Test

Developer
Jack Rugile
Size
3,437 Kb
Views
50,600
  1. Bubble Sketch.js Test Previews
  2. Bubble Sketch.js Test HTML Codes
  3. Bubble Sketch.js Test CSS Codes
  4. Bubble Sketch.js Test JS Codes

How do I make an bubble sketch.js test?

Giving Sketch.js, by Soulwire, a quick test and loving it. Learn more about it here: http://soulwire.github.com/sketch.js/. What is a bubble sketch.js test? How do you make a bubble sketch.js test? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.

Bubble Sketch.js Test Previews
IQ Test

Bubble Sketch.js Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bubble Sketch.js Test</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! */ canvas { background: #023; display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <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>

Bubble Sketch.js Test - Script Codes CSS Codes

canvas { background: #023; display: block;
}

Bubble Sketch.js Test - Script Codes JS Codes

(function() { var Particle, particleCount, particles, sketch, z; sketch = Sketch.create(); particles = []; particleCount = 750; sketch.mouse.x = sketch.width / 2; sketch.mouse.y = sketch.height / 2; sketch.strokeStyle = 'hsla(200, 50%, 50%, .4)'; sketch.globalCompositeOperation = 'lighter'; Particle = function() { this.x = random(sketch.width); this.y = random(sketch.height, sketch.height * 2); this.vx = 0; this.vy = -random(1, 10) / 5; this.radius = this.baseRadius = 1; this.maxRadius = 50; this.threshold = 150; return this.hue = random(180, 240); }; Particle.prototype = { update: function() { var dist, distx, disty, radius; distx = this.x - sketch.mouse.x; disty = this.y - sketch.mouse.y; dist = sqrt(distx * distx + disty * disty); if (dist < this.threshold) { radius = this.baseRadius + ((this.threshold - dist) / this.threshold) * this.maxRadius; this.radius = radius > this.maxRadius ? this.maxRadius : radius; } else { this.radius = this.baseRadius; } this.vx += (random(100) - 50) / 1000; this.vy -= random(1, 20) / 10000; this.x += this.vx; this.y += this.vy; if (this.x < -this.maxRadius || this.x > sketch.width + this.maxRadius || this.y < -this.maxRadius) { this.x = random(sketch.width); this.y = random(sketch.height + this.maxRadius, sketch.height * 2); this.vx = 0; return this.vy = -random(1, 10) / 5; } }, render: function() { sketch.beginPath(); sketch.arc(this.x, this.y, this.radius, 0, TWO_PI); sketch.closePath(); sketch.fillStyle = 'hsla(' + this.hue + ', 60%, 40%, .35)'; sketch.fill(); return sketch.stroke(); } }; z = particleCount; while (z--) { particles.push(new Particle()); } sketch.clear = function() { return sketch.clearRect(0, 0, sketch.width, sketch.height); }; sketch.update = function() { var i, results; i = particles.length; results = []; while (i--) { results.push(particles[i].update()); } return results; }; sketch.draw = function() { var i, results; i = particles.length; results = []; while (i--) { results.push(particles[i].render()); } return results; };
}).call(this);
Bubble Sketch.js Test - Script Codes
Bubble Sketch.js Test - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded August 11, 2022
Rating 4.5
Size 3,437 Kb
Views 50,600
Do you need developer help for Bubble Sketch.js Test?

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
Snake Game - CSS Renderer
Canvas Sparkly Circle Loader
CSS Vinyl Record
Canvas Swarming Bugs
Canvas Wave
Glitchy Loading Indicator
Canvas Orbital Trails v2
Canvas Waterfall
In View Detector
Canvas Bokeh Generation
Create amazing captions 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!