nbogie

React week 3 - student questions and issues for class

• setFoo doesn't magically update foo (useState):
  • mo's issue https://github.com/mnashawati/baby-names-react/blob/for-study/src/App.js#L30
• useState("someinitvalue") only initialises the variable the first time the component is ?rendered?. Subsequent calls to useState return the new current value of the variable.
• passing props down and down. useContext? "
  • should I learn redux?
• "should i learn class components?"
• to investigate: synthetic events an issue?

nbogie

pure js exercises using data

home-made

• tv maze - pure JS exercises (in repl)
• jobs listing pure JS exercises (in mahmut's repl)
  • get all the company titles and positions of every job [{company: CYF, position: programmer}, ...], etc
• stuff from my json-examples netlify
• p5js (filter points by dist(), find points by same, find enemies with low hit-points, etc)

nbogie

this is a rough plan for a demonstration. it is NOT a guide for students.

demo plan - random polygons

start with nothing

see [beginShape() documentation](https://p5js.org/reference/#/p5/beginShape

nbogie

javascript: (async () => { const RoughNotation = await import('https://unpkg.com/rough-notation?module'); const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]; const colorNames = "#66FF66 #FD5B78 #FF9966 #FFFF66 #50BFE6 #FF00CC".split(" "); document.querySelectorAll('p').forEach(elem => { RoughNotation.annotate(elem, { type: 'box', color: 'black', strokeWidth: pick([1, 2, 5]) }).show(); }); document.querySelectorAll('a').forEach(elem => { RoughNotation.annotate(elem, { type: 'highlight', color: pick(colorNames) }).show(); elem.style.color = 'black'; }); })()

nbogie

(async () => {
    const RoughNotation = await import('https://unpkg.com/rough-notation?module');

    const pick = (arr) => arr[Math.floor(Math.random() * arr.length)];
    const colorNames = "#66FF66 #FD5B78 #FF9966 #FFFF66 #50BFE6 #FF00CC".split(" ");

    document.querySelectorAll('p').forEach(elem => {
        RoughNotation.annotate(elem, { type: 'box', color: 'black', strokeWidth: pick([1, 2, 10]) }).show();
    });
    document.querySelectorAll('a').forEach(elem => {

nbogie

let allCountryScores = [
    {
      name: "Ethiopia", 
      scores:  [ {n: "Hanif", s: 999999999}, {n: "neill", s: 999999}, {n: "bob", s: "4134234"}, {n: "Hanif", s: "700"}]
    },     
    {
      name: "Scotland", 
      scores: [   {n: "lucy", s: 9999}, {n: "groundkeeper willie", s: 4000}, {n: "braveheart", s: 200}]
    },
    {

nbogie

Getting create-react-app working on Ubuntu (19.04)

problems and solutions

Main success conditions to be met:

We will be done if...

• npx create-react-app is runs and completes successfully
• student can run the react app created by the above

nbogie

Latest version of this page is at https://www.notion.so/neillzero/Creative-Coding-Lunch-6da6f9b0ce0e49a2a1bf918ebf8ad721

Class code for Creative Coding Wednesdays

https://www.openprocessing.org/class/64094 119E57

nbogie

1. make the tree structure shape

• make single vertex

• extrude it

2. skin it

• add skin modifier

adjust thicknesses:

• in edit mode

nbogie

Drawing Heads - Loomis Method

• Loomis Method - by Proko
• more loomis head examples by Proko

Drawing PixelArt

• MortMort
• Aseprite Tutorial

Loopy - Live Looping