Skip to content

Instantly share code, notes, and snippets.

@shiffman
Last active September 13, 2019 15:53
Show Gist options
  • Save shiffman/b9ab475922f82e8112ff to your computer and use it in GitHub Desktop.
Save shiffman/b9ab475922f82e8112ff to your computer and use it in GitHub Desktop.
A list of ideas for #CodingRainbow Video topics: https://www.youtube.com/user/shiffman

Coding Rainbow Topics List

10 minute coding challenges

Small topics

  • 2D / 3D Perlin noise, more general perlin noise
  • What is lerp()?
  • Timing with setTimeout() and setInterval()
  • closures, callbacks in a loop
  • Processing and eclipse
  • recording movies out of Processing
  • p5.js instance mode
  • moving pixels video mirror (as referenced: https://youtu.be/qB3SA43vKYc)
  • kinematics (forward? inverse?)
  • picking locations for circles where they don't overlap
  • line / line intersection point
  • simple database with https://sheetsu.com/
  • LEAP motion + p5.js
  • something with offscreen canvases and compositing / alpha channels on images.
  • 2d arrays in Processing vs. p5.js
  • google maps API
  • p5 voice synthesis

Different editors with p5.js

  • brackets, atom, etc.

Twitter bot

  • basics of node
  • basics of twitter API
  • node + Processing for images
  • replying to images and processing the images
  • deploying to EC2
  • API requests (GET requests) from node (more general node videos or still twitter bot series?)

Chrome Extensions

  • TBA

Raspberry Pi

  • TBA

Neural Network Basics

  • TBA

A to Z Topics

  • Markov chains
  • Context Free Grammars
  • node + p5: proxy
  • node + p5: simple save data / persistance
  • node + p5: API communication i.e. twitter, authenticate user

Kinect and Computer Vision topics

  • What is kinect?
  • depth image pixels
  • min and max threshold
  • basic one blob detection
  • multi blobs
  • blobs and ids
  • official SDK and skeletons
  • opencv face detect
  • face ids (which is which), save to file
  • how to make an interactive wall
  • great reference for JS: http://kylemcdonald.github.io/cv-examples/
  • saving kinect depth data for later playback

Larger topics

  • a youtube bot
  • Blobs over time (assigning ids)
  • markov chain generator from a google doc spreadsheet
  • abstract software mirror in the browser
  • p5 and sound
  • bin-lattice spatial subdivision (follow up to a reference in a nature of code video)
  • meshes like Voronoi,Delaunay,Quadtrees and Octrees

Git for Poets

  • What is github? What is git?
  • Signing up and making your first repo
  • commiting
  • pull requests and collaborating
  • working locally and command line
  • How to github pages

p5.js intro videos

  • how to upload homework: vimeo, youtube
  • What is p5.js in the context of creative coding?
  • What is p5.js in the context of HTML/CSS/JavaScript
  • Basics of drawing in p5.js
  • Basics of color in p5.js
  • Variables
  • the map() function
  • Conditionals
  • Loops
  • Loading and displaying an image
  • Functions! The basics
  • DOM with functions and callbacks
  • Serial input to p5
  • Arrays
  • Objects (constructor functions), particle system
  • Data and APIs
  • Mobile
  • Video
  • Sound
  • Image Processing and pixels

Processing 3 IDE videos

  • Processing 3!
  • The debugger in Processing
@Mobilpadde
Copy link

I loved your tutorial on the twitter bot, and can't wait for the one on deploying it on a server :D

@saberkhan372
Copy link

How about putting the node.js twitter bot onto a server so that it can run forever!

@federico-pepe
Copy link

It would be awesome to have some videos explaining how to use API that requires oAuth authentication in Processing and P5.js.

@clarissa146
Copy link

Is there a way for you to put videos on youtube for these examples:
VIDEO 1

//Question 2 Create a function that takes a string as its input and returns the number of vowels that appear in the string.

var str = "clarissa";

function someStr(str){
var i;
var vLent = str.length;
var cntArr = 0;
var ch;
for (i=0; i<vLent; i++){
ch = str.charAt(i).toUpperCase();
if ((ch == 'A') || (ch == 'E') || (ch == 'I') || (ch == 'O') || (ch == 'U')) {
cntArr++;
}
} return cntArr;
}

//to call function
someStr(str)


VIDEO 2

// Write a function that takes an array of numbers and returns an array of all the odd numbers in that array.
var arr = [5,10,15,20,25,30,25,40];

function myKids(array) {
var odds = []; // array that will track all odd numbers

// Loop through all items in the array
for (var i = 0; i < array.length; i++) {
    // Find odd numbers
    if (array[i] % 2 !== 0) {
        odds.push(array[i]);
    }
}

return odds;

}


VIDEO 3

// Constructor Function Example
function Family(mother, father,baby) {
this.first = mother;
this.last = father;
this.age = baby;
}

Family.prototype.sayHello = function() { console.log('HELLO!'); }
Family.prototype.sayBye = function() { console.log("Good Bye!"); }

var family1 = new Family("Peter", "Anna", "Thomoas");


VIDEO 4

var sum = 0;
for (var key in citypopulus) {
if (typeof cityPopulus[key] !== 'function') {
sum += citypopulus[key];
}
}

var cityPopulus= {
'northWard': 30000,
'southWard': 1000,
'centralWard': 1000,
'eastWard': 5000,
'westWard': 4000,
talkNewark: function() { console.log('Newark! Newark!'); }
};


@m-r-m-s
Copy link

m-r-m-s commented Feb 14, 2016

Not sure if this fits in small topics, but could you discuss how to utilize promises, too?

@pj-89
Copy link

pj-89 commented Mar 9, 2016

I can't wait for you to discuss/teach these other topics! So much good stuff to come!

@Zaptronic
Copy link

Daniel, is socket.io (realtime engine) with p5js a topic you would be interested in to add to the list?

@colormono
Copy link

I'm working on a web based project with four MP3. It's takes several seconds to load and the "Loading..." message with a CSS image it's not enough. I want to add a percentage with the progress. How can we do a full feature preloader screen in P5JS? It's possible or we need to use another tool and run the sketch with a callback? Thanks!!!

@colormono
Copy link

Another idea for small topics. Compile a P5JS into a native mobile app.

@bhuhnke
Copy link

bhuhnke commented Apr 11, 2016

It would be great if you'd have the links to the videos behind the topics you already made a video on (or embed them as links if possible) :) Thanks for the great work!

@federico-pepe
Copy link

ArrayList, HashMap, IntDict, FloatDict etc... in Processing vs P5js

@hypercuber
Copy link

Can you do video/s on p5.dimensions ?

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