<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
html, body {
margin: 0;
padding: 0;
background-color:
#000000;
}
let synRotate = false;
let btnOuterRotate, btnInnerRotate, btnRandomise;
let img1, img2, img3, img4;
let angle1, angle2;
let kindness, synectics;
let synDisplayTxt;
let kindnessIndex = 0;
let synecticsIndex = 0;
let kindnessDisplayTxt;
let kindnessTxtData;
let animation = true;
let animationTimer = 0;
let animationMax = 300;
let fadeAlpha = 250;
let fadeIn = true;
function setup() {
createCanvas(1200, 800);
kindnessData();
kindnessDisplayData();
synecticsData();
synDisplayData();
let synText0 = new SynecticText(600, 100, 145, 300, "hello");
let synText1 = new SynecticText(755, 100, 145, 300, "hello");
let synText2 = new SynecticText(910, 100, 145, 300, "hello");
synecticsTxtArray = [synText0, synText1, synText2];
kindnessDisplayTxt= new SynecticText(600, 502, 465,100, "hello");
btnRandomize = new Button( 20, 580, 145, 30, "Randomize");
btnOuterRotate = new Button(600, 20, 145, 30, "Rotate Synectics");
btnInnerRotate = new Button(600, 425, 145, 30, "Rotate Neuro-Kindness");
loadImages();
randomizeIndex( );
initializeRandAngle();
}
//DRAW LOOP
function draw() {
background(0);
animationTimer++;
if (animation && animationTimer % 30 == 0) {
initAnimation();
if (animationTimer > animationMax) {
animation = false;
}
}
//DisplayedWheels_WithCalculatedRotationAngle
rotateDisplaySynectics();
rotateDisplayKindness();
//Selected Label-Terms Displayed
//Display all text and buttons if not animating or fading in
if (animation == false) {
kindnessDisplay(250, -178);
synecticsDisplay(600, 60);
//display buttons
btnOuterRotate.display();
btnInnerRotate.display();
btnRandomize.display();
//Update DisplayText
displayKindnessTxt();
displaySyneticsTxt(synecticsTxtArray);
//fade-in text after randomize
if (fadeIn && !animation) {
fadeInText();
}
}
} //end draw-loop
function randomizeIndex( ){
kindnessIndex = round(random( 0, 5 ));
synecticsIndex = round(random( 0, 23));
}
function initializeRandAngle(){
angle1 = (360/23) * synecticsIndex;
angle2 = ( (360/5) * (kindnessIndex) )+ 19 ;
}
function fadeInText(){
fill( 0, fadeAlpha);
fadeAlpha-=5;
rect( 600,0, 800,800);
if(fadeAlpha<0){
fadeIn=false;
}
}
//small random value added each execution
function initAnimation() {
let rand = round(random(0, 3), 0);
synecticsIndex = (synecticsIndex+rand) %19;
kindnessIndex = (kindnessIndex +rand) %5;
angle1 = ((360/23) * synecticsIndex) ;
angle2 = ((-360/ 5) * (kindnessIndex))+19 ;
}
function displayKindnessTxt() { kindnessDisplayTxt.update(kindnessTxtData[kindnessIndex % 5]);
kindnessDisplayTxt.display();
}
function displaySyneticsTxt(synTxt) {
synTxt[0].update(synDisplayTxt[synecticsIndex % 23]);
synTxt[0].display();
synTxt[1].update(synDisplayTxt[(synecticsIndex + 9) % 23]);
synTxt[1].display();
synTxt[2].update(synDisplayTxt[(synecticsIndex + 16) % 23]);
synTxt[2].display();
}
function rotateDisplaySynectics() {
image(img1, 0, 0); //synectics wheel
noFill();
strokeWeight(15);
stroke(0,80);
translate(300.0, 300);
rotate(radians(angle1 % 360.0)); //rotate due to angle1 - btnOuterRotate
image(img2, -300 , -300 ); //synectics selector wheel
stroke(0,50);
strokeWeight(20);
ellipse(0, 0, 580, 580); //outer bkg circle
resetMatrix();
}
function rotateDisplayKindness() {
translate(300, 300);
rotate(radians(angle2 % 360.0));
image(img3, -300 , -300 );
resetMatrix();
image(img4, 0, 0);
strokeWeight(15);
ellipse(300, 300, 370, 370);
stroke( 50, 50);
ellipse(300, 300, 25, 25);
fill(183, 250, 255);
ellipse(300, 300, 35, 35);
}
function kindnessDisplay(x, y) {
translate(x, y);
fill(183, 250, 255);
textAlign(LEFT, CENTER);
text(kindness[kindnessIndex % 5], 357, 655);
fill(183, 250, 255, 80);
strokeWeight(1);
stroke(183, 250, 255);
rect(350, 640, 145, 30, 5);
noStroke();
resetMatrix();
}
function synecticsDisplay(x, y) {
translate(x, y);
fill(183, 250, 255);
textAlign(LEFT, CENTER);
text(synectics[synecticsIndex % 23], 10, 15);
text(synectics[(synecticsIndex + 9) % 23], 165, 15);
text(synectics[(synecticsIndex + 16) % 23], 320, 15);
fill(183, 250, 255, 80);
strokeWeight(1);
stroke(183, 250, 255);
rect(0, 0, 145, 30, 5);
rect(155, 0, 145, 30, 5);
rect(310, 0, 145, 30, 5);
noStroke();
resetMatrix();
}
function mouseClicked() {
btnOuterRotate.clicked(mouseX, mouseY);
if (btnOuterRotate.selected) {
angle1 += 360 / 23;
synecticsIndex++;
btnOuterRotate.reset();
}
btnInnerRotate.clicked(mouseX, mouseY);
if (btnInnerRotate.selected) {
angle2 -= 360/5;
kindnessIndex++;
btnInnerRotate.reset();
}
btnRandomize.clicked(mouseX, mouseY);
if (btnRandomize.selected) {
randomizeIndex();
initializeRandAngle();
animationTimer = 0;
animation = true;
animationMax = 200;
fadeIn = true;
fadeAlpha = 255;
btnRandomize.reset();
}
}
class SynecticText {
constructor(x, y, w, h, description) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.description = description;
}
update(description) {
this.description = description;
}
display() {
stroke(183, 250, 255);
strokeWeight(1);
fill(183, 250, 255, 80);
rect(this.x, this.y, this.w, this.h, 5);
noStroke();
fill(183, 250, 255);
textAlign(LEFT, TOP);
textSize(12);
text(this.description, this.x + 10, this.y + 10, this.w - 18, this.h);
}
}
class Button {
constructor(x, y, w, h, label) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.selected = false;
this.label = label;
this.color1 = color(183, 250, 255);
this.color2 = color(119, 197, 203); //selected;
this.displayColor = this.color1;
}
clicked(mx, my) {
if (
mx > this.x &&
mx < this.x + this.w &&
my > this.y &&
my < this.y + this.h
) {
this.selected = !this.selected;
if (this.selected) {
this.displayColor = this.color2;
} else {
this.displayColor = this.color1;
}
}
}
reset() {
this.selected = false;
this.displayColor = this.color1;
}
display() {
fill(this.displayColor);
rect(this.x, this.y, this.w, this.h, 5);
textAlign(CENTER, CENTER);
fill(0);
textSize(12);
text(this.label, this.x + this.w / 2, this.y + this.h / 2);
}
}
function loadImages() {
img1 = loadImage("https://assets.codepen.io/38774/kw01.png");
img2 = loadImage("https://assets.codepen.io/38774/kw02.png");
img3 = loadImage("https://assets.codepen.io/38774/kw03.png");
img4 = loadImage("https://assets.codepen.io/38774/kw04.png");
}
function synecticsData() {
synectics = [
"Repeat",
"Prevaricate",
"Change Scale",
"Subtract",
"Parody",
"Superimpose",
"Fantasize",
"Contradict",
"Animate",
"Mythologize",
"Disguise",
"Empathize",
"Symbolize",
"Distort",
"Transfer",
"Metamorphize",
"Isolate",
"Add",
"Hybredize",
"Fragment",
"Combine",
"Analogize",
"Substitute"
];
}
function kindnessData() {
kindness = [
"Parasympathetic System",
"Kindness Training",
"Mirror Neurons",
"Rewards",
"Connectivity"
];
}
function kindnessDisplayData() {
kindnessTxtData = [
"Practicing compassion and kindness increases parasympathetic activity - a calm, relaxed brain state associated with better health outcomes. Additionally, compassion dampens sympathetic activity ('fight or flight') reducing the experience of stress or fear.",
"Kindness is like a muscle - you can strengthen it with practice and training. In fact, there is no limit! When you push yourself to think flexibly, generate multiple solutions, and view people and their contexts from broader perspectives, you sharpen the cognitive skills that continuously refuel your ability to practice empathy and compassion. In fact, the more you give = the more you have to bestow.",
"Mirror neurons are brain cells that enable humans to mirror the emotions and actions of others - creating a neural basis for empathy. Empathy is a fundamental building block for all social connections and relationships. ",
"Dopamine. Dopamine. Dopamine. When you are kind, you activate your brain’s positive ‘neuropharmacy’, the reward system (the nucleus accumbens to be exact), which produces the same positive feelings in your brain as when you enjoy your favorite dessert. Your brain learns kind behavior is rewarding - motivating you to do it again. ",
"Cultivating strong social connections buffer against the negative effects of stress, boost your immune system and decrease depression and anxiety. Similarly, in the brain, there are benefits to having strong connections between neurons. The more you practice kindness, the stronger those neural connections become - training your brain to be kinder, healthier, and happier."
];
}
function synDisplayData() {
synDisplayTxt = [
"Repeat a shape, color, form, image, or idea. Reiterate, echo, restate, or duplicate your reference subject in some way. Think: How can you control the factors of occurrence, repercussion, sequence, and progression?",
"Present equivocal information that is subject to two or more interpretations and used to mislead or confuse. Fictionalize, bend the truth, falsify, fantasize. Think: How can you use your subject as a theme to present ersatz information?",
"Make your subject bigger or smaller. Change proportion, relative size, ratio, dimensions or normal graduated series.",
"Simplify. Omit, remove certain parts or elements. Take something away from your subject. Compress it or make it smaller. Think: What can be eliminated, reduced, disposed of? What rules can you break? How can you simplify, abstract, stylize or abbreviate?",
"Ridicule, mimic, mock, burlesque, or caricature. Make fun of your subject. Roast it, lampoon it. Transform it into a visual joke or pun. Exploit the humor factor, Make zany, ludicrous, or comic references. Create a visual oxymoron or conundrum.",
"Overlap, cover. Superimpose dissimilar images or ideas. Overlay elements to produce new images, ideas, or meanings. Superimpose different elements from different perspectives, disciplines, or time periods on your subject. Combine sensory perceptions (sound/color, etc).",
"Fantasize your subject, use it to trigger surreal, preposterous, outlandish, outrageous, bizarre thoughts. Topple mental and sensory expectations. Think: What-if thoughts: What if alligators played pool? What if night and day occurred simultaneously? Creative transformation demands an iconoclastic attitude. ",
"Contradict the subject’s original function. Contravene, disaffirm, deny, reverse. Many great works of art are, in fact, visual and intellectual contradictions. They may contain opposite, antipodal, antithetical, or converse elements that are integrated into their aesthetic and structural form. Contradict laws of nature such as gravity, time, etc.",
"Mobilize visual and psychological tensions in a painting or design. Control the pictorial movements and forces in a picture. Apply factors of repetition, progression, serialization, or narration. Bring life to inanimate subjects by thinking of them as having human qualities.",
"Build a myth around your subject. In the ‘60s, Pop artists mythologized common objects. The Coca-Cola bottle, comic strip characters, movie stars, mass media images, hot rods, hamburgers and french fries, and other such frivolous subjects became the visual icons of twentieth-century art. Think: How can you transform your subject into an iconic object?",
"Camouflage, conceal, deceive, or encrypt. How can you hide, mask, or implant your subject into another frame of reference? Think about subliminal imagery: How can you create a latent image that will communicate subconsciously, below the threshold of conscious awareness?",
"Relate to your subject; put yourself in its shoes. If the subject is inorganic or inanimate, think of it as having human qualities. How can you relate to it emotionally or subjectively? Offering helpful insight to an art student, the eighteenth-century German painter Henry Fuseli once advised, Transpose yourself into your subject.",
"How can your subject be imbued with symbolic qualities? A visual symbol is a graphic device that stands for something other than what it is. (For example,red cross stands for first aid, striped pole for a barbershop, dove bearing an olive branch for peace, etc.) Public symbols are well-known, while private symbols are cryptic and have special meaning only to their originator. ",
"Twist your subject out of its true shape, proportion, or meaning. Think: What kind of imagined or actual distortions can you effect? How can you misshape it? Can you make it longer, wider, fatter, narrower? Can you maintain or produce a unique metaphoric and aesthetic quality when you misshape it?",
"Move your subject into a new situation, environment, or context. Adapt, transpose, relocate, dislocate. Adapt the subject to a new and different frame of reference. Move the subject out of its normal environment; transpose it to a different historical, social, geographical, or political setting or time. Look at it from a different point of view.",
"Transform, convert. Depict your subject in a state of change. It can be a simple transformation or a more radical change in which the subject changes its configuration. Think of cocoon-to-butterfly types of transformations, aging, structural progressions, as well as radical and surreal metamorphosis such as Jekyll and Hyde transmutations.",
"Separate, crop, detach. Use only a part of your subject. In composing a picture, use a viewfinder to crop the image or visual field selectively. Crop your ideas, too, with a mental viewfinder. Think: What element can you detach or focus on?",
"Extend, expand, or otherwise develop your reference subject. Augment it, supplement, advance annex, and/or magnify it. Think: What else can be added to your idea, image, object, or material?",
"Cross-fertilize: Pair your subject with an improbable mate. Creative thinking is mental hybridization in that ideas are produced by cross-linking subjects from different realms. Transfer the hybridization mechanism to the use of color, form, and structure; cross-fertilize organic and inorganic elements, as well as ideas and perceptions.",
"Separate, divide, split. Take your subject or idea apart. Dissect it. Chop it up or otherwise disassemble it. What devices can you use to divide it into smaller increments- or to make it appear discontinuous?",
"Bring things together. Connect, arrange, link, unify, mix, merge, rearrange. Combine ideas, materials, and techniques. Bring together dissimilar things to produce synergistic integrations. Ask: What kind of connections can you make from different sensory modes, frames of reference, or subject disciplines?",
"Compare. Draw associations. Seek similarities between things that are different. Make comparisons of your subject to elements from different domains, disciplines, and realms of thought. Think: What can I compare my subject to? What logical and illogical associations can I make?",
"Exchange, switch or replace: Think: What other ideas, images, materials or ingredients can you substitute for all or part of your subject? What alternate or supplementary plan can be employed?"
];
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.