4. Programming on Scrapbox

Today's topic

Processing and P5.js

Writing JS programs on Scrapbox

Create your account on Scrapbox for taking the course.

You need a Google account (for GMail, etc.) to create a Scrapbox account.

You can also use your keio.jp account (G suite account).

Writing JavaScript programs on Scrapbox

HelloWorld

Graphics

Sound

P5.js

JavaScript library

Compatible to "Processing"

Processing

Programming system based on Java

Created by Ben Fry

Good for programming beginners

All Java libraries available

Sound

Movie

Camera

Ben Fry

http://Scrapbox.io/UIPedia/Ben%20Fry https://gyazo.com/e4acf1f0e15b0f39f9522c280d7f4c14

by Ben Fry

https://gyazo.com/06301df267723d7573f08b3a808e077e

Built with Processing

by Tanaka, Maekawa

http://gyazo.com/7b7a39436c6e83ac61d4f5d3f302a990.png

Getting Processing

Runs on Windows, Mac, Linux

Drawing a line

Click "Play" to run the program

http://gyazo.com/64c3253194bc9688b5dfe08b49ddc756.png

Demo: Processing

Sharing Processing codes and ideas

https://gyazo.com/b6d9ab4384d962de6677f5cb9960e9aa

https://www.openprocessing.org/sketch/423314 https://gyazo.com/0f86aad2c6be7650ad8a4ceea95b5d7f

P5.js

JavaScript version of Processing

Running P5

(will not be supported in the future)

Running on browsers

Recommended

Demo: P5.app

https://gyazo.com/c096a74372317bcfef987fb1a95e92a5

Running a P5 program on Scrapbox

Write a code on Scrabox page

Use the "code notation"

code:test.js

alert('abc');

Create a link for running it

Hello World

code:hello.js

alert('Hello, world!');

https://masui.github.com/runp5/?code=https://scrapbox.io/api/code/sfc-pm2017/4.%20Programming%20on%20Scrapbox/hello.js

Calculation

code:root.js

value = 100

for(;;){

alert(value)

value = (value + 2/value) / 2

}

Basic drawing functions

setup()

Called once at startup

draw()

Repeatedly called while execution

Drawing a line

code:line.js

function setup(){

line(0,0,100,100);

}

Drawing a rectangle

code:rect.js

function setup(){

rect(10,10,80,80);

}

Drawing a rectangle

code:boldrect.js

function setup(){

stroke(255, 255, 0); // yellow

strokeWeight(10);

rect(10,10,80,80);

}

Drawing a rectangle

code:fillrect.js

function setup(){

fill('#00f'); // blue

rect(10,10,80,80);

}

Drawing a circle

code:circle.js

function setup(){

ellipse(50,50,30,30);

}

Using draw()

code:randrect.js

function setup(){

createCanvas(400, 400)

strokeWeight(0)

}

function draw(){ // called 30? times in a second

fill('blue')

posx = random(0,400)

posy = random(0,400)

rect(posx,posy,10,10)

}

Using draw()

code:randrect2.js

function setup(){

createCanvas(400, 400)

strokeWeight(0)

}

function draw(){

clear()

fill('blue')

posx = random(0,400)

posy = random(0,400)

rect(posx,posy,10,10)

}

Using mouse position

code:mouse.js

function setup(){

createCanvas(400, 400)

}

function draw(){

clear()

stroke('blue')

line(0,0,mouseX,mouseY) // mouse coordinates

}

Getting mouse event

code:mouseevent.js

var value = 0;

function draw() {

fill(value);

rect(25, 25, 50, 50);

}

function mousePressed() {

if (value == 0) {

value = 255;

} else {

value = 0;

}

}

Drawing a fractal tree

code:tree.js

// The Nature of Code

// Daniel Shiffman

// Recursive Tree

// Renders a simple tree-like structure via recursion

// Branching angle calculated as a function of horizontal mouse position

var theta;

function setup() {

createCanvas(640, 360);

}

function draw() {

background(51);

// Let's pick an angle 0 to 90 degrees based on the mouse position

theta = map(mouseX,0,width,0,PI/2);

// Start the tree from the bottom of the screen

translate(width/2, height);

stroke(255);

//branch(120);

branch(mouseY); // Y座標で深さを変えるようにしてみた

}

function branch(len) {

// Each branch will be 2/3rds the size of the previous one

var sw = map(len,2,120,1,10);

strokeWeight(sw);

//strokeWeight(2);

line(0, 0, 0, -len);

// Move to the end of that line

translate(0, -len);

len *= 0.66;

// All recursive functions must have an exit condition!!!!

// Here, ours is when the length of the branch is 2 pixels or less

if (len > 2) {

push(); // Save the current state of transformation (i.e. where are we now)

rotate(theta); // Rotate by theta

branch(len); // Ok, now call myself to draw two new branches!!

pop(); // Whenever we get back here, we "pop" in order to restore the previous matrix state

// Repeat the same thing, only branch off to the "left" this time!

push();

rotate(-theta);

branch(len);

pop();

}

}

Sound

code:sin.js

// canvas is not created if setup() is not defined

freq = $('<div>').text('440').appendTo($('body')) // div for freq

$('<div>').appendTo($('body')).slider({ // jQuery UI slider

min: 50,

max: 1200,

value: 440,

slide: (event, ui) => {

freqval = ui.value

osc.freq(freqval)

freq.text(freqval)

}

});

osc = new p5.Oscillator() //

osc.setType('sine')

osc.freq(440)

osc.amp(0.5)

osc.start()

Try your program on your Scrapbox project!

P5 resources

https://images-fe.ssl-images-amazon.com/images/I/51DCOj5HYVL._AC_US320_FMwebp_QL65_.jpg

https://images-na.ssl-images-amazon.com/images/I/61wLQ8X0G-L._SX379_BO1,204,203,200_.jpg