Last updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MUS1331</title>
<link rel="stylesheet" href="style.css" />
<script defer src="index.js"></script>
</head>
<body>
<p id='dog'>This is a paragraph.</p>
</body>
</html>p {
font-size: 2em;
color: green;
}var p = document.getElementById('dog');
p.addEventListener('click', function(event) {
p.innerHTML = 'You clicked it!';
});<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}/*
* @name Drawing
* @description Generative painting program.
*/
// All the paths
let paths = [];
// Are we painting?
let painting = false;
// How long until the next circle
let next = 0;
// Where are we now and where were we?
let current;
let previous;
function setup() {
createCanvas(720, 400);
current = createVector(0,0);
previous = createVector(0,0);
};
function draw() {
background(200);
// If it's time for a new point
if (millis() > next && painting) {
// Grab mouse position
current.x = mouseX;
current.y = mouseY;
// New particle's force is based on mouse movement
let force = p5.Vector.sub(current, previous);
force.mult(0.05);
// Add new particle
paths[paths.length - 1].add(current, force);
// Schedule next circle
next = millis() + random(100);
// Store mouse values
previous.x = current.x;
previous.y = current.y;
}
// Draw all paths
for( let i = 0; i < paths.length; i++) {
paths[i].update();
paths[i].display();
}
}
// Start it up
function mousePressed() {
next = 0;
painting = true;
previous.x = mouseX;
previous.y = mouseY;
paths.push(new Path());
}
// Stop
function mouseReleased() {
painting = false;
}
// A Path is a list of particles
class Path {
constructor() {
this.particles = [];
this.hue = random(100);
}
add(position, force) {
// Add a new particle with a position, force, and hue
this.particles.push(new Particle(position, force, this.hue));
}
// Display plath
update() {
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].update();
}
}
// Display plath
display() {
// Loop through backwards
for (let i = this.particles.length - 1; i >= 0; i--) {
// If we shold remove it
if (this.particles[i].lifespan <= 0) {
this.particles.splice(i, 1);
// Otherwise, display it
} else {
this.particles[i].display(this.particles[i+1]);
}
}
}
}
// Particles along the path
class Particle {
constructor(position, force, hue) {
this.position = createVector(position.x, position.y);
this.velocity = createVector(force.x, force.y);
this.drag = 0.95;
this.lifespan = 255;
}
update() {
// Move it
this.position.add(this.velocity);
// Slow it down
this.velocity.mult(this.drag);
// Fade it out
this.lifespan--;
}
// Draw particle and connect it with a line
// Draw a line to another
display(other) {
stroke(0, this.lifespan);
fill(0, this.lifespan/2);
ellipse(this.position.x,this.position.y, 8, 8);
// If we need to draw a line
if (other) {
line(this.position.x, this.position.y, other.position.x, other.position.y);
}
}
}