For my creative code this time I decided not to build off of an example code, but instead I made my own. I used the reference library to find the code construction for a 3d Torus shape, which is basically a donut shaped ring that orbit constantly on my canvas. The torus is firebrick red, and is centralized to the middle of the canvas and rotates on both the x and y axis. After making my torus, I wanted to add in another component so I added in rectangles that moves randomly to the center of the canvas. Rather than bouncing off the edges of the canvas it moves in and out of the canvas randomly. I also made the the background of canvas Cyan; which is an aqua blue shade.
function setup() {
//(width, height, final variable)
createCanvas(400, 400, WEBGL);
}
function draw() {
//canvas color: cyan
background(0,255,255);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
noFill();
// color: firebrick
stroke(178,34,34)
torus(50, 15);
rectMode(CENTER);
// puts rect at center of canvas
translate(width / 2, height / 2);
//(shifts the width and height by deviding them by 2)
translate(p5.Vector.fromAngle(millis() / 1000, 40));
//time and movement in circle
var x = 0
while (x < width) {
rect(x, 0, 20, 20);
x = x + 50;
}
}
In the video " Code! Programming for Beginners with p5.js" it teaches you all of the basics of learning how to write code for beginners. Firstly you learn that in order to write a successful code you need to feed the computer instructions to complete a task or solve a problem through syntax and code languages. Java script as its programming language used in p5.js and p5.js allows users to code right into the browser and share it very easily with the p5.js web editor. The p5.js website gives users access to a large amount of tools used to assist you while coding like the reference library, the learn library, and the example library. These tools make coding much easier and relatable for beginners like myself.