# 1. Class Projects Portfolio Website (coding) ## Spring '23 = try ## Day 1 (HTML and Processing) * [ ] consider using a password manager such as 1Password or LastPass * [ ] Create a [Github account](https://github.com) * [create a repository to be used for a website and enable Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site) * create an index.html file with the following code: ```html Hello

Hello World!

``` * [ ] checkout your site = username.github.io/repositoryname * [ ] Complete (about 40min) ## Day 2 (adding CSS and JavaScript) {% embed url="" %} this is a great resource {% endembed %} ### Let's use [JSFiddle](https://jsfiddle.net) to try some things #### CSS (if not using JSFiddle, name it `styles.css`) ```css p { font-size: 20px; color: blue; } ``` #### JavaScript (if not using JSFiddle, name it `click.js`) ```javascript 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`) ```html Hello

This is a paragraph.

``` ## [Add a p5.js sketch to your site](https://happycoding.io/tutorials/p5js/web-dev) #### HTML named = index.html ```html ``` #### CSS named = style.css ```css html, body { margin: 0; padding: 0; } canvas { display: block; } ``` #### JavaScript named = sketch.js ```javascript /* * @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 ```

Ben Johansen

2. One Minute Story

``` [Codeply link for today's lesson](https://www.codeply.com/p/12zH8y0Sdn) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://benjohansen.gitbook.io/musictech/2022_fall/projects/coding.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.