molliem

My journey learning code 🧐

resources

1. p5*Js creative code
2. The nature of code on p5*Js follow along videos
3. Nature of Code document
4. processing
5. Code as a creative medium book
6. How to complete the books tasks
7. Free books and documents
8. Java Script for beginners

   What is JavaScript?

   JavaScript is used to add graphics or interactive pieces to your website, compared to HTML, which is used to create the foundations of a website. For example, JavaScript can edit pieces of text (known as “strings” in programming). For example, we take the string “Player 1: “ and join it to the name variable to create the complete text label, e.g. “Player 1: Chris”. JavaScript can also be used to run code in response to certain events occurring on a web page.

   p5*Js experiments

   Elipse

   ```javascript function setup() { createCanvas(400, 400); }

function draw() { background(220); ellipse(50,50,80,80); } ‘’’

Green sphere and text following cursor chages colour when clicking

var s = "JavaScript syntax highlighting";
alert(s);
function setup() {
  createCanvas(1500, 1500);
 
}

function draw() {
   let inside = color(2, 200, 89)
   let inside2 = color(2, 400, 89)
   let p = createP('hey there');
  p.style('font-size', '30px');
p.style('width', '65px');
  p.style('text-align', 'CENTRE');
p.position(mouseX, mouseY, 0);
  if (mouseIsPressed) {
    fill(inside);
  }else{
    fill(inside2);
    strokeWeight(0);
}
createP(mouseX, mouseY, 100) 
ellipse(mouseX, mouseY, 180);
}

example

3D box with point light and web cam textures

var s = "JavaScript syntax highlighting";
alert(s);
// draw a spinning box
// with width, height and depth of 50
 // this variable will hold our webcam video
 let cam;
function setup() {
  createCanvas(1500, 1500, WEBGL);
  cam = createCapture(VIDEO);
   cam.size(710, 400);
  describe('a box rotating in 3D space with specular highlight. Clicking the mouse toggles the specular highlight color between rgb(255,255,255) and the default rgb(255,255,255).');
}

function draw() {
   background(0);
  // move your mouse to change light position
  let locX = mouseX - width / 2;
  let locY = mouseY - height / 2;
  // to set the light position,
  // think of the world's coordinate as:
  // -width/2,-height/2 ----------- width/2,-height/2
  //                   |           |
  //                   |    0,0    |
  //                   |           |
  //  -width/2,height/2 ----------- width/2,height/2
  pointLight(250, 250, 250, locX, locY, 50);
  texture(cam);
  rotateX(0.5);
  noStroke();
  sphere(200);
  background(200);
  rotateX(frameCount * 0.008);
  rotateY(frameCount * 0.008);
  box(mouseX, mouseY, 100);
}

example