Week 4: Javascript for Designers
Sept 13
This week we will be beginning to explore JavaScript through the lens of design and creative coding. We will start to explore the basics of JavaScript through p5.js, a creative coding library based on the ideologies found in the Java based toolkit Processing. In my experience, when it comes to new toolkits or languages, it's best to let curiousity and creative solutions to problems you have guide the learning process.
Over the next few weeks we will continue the discussion about tools and skills used in web and software development by starting to look at some common libraries and frameworks. In your study of these practices, it's worth reviewing the following articles to get a sense of the modern development landscape, particularly what front-end, back-end, and full stack development tools and workflows look like.
- Front End, Back End, Full Stack—What Does it All Mean?
- The 2019 Web Developer Roadmap - Has some great flowcharts showing how different technologies relate / Github Source. - Look at these maps if you want to see the big picture.
The DOM is a standard object model and programming interface created by the browser when a webpage is loaded. It is essentially your HTML page but in a different format now accessible through a browser based programming interface and language (Javascript). In general, JS can manipulate (get, change, add, delete) any part of the DOM (ie. any part of a page or document).
- Here's a great image of the DOM
- DOM Tree Visualization Example on CodePen
- Try opening the Chrome Developer Console and typing
document
orwindow
. What does it return? How does it relate to the DOM image above?
- Try opening the Chrome Developer Console and typing
- JavaScript DOM Tutorial Series (Video Playlist) - A great series of videos introducing the DOM and how to manipulate it with Javascript. It totals 2 hrs in duration but is extremely helpful to understand some aspects of the Javascript language and how it can be used.
- Eloquent Javascript: CH 14 - The Document Object Model
- JS Events and the DOM
Assignment 3: Creative Coding with p5.js
Objective: Create a sketch with Javascript library p5.js. You choose the creative direction you want to take it. I recommend looking at some examples, tutorials, and books for inspiration. Think about how you can begin to use this workflow to augment your creative process, make animations, or simply to make interesting visuals. For example, the image based swatch builder tool or generative design sketches I showed in class.
- Utilize either the p5.js web editor or an alternative workflow (ie. VSCode + live server) to create your sketch.
- Absolutely make use of the p5.js reference docs to lookup function definitions and examples.
- Cite any tutorials or code used via comments and links in your documentation.
- Utilize additional resources (videos, tutorials, books, etc) to improve understanding of the JS language and syntax.
Optional:
- Use Github to document your work. Your repo should follow the organization shown in the repo: hello-p5.js.
Resources
- p5.js
- Code! Programming with p5.js by Dan Shiffman - A great set of videos covering all the basics of using p5.js. I highly recommend.
- Happy Coding: Learn to Code with p5.js
- p5.js 2020 showcase
- Open Processing - Large open-source repository of Processing and p5.js projects
- Book: Generative Design, Creative Coding on the Web - A great entry point for designers becoming familiar with JS, p5.js, and generative design.
- JavaScript
- w3Schools.com - A solid reference for looking up anything about the JS language.
- JavaScript for Cats - An entry level language oriented tutorial using the Chrome Developer Tools Console.
- The Modern JavaScript Tutorial - A good primer on JS language basics
- Learning Javascript - A page with lots of JS resources
- JS Cheat Sheet - Quick reference for JS syntax
- Codeacademy JS Docs - Great language reference
- Lorem Picsum - The Lorem Ipsum for photos
- Video: How to use p5.js with Visual Studio Code by Tim Rodenbroeker
Deliverable:
-
A short 1-2 min video screen capture demonstrating your sketch running in the p5.js editor or running locally with a live server. Be sure to briefly introduce yourself and your project, provide an overview of what you made and how it works. Embed the video into your blog post.
-
2-3 different moments, created from your sketch, saved as png images with a resolution of 1080 x 1080 px. It's possible to save images out of p5.js using the
saveCanvas()
function. Review the example sketch.js file p5-save-canvas-ig. Embed your images into your blog post. -
(Optional) Include a link to your Github repo for the code written. For example, https://github.com/rjduran/my-awesome-sketch.
Submit a link to your blog post on Slack #cmstudio.
Due: Sept 20