Skip to content

Commit 45e77b7

Browse files
irajgreenbergirajgreenberg
committed
create demos and build steps for Node creative coding environment
1 parent c60e0c2 commit 45e77b7

File tree

4 files changed

+41
-256
lines changed

4 files changed

+41
-256
lines changed

‎README.md

+1-188
Original file line numberDiff line numberDiff line change
@@ -1,188 +1 @@
1-
**Requirements:**
2-
VS Code, Git, Node, Bash type Terminal
3-
4-
**Steps, create directory structures:**
5-
1. Install Node
6-
2. Open your terminal program and navigate to where you want to develop your Node based creative coding projects,
7-
3. Type: `mkdir CreativeCoding_NodeDev` (or name you want to use for your Node based dev work)
8-
4. Type: `cd nodeDev`
9-
5. Type: `npm init -y`
10-
6. `mkdir src dist`
11-
7. `cd src`
12-
8. `mkdir p5 three`
13-
9. `cd p5`
14-
10. `mkdir Proj01`
15-
11. `cd ../three`
16-
12. `mkdir Proj01`
17-
18-
**install js modules and TypeScript type definitions**
19-
1. `npm i typescript p5 three`
20-
2. `npm i @types/p5`
21-
3. `npm i @types/three`
22-
23-
**install webpack and utilities**
24-
`npm i webpack webpack-cli ts-loader webpack-dev-server`
25-
26-
**create config files**
27-
1. create new file in nodeDev named tsconfig.json
28-
2. create new file in nodeDev named webpack.config.js
29-
30-
**Add this to the tsconfig.json file:**
31-
32-
{
33-
"compilerOptions": {
34-
"allowJs": true,
35-
"module": "commonjs",
36-
"noImplicitAny": true,
37-
"esModuleInterop": true,
38-
"pretty": true,
39-
"outDir": "dist",
40-
"sourceMap": true,
41-
"strict": true,
42-
"target": "es6"
43-
}
44-
}
45-
46-
47-
**Add this to the webpack.config.js file:
48-
**
49-
50-
const path = require("path");\
51-
module.exports = {\
52-
entry: "./src/p5/Proj01/sketch.ts",
53-
54-
module: {
55-
rules: [
56-
{
57-
test: /\.ts$/,
58-
use: "ts-loader",
59-
exclude: /node_modules/
60-
}
61-
]
62-
},
63-
resolve: {
64-
extensions: [".ts", ".js"]
65-
},
66-
output: {
67-
filename: "bundle.js",
68-
path: path.resolve(__dirname, "dist")
69-
},
70-
devServer: {
71-
static: path.join(__dirname, "dist"),
72-
compress: true,
73-
port: 8080
74-
}
75-
};
76-
77-
**cd into the dist directory**
78-
create index.html file.
79-
80-
**Add the following to index.html:**
81-
<!DOCTYPE html>
82-
<html lang="en">
83-
<head>
84-
<meta charset="UTF-8">
85-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
86-
<meta http-equiv="X-UA-Compatible" content="ie=edge">/
87-
88-
<!-- Css -->
89-
<link rel="stylesheet" type="text/css" href="./css/style.css">
90-
<!-- js Libraries -->
91-
92-
</head>
93-
<body>
94-
<script type="module" src="./bundle.js"></script>
95-
96-
</body>
97-
</html>
98-
99-
**cd to src/p5/Prog01 directory**
100-
create sketch.ts file
101-
**Add the following to sketch.ts**
102-
103-
import p5 from "p5"
104-
/*
105-
* P5 Sketch
106-
*/
107-
const sketch = (p: p5) => {
108-
/*
109-
* P5 Setup
110-
*/
111-
p.setup = () => {
112-
document.title = "Proj01 | CreativeCoding_NodeDev.2024";
113-
p.createCanvas(p.windowWidth, p.windowHeight);
114-
p.background(p.color('#080808'));
115-
};
116-
117-
/*
118-
* P5 Draw
119-
*/
120-
p.draw = () => {
121-
122-
};
123-
};
124-
125-
export default new p5(sketch);
126-
127-
cd to src/three/Prog01 directory
128-
create sketch.ts file
129-
130-
**Add the following to sketch.ts**
131-
// three example code from: https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate
132-
import * as THREE from 'three'
133-
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
134-
135-
const scene = new THREE.Scene()
136-
137-
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
138-
camera.position.z = 2
139-
140-
const renderer = new THREE.WebGLRenderer()
141-
renderer.setSize(window.innerWidth, window.innerHeight)
142-
document.body.appendChild(renderer.domElement)
143-
144-
const controls = new OrbitControls(camera, renderer.domElement)
145-
146-
const geometry = new THREE.BoxGeometry()
147-
const material = new THREE.MeshBasicMaterial({
148-
color: 0x00ff00,
149-
wireframe: true,
150-
})
151-
152-
const cube = new THREE.Mesh(geometry, material)
153-
scene.add(cube)
154-
155-
window.addEventListener('resize', onWindowResize, false)
156-
function onWindowResize() {
157-
camera.aspect = window.innerWidth / window.innerHeight
158-
camera.updateProjectionMatrix()
159-
renderer.setSize(window.innerWidth, window.innerHeight)
160-
render()
161-
}
162-
163-
function animate() {
164-
requestAnimationFrame(animate)
165-
166-
cube.rotation.x += 0.01
167-
cube.rotation.y += 0.01
168-
169-
controls.update()
170-
171-
render()
172-
}
173-
174-
function render() {
175-
renderer.render(scene, camera)
176-
}
177-
animate()
178-
179-
Add these lines to the "scripts" in the package.json file:
180-
"test": "echo \"Error: no test specified\" && exit 1",
181-
"dev": "webpack-dev-server --mode development",
182-
"build": "webpack --mode production"
183-
184-
Finally to run, type in the terminal: `npm run dev`
185-
186-
187-
188-
1+
Please see build steps for this environment: https://gist.github.com/irajgreenberg/8869d97d600be140bf572061e5ff1f7d

