Skip to content

Instantly share code, notes, and snippets.

@ELI7VH

ELI7VH/creative-coding-workshop.md

Created March 26, 2023 14:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ELI7VH/f4ad9e38bf2763d98e72b6f3940d6e05 to your computer and use it in GitHub Desktop.
Save ELI7VH/f4ad9e38bf2763d98e72b6f3940d6e05 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
creative-coding-workshop.md

intro

  • welcome to the course
  • no stupid questions
  • who here at one point did not know what javascript is?

who am i

  • musician, songwriter, generative artist
    • been wriitng songs and to a lesser degree, releasing music since 2005
  • started web dev in 2005
    • worked for small businesses doing everything from design to implementation
    • self taught, learned as I went
      • wanted to do something, learned the bare minimum, which is what we will do, more on that later
    • corporate software 2018
      • moved from junior to team lead within two years
      • architected apps that are used by thousands of users, with a focus on developer experience, and unifiying common coding practices
  • got into creative coding in 2017
    • webcanvas
      • threejs, p5js, hand rolled libraries like Sketchy.js
    • game dev
      • published works
        • dank defense (missile defense game)
        • dankbot danger (robotron clone)
        • MUD for the people, a multi user dungeon that lets users contribute to the communities
      • unity, unreal, love2d, webcanvas, pico8, rust
      • vr (webvr)
        • enjoys creating immersive audio visual experiences
        • enjoys researching new user experience paradigms(?)
  • putting my student hat on every day (no stupid questions)
    • trying a new programming language, library, framework every other day
    • uses the opportunity of a new idea to explore modern technology and implementations
  • current projects:
    • various experiments
      • I think exercising the part of the mind that can turn an abstract idea into a reproducable system isvaluable to the growth of an entrepeneur, and software developer.
      • trading bots
      • crypto and web3 storefronts and communities, nfts, music registries
      • elijahlucian.ca/experiments
      • a ton of random tiny boutique proof-of-concept apps that are available on my website
    • various libraries
      • tools for developers and creative / generative coders
        • sketchy.js
        • lewps
        • various boilerplates for popular stacks
        • wrapper libraries for lesser used tools
    • wazappening.com
      • events curation app
        • focuses on giving niche communities visibility
        • shows a user what is happeing in a short geographic range at a given time
        • allows any user to create an event
    • elijahlucian.ca
      • living artwork diary / journal
      • allows artists to keep track of all their ideas, iterations, etc of a creative idea
      • for artists who are their own biggest fan

what is javascript?

  • Who here at one point in their life did not know what javascript was?
    • How many people here presently don't know what javascript is?
      • if one, do quick overview
        • language to be used in the browser
        • now can be used to build entire apps
        • it's a perfectly valid programming language, as are they all.

what is programming? why javascript?

  • programming is the fundamental concept of taking a system and making it reproducable and automatic.
  • it is a difficult mental shift to
  • what programming langauge should you choose?
    • (lightly) ANYTHING

Our goal for today

  • learn how to create an instant feedback cycle for learning
  • output something fun and visual
  • https://editor.p5js.org/ELI7VH/full/GRXC_1Fma
  • it will likely be very intense, but let's take lots of breaks and ask lots of questions
  • if you find yourself getting inspired, please explore any idea you have, embrace the creative flow!

p5.js

  • createCanvas(400,400)
    • createCanvas represents a coding fundamental that we will only cover if we get enough time.
    • this is a piece of code that creates an element on the page
  • x / y - from top left
  • semi no semi, doesn't matter

challenge 1

  • circle
  • draw a circle on center the screen

Challenge 1 Review

  • positioning
  • syntax questions

Variables

  • what is a valid name?
    • can't start with a number
    • explains the data
    • letters,underscores to a lesser degree, numbers
  • console.log
  • set color of circle
  • framecount
  • var t = ...
  • // comments

Challenge 2

  • set the color of the circle to change over time

Challenge 2 Review

  • any troubles setting the color?

Constants

  • there is this program of variables that never change
    • why? because we may need to re-use that in some algorithm, or in the case of a website, it's a brand color that doesn't change.
  • you can only change them if you re-run your program
  • change the width of the canvas
  • keep circle in the middle of the canvas by changing the number

Challenge 3

  • create width constant
  • use math to keep circle in the middle
  • review / questions

Loops

  • for(var i = 0; i < limit; i++)
  • var u = i / limit
  • draw circles across screen
  • i / limit = [0 , 1)
  • i / limit + 1 = [0, 1]
  • engineering concept of "Normalization" used in creative coding
  • lets us easily multiply numbers into a range
  • move circles over time so they are at independent locations
  • circle(u * width, t * u * height, 20)
  • loop scope
  • x and y inside the loop

Challenge 4

  • keep the circles in the screen (use sin or conditional logic)
  • color the circles different colors programatically

Stretch Challenges

closing thoughts

  • continuing your journey
    • coding train
    • use libraries for faster prototyping, and to help you get your ideas out more quickly
    • libraries to explore
      • three.js
      • unity (C#)
      • A-Frame VR
      • processing.org (Java)

questions?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment