View number-in-box.js
// "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); | |
} |
View react-meets-p5.js
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> |
View cyoa-inputs.js
import React, { Component } from "react"; | |
import "./styles.css"; | |
class StartPage extends Component { | |
render() { | |
return ( | |
<div> | |
<p>Welcome, traveler! What is your name?</p> | |
<input |
View cyoa-components.js
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> |
View falling-circles.js
// 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); | |
} |
View loop-constructed-circles.js
// 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) { |
View more-circles.js
// A few more circles | |
var circles = []; | |
var DIAMETER = 30; | |
function setup() { | |
createCanvas(340, 340); | |
for (var i = 0; i < 10; i += 1) { |
View three-circles.js
// 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; |
View dropping-circles.js
// 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) { |
View arrays-of-objects.js
var people = [ | |
{ | |
name: "J.D. Zamfirescu", | |
food: "宫保鸡丁", | |
color: "blue" | |
}, | |
{ | |
name: "Adam Smith", | |
food: "小笼包", | |
color: "red" |
NewerOlder