‎src/p5/proj01/sketch.ts

+9-61
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,19 @@
1-
import p5 from "p5"
1+
import p5 from "p5";
22

3-
/*
4-
* Global Variables
5-
*/
6-
// Number of reflections
7-
const symmetry: number = 8;
8-
const angle: number = 360 / symmetry;
9-
// The randomised brush
10-
// let brush: PerlinBrush;
3+
let angle = 0;
114

12-
/*
13-
* P5 Sketch
14-
*/
155
const sketch = (p: p5) => {
16-
/*
17-
* P5 Setup
18-
*/
196
p.setup = () => {
20-
document.title = "Proj01 | Ira Greenberg.2024";
21-
22-
// Set canvas size to be asquare which will fit the page exactly
23-
const canvasSize = p.windowHeight < p.windowWidth ? p.windowHeight : p.windowWidth;
24-
p.createCanvas(canvasSize, canvasSize);
25-
// Tell p5 to use angles instead of radians
26-
p.angleMode(p.DEGREES);
27-
// Set the background
28-
p.background(p.color('#080808'));
29-
// Anti Alias the shapes
30-
p.smooth();
31-
// Create a brush from the PerlinBrush class
32-
// brush = new PerlinBrush(p);
33-
7+
p.createCanvas(400, 400, p.WEBGL);
348
};
359

36-
/*
37-
* P5 Draw
38-
*/
3910
p.draw = () => {
40-
p.noStroke();
41-
// Blank the canvas by setting teh background, lower opacity will leave a trailing effect
42-
p.background(0, 0, 0, 15)
43-
// p.filter(p.ERODE);
44-
// p.filter( p.BLUR );
45-
// for(let i =0;i<p.width;i++){
46-
// for (let j = 0; j < p.height; j++) {
47-
// }
48-
// }
49-
p.translate(p.width / 2, p.height / 2);
50-
const mx = p.mouseX - p.width / 2;
51-
const my = p.mouseY - p.height / 2;
52-
const pmx = p.pmouseX - p.width / 2;
53-
const pmy = p.pmouseY - p.height / 2;
54-
55-
for (let i = 0; i < symmetry; i++) {
56-
p.rotate(angle);
57-
p.strokeWeight(5);
58-
p.stroke(200, p.mouseX, p.mouseY);
59-
p.line(mx, my, pmx, pmy);
60-
p.push();
61-
p.scale(1, -1);
62-
p.line(mx, my, pmx, pmy);
63-
p.pop();
64-
}
65-
// Move the brush
66-
// brush.step(p);
67-
// brush.display(p);
11+
p.background(200);
12+
p.rotateX(angle);
13+
p.rotateY(angle * 0.5);
14+
p.box(100);
15+
angle += 0.01;
6816
};
6917
};
7018

71-
export default new p5(sketch);
19+
new p5(sketch);

‎src/three/proj01/sketch.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { BoxGeometry, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer } from "three";
2+
3+
// Set up scene
4+
const scene = new Scene();
5+
6+
// Set up camera
7+
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
8+
camera.position.z = 5;
9+
10+
// Set up renderer
11+
const renderer = new WebGLRenderer();
12+
renderer.setSize(window.innerWidth, window.innerHeight);
13+
document.body.appendChild(renderer.domElement);
14+
15+
// Create cube
16+
const geometry = new BoxGeometry();
17+
const material = new MeshBasicMaterial({ color: 0x00ff00 });
18+
const cube = new Mesh(geometry, material);
19+
scene.add(cube);
20+
21+
// Animation loop
22+
function animate() {
23+
requestAnimationFrame(animate);
24+
cube.rotation.x += 0.01;
25+
cube.rotation.y += 0.01;
26+
renderer.render(scene, camera);
27+
}
28+
animate();

‎webpack.config.js

+3-7
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,9 @@
22
const path = require("path");
33

44
module.exports = {
5-
// entry: "./src/p5/proj01/sketch.ts",
6-
//entry: "./src/p5/CryptoIra/sketch.ts",
7-
//entry: "./src/p5/CryptoIra02/sketch.ts",
8-
//entry: "./src/p5/CryptoIra03/sketch.ts",
9-
// entry: "./src/p5/CryptoIra04/sketch.ts",
10-
//entry: "./src/p5/CryptoManDataCollector/sketch.ts",
11-
entry: "./src/p5/VerletDemo_01/sketch.ts",
5+
entry: "./src/p5/proj01/sketch.ts",
6+
//entry: "./src/three/proj01/sketch.ts",
7+
//entry: "./src/p5/VerletDemo_01/sketch.ts",
128

139
module: {
1410
rules: [

0 commit comments

Comments
 (0)