zamfi

rect(50, 50, 200, 200);
rect(50+10, 50+10, 200, 200);
rect(50+20, 50+20, 200, 200);


rect(50, 50, 200, 200);
rect(60, 60, 200, 200);
rect(70, 70, 200, 200);

zamfi

// "number in box" - try clicking in the window

// this is the "data"
var c = 0;
var x = 50;
var y = 50;

function setup() {
  createCanvas(340, 340);
}

zamfi

import p5 from "p5";
import React, { Component } from "react";

import "./styles.css";

class StartPage extends Component {
  render() {
    return (
      <div>
        <p>Welcome! What is your favorite color?</p>

zamfi

import React, { Component } from "react";

import "./styles.css";

class StartPage extends Component {
  render() {
    return (
      <div>
        <p>Welcome, traveler! What is your name?</p>
        <input

zamfi

import React, { Component } from "react";

import "./styles.css";

class StartPage extends Component {
  render() {
    return <div>
        <p>Welcome, traveler! How would you like to get to your destination?</p>
        <button onClick={() => this.props.goToPage(TrainPage)}>Train</button>
        <button onClick={() => this.props.goToPage()}>Ship</button>

zamfi

// Falling circles

var circles = [];
// feel free to add more blank lines here to see the table better!

var DIAMETER = 10;

function setup() {
  createCanvas(340, 340);
}

zamfi

// A few more circles

var circles = [];
// feel free to add more blank lines here to see the table better!

var DIAMETER = 30;

function setup() {
  createCanvas(340, 340);
  for (var x = 50; x <= width-50; x += DIAMETER*2) {

zamfi

// A few more circles

var circles = [];


var DIAMETER = 30;

function setup() {
  createCanvas(340, 340);
  for (var i = 0; i < 10; i += 1) {

zamfi

// Just a few circles

var circles = [
  { x: 30,  y: 40,  vx: 3,  vy: 2,  h: 10 },
  { x: 90,  y: 120, vx: 2,  vy: 3,  h: 120 },
  { x: 300, y: 240, vx: -2, vy: -1, h: 300 }
];

var DIAMETER = 30;

zamfi

// dropping circles, phase 1

// the circles array!
var circles = [];

function setup() {
  createCanvas(340, 340);
  
  // add three circles
  for (var i = 0; i < 3; i += 1) {