Portrait by Brownian Motion

Developer
Johan Karlsson
Size
3,612 Kb
Views
76,912
  1. Portrait by Brownian Motion Previews
  2. Portrait by Brownian Motion HTML Codes
  3. Portrait by Brownian Motion CSS Codes
  4. Portrait by Brownian Motion JS Codes

How do I make an portrait by brownian motion?

When I did my previous Brownian Motion Pen, Text by Brownian Motion , I was already thinking about doing it with an image. And here it is!. What is a portrait by brownian motion? How do you make a portrait by brownian motion? This script and codes were developed by Johan Karlsson on 24 July 2022, Sunday.

Portrait by Brownian Motion Previews
IQ Test

Portrait by Brownian Motion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portrait by Brownian Motion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portrait by Brownian Motion - Script Codes CSS Codes

html, body { margin: 0;
}
canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;
}

Portrait by Brownian Motion - Script Codes JS Codes

"use strict";
/* Johan Karlsson (DonKarlssonSan) I tried to find the copyright info for the image but failed, the image is all over internet.
*/
function Particle() { this.x = random(w); this.y = random(h); this.oldX = this.x; this.oldY = this.y;
}
Particle.prototype.move = function (stepSize) { this.oldX = this.x; this.oldY = this.y; this.x += random(-stepSize, stepSize); this.y += random(-stepSize, stepSize); if (this.x < 0) this.x = 0; if (this.x > w) this.x = w; if (this.y < 0) this.y = 0; if (this.y > h) this.y = h;
};
Particle.prototype.draw = function () { line(this.oldX, this.oldY, this.x, this.y);
};
var particles;
var iterations;
var theImage;
var px;
var w;
var h;
function preload() { theImage = loadImage("https://s3-us-west-2.amazonaws.com/s.cdpn.io/254249/barack-obama-portrait.jpg");
}
function setup() { cursor(HAND); iterations = 50; w = theImage.width; h = theImage.height; createCanvas(w, h); reset(); stroke(0, 10);
}
function draw() { for (var i = 0; i < iterations; i++) { particles.forEach(function (p) { var x = floor(p.x); var y = floor(p.y); var off = (y * w + x) * 4; var m = (px[off] + px[off + 1] + px[off + 2]) / 3; var stepSize = map(m, 0, 255, 3, 30); p.move(stepSize); p.draw(); }); }
}
function initParticles() { particles = []; for (var i = 0; i < 100; i++) { particles.push(new Particle()); }
}
function initImage() { image(theImage, 0, 0); var img = get(0, 0, w, h); img.loadPixels(); px = img.pixels; background(255);
}
function reset() { initParticles(); clear(); initImage();
}
function mouseClicked() { reset();
}
Portrait by Brownian Motion - Script Codes
Portrait by Brownian Motion - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 24, 2022
Rating 3
Size 3,612 Kb
Views 76,912
Do you need developer help for Portrait by Brownian Motion?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Sine Perlin
Cash by Brownian Motion
Apply Filter Effects to Music
Wayward Walker Worms
Phone Case Pattern Animation
Lissajous x Lissajous
In Tribute to Simon Plouffe
Brownian Motion
Circle Fractal
Rainbow 6-fold Pentille
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!