• Black Vimeo Icon

©2020 BY JENNY LIN

Interacting Diamonds

I took what I created last week - an array of diamonds which communicate with each other and turned it into an interactive website - click to check it out!


The visitor can now alter the diamond pattern by themselves in terms of the amount, color, size and shape of the diamonds. There is also a reset button if the visitor would like to see how the pattern originally is and compare.




Click here if you want to check out the codes and modify it yourself!



Codes


index.html

<!DOCTYPE html>

<html>


<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

<meta charset="utf-8" />


</head>


<body>

<h1>INTERACTING DIAMONDS</h1>

<p>The purple and pink diamonds fill themselves originally when they intersect with each other on a certain level.</br>

Play with the sliders below and see what kind of patterns you could create. </br>

The lower the slider is the craizer the result could become.</br>

Press the button below the sliders if you want to reset your settings.</p>

<script src="sketch.js"></script>

<script src="diamonds.js"></script>

</body>


</html>

style.css

html,

body {

background-color: #1a1a1a;

margin: 0;

padding: 0;

}


h1,

p {

text-align: center;

color: white;

}


canvas {

display: block;

border: 5px solid white;

margin-left: auto;

margin-right: auto;

}


number {

text-align: center;

}


sketch.js

let angle1, angle2;

let diamonds = [];


function setup() {

createCanvas(600, 600);

angleMode(DEGREES);

number = createP('Number ');

number.style('align', 'center');

dColor = createP('Color ');

dColor.style('align', 'center');

size = createP('Size ');

shape = createP('Shape ');

sliderNum = createSlider(0, 20, 10);

sliderNum.parent(number)

sliderCol = createSlider(150, 255, 202);

sliderCol.parent(dColor);

sliderSiz = createSlider(0, width * 2 / 3, width / 2);

sliderSiz.parent(size);

sliderSha = createSlider(500, 2000, 1000);

sliderSha.parent(shape);

reset = createButton('Reset');

reset.style('display', 'block');

reset.style('margin-left', 'auto');

reset.style('margin-right', 'auto');

reset.mousePressed(resetSliders);

for (i = 0; i < 20; i++) {

let d = new Diamond(random(3 / 2 * width), random(3 / 2 * height), random(width / 2), random(150, 255), random(50, 100), random(150, 255), random(1, 2))

diamonds.push(d);

}

}


function draw() {

background(20, 30);

for (d = 0; d < sliderNum.value(); d++) {

diamonds[d].show();

diamonds[d].move();


let overlapping = false;

for (let other in diamonds) {

if (diamonds[d] !== diamonds[other] && diamonds[d].intersect(diamonds[other])) {

overlapping = true;

}

}

if (overlapping) {

diamonds[d].fillColor();

} else {

diamonds[d].show();

}

}

}


function resetSliders() {

sliderNum.value(10);

sliderCol.value(202);

sliderSiz.value(width / 2);

sliderSha.value(1000);

}


diamonds.js

class Diamond {

constructor(_x, _y, _r, _colr, _colg, _colb, _strW) {

this.x = _x;

this.y = _y;

this.r = _r;

this.colr = _colr;

this.colg = _colg;

this.colb = _colb;

this.strW = _strW

}


show() {

stroke(sliderCol.value(), this.colg, this.colb);

strokeWeight(this.strW);

angle1 = map(millis(), 0, 1000, 0, 180);

angle2 = map(millis(), 0, sliderSha.value(), 180, 0);


push();

translate(this.x, this.y);

beginShape();

vertex(constrain(sliderSiz.value() * cos(angle1), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle1), -sliderSiz.value(), sliderSiz.value()));

vertex(constrain(sliderSiz.value() * cos(angle2), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle2), -sliderSiz.value(), sliderSiz.value()));

endShape();


rotate(180);

beginShape();

vertex(constrain(sliderSiz.value() * cos(angle1), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle1), -sliderSiz.value(), sliderSiz.value()));

vertex(constrain(sliderSiz.value() * cos(angle2), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle2), -sliderSiz.value(), sliderSiz.value()));

endShape();

pop();

}


move() {

this.x += random(-5, 5);

this.y += random(-5, 5);

}


intersect(other) {

let d = dist(this.x, this.y, other.x, other.y);

return (d < (this.r + other.r) / 2);

}


fillColor() {

fill(sliderCol.value(), this.colg, this.colb);

push();

translate(this.x, this.y);

beginShape(TRIANGLES);

vertex(constrain(sliderSiz.value() * cos(angle1), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle1), -sliderSiz.value(), sliderSiz.value()));

vertex(constrain(sliderSiz.value() * cos(angle2), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle2), -sliderSiz.value(), sliderSiz.value()));

endShape();


rotate(180);

beginShape(TRIANGLES);

vertex(constrain(sliderSiz.value() * cos(angle1), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle1), -sliderSiz.value(), sliderSiz.value()));

vertex(constrain(sliderSiz.value() * cos(angle2), -sliderSiz.value(), sliderSiz.value()), 0);

vertex(0, constrain(sliderSiz.value() * sin(angle2), -sliderSiz.value(), sliderSiz.value()));

endShape();

pop();

}

}


#ITP #ICM #computationalMedia #arrays #class #objects #template #diamonds #communication #interactive #website