1. Class Projects Portfolio Website (coding)

Spring '23 = try https://spaces.w3schools.com

Day 1 (HTML and Processing)

consider using a password manager such as 1Password or LastPass
Create a Github account
- create a repository to be used for a website and enable Pages
- create an index.html file with the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
</html>

checkout your site = username.github.io/repositoryname
Complete https://hello.processing.org/ (about 40min)

Day 2 (adding CSS and JavaScript)

Let's use JSFiddle to try some things

CSS (if not using JSFiddle, name it `styles.css`)

p {
  font-size: 20px;
  color: blue;
}

JavaScript (if not using JSFiddle, name it `click.js`)

var p = document.getElementById('some-paragraph');
p.addEventListener('click', function(event) {
  p.innerHTML = 'You clicked it!';
});

HTML (if not using JSFiddle, name it `index.html`)

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <title>Hello</title> 
  </head>
  <body>
    
    <p id='some-paragraph'>This is a paragraph.</p>
    
    <script src="click.js"></script>
    
  </body>
</html>

Add a p5.js sketch to your site

HTML named = index.html

<!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>

CSS named = style.css

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

JavaScript named = sketch.js

/*
* @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);
    }
  }
}

Add One Minute project to index.html

<body>
    
    <h1>Ben Johansen</h1>
    
    <hr>
    
    <h2>2. One Minute Story</h2>
    <iframe width="560" height="202" src="https://www.bandlab.com/embed/?id=0e4f1fdb-2b2a-ed11-9441-000d3a3ee709" frameborder="0" allowfullscreen></iframe>
    
  </body>

Codeply link for today's lesson

PreviousIntroduction to Technology for Musicians NextStudent Site URLs

Last updated 2 years ago

Was this helpful?

/* * @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); } } }