Perlin Noise Field (via Kyle Phillips)

Developer
Todd Moy
Size
2,573 Kb
Views
12,144
  1. Perlin Noise Field (via Kyle Phillips) Previews
  2. Perlin Noise Field (via Kyle Phillips) HTML Codes
  3. Perlin Noise Field (via Kyle Phillips) CSS Codes
  4. Perlin Noise Field (via Kyle Phillips) JS Codes

How do I make an perlin noise field (via kyle phillips)?

Ported Kyle Phillips demo here to test ToxicLibsJs on CodePen.io. See: http://haptic-data.com/toxiclibsjs/examples/PerlinNoise_canvas.html. What is a perlin noise field (via kyle phillips)? How do you make a perlin noise field (via kyle phillips)? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Perlin Noise Field (via Kyle Phillips) Previews
IQ Test

Perlin Noise Field (via Kyle Phillips) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perlin Noise Field (via Kyle Phillips)</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="myCanvas" width="1280" height="400"> your browser doesnt support canvas
</canvas> <script src='https://raw.github.com/toddmoy/toxiclibsjs/master/build/toxiclibs.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Perlin Noise Field (via Kyle Phillips) - Script Codes CSS Codes

body { background-color: #000000; text-align: center;
}

Perlin Noise Field (via Kyle Phillips) - Script Codes JS Codes

 var TColor = toxi.color.TColor, PerlinNoise = toxi.math.noise.PerlinNoise; var palette = [ TColor.newHex('1c0f17'), TColor.newHex('271d2e'),//.setBrightness(0.75), TColor.newHex('2c3857'), TColor.newHex('155e73').setBrightness(0.9), TColor.newHex('e8ca59'), TColor.newHex('891b1b'),//.setAlpha(0.85), TColor.newHex('35e8df') ]; var canvas = document.getElementById('myCanvas'), ctx = canvas.getContext('2d'), perlin = new toxi.math.noise.PerlinNoise(), offset = 0, options = { numStreams: 400, distort: 0, strength: Math.PI, scaler: 0.05, step: 0.5 }; streams = []; var getRandomVector = function(){ var vec = new toxi.geom.Vec2D(Math.random()*canvas.width,Math.random()*canvas.height); vec.color = palette[parseInt(Math.random()*palette.length,10)]; return vec; }; for(var i=0;i<options.numStreams;i++){ streams.push(getRandomVector()); } ctx.fillStyle = "#000000"; ctx.strokeStyle = "#ff0000"; ctx.lineWidth = .5; //ctx.fillRect(0,0,canvas.width,canvas.height); var draw = function(){ while(options.numStreams > streams.length){ streams.push(getRandomVector()); } while(options.numStreams < streams.length){ streams.shift(); } offset += options.distort; ctx.fillStyle = "rgba(0,0,0,0.05)"; ctx.fillRect(0,0,canvas.width,canvas.height); var replaceIndices = []; var lastPos = new toxi.geom.Vec2D(); streams.forEach(function(stream,i){ window._col = stream.color; ctx.strokeStyle = stream.color.toRGBACSS(); lastPos.set(stream); var noise = perlin.noise(stream.x * options.scaler,offset + stream.y*options.scaler) - 0.5; var angle = options.strength * noise; var dir = toxi.geom.Vec2D.fromTheta(angle); stream.addSelf(dir.normalizeTo(options.step * 3)); ctx.beginPath(); ctx.moveTo(lastPos.x,lastPos.y); ctx.lineTo(stream.x,stream.y); ctx.closePath(); ctx.stroke(); if(stream.x < 0 || stream.x > canvas.width || stream.y < 0 || stream.y > canvas.height){ replaceIndices.push(i); } }); replaceIndices.forEach(function(streamIndex){ streams[streamIndex] = getRandomVector(); }); setTimeout(draw, 1000 / 30); } setTimeout(draw, 1000 / 30);
Perlin Noise Field (via Kyle Phillips) - Script Codes
Perlin Noise Field (via Kyle Phillips) - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3
Size 2,573 Kb
Views 12,144
Do you need developer help for Perlin Noise Field (via Kyle Phillips)?

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!

Todd Moy (toddmoy) Script Codes
Name
A Pen by Todd Moy
SVG Animation Test
Annotation Test
Logo Animation
Loader 5
Chrome Store Copy
Modal Interaction Test
Experiment
Flexbox test
Pulsar
Create amazing blog posts 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!