<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SophiaCo</title>
<link rel="icon" href="images/nav-images/favicon.gif" type="image/gif">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
<div id="drawingCanvas"></div>
<script>
var balls = [];
function setup() {
bgGif = createImg('images/code-images/rainbowbg.gif');
bgGif.position(0, 0);
bgGif.size(windowWidth, windowHeight);
bgGif.style('z-index', '-1');
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < 10; i++) {
var b = new Ball(i);
balls.push(b);
}
}
function draw() {
background(0, 0, 0, 1);
for (var i = 0; i < balls.length; i++) {
balls[i].collide();
balls[i].edges();
balls[i].move();
balls[i].show();
}
}
function mousePressed() {
var newBall = new Ball(balls.length);
balls.push(newBall);
}
class Ball {
constructor(index) {
this.index = index;
this.radius = 20;
this.pos = createVector(random(this.radius, width - this.radius), random(this.radius, height - this.radius));
this.vel = p5.Vector.random2D().mult(2);
this.color = color(255);
this.lastCollisionTime = 0;
}
collide() {
for (var i = 0; i < balls.length; i++) {
if (this.index !== i) {
var d = dist(this.pos.x, this.pos.y, balls[i].pos.x, balls[i].pos.y);
if (d < this.radius + balls[i].radius) {
let currentTime = millis();
if (currentTime - this.lastCollisionTime > 200) {
this.color = color(random(255), random(255), random(255));
this.lastCollisionTime = currentTime;
}
return;
}
}
}
}
edges() {
if (this.pos.x < this.radius || this.pos.x > width - this.radius) {
this.vel.x *= -1;
}
if (this.pos.y < this.radius || this.pos.y > height - this.radius) {
this.vel.y *= -1;
}
}
move() {
this.pos.add(this.vel);
}
show() {
noStroke();
fill(this.color);
ellipse(this.pos.x, this.pos.y, this.radius * 2);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('images/code-images/starbg.gif');
background-size: cover;
background-repeat: no-repeat;
}
#drawingCanvas {
border: 1px solid white;
}
</style>
</head>
<body>
<div id="drawingCanvas"></div>
<script>
var lines = [];
var penColor;
var bgColor;
var penWidth;
var clearBut;
var penShape;
var penRandom;
var symmetry = 6;
function setup() {
const canvas = createCanvas(800, 600);
canvas.parent('drawingCanvas');
angleMode(DEGREES);
noiseDetail(4);
var options = createDiv().style('display: flex').parent('drawingCanvas');
var optionsTitles = createDiv().parent(options);
createP('Pen Color').parent(optionsTitles).style('color', 'white');
createP('Background Color').parent(optionsTitles).style('color', 'white');
createP('Pen Width').parent(optionsTitles).style('color', 'white');
createP('Pen Shape').parent(optionsTitles).style('color', 'white');
var optionsValues = createDiv().parent(options).style('margin: 10px 40px; width: 80px');
penColor = createColorPicker('#ffffff').parent(optionsValues);
penRandom = createCheckbox("", false).parent(optionsValues).style('display: inline').style('margin-top: 10px; width: 50px; height: 25px');
bgColor = createColorPicker('#000000').parent(optionsValues).style('margin-top: 10px');
penWidth = createSelect(false).parent(optionsValues).style('margin-top: 10px');
penWidth.option('1');
penWidth.option('2');
penWidth.option('4');
penWidth.option('8');
penWidth.option('16');
penWidth.option('32');
penWidth.selected('2');
penShape = createSelect(false).parent(optionsValues).style('margin-top: 10px; width: 50px; height: 25px');
penShape.option("Line");
penShape.option("Circle");
penShape.option("Rectangle");
penShape.option("Triangle");
penShape.option("Star");
clearBut = createButton('Clear').parent(options).style('width: 100px');
}
function draw() {
background(bgColor.value());
if (penRandom.checked()) {
var r = hex(floor(map(noise(frameCount / 100), 0, 1, 0, 255)), 2);
var g = hex(floor(map(noise(frameCount / 100 + 1000), 0, 1, 0, 255)), 2);
var b = hex(floor(map(noise(frameCount / 100 + 2000), 0, 1, 0, 255)), 2);
penColor.value("#" + r + g + b);
}
clearBut.mousePressed(function() {
lines = [];
});
if (mouseIsPressed) {
var line = new MyLine(penColor.value(), penWidth.value(), penShape.value());
lines.push(line);
}
for (var line of lines) {
line.show();
}
}
class MyLine {
constructor(penColor, penWidth, penShape) {
this.px = pmouseX;
this.py = pmouseY;
this.x = mouseX;
this.y = mouseY;
this.penColor = penColor;
this.penWidth = penWidth;
this.penShape = penShape;
}
show() {
if (this.penShape == "Line") {
stroke(this.penColor);
strokeWeight(this.penWidth);
line(this.px, this.py, this.x, this.y);
}
if (this.penShape === "Circle") {
fill(this.penColor);
noStroke();
ellipse(this.x, this.y, this.penWidth);
}
if (this.penShape === "Rectangle") {
fill(this.penColor);
noStroke();
rect(this.x, this.y, this.penWidth, this.penWidth);
}
if (this.penShape === "Triangle") {
fill(this.penColor);
noStroke();
push();
translate(this.x, this.y);
beginShape();
for (var i = 0; i < 360; i += 120) {
var rad = this.penWidth / 2;
var x = rad * cos(i);
var y = rad * sin(i);
vertex(x, y);
}
endShape(CLOSE);
pop();
}
if (this.penShape === "Star") {
fill(this.penColor);
noStroke();
push();
translate(this.x, this.y);
beginShape();
for (var i = 0; i < 720; i += 720 / 5) {
var rad = this.penWidth / 2;
var x = rad * cos(i);
var y = rad * sin(i);
vertex(x, y);
}
endShape(CLOSE);
pop();
}
}
}
</script>
</body>
</html>