Skip to content

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.

DOM (Document Object Model)

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).

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

Deliverable:

  1. 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. 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.

  3. (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

Back to top