WEEK 13: Project Research: Methods
(April 7 & 9)

To Do This Week

Weather App is DUE this Wednesday, April 10th
HTML5 Game is DUE next Monday, April 15th

---

Class

WEATHER APPS: Weather App Class List

Video Resources:

AI Coding Assistants

• GitHub Copilot: Copilot – AI-powered code completion tool for multiple languages and IDEs.
• Amazon CodeWhisperer: Amazon Codewhisperer – ML-powered code suggestions with reference tracking and security scans.
• Tabnine: Tabnine – Context-based AI-driven code assistance.
• Replit: Replit – Collaborative online coding environment with AI-assisted coding.

ChatGPT Coding Plugins

• ChatWithGit: Integrates ChatGPT with Git repositories for collaboration and code management.
• Code Interpreter: Enables code execution and direct interaction with programming languages.
• Zapier: Automates workflows by connecting ChatGPT with 6,000+ apps.
• Wolfram Alpha: Adds advanced mathematical and computational capabilities.

Web Audio API

Example 1: Mouse Pitch Change

mouse pitch change

• The oscillator generates a continuous tone.
• The frequency (pitch) of the tone is controlled by the mouse’s horizontal position (X-axis), with a range in this example from 220 Hz to 1100 Hz.
• The volume (gain) is controlled by the mouse’s vertical position (Y-axis), inverted so that moving the mouse up decreases the volume and moving it down increases the volume.

Example 2: Visual Audio Equalizer

visual-audio-equalizer

• Audio Setup: The audio context is created, and an audio file is loaded and played.
• Analyzer Setup: An AnalyserNode is connected to the audio source to analyze the audio signal.
• Visualization Loop: Frequency data is visualized as bars on the canvas using requestAnimationFrame.

WebGL and Three.js

https://will-luers.com/DTC/dtc477/webgl.html

WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser, without the need for plugins. It’s based on OpenGL ES, a software API that is used on embedded systems for graphics rendering.

Three.js

While WebGL is powerful, it’s also complex. Three.js simplifies the process of working with 3D graphics, providing an intuitive API for developers and designers.

 

 

 

 

 

 

 

To Do This Week:

Weather App is DUE this Wednesday April 10th

HTML5 Game is DUE next Monday April 15th

---

Class

WEATHER APPS: Weather App Class List

 

 

AI Coding Assistants:

GitHub Copilot: Copilot

ChatGPT Coding Plugins:

1. ChatWithGit: This plugin allows integration with Git repositories, enabling ChatGPT to interact with code stored in version control systems. It facilitates collaboration and code management within the chat interface.

2. Code Interpreter: The Code Interpreter feature enhances ChatGPT’s capabilities by allowing it to execute and interpret code snippets. Users can switch to the Code Interpreter mode to interact with programming languages directly within the chat.

3. Zapier: Zapier integration enables ChatGPT to leverage the power of over 6,000 apps. With AI Actions by Zapier, you can create custom GPTs that pull in Zapier’s apps, automating workflows across your tech stack. For example, you can build a Google Calendar assistant that interacts with other apps seamlessly.

4. Wolfram Alpha: This plugin addresses ChatGPT’s limitations in handling mathematical queries. By integrating with Wolfram Alpha and the Wolfram Language, ChatGPT gains access to computational capabilities, mathematical tools, curated knowledge, and real-time data³.

---

Web Audio API

EXAMPLE 1: mouse pitch change

• The oscillator generates a continuous tone.
• The frequency (pitch) of the tone is controlled by the mouse’s horizontal position (X-axis), with a range in this example from 220 Hz to 1100 Hz.
• The volume (gain) is controlled by the mouse’s vertical position (Y-axis), inverted so that moving the mouse up decreases the volume and moving it down increases the volume.

EXAMPLE 2: visual-audio-equalizer

• Audio Setup: The audio context is created, and an audio file is loaded and played.
• Analyzer Setup: An AnalyserNode is connected to the audio source to analyze the audio signal. The fftSize property determines the size of the Fast Fourier Transform (FFT) used for frequency analysis, affecting the detail and speed of the analysis.
• Visualization Loop: A loop is set up using requestAnimationFrame to continuously draw the frequency data onto the canvas. The getByteFrequencyData method of AnalyserNode is used to get frequency data, which is then visualized as bars on the canvas.

