Flaring star
Move the cursor to change the star properties.
The inspiration came from this great sketch:
http://www.openprocessing.org/sketch/112601
by Javier Graciá Carpio
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
JavaScript
var sketch = function (p) {
// Global variables
var star;
// Initial setup
p.setup = function () {
// Create the canvas
var canvas = p.createCanvas(300, 300);
// Create the star
var position = p.createVector(p.width / 2, p.height / 2);
var radius = 40;
var fadingFactor = 0.2;
var flaresActivity = 0.8;
var imageWidth = Math.max(p.width, p.height);
star = new Star(position, radius, fadingFactor, flaresActivity, imageWidth);
};
// Execute the sketch
p.draw = function () {
// Clean the canvas
p.background(0);
// Update the star flaring effect depending on the mouse position
if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < p.height) {
star.setFadingFactor(0.7 * (1 - p.mouseX / p.width));
star.setFlaresActivity(0.1 + 0.9 * p.mouseY / p.height);
}
// Update the star
star.update();
// Paint the star
star.paint();
};
/*
* The Star class
*/
function Star(position, radius, fadingFactor, flaresActivity, imageWidth) {
this.position = position;
this.radius = radius;
this.fadingFactor = fadingFactor;
this.flaresActivity = flaresActivity;
this.imageWidth = imageWidth;
this.body = p.createImage(this.imageWidth, this.imageWidth);
this.flares = p.createImage(this.imageWidth, this.imageWidth);
this.timeCounter = 0;
// Initialize the star's body image
var x, y, pixel, distanceSq;
var radiusSq = p.sq(this.radius);
var center = this.imageWidth / 2;
this.body.loadPixels();
for (x = 0; x < this.imageWidth; x++) {
for (y = 0; y < this.imageWidth; y++) {
pixel = 4 * (x + y * this.imageWidth);
distanceSq = p.sq(x - center) + p.sq(y - center);
this.body.pixels[pixel] = 255;
...