The Web Audio API provides a set of features for audio processing and control. It allows you to generate audio, apply effects, create audio visualizations, and much more, all in real-time. The API works by constructing an audio processing graph, where audio sources are nodes connected in a graph that defines the flow of audio data through various processing modules or effects. The output can then be directed to the speakers or headphones, allowing users to hear the result.

IMPORTANT: Due to most browser’s Cross-Origin Resource Sharing (CORS) policy, which restricts web pages from making requests to a different domain than the one that served the web page, you should upload to the server to hear.see results of a script accessing a local mp3 file.

Core Concepts:

• AudioContext: The central part of the Web Audio API. It acts as a container for the audio operations, managing the creation of the nodes in the audio processing graph and controlling the playback of sound by the user.
• Nodes: These are the building blocks of the audio processing graph. There are several types of nodes, including sources (like audio and oscillator nodes), effects (like gain and biquad filter nodes), and analysis tools (like AnalyserNode).
• Connections: Nodes are connected to one another to define the flow of the audio signal through various processing stages. The final node in the graph is usually connected to the AudioContext’s destination, which outputs the sound to the speakers or headphones.

Suggested Uses:

1. Music and Game Sound Effects: Generate dynamic sound effects or music tracks for web-based games or interactive music applications.
2. Audio Applications: Build applications that require audio input, processing, and output, such as tuners, audio editors, or voice changers.
3. Educational Tools: Create educational web applications that help students learn about music theory, sound synthesis, or audio signal processing by allowing them to interactively explore these concepts.
4. Audio Analysis: Implement real-time audio analysis tools, such as spectrum analyzers or waveform visualizers, that can be used in educational settings or for music production.
5. Interactive Art: Design interactive audiovisual art installations that respond to user input or environmental factors, creating immersive experiences.

Getting Started:

To start using the Web Audio API, you first need to create an AudioContext. This acts as the foundation for your audio operations:

From there, you can begin adding nodes to the context, connecting them to create your audio processing graph, and ultimately play or manipulate sounds directly in the web browser.

The Audio Processing Graph is a fundamental concept in the Web Audio API that represents the pathway through which audio data flows. It’s constructed using a collection of interconnected nodes, where each node performs a specific function, such as generating sound, processing audio, or analyzing audio data. The graph defines the relationship between these nodes and determines the order in which audio processing occurs. Understanding how to build and manipulate these graphs is key to effectively using the Web Audio API.

The Web Audio API opens up a world of possibilities for web developers and creatives looking to incorporate sophisticated audio features into their web applications. Whether you’re developing interactive games, educational tools, or complex audio processing applications, the Web Audio API provides the tools you need to create rich, immersive audio experiences on the web.

---

WebGL and Three.js

EXAMPLE: https://will-luers.com/DTC/dtc477/webgl.html

WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser, without the need for plugins. It’s based on OpenGL ES, a software API that is used on embedded systems for graphics rendering. WebGL makes it possible to bring real-time interactive graphics to the web, opening up a wide range of possibilities for web developers and designers.

Three.js

While WebGL is powerful, it’s also complex and can be daunting for beginners due to its low-level nature. This is where Three.js comes in. Three.js is a higher-level library that simplifies the process of working with 3D graphics in the browser. It provides an intuitive API that abstracts away many of the complexities of WebGL, making it accessible to developers and designers without deep graphics programming knowledge.

Core Concepts of Three.js

• Scene: The scene is the container for all your objects, cameras, and lights. Think of it as a stage where you place your 3D models.
• Camera: Cameras are used to view the scene. The most common type used in Three.js projects is the PerspectiveCamera, which simulates the perspective of the human eye.
• Renderer: The renderer takes the scene and a camera as input and draws the 3D representation of the scene from the viewpoint of the camera onto a canvas element in the web page.
• Geometry: This defines the shape of the objects you want to draw. Three.js comes with a variety of built-in geometries like spheres, boxes, and planes.
• Material: Materials define the appearance of your geometry, including its color and texture.
• Light: Lights affect how materials are viewed. Without light, materials won’t be visible or will appear as a flat color.

Setting Up a Three.js Project

To start with Three.js, you’ll need to include it in your HTML document. You can download the library and host it yourself or include it via a CDN (Content Delivery Network).

 

You can then proceed to create a scene, add a camera, set up a renderer, and add some objects with lights to the scene. The basic steps have been covered in the previous coding example.

Uses and Applications

• Games: Create interactive games with complex 3D environments, character models, and animations.
• Data Visualization: Represent complex datasets in a 3D space to explore and interact with data in innovative ways.
• Virtual and Augmented Reality: Develop immersive VR and AR experiences that can run directly in the web browser.
• Art and Design: Produce digital art projects and experiments, ranging from simple animated models to complex, interactive 3D installations.
• Education and Training: Create educational content and simulations that can help in learning complex subjects through interactive visualizations.
• Product Showcases: Display products in 3D on e-commerce sites, allowing users to view products from all angles and configurations.

WebGL and Three.js together unlock a vast potential for web developers to create rich, interactive 3D experiences that are accessible to a wide audience. Whether you’re looking to develop games, visualizations, or interactive art, Three.js offers the tools and simplicity to bring your ideas to life in the browser. With its growing community and comprehensive documentation, getting started with 3D web development has never been easier.

 

---

Front-End Developer Careers

• Web Sites and Web Apps – HTML/CSS, JavaScript (front and backend), responsive design
• Node.js
• React Dev
• AI and ChatGPT Developer tutorials

GitHub Intro

• GitHub – a social and collaborative platform for development
• Git – version control system for tracking changes in computer files and coordinating work on those files among multiple people. (command-line install)
• desktop.github  no command line needed
• Github guide
• 477 test-repository

Git Terms from Github Glossary

• Repository: A repository is the most basic element of GitHub. They’re easiest to imagine as a project’s folder. A repository contains all of the project files (including documentation), and stores each file’s revision history. Repositories can have multiple collaborators and can be either public or private.
• Branch:A branch is a parallel version of a repository. It is contained within the repository, but does not affect the primary or main branch allowing you to work freely without disrupting the “live” version. When you’ve made the changes you want to make, you can merge your branch back into the main branch to publish your changes.
• Merge: Merging takes the changes from one branch (in the same repository or from a fork), and applies them into another. This often happens as a “pull request” (which can be thought of as a request to merge), or via the command line. A merge can be done through a pull request via the GitHub.com web interface if there are no conflicting changes, or can always be done via the command line.
• Clone: A clone is a copy of a repository that lives on your computer instead of on a website’s server somewhere, or the act of making that copy. When you make a clone, you can edit the files in your preferred editor and use Git to keep track of your changes without having to be online. The repository you cloned is still connected to the remote version so that you can push your local changes to the remote to keep them synced when you’re online.
• Pull: Pull refers to when you are fetching in changes and merging them. For instance, if someone has edited the remote file you’re both working on, you’ll want to pull in those changes to your local copy so that it’s up to date. See also fetch.
• Pull request: Pull requests are proposed changes to a repository submitted by a user and accepted or rejected by a repository’s collaborators. Like issues, pull requests each have their own discussion forum.
• Fork: A fork is a personal copy of another user’s repository that lives on your account. Forks allow you to freely make changes to a project without affecting the original upstream repository. You can also open a pull request in the upstream repository and keep your fork synced with the latest changes since both repositories are still connected.
• Fetch: When you use git fetch, you’re adding changes from the remote repository to your local working branch without committing them. Unlike git pull, fetching allows you to review changes before committing them to your local branch.
• Push: To push means to send your committed changes to a remote repository on GitHub.com. For instance, if you change something locally, you can push those changes so that others may access them.
• Commit: A commit, or “revision”, is an individual change to a file (or set of files). When you make a commit to save your work, Git creates a unique ID (a.k.a. the “SHA” or “hash”) that allows you to keep record of the specific changes committed along with who made them and when. Commits usually contain a commit message which is a brief description of what changes were made.
• Markdown: Markdown is an incredibly simple semantic file format, not too dissimilar from .doc, .rtf and .txt. Markdown makes it easy for even those without a web-publishing background to write prose (including with links, lists, bullets, etc.) and have it displayed like a website. GitHub supports Markdown and uses a particular form of Markdown called GitHub Flavored Markdown. See GitHub Flavored Markdown Spec or Getting started with writing and formatting on GitHub.markup

https://frontendmasters.com/guides/front-end-handbook/2024/

Web Dev Map used above